move proxy logic into props function

Author: Rich-Harris

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

@@ -8,7 +8,8 @@ import {
 	PROPS_IS_LAZY_INITIAL,
 	PROPS_IS_IMMUTABLE,
 	PROPS_IS_RUNES,
-	PROPS_IS_UPDATED
+	PROPS_IS_UPDATED,
+	PROPS_IS_BINDABLE
 } from '../../../../constants.js';
 import { dev } from '../../../state.js';
 import { get_value } from './visitors/shared/declarations.js';
@@ -168,6 +169,10 @@ export function get_prop_source(binding, state, name, initial) {
 
 	let flags = 0;
 
+	if (binding.kind === 'bindable_prop') {
+		flags |= PROPS_IS_BINDABLE;
+	}
+
 	if (state.analysis.immutable) {
 		flags |= PROPS_IS_IMMUTABLE;
 	}

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

@@ -99,6 +99,7 @@ export function build_assignment(operator, left, right, context) {
 		if (
 			!is_primitive &&
 			binding.kind !== 'prop' &&
+			binding.kind !== 'bindable_prop' &&
 			context.state.analysis.runes &&
 			should_proxy(value, context.state.scope)
 		) {

packages/svelte/src/constants.js

@@ -10,7 +10,8 @@ export const EACH_ITEM_IMMUTABLE = 1 << 5;
 export const PROPS_IS_IMMUTABLE = 1;
 export const PROPS_IS_RUNES = 1 << 1;
 export const PROPS_IS_UPDATED = 1 << 2;
-export const PROPS_IS_LAZY_INITIAL = 1 << 3;
+export const PROPS_IS_BINDABLE = 1 << 3;
+export const PROPS_IS_LAZY_INITIAL = 1 << 4;
 
 export const TRANSITION_IN = 1;
 export const TRANSITION_OUT = 1 << 1;

packages/svelte/src/internal/client/reactivity/props.js

@@ -1,6 +1,7 @@
 /** @import { Source } from './types.js' */
 import { DEV } from 'esm-env';
 import {
+	PROPS_IS_BINDABLE,
 	PROPS_IS_IMMUTABLE,
 	PROPS_IS_LAZY_INITIAL,
 	PROPS_IS_RUNES,
@@ -13,6 +14,7 @@ import { get, is_signals_recorded, untrack, update } from '../runtime.js';
 import { safe_equals } from './equality.js';
 import * as e from '../errors.js';
 import { LEGACY_DERIVED_PROP } from '../constants.js';
+import { proxy } from '../proxy.js';
 
 /**
  * @param {((value?: number) => number)} fn
@@ -228,6 +230,7 @@ export function spread_props(...props) {
 export function prop(props, key, flags, fallback) {
 	var immutable = (flags & PROPS_IS_IMMUTABLE) !== 0;
 	var runes = (flags & PROPS_IS_RUNES) !== 0;
+	var bindable = (flags & PROPS_IS_BINDABLE) !== 0;
 	var lazy = (flags & PROPS_IS_LAZY_INITIAL) !== 0;
 
 	var prop_value = /** @type {V} */ (props[key]);
@@ -343,7 +346,7 @@ export function prop(props, key, flags, fallback) {
 		}
 
 		if (arguments.length > 0) {
-			const new_value = mutation ? get(current_value) : value;
+			const new_value = mutation ? get(current_value) : bindable ? proxy(value) : value;
 
 			if (!current_value.equals(new_value)) {
 				from_child = true;

packages/svelte/tests/runtime-runes/samples/state-raw-bindable/Child.svelte

@@ -0,0 +1,6 @@
+<script>
+	let { object = $bindable() } = $props();
+</script>
+
+<button onclick={() => (object = { count: object.count + 1 })}>reassign</button>
+<button onclick={() => (object.count += 1)}>mutate</button>

packages/svelte/tests/runtime-runes/samples/state-raw-bindable/_config.js

@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	html: '<button>reassign</button> <button>mutate</button> <p>0</p>',
+	test({ assert, target }) {
+		const [reassign, mutate] = target.querySelectorAll('button');
+		const output = target.querySelector('p');
+		ok(output);
+
+		flushSync(() => mutate.click());
+		assert.htmlEqual(output.innerHTML, '0');
+
+		flushSync(() => reassign.click());
+		assert.htmlEqual(output.innerHTML, '2');
+
+		flushSync(() => mutate.click());
+		assert.htmlEqual(output.innerHTML, '2');
+	}
+});

packages/svelte/tests/runtime-runes/samples/state-raw-bindable/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Child from './Child.svelte';
+
+	let object = $state.raw({ count: 0 });
+</script>
+
+<Child bind:object />
+<p>{object.count}</p>