From 3e222fca39f4c0ba84dfe3130176dc38149a2bf1 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Mon, 9 Dec 2024 22:46:05 +0000
Subject: [PATCH 01/12] feat: add state.opqaue rune

---
 .changeset/large-papayas-serve.md             |  5 +++
 .../98-reference/.generated/compile-errors.md |  6 +++
 .../svelte/messages/compile-errors/script.md  |  4 ++
 packages/svelte/src/ambient.d.ts              | 29 ++++++++++++++
 packages/svelte/src/compiler/errors.js        |  9 +++++
 .../2-analyze/visitors/CallExpression.js      | 15 +++++++-
 .../2-analyze/visitors/VariableDeclarator.js  | 18 ++++++---
 .../client/visitors/VariableDeclaration.js    | 16 +++++++-
 .../client/visitors/shared/declarations.js    | 12 +++++-
 .../server/visitors/VariableDeclaration.js    | 13 ++++++-
 packages/svelte/src/compiler/types/index.d.ts |  1 +
 packages/svelte/src/internal/client/index.js  |  2 +-
 .../internal/client/reactivity/equality.js    |  4 ++
 .../src/internal/client/reactivity/sources.js | 13 ++++++-
 packages/svelte/src/utils.js                  |  1 +
 .../samples/opaque-state/_config.js           | 38 +++++++++++++++++++
 .../samples/opaque-state/main.svelte          | 19 ++++++++++
 packages/svelte/types/index.d.ts              | 29 ++++++++++++++
 18 files changed, 222 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/large-papayas-serve.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/opaque-state/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/opaque-state/main.svelte

diff --git a/.changeset/large-papayas-serve.md b/.changeset/large-papayas-serve.md
new file mode 100644
index 000000000000..383c649c6238
--- /dev/null
+++ b/.changeset/large-papayas-serve.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: add $state.opqaue rune
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index 3bd162d8d74d..180579db450e 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -748,6 +748,12 @@ This snippet is shadowing the prop `%prop%` with the same name
 Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
 ```
 
+### state_invalid_opaque_declaration
+
+```
+`$state.opaque` must be declared with an array destructuring pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
+```
+
 ### state_invalid_placement
 
 ```
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index 69007bfb5919..f616918c9f7a 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -168,6 +168,10 @@ It's possible to export a snippet from a `<script module>` block, but only if it
 
 > Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
 
+## state_invalid_opaque_declaration
+
+> `$state.opaque` must be declared with an array destructuring pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
+
 ## state_invalid_placement
 
 > `%rune%(...)` can only be used as a variable declaration initializer or a class field
diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
index fe87e446d602..5200d386e69e 100644
--- a/packages/svelte/src/ambient.d.ts
+++ b/packages/svelte/src/ambient.d.ts
@@ -118,6 +118,35 @@ declare namespace $state {
 	 */
 	export function raw<T>(initial: T): T;
 	export function raw<T>(): T | undefined;
+
+	/**
+	 * Declares state that is _not_ known to Svelte and thus is completely opaque to
+	 * reassignments and mutations. To let Svelte know that the value has changed,
+	 * you must invoke its invalidate function manually.
+	 *
+	 * Example:
+	 * ```ts
+	 * <script>
+	 *   let [items, invalidate] = $state.opaque([0]);
+	 *
+	 *   const addItem = () => {
+	 *     items.push(items.length);
+	 *     invalidate();
+	 *   };
+	 * </script>
+	 *
+	 * <button on:click={addItem}>
+	 *   {items.join(', ')}
+	 * </button>
+	 * ```
+	 *
+	 * https://svelte.dev/docs/svelte/$state#$state.opaque
+	 *
+	 * @param initial The initial value
+	 */
+	export function opaque<T>(initial: T): [T, () => void];
+	export function opaque<T>(): [T | undefined, () => void];
+
 	/**
 	 * To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
 	 *
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 901ea1983ea7..5f2a77a40eac 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -432,6 +432,15 @@ export function state_invalid_export(node) {
 	e(node, "state_invalid_export", "Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties");
 }
 
+/**
+ * `$state.opaque` must be declared with an array destructuring pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function state_invalid_opaque_declaration(node) {
+	e(node, "state_invalid_opaque_declaration", "`$state.opaque` must be declared with an array destructuring pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)");
+}
+
 /**
  * `%rune%(...)` can only be used as a variable declaration initializer or a class field
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
index c7ade4856bcb..b669441cb587 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -75,6 +75,7 @@ export function CallExpression(node, context) {
 
 		case '$state':
 		case '$state.raw':
+		case '$state.opaque':
 		case '$derived':
 		case '$derived.by':
 			if (
@@ -86,9 +87,21 @@ export function CallExpression(node, context) {
 
 			if ((rune === '$derived' || rune === '$derived.by') && node.arguments.length !== 1) {
 				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
-			} else if (rune === '$state' && node.arguments.length > 1) {
+			} else if (
+				(rune === '$state' || rune === '$state.raw' || rune === '$state.opaque') &&
+				node.arguments.length > 1
+			) {
 				e.rune_invalid_arguments_length(node, rune, 'zero or one arguments');
 			}
+			if (
+				rune === '$state.opaque' &&
+				(parent.type !== 'VariableDeclarator' ||
+					parent.id.type !== 'ArrayPattern' ||
+					parent.id.elements.length !== 2 ||
+					parent.id.elements[0]?.type !== 'Identifier')
+			) {
+				e.state_invalid_opaque_declaration(node);
+			}
 
 			break;
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
index a7d08d315d8f..e2d8bd8986fa 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
@@ -27,11 +27,15 @@ export function VariableDeclarator(node, context) {
 		if (
 			rune === '$state' ||
 			rune === '$state.raw' ||
+			rune === '$state.opaque' ||
 			rune === '$derived' ||
 			rune === '$derived.by' ||
 			rune === '$props'
 		) {
-			for (const path of paths) {
+			for (let i = 0; i < paths.length; i++) {
+				if (rune === '$state.opaque' && i === 1) continue;
+
+				const path = paths[i];
 				// @ts-ignore this fails in CI for some insane reason
 				const binding = /** @type {Binding} */ (context.state.scope.get(path.node.name));
 				binding.kind =
@@ -39,11 +43,13 @@ export function VariableDeclarator(node, context) {
 						? 'state'
 						: rune === '$state.raw'
 							? 'raw_state'
-							: rune === '$derived' || rune === '$derived.by'
-								? 'derived'
-								: path.is_rest
-									? 'rest_prop'
-									: 'prop';
+							: rune === '$state.opaque'
+								? 'opaque_state'
+								: rune === '$derived' || rune === '$derived.by'
+									? 'derived'
+									: path.is_rest
+										? 'rest_prop'
+										: 'prop';
 			}
 		}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index 04685b66bd0c..331dff952e6e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -1,4 +1,4 @@
-/** @import { CallExpression, Expression, Identifier, Literal, VariableDeclaration, VariableDeclarator } from 'estree' */
+/** @import { ArrayPattern, CallExpression, Expression, Identifier, Literal, VariableDeclaration, VariableDeclarator } from 'estree' */
 /** @import { Binding } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 import { dev } from '../../../../state.js';
@@ -156,6 +156,20 @@ export function VariableDeclaration(node, context) {
 				continue;
 			}
 
+			if (rune === '$state.opaque') {
+				const pattern = /** @type {ArrayPattern} */ (declarator.id);
+				const state_id = /** @type {Identifier} */ (pattern.elements[0]);
+				const invalidation_id = /** @type {Identifier} */ (pattern.elements[1]);
+				declarations.push(
+					b.declarator(state_id, b.call('$.opaque_state', value)),
+					b.declarator(
+						invalidation_id,
+						b.thunk(b.call('$.set', state_id, b.member(state_id, b.id('v'))))
+					)
+				);
+				continue;
+			}
+
 			if (rune === '$derived' || rune === '$derived.by') {
 				if (declarator.id.type === 'Identifier') {
 					declarations.push(
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
index 0bd8c352f6a9..759c2fa91c5e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
@@ -1,4 +1,4 @@
-/** @import { Identifier } from 'estree' */
+/** @import { Expression, Identifier } from 'estree' */
 /** @import { ComponentContext, Context } from '../../types' */
 import { is_state_source } from '../../utils.js';
 import * as b from '../../../../../utils/builders.js';
@@ -48,6 +48,16 @@ export function add_state_transformers(context) {
 					);
 				}
 			};
+		} else if (binding.kind === 'opaque_state') {
+			context.state.transform[name] = {
+				read: binding.declaration_kind === 'var' ? (node) => b.call('$.safe_get', node) : get_value,
+				assign: (node, value) => {
+					return b.assignment('=', b.member(node, b.id('v')), /** @type {Expression} */ (value));
+				},
+				update: (node) => {
+					return b.update(node.operator, b.member(node.argument, b.id('v')), node.prefix);
+				}
+			};
 		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
index 31de811ac76f..889fffd31a97 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
@@ -1,4 +1,4 @@
-/** @import { VariableDeclaration, VariableDeclarator, Expression, CallExpression, Pattern, Identifier } from 'estree' */
+/** @import { ArrayPattern, VariableDeclaration, VariableDeclarator, Expression, CallExpression, Pattern, Identifier } from 'estree' */
 /** @import { Binding } from '#compiler' */
 /** @import { Context } from '../types.js' */
 /** @import { Scope } from '../../../scope.js' */
@@ -92,6 +92,17 @@ export function VariableDeclaration(node, context) {
 				continue;
 			}
 
+			if (rune === '$state.opaque') {
+				const pattern = /** @type {ArrayPattern} */ (declarator.id);
+				const state_id = /** @type {Identifier} */ (pattern.elements[0]);
+				const invalidation_id = /** @type {Identifier} */ (pattern.elements[1]);
+				declarations.push(
+					b.declarator(state_id, value),
+					b.declarator(invalidation_id, b.thunk(b.block([])))
+				);
+				continue;
+			}
+
 			declarations.push(...create_state_declarators(declarator, context.state.scope, value));
 		}
 	} else {
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index fe306bd020e1..89359eb3414d 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -274,6 +274,7 @@ export interface Binding {
 		| 'rest_prop'
 		| 'state'
 		| 'raw_state'
+		| 'opaque_state'
 		| 'derived'
 		| 'each'
 		| 'snippet'
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index b706e52a5378..e5be80d50801 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -108,7 +108,7 @@ export {
 	user_effect,
 	user_pre_effect
 } from './reactivity/effects.js';
-export { mutable_state, mutate, set, state } from './reactivity/sources.js';
+export { mutable_state, mutate, set, state, opaque_state } from './reactivity/sources.js';
 export {
 	prop,
 	rest_props,
diff --git a/packages/svelte/src/internal/client/reactivity/equality.js b/packages/svelte/src/internal/client/reactivity/equality.js
index 37a9994ab8cc..929d4cbc54b7 100644
--- a/packages/svelte/src/internal/client/reactivity/equality.js
+++ b/packages/svelte/src/internal/client/reactivity/equality.js
@@ -28,3 +28,7 @@ export function not_equal(a, b) {
 export function safe_equals(value) {
 	return !safe_not_equal(value, this.v);
 }
+
+export function opaque_equals() {
+	return false;
+}
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 4bbd470d08c8..f9b54853ec04 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -20,7 +20,7 @@ import {
 	set_is_flushing_effect,
 	is_flushing_effect
 } from '../runtime.js';
-import { equals, safe_equals } from './equality.js';
+import { equals, opaque_equals, safe_equals } from './equality.js';
 import {
 	CLEAN,
 	DERIVED,
@@ -88,6 +88,17 @@ export function mutable_source(initial_value, immutable = false) {
 	return s;
 }
 
+/**
+ * @template V
+ * @param {V} v
+ * @returns {Source<V>}
+ */
+export function opaque_state(v) {
+	var s = source(v);
+	s.equals = opaque_equals;
+	return push_derived_source(s);
+}
+
 /**
  * @template V
  * @param {V} v
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index 75171c17865a..1144717b3dee 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -420,6 +420,7 @@ export function is_mathml(name) {
 const RUNES = /** @type {const} */ ([
 	'$state',
 	'$state.raw',
+	'$state.opaque',
 	'$state.snapshot',
 	'$props',
 	'$bindable',
diff --git a/packages/svelte/tests/runtime-runes/samples/opaque-state/_config.js b/packages/svelte/tests/runtime-runes/samples/opaque-state/_config.js
new file mode 100644
index 000000000000..77c0fd0aa8ec
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/opaque-state/_config.js
@@ -0,0 +1,38 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { assert_ok } from '../../../suite';
+
+export default test({
+	html: `<button>+</button><button>invalidate</button><div>0</div><div>0</div><input>`,
+	ssrHtml: `<button>+</button><button>invalidate</button><div>0</div><div>0</div><input value="0">`,
+
+	test({ assert, target }) {
+		const [b1, b2] = target.querySelectorAll('button');
+		const input = target.querySelector('input');
+		assert_ok(input);
+
+		b1?.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>+</button><button>invalidate</button><div>0</div><div>0</div><input>`
+		);
+		assert.equal(input.value, '0');
+
+		b2?.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>+</button><button>invalidate</button><div>1</div><div>1</div><input>`
+		);
+		assert.equal(input.value, '1');
+
+		input.value = '2';
+		input.dispatchEvent(new window.Event('input'));
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>+</button><button>invalidate</button><div>1</div><div>1</div><input>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/opaque-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/opaque-state/main.svelte
new file mode 100644
index 000000000000..54016cefce3b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/opaque-state/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let [count, invalidate_count] = $state.opaque(0);
+	let [value, invalidate_value] = $state.opaque({ count: 0 });
+</script>
+
+<button onclick={() => {
+	count++
+	value.count++
+}}>+</button>
+
+<button onclick={() => {
+	invalidate_count();
+	invalidate_value();
+}}>invalidate</button>
+
+<div>{count}</div>
+<div>{value.count}</div>
+
+<input bind:value={count}>
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 0d761919a8e0..c1c8f5654ddf 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2665,6 +2665,35 @@ declare namespace $state {
 	 */
 	export function raw<T>(initial: T): T;
 	export function raw<T>(): T | undefined;
+
+	/**
+	 * Declares state that is _not_ known to Svelte and thus is completely opaque to
+	 * reassignments and mutations. To let Svelte know that the value has changed,
+	 * you must invoke its invalidate function manually.
+	 *
+	 * Example:
+	 * ```ts
+	 * <script>
+	 *   let [items, invalidate] = $state.opaque([0]);
+	 *
+	 *   const addItem = () => {
+	 *     items.push(items.length);
+	 *     invalidate();
+	 *   };
+	 * </script>
+	 *
+	 * <button on:click={addItem}>
+	 *   {items.join(', ')}
+	 * </button>
+	 * ```
+	 *
+	 * https://svelte.dev/docs/svelte/$state#$state.opaque
+	 *
+	 * @param initial The initial value
+	 */
+	export function opaque<T>(initial: T): [T, () => void];
+	export function opaque<T>(): [T | undefined, () => void];
+
 	/**
 	 * To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
 	 *

From 9a8b448899c2e9f0c4b2b5af1c0ad6528a37ce53 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Mon, 9 Dec 2024 22:53:31 +0000
Subject: [PATCH 02/12] typo

---
 .changeset/large-papayas-serve.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/large-papayas-serve.md b/.changeset/large-papayas-serve.md
index 383c649c6238..f4885eda88d9 100644
--- a/.changeset/large-papayas-serve.md
+++ b/.changeset/large-papayas-serve.md
@@ -2,4 +2,4 @@
 'svelte': minor
 ---
 
-feat: add $state.opqaue rune
+feat: adds $state.opaque rune

From 409bebc1b5dc4a5864bb48c2bbc89a31409d33b1 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Mon, 9 Dec 2024 23:01:16 +0000
Subject: [PATCH 03/12] lint

---
 .../docs/98-reference/.generated/compile-errors.md         | 2 +-
 packages/svelte/messages/compile-errors/script.md          | 2 +-
 packages/svelte/src/compiler/errors.js                     | 7 ++++---
 .../compiler/phases/2-analyze/visitors/CallExpression.js   | 2 +-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index 180579db450e..7509f0db632a 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -751,7 +751,7 @@ Cannot export state from a module if it is reassigned. Either export a function
 ### state_invalid_opaque_declaration
 
 ```
-`$state.opaque` must be declared with an array destructuring pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
+`%rune%(...)` must be declared with an array destructuring pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
 ```
 
 ### state_invalid_placement
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index f616918c9f7a..e5f59612acff 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -170,7 +170,7 @@ It's possible to export a snippet from a `<script module>` block, but only if it
 
 ## state_invalid_opaque_declaration
 
-> `$state.opaque` must be declared with an array destructuring pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
+> `%rune%(...)` must be declared with an array destructuring pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
 
 ## state_invalid_placement
 
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 5f2a77a40eac..35e4cdef3624 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -433,12 +433,13 @@ export function state_invalid_export(node) {
 }
 
 /**
- * `$state.opaque` must be declared with an array destructuring pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
+ * `%rune%(...)` must be declared with an array destructuring pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
  * @param {null | number | NodeLike} node
+ * @param {string} rune
  * @returns {never}
  */
-export function state_invalid_opaque_declaration(node) {
-	e(node, "state_invalid_opaque_declaration", "`$state.opaque` must be declared with an array destructuring pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)");
+export function state_invalid_opaque_declaration(node, rune) {
+	e(node, "state_invalid_opaque_declaration", `\`${rune}(...)\` must be declared with an array destructuring pattern (e.g. \`let [state, invalidate] = $state.opaque(data);\`)`);
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
index b669441cb587..a6ba1254da8f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -100,7 +100,7 @@ export function CallExpression(node, context) {
 					parent.id.elements.length !== 2 ||
 					parent.id.elements[0]?.type !== 'Identifier')
 			) {
-				e.state_invalid_opaque_declaration(node);
+				e.state_invalid_opaque_declaration(node, rune);
 			}
 
 			break;

From 1898483de7355f3c785419476e8c69da54f49b8a Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Mon, 9 Dec 2024 23:14:42 +0000
Subject: [PATCH 04/12] lint

---
 .../docs/98-reference/.generated/compile-errors.md         | 2 +-
 packages/svelte/messages/compile-errors/script.md          | 2 +-
 packages/svelte/src/compiler/errors.js                     | 7 +++----
 .../compiler/phases/2-analyze/visitors/CallExpression.js   | 2 +-
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index 7509f0db632a..474534709821 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -751,7 +751,7 @@ Cannot export state from a module if it is reassigned. Either export a function
 ### state_invalid_opaque_declaration
 
 ```
-`%rune%(...)` must be declared with an array destructuring pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
+`$state.opaque(...)` must be declared with an destructured array pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
 ```
 
 ### state_invalid_placement
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index e5f59612acff..0a5df124dc13 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -170,7 +170,7 @@ It's possible to export a snippet from a `<script module>` block, but only if it
 
 ## state_invalid_opaque_declaration
 
-> `%rune%(...)` must be declared with an array destructuring pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
+> `$state.opaque(...)` must be declared with an destructured array pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
 
 ## state_invalid_placement
 
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 35e4cdef3624..8f2918c2c0ec 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -433,13 +433,12 @@ export function state_invalid_export(node) {
 }
 
 /**
- * `%rune%(...)` must be declared with an array destructuring pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
+ * `$state.opaque(...)` must be declared with an destructured array pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
  * @param {null | number | NodeLike} node
- * @param {string} rune
  * @returns {never}
  */
-export function state_invalid_opaque_declaration(node, rune) {
-	e(node, "state_invalid_opaque_declaration", `\`${rune}(...)\` must be declared with an array destructuring pattern (e.g. \`let [state, invalidate] = $state.opaque(data);\`)`);
+export function state_invalid_opaque_declaration(node) {
+	e(node, "state_invalid_opaque_declaration", "`$state.opaque(...)` must be declared with an destructured array pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)");
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
index a6ba1254da8f..b669441cb587 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -100,7 +100,7 @@ export function CallExpression(node, context) {
 					parent.id.elements.length !== 2 ||
 					parent.id.elements[0]?.type !== 'Identifier')
 			) {
-				e.state_invalid_opaque_declaration(node, rune);
+				e.state_invalid_opaque_declaration(node);
 			}
 
 			break;

From 1070039ea22759795119d5279b8ec04ead0c7f26 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Mon, 9 Dec 2024 23:19:31 +0000
Subject: [PATCH 05/12] lint

---
 documentation/docs/98-reference/.generated/compile-errors.md | 4 +++-
 packages/svelte/messages/compile-errors/script.md            | 4 +++-
 packages/svelte/src/compiler/errors.js                       | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index 474534709821..e082c85ff013 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -751,9 +751,11 @@ Cannot export state from a module if it is reassigned. Either export a function
 ### state_invalid_opaque_declaration
 
 ```
-`$state.opaque(...)` must be declared with an destructured array pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
+`$state.opaque(...)` must be declared with an destructured array pattern and the state expression must be an identifier.
 ```
 
+For example: `let [state, invalidate] = $state.opaque(data);`
+
 ### state_invalid_placement
 
 ```
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index 0a5df124dc13..174eff1d24a5 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -170,7 +170,9 @@ It's possible to export a snippet from a `<script module>` block, but only if it
 
 ## state_invalid_opaque_declaration
 
-> `$state.opaque(...)` must be declared with an destructured array pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
+> `$state.opaque(...)` must be declared with an destructured array pattern and the state expression must be an identifier.
+
+For example: `let [state, invalidate] = $state.opaque(data);`
 
 ## state_invalid_placement
 
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 8f2918c2c0ec..7332c0ac6016 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -433,12 +433,12 @@ export function state_invalid_export(node) {
 }
 
 /**
- * `$state.opaque(...)` must be declared with an destructured array pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)
+ * `$state.opaque(...)` must be declared with an destructured array pattern and the state expression must be an identifier.
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function state_invalid_opaque_declaration(node) {
-	e(node, "state_invalid_opaque_declaration", "`$state.opaque(...)` must be declared with an destructured array pattern (e.g. `let [state, invalidate] = $state.opaque(data);`)");
+	e(node, "state_invalid_opaque_declaration", "`$state.opaque(...)` must be declared with an destructured array pattern and the state expression must be an identifier.");
 }
 
 /**

From 84a34aeff53c0a5fadd7f05a66cfb02adcc596d2 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Mon, 9 Dec 2024 23:20:15 +0000
Subject: [PATCH 06/12] lint

---
 packages/svelte/messages/compile-errors/script.md              | 2 +-
 .../src/compiler/phases/2-analyze/visitors/CallExpression.js   | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index 174eff1d24a5..8c168cae8c59 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -170,7 +170,7 @@ It's possible to export a snippet from a `<script module>` block, but only if it
 
 ## state_invalid_opaque_declaration
 
-> `$state.opaque(...)` must be declared with an destructured array pattern and the state expression must be an identifier.
+> `$state.opaque(...)` must be declared with an destructured array pattern and the state expression and invalidation expression must be an identifier.
 
 For example: `let [state, invalidate] = $state.opaque(data);`
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
index b669441cb587..d7e26c9e53ab 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -98,7 +98,8 @@ export function CallExpression(node, context) {
 				(parent.type !== 'VariableDeclarator' ||
 					parent.id.type !== 'ArrayPattern' ||
 					parent.id.elements.length !== 2 ||
-					parent.id.elements[0]?.type !== 'Identifier')
+					parent.id.elements[0]?.type !== 'Identifier' ||
+					parent.id.elements[1]?.type !== 'Identifier')
 			) {
 				e.state_invalid_opaque_declaration(node);
 			}

From e319adda01350b928fc41d30f71e0d708b6f5be7 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Mon, 9 Dec 2024 23:20:33 +0000
Subject: [PATCH 07/12] lint

---
 documentation/docs/98-reference/.generated/compile-errors.md | 2 +-
 packages/svelte/src/compiler/errors.js                       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index e082c85ff013..bfc35fb8d9cd 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -751,7 +751,7 @@ Cannot export state from a module if it is reassigned. Either export a function
 ### state_invalid_opaque_declaration
 
 ```
-`$state.opaque(...)` must be declared with an destructured array pattern and the state expression must be an identifier.
+`$state.opaque(...)` must be declared with an destructured array pattern and the state expression and invalidation expression must be an identifier.
 ```
 
 For example: `let [state, invalidate] = $state.opaque(data);`
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 7332c0ac6016..4534fbe7eee8 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -433,12 +433,12 @@ export function state_invalid_export(node) {
 }
 
 /**
- * `$state.opaque(...)` must be declared with an destructured array pattern and the state expression must be an identifier.
+ * `$state.opaque(...)` must be declared with an destructured array pattern and the state expression and invalidation expression must be an identifier.
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function state_invalid_opaque_declaration(node) {
-	e(node, "state_invalid_opaque_declaration", "`$state.opaque(...)` must be declared with an destructured array pattern and the state expression must be an identifier.");
+	e(node, "state_invalid_opaque_declaration", "`$state.opaque(...)` must be declared with an destructured array pattern and the state expression and invalidation expression must be an identifier.");
 }
 
 /**

From 0e9eca38ed8be7dfb0f5155a4d3f2384a3bd8fc4 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Mon, 9 Dec 2024 23:28:53 +0000
Subject: [PATCH 08/12] lint

---
 documentation/docs/98-reference/.generated/compile-errors.md | 4 +---
 packages/svelte/messages/compile-errors/script.md            | 4 +---
 packages/svelte/src/compiler/errors.js                       | 4 ++--
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index bfc35fb8d9cd..0340e9d11045 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -751,11 +751,9 @@ Cannot export state from a module if it is reassigned. Either export a function
 ### state_invalid_opaque_declaration
 
 ```
-`$state.opaque(...)` must be declared with an destructured array pattern and the state expression and invalidation expression must be an identifier.
+`$state.opaque(...)` must be declared with an destructured array pattern and the state expression and invalidate expression must be an identifier (e.g. `let [state, invalidate] = $state.opaque(data);`)
 ```
 
-For example: `let [state, invalidate] = $state.opaque(data);`
-
 ### state_invalid_placement
 
 ```
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index 8c168cae8c59..c2a21629b6f2 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -170,9 +170,7 @@ It's possible to export a snippet from a `<script module>` block, but only if it
 
 ## state_invalid_opaque_declaration
 
-> `$state.opaque(...)` must be declared with an destructured array pattern and the state expression and invalidation expression must be an identifier.
-
-For example: `let [state, invalidate] = $state.opaque(data);`
+> `$state.opaque(...)` must be declared with an destructured array pattern and the state expression and invalidate expression must be an identifier (e.g. `let [state, invalidate] = $state.opaque(data);`)
 
 ## state_invalid_placement
 
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 4534fbe7eee8..d77886d816c5 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -433,12 +433,12 @@ export function state_invalid_export(node) {
 }
 
 /**
- * `$state.opaque(...)` must be declared with an destructured array pattern and the state expression and invalidation expression must be an identifier.
+ * `$state.opaque(...)` must be declared with an destructured array pattern and the state expression and invalidate expression must be an identifier (e.g. `let [state, invalidate] = $state.opaque(data);`)
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function state_invalid_opaque_declaration(node) {
-	e(node, "state_invalid_opaque_declaration", "`$state.opaque(...)` must be declared with an destructured array pattern and the state expression and invalidation expression must be an identifier.");
+	e(node, "state_invalid_opaque_declaration", "`$state.opaque(...)` must be declared with an destructured array pattern and the state expression and invalidate expression must be an identifier (e.g. `let [state, invalidate] = $state.opaque(data);`)");
 }
 
 /**

From 8b38272f0e67f7bd6927dcf653fca6ca83b3dd56 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Mon, 9 Dec 2024 23:29:42 +0000
Subject: [PATCH 09/12] lint

---
 packages/svelte/src/compiler/errors.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 3eb479444ab5..7c882093ed69 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -438,7 +438,7 @@ export function state_invalid_export(node) {
  * @returns {never}
  */
 export function state_invalid_opaque_declaration(node) {
-	e(node, "state_invalid_opaque_declaration", "`$state.opaque(...)` must be declared with an destructured array pattern and the state expression and invalidate expression must be an identifier (e.g. `let [state, invalidate] = $state.opaque(data);`)");
+	e(node, "state_invalid_opaque_declaration", `\`$state.opaque(...)\` must be declared with an destructured array pattern and the state expression and invalidate expression must be an identifier (e.g. \`let [state, invalidate] = $state.opaque(data);\`)\nhttps://svelte.dev/e/state_invalid_opaque_declaration`);
 }
 
 /**

From abe01a76e9b185716277b159dc80b13b38e7b824 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Fri, 13 Dec 2024 15:59:42 +0000
Subject: [PATCH 10/12] add invalidate fn

---
 packages/svelte/src/ambient.d.ts               |  4 ++--
 .../client/visitors/VariableDeclaration.js     |  8 +++++++-
 .../server/visitors/VariableDeclaration.js     |  2 +-
 .../samples/opaque-state-fn/Child.svelte       | 13 +++++++++++++
 .../samples/opaque-state-fn/_config.js         | 18 ++++++++++++++++++
 .../samples/opaque-state-fn/main.svelte        |  8 ++++++++
 packages/svelte/types/index.d.ts               |  4 ++--
 7 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/opaque-state-fn/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/opaque-state-fn/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/opaque-state-fn/main.svelte

diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
index 5200d386e69e..41fd7ab48ba2 100644
--- a/packages/svelte/src/ambient.d.ts
+++ b/packages/svelte/src/ambient.d.ts
@@ -144,8 +144,8 @@ declare namespace $state {
 	 *
 	 * @param initial The initial value
 	 */
-	export function opaque<T>(initial: T): [T, () => void];
-	export function opaque<T>(): [T | undefined, () => void];
+	export function opaque<T>(initial: T): [T, (mutate?: (value: T) => void) => void];
+	export function opaque<T>(): [T | undefined, (mutate?: (value: T) => void) => void];
 
 	/**
 	 * To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index 331dff952e6e..c88db8b6d997 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -164,7 +164,13 @@ export function VariableDeclaration(node, context) {
 					b.declarator(state_id, b.call('$.opaque_state', value)),
 					b.declarator(
 						invalidation_id,
-						b.thunk(b.call('$.set', state_id, b.member(state_id, b.id('v'))))
+						b.arrow(
+							[b.id('$$fn')],
+							b.sequence([
+								b.call(b.id('$$fn'), b.member(state_id, b.id('v'))),
+								b.call('$.set', state_id, b.member(state_id, b.id('v')))
+							])
+						)
 					)
 				);
 				continue;
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
index 889fffd31a97..a70f2852b855 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
@@ -98,7 +98,7 @@ export function VariableDeclaration(node, context) {
 				const invalidation_id = /** @type {Identifier} */ (pattern.elements[1]);
 				declarations.push(
 					b.declarator(state_id, value),
-					b.declarator(invalidation_id, b.thunk(b.block([])))
+					b.declarator(invalidation_id, b.arrow([b.id('$$fn')], b.call(b.id('$$fn'), state_id)))
 				);
 				continue;
 			}
diff --git a/packages/svelte/tests/runtime-runes/samples/opaque-state-fn/Child.svelte b/packages/svelte/tests/runtime-runes/samples/opaque-state-fn/Child.svelte
new file mode 100644
index 000000000000..449f93e4508b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/opaque-state-fn/Child.svelte
@@ -0,0 +1,13 @@
+<script>
+	let { count } = $props();
+
+	let [obj, invalidate] = $state.opaque({ count: 0 });
+
+	$effect(() => {
+		invalidate((obj) => {
+			obj.count = count;
+		});
+	});
+</script>
+
+<p>{obj.count}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/opaque-state-fn/_config.js b/packages/svelte/tests/runtime-runes/samples/opaque-state-fn/_config.js
new file mode 100644
index 000000000000..b5f7e8815459
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/opaque-state-fn/_config.js
@@ -0,0 +1,18 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<p>0</p><button>+1</button>`,
+
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		button?.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, `<p>1</p><button>+1</button>`);
+
+		button?.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, `<p>2</p><button>+1</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/opaque-state-fn/main.svelte b/packages/svelte/tests/runtime-runes/samples/opaque-state-fn/main.svelte
new file mode 100644
index 000000000000..8efd150aece4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/opaque-state-fn/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Child from './Child.svelte';
+
+	let count = $state(0);
+</script>
+
+<Child {count} />
+<button onclick={() => count += 1}>+1</button>
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 82a20ff9c524..f39299a08af3 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2691,8 +2691,8 @@ declare namespace $state {
 	 *
 	 * @param initial The initial value
 	 */
-	export function opaque<T>(initial: T): [T, () => void];
-	export function opaque<T>(): [T | undefined, () => void];
+	export function opaque<T>(initial: T): [T, (mutate?: (value: T) => void) => void];
+	export function opaque<T>(): [T | undefined, (mutate?: (value: T) => void) => void];
 
 	/**
 	 * To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:

From 13ca61e33ed2ac04500bd63572ab33c85a881be3 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Fri, 13 Dec 2024 16:14:54 +0000
Subject: [PATCH 11/12] fix

---
 .../client/visitors/VariableDeclaration.js            |  2 +-
 .../server/visitors/VariableDeclaration.js            |  2 +-
 packages/svelte/src/compiler/utils/builders.js        | 11 +++++++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index c88db8b6d997..6e9bcb00094c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -167,7 +167,7 @@ export function VariableDeclaration(node, context) {
 						b.arrow(
 							[b.id('$$fn')],
 							b.sequence([
-								b.call(b.id('$$fn'), b.member(state_id, b.id('v'))),
+								b.chain_call(b.id('$$fn'), b.member(state_id, b.id('v'))),
 								b.call('$.set', state_id, b.member(state_id, b.id('v')))
 							])
 						)
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
index a70f2852b855..122e664f4bb2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
@@ -98,7 +98,7 @@ export function VariableDeclaration(node, context) {
 				const invalidation_id = /** @type {Identifier} */ (pattern.elements[1]);
 				declarations.push(
 					b.declarator(state_id, value),
-					b.declarator(invalidation_id, b.arrow([b.id('$$fn')], b.call(b.id('$$fn'), state_id)))
+					b.declarator(invalidation_id, b.arrow([b.id('$$fn')], b.chain_call(b.id('$$fn'), state_id)))
 				);
 				continue;
 			}
diff --git a/packages/svelte/src/compiler/utils/builders.js b/packages/svelte/src/compiler/utils/builders.js
index ecb595d74dbd..c1e68363a050 100644
--- a/packages/svelte/src/compiler/utils/builders.js
+++ b/packages/svelte/src/compiler/utils/builders.js
@@ -130,6 +130,17 @@ export function call(callee, ...args) {
 	};
 }
 
+/**
+ * @param {string | ESTree.Expression} callee
+ * @param {...(ESTree.Expression | ESTree.SpreadElement | false | undefined)} args
+ * @returns {ESTree.ChainExpression}
+ */
+export function chain_call(callee, ...args) {
+	const expression = /** @type {ESTree.SimpleCallExpression} */ (call(callee, ...args));
+	expression.optional = true;
+	return { type: 'ChainExpression', expression };
+}
+
 /**
  * @param {string | ESTree.Expression} callee
  * @param {...ESTree.Expression} args

From 21b08650a6775b45e6186d9014b58abb2a282ebf Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Fri, 13 Dec 2024 16:18:31 +0000
Subject: [PATCH 12/12] fix

---
 .../3-transform/server/visitors/VariableDeclaration.js       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
index 122e664f4bb2..a522310203c9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
@@ -98,7 +98,10 @@ export function VariableDeclaration(node, context) {
 				const invalidation_id = /** @type {Identifier} */ (pattern.elements[1]);
 				declarations.push(
 					b.declarator(state_id, value),
-					b.declarator(invalidation_id, b.arrow([b.id('$$fn')], b.chain_call(b.id('$$fn'), state_id)))
+					b.declarator(
+						invalidation_id,
+						b.arrow([b.id('$$fn')], b.chain_call(b.id('$$fn'), state_id))
+					)
 				);
 				continue;
 			}

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/sveltejs/svelte/pull/14639.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/sveltejs/svelte/pull/14639.patch" target="_blank">pFad Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/sveltejs/svelte/pull/14639.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/sveltejs/svelte/pull/14639.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>