feat: allow state/derived/props to be explicitly exported from components

.changeset/red-feet-worry.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: allow state/derived/props to be explicitly exported from components

packages/svelte/src/compiler/errors.js

@@ -170,12 +170,8 @@ const runes = {
 	'invalid-legacy-export': () => `Cannot use \`export let\` in runes mode — use $props instead`,
 	/** @param {string} rune */
 	'invalid-rune-usage': (rune) => `Cannot use ${rune} rune in non-runes mode`,
-	'invalid-state-export': () =>
-		`Cannot export state if it is reassigned. Either export a function returning the state value or only mutate the state value's properties`,
-	'invalid-derived-export': () =>
-		`Cannot export derived state. To expose the current derived value, export a function returning its value`,
-	'invalid-prop-export': () =>
-		`Cannot export properties. To expose the current value of a property, export a function returning its value`,
+	'invalid-state-export': () => `Cannot export state from a module if it is reassigned`,
+	'invalid-derived-export': () => `Cannot export derived state from a module`,
 	'invalid-props-id': () => `$props() can only be used with an object destructuring pattern`,
 	'invalid-props-pattern': () =>
 		`$props() assignment must not contain nested properties or computed keys`,

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -733,10 +733,6 @@ function validate_export(node, scope, name) {
 	const binding = scope.get(name);
 	if (!binding) return;
 
-	if (binding.kind === 'prop') {
-		error(node, 'invalid-prop-export');
-	}
-
 	if (binding.kind === 'derived') {
 		error(node, 'invalid-derived-export');
 	}
@@ -964,25 +960,12 @@ export const validation_runes = merge(validation, a11y_validators, {
 		if (node.label.name !== '$' || path.at(-1)?.type !== 'Program') return;
 		error(node, 'invalid-legacy-reactive-statement');
 	},
-	ExportNamedDeclaration(node, { state, next }) {
+	ExportNamedDeclaration(node, { state }) {
 		if (node.declaration?.type !== 'VariableDeclaration') return;
-
-		// visit children, so bindings are correctly initialised
-		next();
-
-		for (const declarator of node.declaration.declarations) {
-			for (const id of extract_identifiers(declarator.id)) {
-				validate_export(node, state.scope, id.name);
-			}
-		}
-
-		if (state.analysis.instance.scope !== state.scope) return;
 		if (node.declaration.kind !== 'let') return;
+		if (state.analysis.instance.scope !== state.scope) return;
 		error(node, 'invalid-legacy-export');
 	},
-	ExportSpecifier(node, { state }) {
-		validate_export(node, state.scope, node.local.name);
-	},
 	CallExpression(node, { state, path }) {
 		validate_call_expression(node, state.scope, path);
 	},

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

@@ -52,7 +52,10 @@ export function get_assignment_value(node, { state, visit }) {
  */
 export function is_state_source(binding, state) {
 	return (
-		(binding.kind === 'state' || binding.kind === 'frozen_state') &&
+		(binding.kind === 'state' ||
+			binding.kind === 'frozen_state' ||
+			binding.kind === 'derived' ||
+			binding.kind === 'prop') &&
 		(!state.analysis.immutable || binding.reassigned || state.analysis.accessors)
 	);
 }

packages/svelte/tests/compiler-errors/samples/export-derived-state/_config.js

@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'invalid-derived-export',
-		message:
-			'Cannot export derived state. To expose the current derived value, export a function returning its value'
+		message: 'Cannot export derived state from a module',
+		position: [24, 66]
 	}
 });

packages/svelte/tests/compiler-errors/samples/export-state/_config.js

@@ -3,8 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'invalid-state-export',
-		message:
-			"Cannot export state if it is reassigned. Either export a function returning the state value or only mutate the state value's properties",
+		message: 'Cannot export state from a module if it is reassigned',
 		position: [46, 86]
 	}
 });

packages/svelte/tests/compiler-errors/samples/runes-export-named-state/_config.js

@@ -3,8 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'invalid-state-export',
-		message:
-			"Cannot export state if it is reassigned. Either export a function returning the state value or only mutate the state value's properties",
+		message: 'Cannot export state from a module if it is reassigned',
 		position: [28, 53]
 	}
 });

packages/svelte/tests/runtime-runes/samples/exports3/_config.js → packages/svelte/tests/runtime-runes/samples/exports-3/_config.js

@@ -7,6 +7,6 @@ export default test({
 
 		btn?.click();
 		await Promise.resolve();
-		assert.htmlEqual(target.innerHTML, '0 1 <button>0 / 1</button>');
+		assert.htmlEqual(target.innerHTML, '1 2 <button>1 / 2</button>');
 	}
 });

packages/svelte/tests/runtime-runes/samples/exports3/main.svelte → packages/svelte/tests/runtime-runes/samples/exports-3/main.svelte

@@ -4,4 +4,4 @@
 </script>
 
 <Sub bind:this={sub} />
-<button on:click={() => sub.increment()}>{sub?.count1.value} / {sub?.count2.value}</button>
+<button on:click={() => sub.increment()}>{sub?.count} / {sub?.doubled}</button>

packages/svelte/tests/runtime-runes/samples/exports-3/sub.svelte

@@ -0,0 +1,13 @@
+<script>
+	let count = $state(0);
+	let doubled = $derived(count * 2);
+
+	export { count, doubled };
+
+	export function increment() {
+		count += 1;
+	}
+</script>
+
+{count}
+{doubled}