test

packages/svelte/tests/runtime-runes/samples/mount-props-updates/_config.js

@@ -0,0 +1,40 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>reset</button>
+			<div><button>update</button> foo bar baz buz</div>
+			<div><button>update</button> foo bar baz buz</div>
+			`
+		);
+
+		const [btn1, btn2, btn3] = target.querySelectorAll('button');
+
+		btn2.click();
+		btn3.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>reset</button>
+			<div><button>update</button> 1 2 3 4</div>
+			<div><button>update</button> 1 2 3 4</div>
+			`
+		);
+
+		btn1.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>reset</button>
+			<div><button>update</button> foo bar baz buz</div>
+			<div><button>update</button> foo bar baz buz</div>
+				`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/mount-props-updates/component.svelte

@@ -0,0 +1,17 @@
+<script>
+	let { foo, bar = 'bar', baz = $bindable(), buz = $bindable('buz') } = $props();
+</script>
+
+<button
+	onclick={() => {
+		foo = '1';
+		bar = '2';
+		baz = '3';
+		buz = '4';
+	}}>update</button
+>
+
+{foo}
+{bar}
+{baz}
+{buz}

packages/svelte/tests/runtime-runes/samples/mount-props-updates/main.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { createClassComponent } from 'svelte/legacy';
+	import Component from './component.svelte';
+	import { mount, onMount } from 'svelte';
+
+	let div1, div2;
+	let legacy;
+	const props = $state({ foo: 'foo', baz: 'baz' });
+
+	onMount(() => {
+		legacy = createClassComponent({
+			component: Component,
+			target: div1,
+			props: { foo: 'foo', baz: 'baz' }
+		});
+		mount(Component, { target: div2, props });
+	});
+</script>
+
+<button
+	onclick={() => {
+		legacy.$set({ foo: 'foo', bar: 'bar', baz: 'baz', buz: 'buz' });
+		props.foo = 'foo';
+		props.bar = 'bar';
+		props.baz = 'baz';
+		props.buz = 'buz';
+	}}>reset</button
+>
+<div bind:this={div1}></div>
+<div bind:this={div2}></div>