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

* 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. <dominik.goepel@gmx.de> * chore: fix lint Co-authored-by: Dominik G. <dominik.goepel@gmx.de>
sveltejs · May 8, 2022 · 2ce87fd · 2ce87fd
1 parent 5a002c7
commit 2ce87fd
Show file tree

Hide file tree

Showing 26 changed files with 108 additions and 70 deletions.
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[];