feat: Vite 3 support (#359)

dominikg · bluwy · benmccann · web-flow · commit 925c3b2fbd42 · 2022-07-13T14:31:32.000+02:00
* wip: switch to vite3 alpha, fix type changes, generate optimize config on build * wip: update to alpha.9, fix tests, ensure all svelte/ deps are ssr.noExternal * chore: add changeset * update to vite 3.0.0-alpha.10 after rebase * chore: update vite to alpha.11 * chore: update vite beta * fix: handle localhost change * chore: upgrade to beta.1 * fix: handle breaking changes * chore: update beta 2 * upgrade to vite 3.0.0-beta.5 (#381) * chore: add missing test dep * chore: revert ssr handling * chore: remove ts-expect-error * upgrade to 3.0.0-beta.9 (#387) * upgrade to 3.0.0-beta.9 * update root package.json * chore: update beta.10 * fix: update generated ssr.noExternal config to always include all svelte dependencies to avoid failed svelte deduplication during dev with vite-3 * chore: add changeset to raise visibility for recent vite3 related change * chore: align min node version with vite 3 * chore: update dependency to vite 3.0.0 final Co-authored-by: bluwy <bjornlu.dev@gmail.com> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
diff --git a/.changeset/five-moles-swim.md b/.changeset/five-moles-swim.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+Always add dependencies using svelte to ssr.noExternal in vite config
diff --git a/.changeset/metal-jeans-jam.md b/.changeset/metal-jeans-jam.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+update to vite3
diff --git a/.changeset/nervous-bottles-lay.md b/.changeset/nervous-bottles-lay.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+bump minimum required node version to 14.18.0 to align with vite 3
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "rimraf": "^3.0.2",
     "svelte": "^3.49.0",
     "typescript": "^4.7.4",
-    "vite": "^2.9.14",
+    "vite": "^3.0.0",
     "vitest": "^0.18.0"
   },
   "lint-staged": {
@@ -60,16 +60,18 @@
     "pnpm": "^7.5.1",
     "yarn": "forbidden, use pnpm",
     "npm": "forbidden, use pnpm",
-    "node": "^14.13.1 || >= 16"
+    "node": "^14.18.0 || >= 16"
   },
   "pnpm": {
     "overrides": {
-      "@sveltejs/vite-plugin-svelte": "workspace:*"
+      "@sveltejs/vite-plugin-svelte": "workspace:*",
+      "vite": "^3.0.0"
     },
     "peerDependencyRules": {
       "allowedVersions": {
         "stylus": "^0.58.0",
-        "postcss-load-config": "^4.0.0"
+        "postcss-load-config": "^4.0.0",
+        "vite": "^3.0.0"
       }
     }
   }
diff --git a/packages/e2e-tests/_test_dependencies/svelte-api-only/package.json b/packages/e2e-tests/_test_dependencies/svelte-api-only/package.json
@@ -14,5 +14,8 @@
     },
     "./package.json": "./package.json"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "svelte": "^3.48.0"
+  }
 }
diff --git a/packages/e2e-tests/autoprefixer-browerslist/package.json b/packages/e2e-tests/autoprefixer-browerslist/package.json
@@ -17,7 +17,7 @@
     "postcss-load-config": "^4.0.1",
     "svelte": "^3.49.0",
     "svelte-preprocess": "^4.10.7",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/configfile-custom/package.json b/packages/e2e-tests/configfile-custom/package.json
@@ -13,7 +13,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.49.0",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   },
   "type": "module"
 }
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.49.0",
     "svelte-preprocess": "^4.10.7",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/custom-extensions/package.json b/packages/e2e-tests/custom-extensions/package.json
@@ -9,8 +9,8 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
-    "svelte": "^3.49.0",
-    "vite": "^2.9.14"
+    "svelte": "^3.9.0",
+    "vite": "^3.0.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/e2e-server.js b/packages/e2e-tests/e2e-server.js
@@ -18,8 +18,11 @@ async function startedOnPort(serverProcess, port, timeout) {
 		stdoutListener = (data) => {
 			const str = data.toString();
 			// hack, console output may contain color code gibberish
-			// skip gibberish between localhost: and port number
-			const match = str.match(/(http:\/\/localhost:)(?:.*)(\d{4})/);
+			// skip gibberish between localhost: and port number.
+			// Vite may print other host then `localhost` for machines
+			// with different DNS resove order, as Node <17 does not
+			// respect the order by default.
+			const match = str.match(/(http:\/\/(?:localhost|127.0.0.1|\[::1\]):)(?:.*)(\d{4})/);
 			if (match) {
 				const startedPort = parseInt(match[2], 10);
 				if (startedPort === port) {
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.49.0",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/hmr/package.json b/packages/e2e-tests/hmr/package.json
@@ -15,7 +15,7 @@
     "e2e-test-dep-vite-plugins": "workspace:*",
     "node-fetch": "^3.2.4",
     "svelte": "^3.49.0",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/inspector-vite/package.json b/packages/e2e-tests/inspector-vite/package.json
@@ -11,6 +11,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.49.0",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   }
 }
diff --git a/packages/e2e-tests/kit-node/package.json b/packages/e2e-tests/kit-node/package.json
@@ -14,8 +14,8 @@
   "devDependencies": {
     "@sveltejs/adapter-node": "^1.0.0-next.79",
     "@sveltejs/kit": "^1.0.0-next.370",
-    "e2e-test-dep-svelte-api-only": "workspace:*",
-    "e2e-test-dep-vite-plugins": "workspace:*",
+    "e2e-test-dep-svelte-api-only": "file:../_test_dependencies/svelte-api-only",
+    "e2e-test-dep-vite-plugins": "file:../_test_dependencies/vite-plugins",
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-i18n": "^3.4.0",
diff --git a/packages/e2e-tests/package-json-svelte-field/package.json b/packages/e2e-tests/package-json-svelte-field/package.json
@@ -14,7 +14,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.49.0",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/preprocess-with-vite/package.json b/packages/e2e-tests/preprocess-with-vite/package.json
@@ -12,7 +12,7 @@
     "sass": "^1.53.0",
     "stylus": "^0.58.1",
     "svelte": "^3.49.0",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   },
   "type": "commonjs"
 }
diff --git a/packages/e2e-tests/svelte-preprocess/package.json b/packages/e2e-tests/svelte-preprocess/package.json
@@ -9,10 +9,11 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
+    "sass": "^1.52.3",
     "svelte": "^3.49.0",
     "svelte-preprocess": "^4.10.7",
     "typescript": "^4.7.4",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/testUtils.ts b/packages/e2e-tests/testUtils.ts
@@ -219,10 +219,8 @@ export async function waitForNavigation(opts: Parameters<typeof page.waitForNavi
 	});
 }
 
-export async function fetchPageText(forceIpv4 = false) {
-	// force ip v4 in dev as Vite also forces it.
-	// this will be fixed in Vite 3 when we can removed this trick.
-	const url = page.url().replace('localhost', forceIpv4 ? '127.0.0.1' : 'localhost');
+export async function fetchPageText() {
+	const url = page.url();
 	const res = await fetch(url);
 	if (res.ok) {
 		return res.text();
diff --git a/packages/e2e-tests/ts-type-import/package.json b/packages/e2e-tests/ts-type-import/package.json
@@ -13,7 +13,7 @@
     "@types/node": "^17.0.36",
     "svelte": "^3.49.0",
     "svelte-preprocess": "^4.10.7",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/vite-ssr-esm/package.json b/packages/e2e-tests/vite-ssr-esm/package.json
@@ -20,7 +20,7 @@
     "express": "^4.18.1",
     "npm-run-all": "^4.1.5",
     "serve-static": "^1.15.0",
-    "svelte": "^3.49.0",
-    "vite": "^2.9.14"
+    "svelte": "^3.9.0",
+    "vite": "^3.0.0"
   }
 }
diff --git a/packages/e2e-tests/vite-ssr-esm/server.js b/packages/e2e-tests/vite-ssr-esm/server.js
@@ -33,6 +33,7 @@ async function createServer(root = process.cwd(), isProd = process.env.NODE_ENV
 	if (!isProd) {
 		const inlineCfg = {
 			root,
+			appType: 'custom',
 			server: {
 				middlewareMode: true,
 				port
diff --git a/packages/e2e-tests/vite-ssr/package.json b/packages/e2e-tests/vite-ssr/package.json
@@ -18,6 +18,6 @@
     "express": "^4.18.1",
     "serve-static": "^1.15.0",
     "svelte": "^3.49.0",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   }
 }
diff --git a/packages/e2e-tests/vite-ssr/server.js b/packages/e2e-tests/vite-ssr/server.js
@@ -30,6 +30,7 @@ async function createServer(root = process.cwd(), isProd = process.env.NODE_ENV
 	if (!isProd) {
 		const inlineCfg = {
 			root,
+			appType: 'custom',
 			server: {
 				middlewareMode: true,
 				port
@@ -71,6 +72,7 @@ async function createServer(root = process.cwd(), isProd = process.env.NODE_ENV
 			const html = template
 				.replace(`<!--head-outlet-->`, headElements)
 				.replace(`<!--app-outlet-->`, appHtml);
+			console.log(html);
 
 			res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
 		} catch (e) {
diff --git a/packages/e2e-tests/vite-ssr/vite.config.js b/packages/e2e-tests/vite-ssr/vite.config.js
@@ -10,6 +10,9 @@ module.exports = defineConfig(({ command, mode }) => {
 				}
 			})
 		],
+		ssr: {
+			format: 'cjs'
+		},
 		build: {
 			target: 'esnext',
 			minify: false,
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.67.0",
     "svelte": "^3.49.0",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   },
   "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.49.0",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   }
 }
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.49.0",
     "tinro": "^0.6.12",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   }
 }
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.49.0",
-    "vite": "^2.9.14",
+    "vite": "^3.0.0",
     "vite-plugin-windicss": "^1.8.6"
   }
 }
diff --git a/packages/vite-plugin-svelte/package.json b/packages/vite-plugin-svelte/package.json
@@ -28,7 +28,7 @@
     "build": "pnpm build:ci --dts --sourcemap"
   },
   "engines": {
-    "node": "^14.13.1 || >= 16"
+    "node": "^14.18.0 || >= 16"
   },
   "repository": {
     "type": "git",
@@ -56,7 +56,7 @@
   "peerDependencies": {
     "diff-match-patch": "^1.0.5",
     "svelte": "^3.44.0",
-    "vite": "^2.9.0"
+    "vite": "^3.0.0"
   },
   "peerDependenciesMeta": {
     "diff-match-patch": {
@@ -72,6 +72,6 @@
     "rollup": "^2.76.0",
     "svelte": "^3.49.0",
     "tsup": "^6.1.3",
-    "vite": "^2.9.14"
+    "vite": "^3.0.0"
   }
 }
diff --git a/packages/vite-plugin-svelte/src/index.ts b/packages/vite-plugin-svelte/src/index.ts
@@ -90,7 +90,8 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 				if (isSvelteMetadataChanged) {
 					// Force Vite to optimize again. Although we mutate the config here, it works because
 					// Vite's optimizer runs after `buildStart()`.
-					viteConfig.server.force = true;
+					// TODO: verify this works in vite3
+					viteConfig.optimizeDeps.force = true;
 				}
 			},
 
@@ -101,9 +102,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 			},
 
 			load(id, opts) {
-				// @ts-expect-error anticipate vite changing second parameter as options object
-				// see https://github.com/vitejs/vite/discussions/5109
-				const ssr: boolean = opts === true || opts?.ssr;
+				const ssr = !!opts?.ssr;
 				const svelteRequest = requestParser(id, !!ssr);
 				if (svelteRequest) {
 					const { filename, query } = svelteRequest;
diff --git a/packages/vite-plugin-svelte/src/utils/options.ts b/packages/vite-plugin-svelte/src/utils/options.ts
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
 +---
++
 +Always add dependencies using svelte to ssr.noExternal in vite config
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`"postcss-load-config": "^4.0.1",`
`18`	`18`	`"svelte": "^3.49.0",`
`19`	`19`	`"svelte-preprocess": "^4.10.7",`
`20`		`- "vite": "^2.9.14"`
	`20`	`+ "vite": "^3.0.0"`
`21`	`21`	`},`
`22`	`22`	`"type": "module"`
`23`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`"devDependencies": {`
`14`	`14`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`15`	`15`	`"svelte": "^3.49.0",`
`16`		`- "vite": "^2.9.14"`
	`16`	`+ "vite": "^3.0.0"`
`17`	`17`	`},`
`18`	`18`	`"type": "module"`
`19`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`15`	`15`	`"svelte": "^3.49.0",`
`16`	`16`	`"svelte-preprocess": "^4.10.7",`
`17`		`- "vite": "^2.9.14"`
	`17`	`+ "vite": "^3.0.0"`
`18`	`18`	`},`
`19`	`19`	`"type": "module"`
`20`	`20`	`}`