fix(test): improve stability by removing a log and vite cache (#894)

* fix(test): improve stability by removing an unexpected log and ensuring that vite cache isn't persisted

* fix: remove log use

* fix: wait 500ms after vite connected

* increase timeout in ci

* fix: remove workaround to mount test apps with svelte 4 or 5

* chore(docs): improve changelog about removal of svelte5 warning

.changeset/popular-islands-remain.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+Remove log about experimental status of Svelte 5. Note that breaking changes can still occur while vite-plugin-svelte 4 is in prerelease mode

packages/e2e-tests/configfile-custom/src/main.js

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.body });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/configfile-esm/src/main.js

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.body });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/css-dev-sourcemap/src/main.js

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.body });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/custom-extensions/src/main.js

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.body });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/dynamic-compile-options/src/main.js

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.body });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/env/src/main.js

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.body });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/hmr/src/index.js

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.body });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/import-queries/src/main.js

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.body });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/inspector-vite/src/main.js

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.getElementById('app') });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.getElementById('app') }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/package-json-svelte-field/src/main.js

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.body });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/prebundle-svelte-deps/src/main.js

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.body });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/preprocess-with-vite/src/index.ts

@@ -1,6 +1,6 @@
 import App from './App.svelte';
-
 import { Hello } from './types.js';
+import { mount } from 'svelte';
 
 const hello: Hello = 'Hello';
 
@@ -10,8 +10,5 @@ const options = {
 		hello
 	}
 };
-if (App.toString().startsWith('class ')) {
-	new App(options);
-} else {
-	import('svelte').then(({ mount }) => mount(App, options));
-}
+
+mount(App, options);

packages/e2e-tests/resolve-exports-svelte/src/main.js

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.body });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/svelte-preprocess/src/main.ts

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.getElementById('app') });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.getElementById('app') }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/ts-type-import/src/index.ts

@@ -1,17 +1,12 @@
 import type { Test } from './lib.js';
 import { test } from './lib.js';
 import App from './App.svelte';
+import { mount } from 'svelte';
 
 main();
 
 export function main({ arg = true }: Test = {}): void {
 	if (arg && test()) {
-		if (App.toString().startsWith('class ')) {
-			new App({ target: document.body });
-		} else {
-			import('svelte').then(({ mount }) => {
-				mount(App, { target: document.body });
-			});
-		}
+		mount(App, { target: document.body });
 	}
 }

packages/e2e-tests/vitestSetup.ts

@@ -137,6 +137,12 @@ beforeAll(
 				if (!stat.isSymbolicLink()) {
 					console.error(`failed to symlink ${e2e_tests_node_modules} to ${temp_node_modules}`);
 				}
+				// ensure there is no leftover vite cache
+				const tempViteCache = path.join(temp_node_modules, '.vite');
+				if (fs.existsSync(tempViteCache)) {
+					await fs.rm(tempViteCache, { force: true, recursive: true });
+				}
+
 				await fs.mkdir(path.join(tempDir, 'logs'));
 				const customServerScript = path.resolve(path.dirname(testPath), 'serve.js');
 				const defaultServerScript = path.resolve(e2eTestsRoot, 'e2e-server.js');
@@ -215,7 +221,7 @@ async function goToUrlAndWaitForViteWSConnect(page: Page, url: string) {
 	return Promise.all([page.goto(url), waitForViteConnect(page, 15000)]);
 }
 
-export async function waitForViteConnect(page: Page, timeoutMS = 5000) {
+export async function waitForViteConnect(page: Page, timeoutMS = 10000) {
 	if (isBuild) {
 		return Promise.resolve(); // no vite websocket on build
 	}

packages/vite-plugin-svelte/src/index.js

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import { svelteInspector } from '@sveltejs/vite-plugin-svelte-inspector';
 import { handleHotUpdate } from './handle-hot-update.js';
-import { log, logCompilerWarnings, logSvelte5Warning } from './utils/log.js';
+import { log, logCompilerWarnings } from './utils/log.js';
 import { createCompileSvelte } from './utils/compile.js';
 import { buildIdParser, buildModuleIdParser } from './utils/id.js';
 import {
@@ -23,9 +23,6 @@ import * as svelteCompiler from 'svelte/compiler';
  * @returns {import('vite').Plugin[]}
  */
 export function svelte(inlineOptions) {
-	// TODO remove for v-p-s 4.0.0
-	logSvelte5Warning();
-
 	if (process.env.DEBUG != null) {
 		log.setLevel('debug');
 	}

packages/vite-plugin-svelte/src/utils/log.js

@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
 import { cyan, red, yellow } from 'kleur/colors';
 import debug from 'debug';
-import { VERSION } from 'svelte/compiler';
 
 /** @type {import('../types/log.d.ts').LogLevel[]} */
 const levels = ['debug', 'info', 'warn', 'error', 'silent'];
@@ -260,11 +259,3 @@ export function buildExtendedLogMessage(w) {
 export function isDebugNamespaceEnabled(namespace) {
 	return debug.enabled(`${prefix}:${namespace}`);
 }
-
-export function logSvelte5Warning() {
-	const notice = `You are using Svelte ${VERSION}. Svelte 5 support is experimental, breaking changes can occur in any release until this notice is removed.`;
-	const wip = ['svelte-inspector: loaded but requires additional metadata to work'];
-	if (wip.length > 0) {
-		log.warn(`${notice}\nwork in progress:\n - ${wip.join('\n - ')}\n`);
-	}
-}