feat: add vite-plugin-svelte-module

.eslintrc.cjs

@@ -10,7 +10,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',

packages/playground/basic/src/lib/Counter.svelte

@@ -1,10 +1,9 @@
+<svelte:options runes />
 <script>
-  let count = 0;
-  const increment = () => {
-    count += 1;
-  }
+  import {createCounter} from "./Counter.svelte.js";
+  const counter = createCounter(0);
 </script>
 
-<button on:click={increment}>
-  count is {count}
+<button on:click={counter.increment}>
+  count is {counter.count}
 </button>

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++;
+		}
+	};
+}

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

@@ -5,7 +5,7 @@ import { svelteInspector } from '@sveltejs/vite-plugin-svelte-inspector';
 import { handleHotUpdate } from './handle-hot-update.js';
 import { log, logCompilerWarnings } from './utils/log.js';
 import { createCompileSvelte } from './utils/compile.js';
-import { buildIdParser } from './utils/id.js';
+import { buildIdParser, buildModuleIdParser } from './utils/id.js';
 import {
 	buildExtraViteConfig,
 	validateInlineOptions,
@@ -20,6 +20,7 @@ import { saveSvelteMetadata } from './utils/optimizer.js';
 import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache.js';
 import { loadRaw } from './utils/load-raw.js';
 import { isSvelte5 } from './utils/svelte-version.js';
+import * as svelteCompiler from 'svelte/compiler';
 
 /**
  * @param {Partial<import('./public.d.ts').Options>} [inlineOptions]
@@ -34,6 +35,8 @@ export function svelte(inlineOptions) {
 	// updated in configResolved hook
 	/** @type {import('./types/id.d.ts').IdParser} */
 	let requestParser;
+	/** @type {import('./types/id.d.ts').ModuleIdParser} */
+	let moduleRequestParser;
 	/** @type {import('./types/options.d.ts').ResolvedOptions} */
 	let options;
 	/** @type {import('vite').ResolvedConfig} */
@@ -192,6 +195,33 @@ export function svelte(inlineOptions) {
 		log.warn('svelte5 does not support svelte-inspector yet, disabling it');
 		plugins.push(svelteInspector()); // TODO reenable once svelte5 has support
 	}
+	if (isSvelte5) {
+		// TODO move to separate file
+		plugins.push({
+			name: 'vite-plugin-svelte-module',
+			enforce: 'post',
+			async configResolved() {
+				moduleRequestParser = buildModuleIdParser(options);
+			},
+			async transform(code, id, opts) {
+				const ssr = !!opts?.ssr;
+				const moduleRequest = moduleRequestParser(id, ssr);
+				if (!moduleRequest) {
+					return;
+				}
+				try {
+					const compileResult = await svelteCompiler.compileModule(code, {
+						generate: ssr ? 'ssr' : 'dom',
+						filename: moduleRequest.filename
+					});
+					logCompilerWarnings(moduleRequest, compileResult.warnings, options);
+					return compileResult.js;
+				} catch (e) {
+					throw toRollupError(e, options);
+				}
+			}
+		});
+	}
 	return plugins;
 }
 

packages/vite-plugin-svelte/src/public.d.ts

@@ -174,6 +174,14 @@ interface ExperimentalOptions {
 	 * @default false
 	 */
 	disableSvelteResolveWarnings?: boolean;
+
+	compileModule?: CompileModuleOptions;
+}
+
+interface CompileModuleOptions {
+	extensions?: string[];
+	include?: Arrayable<string>;
+	exclude?: Arrayable<string>;
 }
 
 type Arrayable<T> = T | T[];

packages/vite-plugin-svelte/src/types/id.d.ts

@@ -28,4 +28,18 @@ export interface SvelteRequest {
 	raw: boolean;
 }
 
+export interface SvelteModuleRequest {
+	id: string;
+	filename: string;
+	normalizedFilename: string;
+	query: RequestQuery;
+	timestamp: number;
+	ssr: boolean;
+}
+
 export type IdParser = (id: string, ssr: boolean, timestamp?: number) => SvelteRequest | undefined;
+export type ModuleIdParser = (
+	id: string,
+	ssr: boolean,
+	timestamp?: number
+) => SvelteModuleRequest | undefined;

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

@@ -184,3 +184,49 @@ export function buildIdParser(options) {
 		}
 	};
 }
+
+/**
+ * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @returns {import('../types/id.d.ts').ModuleIdParser}
+ */
+export function buildModuleIdParser(options) {
+	const { include, exclude, extensions } = options?.experimental?.compileModule ?? {};
+	const root = options.root;
+	const normalizedRoot = normalizePath(root);
+	const filter = buildFilter(include, exclude, extensions ?? ['.svelte.js', '.svelte.ts']);
+	return (id, ssr, timestamp = Date.now()) => {
+		const { filename, rawQuery } = splitId(id);
+		if (filter(filename)) {
+			return parseToSvelteModuleRequest(id, filename, rawQuery, normalizedRoot, timestamp, ssr);
+		}
+	};
+}
+
+/**
+ * @param {string} id
+ * @param {string} filename
+ * @param {string} rawQuery
+ * @param {string} root
+ * @param {number} timestamp
+ * @param {boolean} ssr
+ * @returns {import('../types/id.d.ts').SvelteModuleRequest | undefined}
+ */
+function parseToSvelteModuleRequest(id, filename, rawQuery, root, timestamp, ssr) {
+	const query = parseRequestQuery(rawQuery);
+
+	if (query.url || query.raw || query.direct) {
+		// skip requests with special vite tags
+		return;
+	}
+
+	const normalizedFilename = normalize(filename, root);
+
+	return {
+		id,
+		filename,
+		normalizedFilename,
+		query,
+		timestamp,
+		ssr
+	};
+}

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

@@ -126,7 +126,7 @@ export const log = {
 };
 
 /**
- * @param {import('../types/id.d.ts').SvelteRequest} svelteRequest
+ * @param {import('../types/id.d.ts').SvelteRequest | import('../types/id.d.ts').SvelteModuleRequest} svelteRequest
  * @param {import('svelte/types/compiler/interfaces').Warning[]} warnings
  * @param {import('../types/options.d.ts').ResolvedOptions} options
  */