fix: import ts with .js extension (#324)

bluwy · dominikg · web-flow · commit 2ce87fd2d05f · 2022-05-08T11:41:56.000+02:00
* fix: import ts with js extension

* chore: add test

* chore: add changeset

* refactor: use preprocessor

* fix: remove cache update

* chore: update vite

* fix: test

* fix: test 2

* refactor: simplify implementation

* fix: improve regex

Co-authored-by: Dominik G. &lt;dominik.goepel@gmx.de&gt;

* chore: fix lint

Co-authored-by: Dominik G. &lt;dominik.goepel@gmx.de&gt;
diff --git a/.changeset/slow-dolphins-turn.md b/.changeset/slow-dolphins-turn.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+Support import typescript files with .js extension
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -99,7 +99,8 @@ module.exports = {
 				'import/first': 'off',
 				'import/no-duplicates': 'off',
 				'import/no-mutable-exports': 'off',
-				'import/no-unresolved': 'off'
+				'import/no-unresolved': 'off',
+				'node/no-missing-import': 'off' // doesn't work with typescript's "import from 'src/foo.js'" for src/foo.ts
 			}
 		},
 		{
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "svelte": "^3.47.0",
     "ts-jest": "^27.1.4",
     "typescript": "^4.6.3",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   },
   "lint-staged": {
     "*.{js,ts,svelte,html,md,svx}": "eslint --fix",
@@ -77,4 +77,4 @@
       "node-fetch@2": "^2.6.7"
     }
   }
-}
+}
diff --git a/packages/e2e-tests/autoprefixer-browerslist/package.json b/packages/e2e-tests/autoprefixer-browerslist/package.json
@@ -17,6 +17,6 @@
     "postcss-load-config": "^3.1.4",
     "svelte": "^3.47.0",
     "svelte-preprocess": "^4.10.6",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   }
 }
diff --git a/packages/e2e-tests/configfile-custom/package.json b/packages/e2e-tests/configfile-custom/package.json
@@ -13,6 +13,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.47.0",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   }
 }
diff --git a/packages/e2e-tests/configfile-esm/package.json b/packages/e2e-tests/configfile-esm/package.json
@@ -14,7 +14,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.47.0",
     "svelte-preprocess": "^4.10.6",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/custom-extensions/package.json b/packages/e2e-tests/custom-extensions/package.json
@@ -10,6 +10,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.47.0",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   }
 }
diff --git a/packages/e2e-tests/env/package.json b/packages/e2e-tests/env/package.json
@@ -10,7 +10,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.47.0",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/hmr/package.json b/packages/e2e-tests/hmr/package.json
@@ -15,6 +15,6 @@
     "e2e-test-dep-vite-plugins": "workspace:*",
     "node-fetch": "^2.6.7",
     "svelte": "^3.47.0",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   }
 }
diff --git a/packages/e2e-tests/package-json-svelte-field/package.json b/packages/e2e-tests/package-json-svelte-field/package.json
@@ -14,6 +14,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.47.0",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   }
 }
diff --git a/packages/e2e-tests/preprocess-with-vite/package.json b/packages/e2e-tests/preprocess-with-vite/package.json
@@ -12,6 +12,6 @@
     "sass": "^1.50.1",
     "stylus": "^0.57.0",
     "svelte": "^3.47.0",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   }
 }
diff --git a/packages/e2e-tests/svelte-preprocess/package.json b/packages/e2e-tests/svelte-preprocess/package.json
@@ -12,6 +12,6 @@
     "svelte": "^3.47.0",
     "svelte-preprocess": "^4.10.6",
     "typescript": "^4.6.3",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   }
 }
diff --git a/packages/e2e-tests/ts-type-import/__tests__/ts-type-import.spec.ts b/packages/e2e-tests/ts-type-import/__tests__/ts-type-import.spec.ts
@@ -2,6 +2,7 @@ import { isBuild, getText, editFileAndWaitForHmrComplete } from '../../testUtils
 
 test('should render App', async () => {
 	expect(await getText('#hello')).toBe('Hello world');
+	expect(await getText('#foobar')).toBe('foobar');
 });
 
 if (!isBuild) {
diff --git a/packages/e2e-tests/ts-type-import/package.json b/packages/e2e-tests/ts-type-import/package.json
@@ -12,6 +12,6 @@
     "@tsconfig/svelte": "^3.0.0",
     "@types/node": "^17.0.21",
     "svelte-preprocess": "^4.10.6",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   }
 }
diff --git a/packages/e2e-tests/ts-type-import/src/App.svelte b/packages/e2e-tests/ts-type-import/src/App.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { foobar } from './foobar.js';
 	let s: string = 'world';
 </script>
 
 <div id="hello">Hello {s}</div>
+<div id="foobar">{foobar()}</div>
diff --git a/packages/e2e-tests/ts-type-import/src/foobar.ts b/packages/e2e-tests/ts-type-import/src/foobar.ts
@@ -0,0 +1,3 @@
+export function foobar() {
+	return 'foobar';
+}
diff --git a/packages/e2e-tests/vite-ssr-esm/package.json b/packages/e2e-tests/vite-ssr-esm/package.json
@@ -21,6 +21,6 @@
     "npm-run-all": "^4.1.5",
     "serve-static": "^1.15.0",
     "svelte": "^3.47.0",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   }
 }
diff --git a/packages/e2e-tests/vite-ssr/package.json b/packages/e2e-tests/vite-ssr/package.json
@@ -18,6 +18,6 @@
     "express": "^4.17.3",
     "serve-static": "^1.15.0",
     "svelte": "^3.47.0",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   }
 }
diff --git a/packages/playground/big-component-library/package.json b/packages/playground/big-component-library/package.json
@@ -12,7 +12,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "carbon-components-svelte": "^0.63.1",
     "svelte": "^3.47.0",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   },
   "dependencies": {
     "lodash-es": "^4.17.21"
diff --git a/packages/playground/big/package.json b/packages/playground/big/package.json
@@ -10,6 +10,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.47.0",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   }
 }
diff --git a/packages/playground/optimizedeps-include/package.json b/packages/playground/optimizedeps-include/package.json
@@ -12,6 +12,6 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.47.0",
     "tinro": "^0.6.12",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   }
 }
diff --git a/packages/playground/windicss/package.json b/packages/playground/windicss/package.json
@@ -14,7 +14,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "diff-match-patch": "^1.0.5",
     "svelte": "^3.47.0",
-    "vite": "^2.9.5",
+    "vite": "^2.9.8",
     "vite-plugin-windicss": "^1.8.4"
   }
 }
diff --git a/packages/vite-plugin-svelte/package.json b/packages/vite-plugin-svelte/package.json
@@ -71,6 +71,6 @@
     "rollup": "^2.70.2",
     "svelte": "^3.47.0",
     "tsup": "^5.12.5",
-    "vite": "^2.9.5"
+    "vite": "^2.9.8"
   }
 }
diff --git a/packages/vite-plugin-svelte/src/index.ts b/packages/vite-plugin-svelte/src/index.ts
@@ -193,7 +193,14 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 					});
 				}
 				log.debug(`transform returns compiled js for ${svelteRequest.filename}`);
-				return compileData.compiled.js;
+				return {
+					...compileData.compiled.js,
+					meta: {
+						vite: {
+							lang: compileData.lang
+						}
+					}
+				};
 			},
 
 			handleHotUpdate(ctx: HmrContext): void | Promise<Array<ModuleNode> | void> {
diff --git a/packages/vite-plugin-svelte/src/utils/compile.ts b/packages/vite-plugin-svelte/src/utils/compile.ts
@@ -6,6 +6,8 @@ import { SvelteRequest } from './id';
 import { safeBase64Hash } from './hash';
 import { log } from './log';
 
+const scriptLangRE = /<script [^>]*lang=["']?([^"' >]+)["']?[^>]*>/;
+
 const _createCompileSvelte = (makeHot: Function) =>
 	async function compileSvelte(
 		svelteRequest: SvelteRequest,
@@ -88,6 +90,7 @@ const _createCompileSvelte = (makeHot: Function) =>
 		return {
 			filename,
 			normalizedFilename,
+			lang: code.match(scriptLangRE)?.[1] || 'js',
 			// @ts-ignore
 			compiled,
 			ssr,
@@ -148,6 +151,7 @@ export interface Compiled {
 export interface CompileData {
 	filename: string;
 	normalizedFilename: string;
+	lang: string;
 	compiled: Compiled;
 	ssr: boolean | undefined;
 	dependencies: string[];
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@sveltejs/vite-plugin-svelte': patch
 +---
++
 +Support import typescript files with .js extension
Original file line number	Diff line number	Diff line change
`@@ -99,7 +99,8 @@ module.exports = {`
`99`	`99`	`'import/first': 'off',`
`100`	`100`	`'import/no-duplicates': 'off',`
`101`	`101`	`'import/no-mutable-exports': 'off',`
`102`		`- 'import/no-unresolved': 'off'`
	`102`	`+ 'import/no-unresolved': 'off',`
	`103`	`+ 'node/no-missing-import': 'off' // doesn't work with typescript's "import from 'src/foo.js'" for src/foo.ts`
`103`	`104`	`}`
`104`	`105`	`},`
`105`	`106`	`{`
Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@`
`56`	`56`	`"svelte": "^3.47.0",`
`57`	`57`	`"ts-jest": "^27.1.4",`
`58`	`58`	`"typescript": "^4.6.3",`
`59`		`- "vite": "^2.9.5"`
	`59`	`+ "vite": "^2.9.8"`
`60`	`60`	`},`
`61`	`61`	`"lint-staged": {`
`62`	`62`	`"*.{js,ts,svelte,html,md,svx}": "eslint --fix",`
`@@ -77,4 +77,4 @@`
`77`	`77`	`"node-fetch@2": "^2.6.7"`
`78`	`78`	`}`
`79`	`79`	`}`
`80`		`-}`
	`80`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,6 @@`
`17`	`17`	`"postcss-load-config": "^3.1.4",`
`18`	`18`	`"svelte": "^3.47.0",`
`19`	`19`	`"svelte-preprocess": "^4.10.6",`
`20`		`- "vite": "^2.9.5"`
	`20`	`+ "vite": "^2.9.8"`
`21`	`21`	`}`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,6 @@`
`13`	`13`	`"devDependencies": {`
`14`	`14`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`15`	`15`	`"svelte": "^3.47.0",`
`16`		`- "vite": "^2.9.5"`
	`16`	`+ "vite": "^2.9.8"`
`17`	`17`	`}`
`18`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`15`	`15`	`"svelte": "^3.47.0",`
`16`	`16`	`"svelte-preprocess": "^4.10.6",`
`17`		`- "vite": "^2.9.5"`
	`17`	`+ "vite": "^2.9.8"`
`18`	`18`	`},`
`19`	`19`	`"type": "module"`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,6 @@`
`10`	`10`	`"devDependencies": {`
`11`	`11`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`12`	`12`	`"svelte": "^3.47.0",`
`13`		`- "vite": "^2.9.5"`
	`13`	`+ "vite": "^2.9.8"`
`14`	`14`	`}`
`15`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`"devDependencies": {`
`11`	`11`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`12`	`12`	`"svelte": "^3.47.0",`
`13`		`- "vite": "^2.9.5"`
	`13`	`+ "vite": "^2.9.8"`
`14`	`14`	`},`
`15`	`15`	`"type": "module"`
`16`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,6 @@`
`15`	`15`	`"e2e-test-dep-vite-plugins": "workspace:*",`
`16`	`16`	`"node-fetch": "^2.6.7",`
`17`	`17`	`"svelte": "^3.47.0",`
`18`		`- "vite": "^2.9.5"`
	`18`	`+ "vite": "^2.9.8"`
`19`	`19`	`}`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,6 @@`
`14`	`14`	`"devDependencies": {`
`15`	`15`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`16`	`16`	`"svelte": "^3.47.0",`
`17`		`- "vite": "^2.9.5"`
	`17`	`+ "vite": "^2.9.8"`
`18`	`18`	`}`
`19`	`19`	`}`