POC HMR in Svelte 5

Author: rixo

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -340,15 +340,31 @@ export function client_component(source, analysis, options) {
 	const body = [
 		...state.hoisted,
 		...module.body,
-		b.export_default(
-			b.function_declaration(
-				b.id(analysis.name),
-				[b.id('$$anchor'), b.id('$$props')],
-				component_block
-			)
+		b.function_declaration(
+			b.id(analysis.name),
+			[b.id('$$anchor'), b.id('$$props')],
+			component_block
 		)
 	];
 
+	if (options.hmr) {
+		body.push(
+			b.export_default(
+				b.conditional(
+					b.import_meta_hot(),
+					b.call('$.hmr', b.member(b.import_meta_hot(), b.id('data')), b.id(analysis.name)),
+					b.id(analysis.name)
+				)
+			),
+			b.if(
+				b.import_meta_hot(),
+				b.stmt(b.call('import.meta.hot.acceptExports', b.literal('default')))
+			)
+		);
+	} else {
+		body.push(b.export_default(b.id(analysis.name)));
+	}
+
 	if (options.discloseVersion) {
 		body.unshift(b.imports([], 'svelte/internal/disclose-version'));
 	}

packages/svelte/src/compiler/types/index.d.ts

@@ -178,6 +178,12 @@ export interface CompileOptions extends ModuleCompileOptions {
 	 * @default null
 	 */
 	cssOutputFilename?: string;
+	/**
+	 * If `true`, compiles components with hot reloading support.
+	 *
+	 * @default false
+	 */
+	hmr?: boolean;
 
 	// Other Svelte 4 compiler options:
 	// enableSourcemap?: EnableSourcemap; // TODO bring back? https://github.com/sveltejs/svelte/pull/6835
@@ -228,6 +234,7 @@ export type ValidatedCompileOptions = ValidatedModuleCompileOptions &
 		sourcemap: CompileOptions['sourcemap'];
 		legacy: Required<Required<CompileOptions>['legacy']>;
 		runes: CompileOptions['runes'];
+		hmr: CompileOptions['hmr'];
 	};
 
 export type DeclarationKind =

packages/svelte/src/compiler/utils/builders.js

@@ -553,6 +553,20 @@ export function imports(parts, source) {
 	};
 }
 
+/**
+ * @return {import('estree').MemberExpression}
+ */
+export function import_meta_hot() {
+	return member(
+		{
+			type: 'MetaProperty',
+			meta: id('import'),
+			property: id('meta')
+		},
+		id('hot')
+	);
+}
+
 /**
  * @param {import('estree').Expression | null} argument
  * @returns {import('estree').ReturnStatement}

packages/svelte/src/compiler/validate-options.js

@@ -106,6 +106,8 @@ export const validate_component_options =
 				return input;
 			}),
 
+			hmr: boolean(false),
+
 			hydratable: warn_removed(
 				'The hydratable option has been removed. Svelte components are always hydratable now.'
 			),

packages/svelte/src/internal/client/hmr.js

@@ -0,0 +1,56 @@
+import { key } from './render.js';
+import { source, set, get } from './runtime.js';
+
+/**
+ * @template {any[]} ComponentArgs
+ * @template {Record<string, any> | undefined} ComponentReturn
+ * @template {(...args: ComponentArgs) => ComponentReturn} Component
+ *
+ * @param {{
+ *    component_signal: ReturnType<typeof source<Component>>,
+ *    proxy?: (...args: ComponentArgs) => ComponentReturn
+ * }} hot_data
+ * @param {Component} component
+ */
+export function hmr(hot_data, component) {
+	if (hot_data.proxy) {
+		set(hot_data.component_signal, component);
+	} else {
+		const component_signal = (hot_data.component_signal = source(component));
+
+		// @ts-ignore
+		hot_data.proxy = function (target, ...args) {
+			/** @type {ComponentReturn} */
+			let current_accessors;
+
+			key(
+				target,
+				() => get(component_signal),
+				($$anchor) => {
+					const current_component = get(component_signal);
+					// @ts-ignore
+					current_accessors = current_component($$anchor, ...args);
+				}
+			);
+
+			return new Proxy(
+				{},
+				{
+					get(_, p) {
+						// we actually want to crash if no accessors, because no HMR code would crash
+						// @ts-ignore
+						return current_accessors[p];
+					},
+					set(_, p, value) {
+						// we actually want to crash if no accessors, because no HMR code would crash
+						// @ts-ignore
+						current_accessors[p] = value;
+						return true;
+					}
+				}
+			);
+		};
+	}
+
+	return hot_data.proxy;
+}

packages/svelte/src/internal/index.js

@@ -55,3 +55,5 @@ export {
 	$window as window,
 	$document as document
 } from './client/operations.js';
+
+export { hmr } from './client/hmr.js';

playgrounds/demo/vite.config.js

@@ -2,7 +2,13 @@ import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 
 export default defineConfig({
-	plugins: [svelte()],
+	plugins: [
+		svelte({
+			compilerOptions: {
+				hmr: true
+			}
+		})
+	],
 	optimizeDeps: {
 		// svelte is a local workspace package, optimizing it would require dev server restarts with --force for every change
 		exclude: ['svelte']