sveltejs · dominikg · Nov 14, 2023 · Oct 26, 2023 · Oct 27, 2023 · Oct 30, 2023
diff --git a/.changeset/thin-comics-work.md b/.changeset/thin-comics-work.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Add experimental support for svelte5
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -9,7 +9,11 @@ module.exports = {
 	],
 	globals: {
 		Atomics: 'readonly',
-		SharedArrayBuffer: 'readonly'
+		SharedArrayBuffer: 'readonly',
+		$derived: 'readonly',
+		$effect: 'readonly',
+		$props: 'readonly',
+		$state: 'readonly'
 	},
 	plugins: ['@typescript-eslint', 'html', 'markdown', 'unicorn'],
 	parser: '@typescript-eslint/parser',

diff --git a/packages/e2e-tests/_test_dependencies/svelte-module/index.js b/packages/e2e-tests/_test_dependencies/svelte-module/index.js
@@ -0,0 +1,2 @@
+export { createCounter } from './src/counter/Counter.svelte.js';
+export { default as Counter } from './src/counter/Counter.svelte';
diff --git a/packages/e2e-tests/_test_dependencies/svelte-module/package.json b/packages/e2e-tests/_test_dependencies/svelte-module/package.json
@@ -0,0 +1,19 @@
+{
+  "version": "1.0.0",
+  "private": true,
+  "name": "e2e-test-dep-svelte-module",
+  "main": "index.js",
+  "svelte": "index.js",
+  "files": [
+    "src",
+    "index.js"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "svelte": "./index.js"
+      }
+    }
+  },
+  "type": "module"
+}
diff --git a/packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte b/packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { createCounter } from './Counter.svelte.js';
+	const counter = createCounter(0);
+	let localCounter = $state(0);
+</script>
+
+<button on:click={counter.increment}>
+	count is {counter.count}
+</button>
+
+<button on:click={() => localCounter++}>
+	local count is {localCounter}
+</button>
diff --git a/packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte.js b/packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte.js
@@ -0,0 +1,11 @@
+export function createCounter(n = 0) {
+	let count = $state(n);
+	return {
+		get count() {
+			return count;
+		},
+		increment() {
+			count++;
+		}
+	};
+}
diff --git a/packages/playground/basic/.gitignore b/packages/playground/basic/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/playground/basic/README.md b/packages/playground/basic/README.md
@@ -0,0 +1,3 @@
+# Svelte + Vite
+
+and a little something 5
diff --git a/packages/playground/basic/index.html b/packages/playground/basic/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite + Svelte</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.js"></script>
+	</body>
+</html>
diff --git a/packages/playground/basic/jsconfig.json b/packages/playground/basic/jsconfig.json
@@ -0,0 +1,32 @@
+{
+	"compilerOptions": {
+		"moduleResolution": "bundler",
+		"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.
+		 */
+		"verbatimModuleSyntax": true,
+		"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,
+		/**
+		 * 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"]
+}
diff --git a/packages/playground/basic/package.json b/packages/playground/basic/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "playground-basic",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "workspace:^",
+    "svelte": "^4.2.2",
+    "vite": "^5.0.0-beta.12",
+    "e2e-test-dep-svelte-module": "workspace:^"
+  }
+}
diff --git a/packages/playground/basic/public/vite.svg b/packages/playground/basic/public/vite.svg
diff --git a/packages/playground/basic/src/App.svelte b/packages/playground/basic/src/App.svelte
@@ -0,0 +1,63 @@
+<script>
+	import svelteLogo from './assets/svelte.svg';
+	import viteLogo from '/vite.svg';
+	import Counter from './lib/Counter.svelte';
+	import { Counter as ExternalCounter, createCounter } from 'e2e-test-dep-svelte-module';
+	const counter = createCounter(0);
+</script>
+
+<main>
+	<div>
+		<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+			<img src={viteLogo} class="logo" alt="Vite Logo" />
+		</a>
+		<a href="https://svelte.dev" target="_blank" rel="noreferrer">
+			<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
+		</a>
+	</div>
+	<h1>Vite + Svelte</h1>
+
+	<div class="card">
+		<div><span>local</span> <Counter /></div>
+		<div><span>imported</span> <ExternalCounter /></div>
+		<div>
+			<span>imported function</span><button on:click={counter.increment}
+				>count is {counter.count}</button
+			>
+		</div>
+	</div>
+
+	<p>
+		Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer"
+			>SvelteKit</a
+		>, the official Svelte app framework powered by Vite!
+	</p>
+
+	<p class="read-the-docs">Click on the Vite and Svelte logos to learn more</p>
+</main>
+
+<style>
+	.logo {
+		height: 6em;
+		padding: 1.5em;
+		will-change: filter;
+		transition: filter 300ms;
+	}
+	.logo:hover {
+		filter: drop-shadow(0 0 2em #646cffaa);
+	}
+	.logo.svelte:hover {
+		filter: drop-shadow(0 0 2em #ff3e00aa);
+	}
+	.read-the-docs {
+		color: #888;
+	}
+	.card {
+		display: flex;
+		gap: 1rem;
+	}
+	.card > div {
+		display: flex;
+		flex-direction: column;
+	}
+</style>
diff --git a/packages/playground/basic/src/app.css b/packages/playground/basic/src/app.css
@@ -0,0 +1,79 @@
+:root {
+	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	font-weight: 400;
+
+	color-scheme: light dark;
+	color: rgba(255, 255, 255, 0.87);
+	background-color: #242424;
+
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+a {
+	font-weight: 500;
+	color: #646cff;
+	text-decoration: inherit;
+}
+a:hover {
+	color: #535bf2;
+}
+
+body {
+	margin: 0;
+	display: flex;
+	place-items: center;
+	min-width: 320px;
+	min-height: 100vh;
+}
+
+h1 {
+	font-size: 3.2em;
+	line-height: 1.1;
+}
+
+.card {
+	padding: 2em;
+}
+
+#app {
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 2rem;
+	text-align: center;
+}
+
+button {
+	border-radius: 8px;
+	border: 1px solid transparent;
+	padding: 0.6em 1.2em;
+	font-size: 1em;
+	font-weight: 500;
+	font-family: inherit;
+	background-color: #1a1a1a;
+	cursor: pointer;
+	transition: border-color 0.25s;
+}
+button:hover {
+	border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+	outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		color: #213547;
+		background-color: #ffffff;
+	}
+	a:hover {
+		color: #747bff;
+	}
+	button {
+		background-color: #f9f9f9;
+	}
+}
diff --git a/packages/playground/basic/src/assets/svelte.svg b/packages/playground/basic/src/assets/svelte.svg
diff --git a/packages/playground/basic/src/lib/Counter.svelte b/packages/playground/basic/src/lib/Counter.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { createCounter } from './Counter.svelte.js';
+	const counter = createCounter(0);
+	let localCounter = $state(0);
+</script>
+
+<button on:click={counter.increment}>
+	count is {counter.count}
+</button>
+
+<button on:click={() => localCounter++}>
+	local count is {localCounter}
+</button>
diff --git a/packages/playground/basic/src/lib/Counter.svelte.js b/packages/playground/basic/src/lib/Counter.svelte.js
@@ -0,0 +1,11 @@
+export function createCounter(n = 0) {
+	let count = $state(n);
+	return {
+		get count() {
+			return count;
+		},
+		increment() {
+			count++;
+		}
+	};
+}
diff --git a/packages/playground/basic/src/main.js b/packages/playground/basic/src/main.js
@@ -0,0 +1,19 @@
+import './app.css';
+import App from './App.svelte';
+import { VERSION } from 'svelte/compiler';
+import * as svelte from 'svelte';
+const isSvelte5 = VERSION.startsWith('5.');
+let app;
+
+if (isSvelte5) {
+	app = [window.unmount] = svelte.mount(App, {
+		props: {},
+		target: document.getElementById('app')
+	});
+} else {
+	app = new App({
+		target: document.getElementById('app')
+	});
+}
+
+export default app;
diff --git a/packages/playground/basic/src/vite-env.d.ts b/packages/playground/basic/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/packages/playground/basic/svelte.config.js b/packages/playground/basic/svelte.config.js
@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+	// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+	// for more information about preprocessors
+	preprocess: vitePreprocess()
+};
diff --git a/packages/playground/basic/vite.config.js b/packages/playground/basic/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	optimizeDeps: {
+		include: ['e2e-test-dep-svelte-module']
+	},
+	plugins: [svelte()]
+});
diff --git a/packages/vite-plugin-svelte/package.json b/packages/vite-plugin-svelte/package.json
@@ -50,7 +50,7 @@
     "vitefu": "^0.2.5"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0",
+    "svelte": "^4.0.0 || ^5.0.0-next.0",
     "vite": "^5.0.0-beta.1 || ^5.0.0"
   },
   "devDependencies": {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { createCounter } from './src/counter/Counter.svelte.js';
		export { default as Counter } from './src/counter/Counter.svelte';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="svelte" />
		/// <reference types="vite/client" />