Skip to content

Commit 9583900

Browse files
dominikgdominikg
authored
feat: allow svelte imports in optimizeDeps include (#68)
1 parent a58978e commit 9583900

File tree

13 files changed

+179
-26
lines changed

13 files changed

+179
-26
lines changed

‎.changeset/popular-yaks-fetch.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': minor
3+
---
4+
5+
feat: Allow svelte imports to be added to optimizeDeps.include and don't exclude svelte from optimizeDeps then

‎packages/playground/optimizedeps-include/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
reproduction of failed dedupe for svelte
2+
project setup from https://github.com/bluwy/vite-svelte-dedupe

‎packages/playground/optimizedeps-include/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 name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Svelte + Vite App</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.js"></script>
11+
</body>
12+
</html>

‎packages/playground/optimizedeps-include/jsconfig.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"compilerOptions": {
3+
"moduleResolution": "node",
4+
"target": "esnext",
5+
"module": "esnext",
6+
/**
7+
* svelte-preprocess cannot figure out whether you have
8+
* a value or a type, so tell TypeScript to enforce using
9+
* `import type` instead of `import` for Types.
10+
*/
11+
"importsNotUsedAsValues": "error",
12+
"isolatedModules": true,
13+
"resolveJsonModule": true,
14+
/**
15+
* To have warnings / errors of the Svelte compiler at the
16+
* correct position, enable source maps by default.
17+
*/
18+
"sourceMap": true,
19+
"esModuleInterop": true,
20+
"skipLibCheck": true,
21+
"forceConsistentCasingInFileNames": true,
22+
"baseUrl": ".",
23+
/**
24+
* Typecheck JS in `.svelte` and `.js` files by default.
25+
* Disable this if you'd like to use dynamic types.
26+
*/
27+
"checkJs": true
28+
},
29+
/**
30+
* Use global.d.ts instead of compilerOptions.types
31+
* to avoid limiting type declarations.
32+
*/
33+
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
34+
}

‎packages/playground/optimizedeps-include/package.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "playground-optimizedeps-include",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"serve": "vite preview"
9+
},
10+
"devDependencies": {
11+
"@sveltejs/vite-plugin-svelte": "workspace:*",
12+
"svelte": "^3.38.1",
13+
"vite": "^2.3.8",
14+
"tinro": "^0.6.4"
15+
}
16+
}

‎packages/playground/optimizedeps-include/src/App.svelte

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script>
2+
import { Route, router } from 'tinro';
3+
</script>
4+
5+
<nav>
6+
<a href="/foo">To foo</a>
7+
<a href="/bar">To bar</a>
8+
<button on:click={() => router.goto('/bar')}>Go bar</button>
9+
</nav>
10+
<Route path="/foo"><h1>Foo route</h1></Route>
11+
<Route path="/bar"><h1>Bar route</h1></Route>
12+
<Route fallback><h1>Default route</h1></Route>
13+
14+
<pre>
15+
$router: {JSON.stringify($router,null,2)}
16+
</pre>

‎packages/playground/optimizedeps-include/src/main.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import App from './App.svelte';
2+
3+
const app = new App({
4+
target: document.getElementById('app')
5+
});
6+
7+
export default app;

‎packages/playground/optimizedeps-include/src/vite-env.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="svelte" />
2+
/// <reference types="vite/client" />

‎packages/playground/optimizedeps-include/vite.config.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { defineConfig } from 'vite';
2+
import { svelte } from '@sveltejs/vite-plugin-svelte';
3+
const SVELTE_IMPORTS = [
4+
'svelte/animate',
5+
'svelte/easing',
6+
'svelte/internal',
7+
'svelte/motion',
8+
'svelte/store',
9+
'svelte/transition',
10+
'svelte'
11+
];
12+
export default defineConfig(({ command, mode }) => {
13+
const isProduction = mode === 'production';
14+
return {
15+
optimizeDeps: {
16+
include: [...SVELTE_IMPORTS]
17+
},
18+
plugins: [svelte()],
19+
build: {
20+
minify: isProduction
21+
}
22+
};
23+
});

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

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { log, logCompilerWarnings } from './utils/log';
44
import { CompileData, createCompileSvelte } from './utils/compile';
55
import { buildIdParser, IdParser, SvelteRequest } from './utils/id';
66
import {
7+
buildExtraViteConfig,
78
validateInlineOptions,
89
Options,
910
ResolvedOptions,
@@ -12,7 +13,6 @@ import {
1213
} from './utils/options';
1314
import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache';
1415

15-
import { SVELTE_IMPORTS, SVELTE_RESOLVE_MAIN_FIELDS } from './utils/constants';
1616
import { setupWatchers } from './utils/watch';
1717
import { resolveViaPackageJsonSvelte } from './utils/resolve';
1818
import { addExtraPreprocessors } from './utils/preprocess';
@@ -56,30 +56,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
5656
}
5757
options = await resolveOptions(inlineOptions, config, configEnv);
5858
// extra vite config
59-
const extraViteConfig: Partial<UserConfig> = {
60-
optimizeDeps: {
61-
exclude: [...SVELTE_IMPORTS]
62-
},
63-
resolve: {
64-
mainFields: [...SVELTE_RESOLVE_MAIN_FIELDS],
65-
dedupe: [...SVELTE_IMPORTS]
66-
},
67-
// this option is still awaiting a PR in vite to be supported
68-
// see https://github.com/sveltejs/vite-plugin-svelte/issues/60
69-
// @ts-ignore
70-
knownJsSrcExtensions: options.extensions
71-
};
72-
// needed to transform svelte files with component imports
73-
// can cause issues with other typescript files, see https://github.com/sveltejs/vite-plugin-svelte/pull/20
74-
if (options.useVitePreprocess) {
75-
extraViteConfig.esbuild = {
76-
tsconfigRaw: {
77-
compilerOptions: {
78-
importsNotUsedAsValues: 'preserve'
79-
}
80-
}
81-
};
82-
}
59+
const extraViteConfig = buildExtraViteConfig(options, config);
8360
log.debug('additional vite config', extraViteConfig);
8461
return extraViteConfig as Partial<UserConfig>;
8562
},

0 commit comments

Comments
 (0)