fix: do not preserve type imports (#20)

SomaticIT · dominikg · web-flow · commit 8d9ef9635154 · 2021-04-05T18:50:57.000+02:00
* chore: create a playground to demo the bug

* fix: do not preserve type imports

* fix: only set extra esbuild config when useVitePreprocess is true. Add test

* add changeset

Co-authored-by: dominikg &lt;dominik.goepel@gmx.de&gt;
diff --git a/.changeset/dry-cameras-press.md b/.changeset/dry-cameras-press.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix: do not preserve types unless useVitePreprocess option is true
diff --git a/packages/playground/ts-type-import/__tests__/ts-type-import.spec.ts b/packages/playground/ts-type-import/__tests__/ts-type-import.spec.ts
@@ -0,0 +1,17 @@
+import { isBuild, getText, editFileAndWaitForHmrComplete } from '../../testUtils';
+
+test('should render App', async () => {
+	expect(await getText('#hello')).toBe('Hello world');
+});
+
+if (!isBuild) {
+	describe('hmr', () => {
+		const updateApp = editFileAndWaitForHmrComplete.bind(null, 'src/App.svelte');
+
+		test('should update App', async () => {
+			expect(await getText('#hello')).toBe('Hello world');
+			await updateApp((content) => content.replace('world', 'foo'));
+			expect(await getText('#hello')).toBe('Hello foo');
+		});
+	});
+}
diff --git a/packages/playground/ts-type-import/index.html b/packages/playground/ts-type-import/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Test</title>
+	</head>
+	<body>
+		<script src="/src/index.ts" type="module"></script>
+	</body>
+</html>
diff --git a/packages/playground/ts-type-import/package.json b/packages/playground/ts-type-import/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "playground-ts-type-import",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "workspace:*",
+    "@tsconfig/svelte": "^1.0.10",
+    "@types/node": "^14.14.35",
+    "svelte-preprocess": "^4.6.9",
+    "vite": "^2.1.2"
+  }
+}
diff --git a/packages/playground/ts-type-import/src/App.svelte b/packages/playground/ts-type-import/src/App.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let s: string = 'world';
+</script>
+
+<div id="hello">Hello {s}</div>
diff --git a/packages/playground/ts-type-import/src/index.ts b/packages/playground/ts-type-import/src/index.ts
@@ -0,0 +1,13 @@
+import { test, Test } from './lib';
+import App from './App.svelte';
+
+main();
+
+export function main({ arg = true }: Test = {}): void {
+	if (arg && test()) {
+		// only create app when test worked
+		const app = new App({
+			target: document.body
+		});
+	}
+}
diff --git a/packages/playground/ts-type-import/src/lib.ts b/packages/playground/ts-type-import/src/lib.ts
@@ -0,0 +1,7 @@
+export interface Test {
+	arg?: boolean;
+}
+
+export function test(): boolean {
+	return Date.now() > 1;
+}
diff --git a/packages/playground/ts-type-import/svelte.config.js b/packages/playground/ts-type-import/svelte.config.js
@@ -0,0 +1,7 @@
+const sveltePreprocess = require('svelte-preprocess');
+
+module.exports = {
+	// Consult https://github.com/sveltejs/svelte-preprocess
+	// for more information about preprocessors
+	preprocess: sveltePreprocess()
+};
diff --git a/packages/playground/ts-type-import/tsconfig.json b/packages/playground/ts-type-import/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"],
+}
diff --git a/packages/playground/ts-type-import/vite.config.js b/packages/playground/ts-type-import/vite.config.js
@@ -0,0 +1,8 @@
+const svelte = require('@sveltejs/vite-plugin-svelte');
+const { defineConfig } = require('vite');
+
+module.exports = defineConfig(() => {
+	return {
+		plugins: [svelte()]
+	};
+});
diff --git a/packages/vite-plugin-svelte/src/index.ts b/packages/vite-plugin-svelte/src/index.ts
@@ -8,7 +8,13 @@ import { handleHotUpdate } from './handleHotUpdate';
 import { log } from './utils/log';
 import { createCompileSvelte } from './utils/compile';
 import { buildIdParser, IdParser } from './utils/id';
-import { validateInlineOptions, Options, ResolvedOptions, resolveOptions, PreprocessorGroup } from './utils/options';
+import {
+	validateInlineOptions,
+	Options,
+	ResolvedOptions,
+	resolveOptions,
+	PreprocessorGroup
+} from './utils/options';
 import { VitePluginSvelteCache } from './utils/VitePluginSvelteCache';
 
 import { SVELTE_IMPORTS, SVELTE_RESOLVE_MAIN_FIELDS } from './utils/constants';
@@ -29,7 +35,7 @@ export {
 declare module 'vite' {
 	// eslint-disable-next-line no-unused-vars
 	interface Plugin {
-		sveltePreprocess?: PreprocessorGroup
+		sveltePreprocess?: PreprocessorGroup;
 	}
 }
 
@@ -61,14 +67,7 @@ export default function vitePluginSvelte(inlineOptions?: Partial<Options>): Plug
 			}
 
 			// extra vite config
-			const extraViteConfig = {
-				esbuild: {
-					tsconfigRaw: {
-						compilerOptions: {
-							importsNotUsedAsValues: 'preserve'
-						}
-					}
-				},
+			const extraViteConfig: Partial<UserConfig> = {
 				optimizeDeps: {
 					exclude: [...SVELTE_IMPORTS]
 				},
@@ -77,6 +76,17 @@ export default function vitePluginSvelte(inlineOptions?: Partial<Options>): Plug
 					dedupe: [...SVELTE_IMPORTS]
 				}
 			};
+			// needed to transform svelte files with component imports
+			// can cause issues with other typescript files, see https://github.com/sveltejs/vite-plugin-svelte/pull/20
+			if (inlineOptions?.useVitePreprocess) {
+				extraViteConfig.esbuild = {
+					tsconfigRaw: {
+						compilerOptions: {
+							importsNotUsedAsValues: 'preserve'
+						}
+					}
+				};
+			}
 			log.debug('additional vite config', extraViteConfig);
 			return extraViteConfig as Partial<UserConfig>;
 		},
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
 +---
++
 +fix: do not preserve types unless useVitePreprocess option is true