tests: update to latest svelte-kit and vite (#411)

* svelte-migrate: renamed files

* refactor: adapt to new kit routing and manifest output

* regenerate kit playground

* fix: migrate inspector-kit

* fix: use root.svelte to attach to because latest kit doesn't have generated runtime files anymore

* chore: update vite and kit dependencies

* fix: reduce flakiness by ensuring different ws ports and more lenient kit hydration tests

* fix: readd private: true

* fix: private as boolean, not string

Author: dominikg

.changeset/fair-mugs-try.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+update svelte-inspector inject code to be compatible with @sveltejs/kit > 1.0.0-next.405

.eslintrc.js

@@ -159,10 +159,12 @@ module.exports = {
 			}
 		},
 		{
-			/* required because $app and $lib are not known */
 			files: ['packages/playground/kit-demo-app/src/**'],
 			rules: {
-				'node/no-missing-import': 'off'
+				/* required because $app and $lib are not known */
+				'node/no-missing-import': 'off',
+				/* required because URL wasn't in node8 */
+				'node/no-unsupported-features/node-builtins': 'off'
 			}
 		}
 	]

package.json

@@ -46,7 +46,7 @@
     "rimraf": "^3.0.2",
     "svelte": "^3.49.0",
     "typescript": "^4.7.4",
-    "vite": "^3.0.7",
+    "vite": "^3.0.8",
     "vitest": "^0.21.1"
   },
   "lint-staged": {
@@ -65,13 +65,13 @@
   "pnpm": {
     "overrides": {
       "@sveltejs/vite-plugin-svelte": "workspace:*",
-      "vite": "^3.0.0"
+      "vite": "^3.0.8"
     },
     "peerDependencyRules": {
       "allowedVersions": {
         "stylus": "^0.58.0",
         "postcss-load-config": "^4.0.0",
-        "vite": "^3.0.0"
+        "vite": "^3.0.8"
       }
     }
   }

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": "^3.0.7"
+    "vite": "^3.0.8"
   },
   "type": "module"
 }

packages/e2e-tests/configfile-custom/package.json

@@ -13,7 +13,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.49.0",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   },
   "type": "module"
 }

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": "^3.0.7"
+    "vite": "^3.0.8"
   },
   "type": "module"
 }

packages/e2e-tests/custom-extensions/package.json

@@ -10,7 +10,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.49.0",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   },
   "type": "module"
 }

packages/e2e-tests/env/package.json

@@ -10,7 +10,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.49.0",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   },
   "type": "module"
 }

packages/e2e-tests/hmr/package.json

@@ -15,7 +15,7 @@
     "e2e-test-dep-vite-plugins": "workspace:*",
     "node-fetch": "^3.2.10",
     "svelte": "^3.49.0",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   },
   "type": "module"
 }

packages/e2e-tests/inspector-kit/package.json

@@ -9,9 +9,9 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@sveltejs/kit": "^1.0.0-next.405",
+    "@sveltejs/kit": "^1.0.0-next.415",
     "svelte": "^3.49.0",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   },
   "type": "module"
 }

packages/e2e-tests/inspector-kit/src/routes/index.svelte renamed to packages/e2e-tests/inspector-kit/src/routes/+page.svelte

@@ -11,6 +11,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.49.0",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   }
 }

packages/e2e-tests/inspector-vite/package.json

@@ -32,7 +32,7 @@ describe('kit-node', () => {
 			expect(await page.$eval('#mount', (e) => e['__initialNode'])).toBe(true);
 
 			// also get page as text to confirm
-			const html = await fetchPageText(true);
+			const html = await fetchPageText();
 			expect(html).toMatch('Hello world!');
 			expect(html).toMatch('SERVER_LOADED');
 			expect(html).toMatch('BEFORE_MOUNT');
@@ -42,9 +42,9 @@ describe('kit-node', () => {
 			// wait a bit for hydration to kick in
 			await sleep(550);
 
-			// check hydrated content
-			expect(await getText('#load')).toBe('CLIENT_LOADED');
-			expect(await getText('#mount')).toBe('AFTER_MOUNT');
+			// poll for hydrated content
+			await untilMatches(() => getText('#mount'), 'AFTER_MOUNT', 'failed to hydrate');
+			await untilMatches(() => getText('#load'), 'CLIENT_LOADED', 'failed to hydrate');
 
 			// check that it did not replace the dom elements with new ones
 			expect(await page.$eval('#load', (e) => e['__initialNode'])).toBe(true);
@@ -92,7 +92,7 @@ describe('kit-node', () => {
 		if (isBuild) {
 			it('should not include dynamic import from onmount in ssr output', async () => {
 				const serverManifest = JSON.parse(
-					readFileContent(path.join('.svelte-kit', 'output', 'server', 'manifest.json'))
+					readFileContent(path.join('build', 'server', 'vite-manifest.json'))
 				);
 				const includesClientOnlyModule = Object.keys(serverManifest).some((key: string) =>
 					key.includes('client-only-module')
@@ -101,7 +101,7 @@ describe('kit-node', () => {
 			});
 			it('should include dynamic import from onmount in client output', async () => {
 				const clientManifest = JSON.parse(
-					readFileContent(path.join('.svelte-kit', 'output', 'client', 'manifest.json'))
+					readFileContent(path.join('build', 'client', 'vite-manifest.json'))
 				);
 				const includesClientOnlyModule = Object.keys(clientManifest).some((key: string) =>
 					key.includes('client-only-module')
@@ -112,15 +112,12 @@ describe('kit-node', () => {
 
 		if (!isBuild) {
 			describe('hmr', () => {
-				const updateIndexSvelte = editFileAndWaitForHmrComplete.bind(
-					null,
-					'src/routes/index.svelte'
-				);
+				const updatePage = editFileAndWaitForHmrComplete.bind(null, 'src/routes/+page.svelte');
 
 				it('should render additional html', async () => {
 					// add div 1
 					expect(await getEl('#hmr-test')).toBe(null);
-					await updateIndexSvelte((content) =>
+					await updatePage((content) =>
 						content.replace(
 							'<!-- HMR-TEMPLATE-INJECT -->',
 							'<div id="hmr-test">foo</div>\n<!-- HMR-TEMPLATE-INJECT -->'
@@ -130,7 +127,7 @@ describe('kit-node', () => {
 
 					// add div 2
 					expect(await getEl('#hmr-test2')).toBe(null);
-					await updateIndexSvelte((content) =>
+					await updatePage((content) =>
 						content.replace(
 							'<!-- HMR-TEMPLATE-INJECT -->',
 							'<div id="hmr-test2">bar</div>\n<!-- HMR-TEMPLATE-INJECT -->'
@@ -139,9 +136,7 @@ describe('kit-node', () => {
 					expect(await getText(`#hmr-test`)).toBe('foo');
 					expect(await getText(`#hmr-test2`)).toBe('bar');
 					// remove div 1
-					await updateIndexSvelte((content) =>
-						content.replace('<div id="hmr-test">foo</div>\n', '')
-					);
+					await updatePage((content) => content.replace('<div id="hmr-test">foo</div>\n', ''));
 					expect(await getText(`#hmr-test`)).toBe(null);
 					expect(await getText(`#hmr-test2`)).toBe('bar');
 				});
@@ -150,7 +145,7 @@ describe('kit-node', () => {
 					let buttons = await page.$$('button');
 					expect(buttons).toHaveLength(1);
 					expect(await getText(buttons[0])).toBe('Clicks: 0');
-					await updateIndexSvelte((content) =>
+					await updatePage((content) =>
 						content.replace(
 							'<!-- HMR-TEMPLATE-INJECT -->',
 							'<Counter id="hmr-test-counter"/>\n<!-- HMR-TEMPLATE-INJECT -->'
@@ -163,19 +158,17 @@ describe('kit-node', () => {
 					await buttons[1].click();
 					expect(await getText(buttons[0])).toBe('Clicks: 0');
 					expect(await getText(buttons[1])).toBe('Clicks: 1');
-					await updateIndexSvelte((content) =>
-						content.replace('<Counter id="hmr-test-counter"/>\n', '')
-					);
+					await updatePage((content) => content.replace('<Counter id="hmr-test-counter"/>\n', ''));
 					buttons = await page.$$('button');
 					expect(buttons).toHaveLength(1);
 					expect(await getText(buttons[0])).toBe('Clicks: 0');
 				});
 
 				it('should apply changed styles', async () => {
 					expect(await getColor(`h1`)).toBe('rgb(255, 62, 0)');
-					await updateIndexSvelte((content) => content.replace('color: #ff3e00', 'color: blue'));
+					await updatePage((content) => content.replace('color: #ff3e00', 'color: blue'));
 					expect(await getColor(`h1`)).toBe('blue');
-					await updateIndexSvelte((content) => content.replace('color: blue', 'color: green'));
+					await updatePage((content) => content.replace('color: blue', 'color: green'));
 					expect(await getColor(`h1`)).toBe('green');
 				});
 

packages/e2e-tests/kit-node/__tests__/kit.spec.ts

@@ -12,14 +12,14 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-node": "^1.0.0-next.86",
-    "@sveltejs/kit": "^1.0.0-next.405",
+    "@sveltejs/kit": "^1.0.0-next.415",
     "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",
     "typescript": "^4.7.4",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   },
   "type": "module"
 }

packages/e2e-tests/kit-node/package.json

@@ -0,0 +1,14 @@
+/** @type {import('./$types').PageLoad} */
+export async function load() {
+	// eslint-disable-next-line node/no-unsupported-features/es-builtins
+	if (globalThis?.window) {
+		// delay load on client so we can test hydration with playwright
+		return new Promise((resolve) =>
+			setTimeout(() => {
+				resolve({ load_status: 'CLIENT_LOADED' });
+			}, 500)
+		);
+	} else {
+		return { load_status: 'SERVER_LOADED' };
+	}
+}

packages/e2e-tests/kit-node/src/routes/+page.js

@@ -1,22 +1,3 @@
-<script context="module">
-	/**
-	 * @type {import('@sveltejs/kit').Load}
-	 */
-	export async function load() {
-		// eslint-disable-next-line node/no-unsupported-features/es-builtins
-		if (globalThis?.window) {
-			// delay load on client so we can test hydration with playwright
-			return new Promise((resolve) =>
-				setTimeout(() => {
-					resolve({ props: { load_status: 'CLIENT_LOADED' } });
-				}, 500)
-			);
-		} else {
-			return { props: { load_status: 'SERVER_LOADED' } };
-		}
-	}
-</script>
-
 <script>
 	import { onMount } from 'svelte';
 	import { addMessages, init, _ } from 'svelte-i18n';
@@ -25,7 +6,8 @@
 	// eslint-disable-next-line node/no-missing-import
 	import Child from '$lib/Child.svelte';
 	import { setSomeContext } from 'e2e-test-dep-svelte-api-only';
-	export let load_status = 'NOT_LOADED';
+	export let data = {};
+	$: load_status = data?.load_status ?? 'NOT_LOADED';
 	const jsTransform = '__JS_TRANSFORM_1__';
 	let mount_status = 'BEFORE_MOUNT';
 	onMount(async () => {

packages/e2e-tests/kit-node/src/routes/index.svelte renamed to packages/e2e-tests/kit-node/src/routes/+page.svelte

@@ -14,7 +14,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.49.0",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   },
   "type": "module"
 }

packages/e2e-tests/package-json-svelte-field/package.json

@@ -12,7 +12,7 @@
     "sass": "^1.54.4",
     "stylus": "^0.59.0",
     "svelte": "^3.49.0",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   },
   "type": "commonjs"
 }

packages/e2e-tests/preprocess-with-vite/package.json

@@ -13,7 +13,7 @@
     "svelte": "^3.49.0",
     "svelte-preprocess": "^4.10.7",
     "typescript": "^4.7.4",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   },
   "type": "module"
 }

packages/e2e-tests/svelte-preprocess/package.json

@@ -13,7 +13,7 @@
     "@types/node": "^17.0.36",
     "svelte": "^3.49.0",
     "svelte-preprocess": "^4.10.7",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   },
   "type": "module"
 }

packages/e2e-tests/ts-type-import/package.json

@@ -21,6 +21,6 @@
     "npm-run-all": "^4.1.5",
     "serve-static": "^1.15.0",
     "svelte": "^3.49.0",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   }
 }

packages/e2e-tests/vite-ssr-esm/package.json

@@ -36,7 +36,11 @@ async function createServer(root = process.cwd(), isProd = process.env.NODE_ENV
 			appType: 'custom',
 			server: {
 				middlewareMode: true,
-				port
+				port,
+				strictPort: true,
+				hmr: {
+					port: port + 25000
+				}
 			}
 		};
 		// @ts-ignore

packages/e2e-tests/vite-ssr-esm/server.js

@@ -18,6 +18,6 @@
     "express": "^4.18.1",
     "serve-static": "^1.15.0",
     "svelte": "^3.49.0",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   }
 }

packages/e2e-tests/vite-ssr/package.json

@@ -33,7 +33,11 @@ async function createServer(root = process.cwd(), isProd = process.env.NODE_ENV
 			appType: 'custom',
 			server: {
 				middlewareMode: true,
-				port
+				port,
+				strictPort: true,
+				hmr: {
+					port: port + 25000
+				}
 			}
 		};
 		// @ts-ignore
@@ -72,7 +76,6 @@ 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) {

packages/e2e-tests/vite-ssr/server.js

@@ -12,7 +12,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "carbon-components-svelte": "^0.68.0",
     "svelte": "^3.49.0",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   },
   "dependencies": {
     "lodash-es": "^4.17.21"

packages/playground/big-component-library/package.json

@@ -10,6 +10,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.49.0",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   }
 }