tests

packages/svelte/tests/runtime-runes/samples/magic-deep/_config.js

@@ -0,0 +1,39 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>1</button>
+		<button>double</button>
+	`,
+
+	async test({ assert, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		await btn1?.click();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>2</button>
+				<button>double</button>
+			`
+		);
+
+		await btn2?.click();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>4</button>
+				<button>double</button>
+			`
+		);
+
+		await btn1?.click();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>5</button>
+				<button>double</button>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/magic-deep/main.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { magic } from 'svelte';
+
+	const object = magic({
+		foo: {
+			bar: {
+				baz: 1
+			}
+		}
+	});
+</script>
+
+<button onclick={() => object.foo.bar.baz += 1}>
+	{object.foo.bar.baz}
+</button>
+
+<button onclick={() => object.foo.bar = { baz: object.foo.bar.baz * 2 }}>
+	double
+</button>

packages/svelte/tests/runtime-runes/samples/magic/_config.js

@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<button>clicks: 0</button>`,
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+		await btn?.click();
+
+		assert.htmlEqual(target.innerHTML, `<button>clicks: 1</button>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/magic/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { magic } from 'svelte';
+
+	const object = magic({ count: 0 });
+</script>
+
+<button onclick={() => object.count += 1}>
+	clicks: {object.count}
+</button>