feat: fix accessors and support migration of accessors

Author: paoloricciuti

.changeset/large-rules-hang.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: fix accessors and support migration of accessors

packages/svelte/src/compiler/migrate/index.js

@@ -12,7 +12,6 @@ import { get_rune } from '../phases/scope.js';
 import { reset, reset_warning_filter } from '../state.js';
 import { extract_identifiers } from '../utils/ast.js';
 import { migrate_svelte_ignore } from '../utils/extract_svelte_ignore.js';
-import { determine_slot } from '../utils/slot.js';
 import { validate_component_options } from '../validate-options.js';
 
 const regex_style_tags = /(<style[^>]+>)([\S\s]*?)(<\/style>)/g;
@@ -54,6 +53,8 @@ export function migrate(source) {
 		const analysis = analyze_component(parsed, source, combined_options);
 		const indent = guess_indent(source);
 
+		str.replaceAll(/(<svelte:options\s.*?\s?)accessors\s?/g, (_, $1) => $1);
+
 		for (const content of style_contents) {
 			str.overwrite(content[0], content[0] + style_placeholder.length, content[1]);
 		}
@@ -265,6 +266,13 @@ export function migrate(source) {
 			);
 		}
 
+		if (state.props.length > 0 && state.analysis.accessors) {
+			str.appendRight(
+				insertion_point,
+				`\n${indent}export {\n${indent}\t${state.props.map((prop) => `${prop.local},`).join(`\n${indent}\t`)}\n${indent}}\n`
+			);
+		}
+
 		if (!parsed.instance && need_script) {
 			str.appendRight(insertion_point, '\n</script>\n\n');
 		}

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

@@ -276,6 +276,13 @@ export function client_component(analysis, options) {
 			}
 		}
 
+		if (binding?.kind === 'prop' || binding?.kind === 'bindable_prop') {
+			return [
+				getter,
+				b.set(alias ?? name, [b.stmt(b.call(name, b.call('$.proxy', b.id('$$value'))))])
+			];
+		}
+
 		if (binding?.kind === 'state' || binding?.kind === 'raw_state') {
 			const value = binding.kind === 'state' ? b.call('$.proxy', b.id('$$value')) : b.id('$$value');
 			return [getter, b.set(alias ?? name, [b.stmt(b.call('$.set', b.id(name), value))])];

packages/svelte/tests/migrate/samples/accessors/input.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	type $$Props = {
+		test: string;
+	}
+	
+	export let count = 0;
+	export let stuff;
+</script>
+
+<button>
+	<slot name="cool" />
+</button>
+
+<svelte:options accessors immutable/>

packages/svelte/tests/migrate/samples/accessors/output.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	
+	
+	interface Props {
+		test: string;
+		count?: number;
+		stuff: any;
+		cool?: import('svelte').Snippet;
+	}
+
+	let {
+		test,
+		count = 0,
+		stuff,
+		cool
+	}: Props = $props();
+
+	export {
+		test,
+		count,
+		stuff,
+		cool,
+	}
+</script>
+
+<button>
+	{@render cool?.()}
+</button>
+
+<svelte:options immutable/>