pain

Author: bluwy

.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

README.md

@@ -0,0 +1,74 @@
+# vite-svelte-dedupe
+
+A messy remnant of my pre-bundling journey.
+
+> Below is my notes taken
+
+# Problem
+
+In Vite + Svelte integration, some Svelte libraries needs to be excluded from optimization as Vite's pre-bundling process would bundle the Svelte's runtime all together. Svelte's runtime is a singleton so some functions like `setContext` would fail since it accesses to [global `current_component` variable](https://github.com/sveltejs/svelte/blob/c5f588ee50a50a77bb22ba006ee04f66795de74f/src/runtime/internal/lifecycle.ts#L3). Among other things.
+
+# Goal
+
+Dedupe Svelte dependency to ensure runtime is shared in pre-bundling and in user code.
+
+# Travels
+
+The pre-bundling process uses esbuild. Esbuild is ran twice by Vite, one for import scans, one for the actula pre-bundling. The focus is on the latter. [Here's the relevant code](https://github.com/vitejs/vite/blob/9abdb8137ef54dd095e7bc47ae6a1ccf490fd196/packages/vite/src/node/optimizer/index.ts#L262).
+
+## external
+
+At first glance, you would notice [`external: config.optimizeDeps?.exclude,`](https://github.com/vitejs/vite/blob/9abdb8137ef54dd095e7bc47ae6a1ccf490fd196/packages/vite/src/node/optimizer/index.ts#L266). One would assume that since `vite-plugin-svelte` excludes [Svelte's import paths](https://github.com/sveltejs/vite-plugin-svelte/blob/09b63d32e8816acc554a66d4d01062be197dfbb7/packages/vite-plugin-svelte/src/index.ts#L61) (`svelte`, `svelte/store`, etc), ideally the generated pre-bundled file would not bundle the Svelte library.
+
+Turns out this is not true, not because of esbuild, but because of Vite's [`esbuildDepsPlugin`](https://github.com/vitejs/vite/blob/9abdb8137ef54dd095e7bc47ae6a1ccf490fd196/packages/vite/src/node/optimizer/esbuildDepPlugin.ts). The issue is that Vite applies a [custom resolver algorithm](https://github.com/vitejs/vite/blob/9abdb8137ef54dd095e7bc47ae6a1ccf490fd196/packages/vite/src/node/optimizer/esbuildDepPlugin.ts#L103-L138) over esbuild's, which indirectly affects what dependency gets externalized. In other words, only dependencies which can't be resolved are externalized (Not sure if there's any use for this behaviour).
+
+## patch external
+
+We could apply a patch to the issue above by adding this code below [this line](https://github.com/vitejs/vite/blob/9abdb8137ef54dd095e7bc47ae6a1ccf490fd196/packages/vite/src/node/optimizer/esbuildDepPlugin.ts#L134):
+
+```js
+external: build.initialOptions.external?.includes(id)
+```
+
+Now, external will be respected.
+
+> You might notice the bundled code has [repeated imports](https://github.com/evanw/esbuild/issues/475) by esbuild, though this is harmless in our scenario).
+
+However, this patch doesn't work in the big picture, because:
+
+1. In user code, Vite transforms the Svelte import path to, e.g. `/node_modules/.pnpm/svelte@3.38.2/node_modules/svelte/index.mjs?v=abc123`
+2. In prebundled code, the import path is, e.g. `/node_modules/.pnpm/svelte@3.38.2/node_modules/svelte/index.mjs`
+
+The query string returns two different Svelte instance for each requested script. This may explain why Vite intentionally affect the external algorithm.
+
+**This route doesn't work.**
+
+## optimize svelte
+
+Taking a step back, what if we include Svelte libraries into the pre-bundling process, that way bundled code and user code can reference the same Svelte instance.
+
+A change in vite-plugin-svelte is needed by adding `svelte` and `svelte/*` imports in `optimizeDeps.include`, the Svelte instance is successfully deduped. Checking the network request, I can confirm the Svelte library is only requested once (deduped).
+
+But there still exist an odd behaviour. The victim I used, `tinro`, still isn't working properly when calling `router.goto`, the route won't get updated.
+
+**There is another problem.**
+
+## library not dedupe
+
+After countless hours of debugging, finally my eye was caught on an oddity in the "Sources" tab. First you would have to understand tinro's build directory, https://www.jsdelivr.com/package/npm/tinro.
+
+The notable files are `cmp/Route.svelte`, `cmp/index.js`, and `dist/tinro_lib.js`. Take a look at the contents of the first two files.
+
+When Vite optimizes this (entrypoint `cmp/index.js`), Vite will [ignore Svelte file extensions](https://github.com/vitejs/vite/blob/9aa255a0abcb9f5b23c34607b2188f796f4b6c94/packages/vite/src/node/optimizer/esbuildDepPlugin.ts#L71-L85) (among other types) in the bundle, make sense as we shouldn't bundle Svelte components.
+
+But there's a problem, taking a look at `cmp/Route.svelte`, you'll notice that it imports a path to `./../dist/tinro_lib`, and in the network request, you can see that the path is transformed directly to the actual file in node_modules (not the pre-bundled file in `.vite`).
+
+And this **fails dedupe for the library itself**, not Svelte anymore. This is likely the root cause why some Svelte libraries work oddly.
+
+# Solution
+
+Based on the root cause, this happens to any extensions [listed here](https://github.com/vitejs/vite/blob/9aa255a0abcb9f5b23c34607b2188f796f4b6c94/packages/vite/src/node/optimizer/esbuildDepPlugin.ts#L15-L32). I have not tested this on other extensions.
+
+I don't have a solid strategy to tackle this, but one naive implementation would be to scan these subpaths as entrypoints for the pre-bundling, so esbuild would generate the chunks for these files to use.
+
+If this happens to be a Svelte specific thing, we could auto externalize all Svelte libraries based on `pkg.svelte`.

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte + Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

jsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}

package.json

@@ -0,0 +1,16 @@
+{
+	"name": "vite-svelte-dedupe",
+	"private": true,
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"serve": "vite preview"
+	},
+	"devDependencies": {
+		"@sveltejs/vite-plugin-svelte": "link:../vite-plugin-svelte/packages/vite-plugin-svelte",
+		"svelte": "^3.38.2",
+		"svelte-select": "^3.17.0",
+		"tinro": "^0.6.4",
+		"vite": "link:../vite/packages/vite"
+	}
+}

pnpm-lock.yaml

@@ -0,0 +1,32 @@
+<script>
+  import { Route, router } from 'tinro'
+  // import Select from 'svelte-select'
+
+  // let items = [
+  //   { value: 'chocolate', label: 'Chocolate' },
+  //   { value: 'pizza', label: 'Pizza' },
+  //   { value: 'cake', label: 'Cake' },
+  //   { value: 'chips', label: 'Chips' },
+  //   { value: 'ice-cream', label: 'Ice Cream' },
+  // ]
+
+  // let selectedValue = { value: 'cake', label: 'Cake' }
+
+  // function handleSelect(event) {
+  //   console.log('selected item', event.detail)
+  //   // .. do something here 🙂
+  // }
+</script>
+
+{JSON.stringify($router)}
+<nav>
+  <a href="/foo">To foo</a>
+  <a href="/bar">To bar</a>
+  <button on:click={() => router.goto('/bar')}>Go bar</button>
+</nav>
+
+<!-- <Select {items} {selectedValue} on:select={handleSelect} /> -->
+
+<Route path="/foo">Foo</Route>
+<Route path="/bar">Bar</Route>
+<Route fallback>Fallback</Route>