Skip to content

Commit 8d9ef96

Browse files
SomaticITdominikg
SomaticIT
and
dominikg
authored
fix: do not preserve type imports (#20)
* 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 <dominik.goepel@gmx.de>
1 parent 0e516a3 commit 8d9ef96

File tree

12 files changed

+129
-10
lines changed

12 files changed

+129
-10
lines changed

‎.changeset/dry-cameras-press.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltejs/vite-plugin-svelte': patch
3+
---
4+
5+
fix: do not preserve types unless useVitePreprocess option is true

‎packages/playground/ts-type-import/__tests__/ts-type-import.spec.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { isBuild, getText, editFileAndWaitForHmrComplete } from '../../testUtils';
2+
3+
test('should render App', async () => {
4+
expect(await getText('#hello')).toBe('Hello world');
5+
});
6+
7+
if (!isBuild) {
8+
describe('hmr', () => {
9+
const updateApp = editFileAndWaitForHmrComplete.bind(null, 'src/App.svelte');
10+
11+
test('should update App', async () => {
12+
expect(await getText('#hello')).toBe('Hello world');
13+
await updateApp((content) => content.replace('world', 'foo'));
14+
expect(await getText('#hello')).toBe('Hello foo');
15+
});
16+
});
17+
}

‎packages/playground/ts-type-import/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Test</title>
8+
</head>
9+
<body>
10+
<script src="/src/index.ts" type="module"></script>
11+
</body>
12+
</html>

‎packages/playground/ts-type-import/package.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "playground-ts-type-import",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"serve": "vite preview"
9+
},
10+
"devDependencies": {
11+
"@sveltejs/vite-plugin-svelte": "workspace:*",
12+
"@tsconfig/svelte": "^1.0.10",
13+
"@types/node": "^14.14.35",
14+
"svelte-preprocess": "^4.6.9",
15+
"vite": "^2.1.2"
16+
}
17+
}

‎packages/playground/ts-type-import/src/App.svelte

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<script lang="ts">
2+
let s: string = 'world';
3+
</script>
4+
5+
<div id="hello">Hello {s}</div>

‎packages/playground/ts-type-import/src/index.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { test, Test } from './lib';
2+
import App from './App.svelte';
3+
4+
main();
5+
6+
export function main({ arg = true }: Test = {}): void {
7+
if (arg && test()) {
8+
// only create app when test worked
9+
const app = new App({
10+
target: document.body
11+
});
12+
}
13+
}

‎packages/playground/ts-type-import/src/lib.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export interface Test {
2+
arg?: boolean;
3+
}
4+
5+
export function test(): boolean {
6+
return Date.now() > 1;
7+
}

‎packages/playground/ts-type-import/svelte.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const sveltePreprocess = require('svelte-preprocess');
2+
3+
module.exports = {
4+
// Consult https://github.com/sveltejs/svelte-preprocess
5+
// for more information about preprocessors
6+
preprocess: sveltePreprocess()
7+
};

‎packages/playground/ts-type-import/tsconfig.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"extends": "@tsconfig/svelte/tsconfig.json",
3+
"include": ["src/**/*"],
4+
"exclude": ["node_modules"],
5+
}

‎packages/playground/ts-type-import/vite.config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const svelte = require('@sveltejs/vite-plugin-svelte');
2+
const { defineConfig } = require('vite');
3+
4+
module.exports = defineConfig(() => {
5+
return {
6+
plugins: [svelte()]
7+
};
8+
});

‎packages/vite-plugin-svelte/src/index.ts

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,13 @@ import { handleHotUpdate } from './handleHotUpdate';
88
import { log } from './utils/log';
99
import { createCompileSvelte } from './utils/compile';
1010
import { buildIdParser, IdParser } from './utils/id';
11-
import { validateInlineOptions, Options, ResolvedOptions, resolveOptions, PreprocessorGroup } from './utils/options';
11+
import {
12+
validateInlineOptions,
13+
Options,
14+
ResolvedOptions,
15+
resolveOptions,
16+
PreprocessorGroup
17+
} from './utils/options';
1218
import { VitePluginSvelteCache } from './utils/VitePluginSvelteCache';
1319

1420
import { SVELTE_IMPORTS, SVELTE_RESOLVE_MAIN_FIELDS } from './utils/constants';
@@ -29,7 +35,7 @@ export {
2935
declare module 'vite' {
3036
// eslint-disable-next-line no-unused-vars
3137
interface Plugin {
32-
sveltePreprocess?: PreprocessorGroup
38+
sveltePreprocess?: PreprocessorGroup;
3339
}
3440
}
3541

@@ -61,14 +67,7 @@ export default function vitePluginSvelte(inlineOptions?: Partial<Options>): Plug
6167
}
6268

6369
// extra vite config
64-
const extraViteConfig = {
65-
esbuild: {
66-
tsconfigRaw: {
67-
compilerOptions: {
68-
importsNotUsedAsValues: 'preserve'
69-
}
70-
}
71-
},
70+
const extraViteConfig: Partial<UserConfig> = {
7271
optimizeDeps: {
7372
exclude: [...SVELTE_IMPORTS]
7473
},
@@ -77,6 +76,17 @@ export default function vitePluginSvelte(inlineOptions?: Partial<Options>): Plug
7776
dedupe: [...SVELTE_IMPORTS]
7877
}
7978
};
79+
// needed to transform svelte files with component imports
80+
// can cause issues with other typescript files, see https://github.com/sveltejs/vite-plugin-svelte/pull/20
81+
if (inlineOptions?.useVitePreprocess) {
82+
extraViteConfig.esbuild = {
83+
tsconfigRaw: {
84+
compilerOptions: {
85+
importsNotUsedAsValues: 'preserve'
86+
}
87+
}
88+
};
89+
}
8090
log.debug('additional vite config', extraViteConfig);
8191
return extraViteConfig as Partial<UserConfig>;
8292
},

‎pnpm-lock.yaml

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)