fix: add options to $state.raw in classes

Author: paoloricciuti

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

@@ -131,7 +131,7 @@ export function ClassBody(node, context) {
 								? b.call('$.assignable_proxy', init, options)
 								: b.call('$.state', init, options)
 							: field.kind === 'raw_state'
-								? b.call('$.state', init)
+								? b.call('$.state', init, options)
 								: field.kind === 'derived_by'
 									? b.call('$.derived', init)
 									: b.call('$.derived', b.thunk(init));

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

@@ -0,0 +1,58 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn, btn2, btn3, btn4, btn5, btn6, btn7, btn8, btn9, btn10] =
+			target.querySelectorAll('button');
+		flushSync(() => {
+			btn.click();
+		});
+		assert.deepEqual(logs, ['count']);
+
+		flushSync(() => {
+			btn2.click();
+		});
+		assert.deepEqual(logs, ['count']);
+
+		flushSync(() => {
+			btn3.click();
+		});
+		assert.deepEqual(logs, ['count', 'proxy']);
+
+		flushSync(() => {
+			btn4.click();
+		});
+		assert.deepEqual(logs, ['count', 'proxy', 'class count']);
+
+		flushSync(() => {
+			btn5.click();
+		});
+		assert.deepEqual(logs, ['count', 'proxy', 'class count']);
+
+		flushSync(() => {
+			btn6.click();
+		});
+		assert.deepEqual(logs, ['count', 'proxy', 'class count', 'class proxy']);
+
+		flushSync(() => {
+			btn7.click();
+		});
+		assert.deepEqual(logs, ['count', 'proxy', 'class count', 'class proxy']);
+
+		flushSync(() => {
+			btn8.click();
+		});
+		assert.deepEqual(logs, ['count', 'proxy', 'class count', 'class proxy']);
+
+		flushSync(() => {
+			btn9.click();
+		});
+		assert.deepEqual(logs, ['count', 'proxy', 'class count', 'class proxy']);
+
+		flushSync(() => {
+			btn10.click();
+		});
+		assert.deepEqual(logs, ['count', 'proxy', 'class count', 'class proxy', 'arr']);
+	}
+});

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

@@ -0,0 +1,47 @@
+<script>
+	let count = $state.raw(0, {
+		onchange(){
+			console.log("count");
+		}
+	})
+
+	let proxy = $state.raw({count: 0}, {
+		onchange(){
+			console.log("proxy");
+		}
+	})
+
+	class Test{
+		count = $state.raw(0, {
+			onchange(){
+				console.log("class count");
+			}
+		})
+		proxy = $state.raw({count: 0}, {
+			onchange(){
+				console.log("class proxy");
+			}
+		})
+	}
+
+	const class_test = new Test();
+
+	let arr = $state.raw([0,1,2], {
+		onchange(){
+			console.log("arr");
+		}
+	})
+</script>
+
+<button onclick={()=> count++}>{count}</button>
+<button onclick={()=> proxy.count++}>{proxy.count}</button>
+<button onclick={()=> proxy = {count: proxy.count+1}}>{proxy.count}</button>
+
+<button onclick={()=> class_test.count++}>{class_test.count}</button>
+<button onclick={()=> class_test.proxy.count++}>{class_test.proxy.count}</button>
+<button onclick={()=> class_test.proxy = {count: class_test.proxy.count+1}}>{class_test.proxy.count}</button>
+
+<button onclick={()=> arr.push(arr.length)}>push</button>
+<button onclick={()=>arr.splice(0, 2)}>splice</button>
+<button onclick={()=>arr.sort((a,b)=>b-a)}>sort</button>
+<button onclick={()=>arr = []}>assign</button>