breaking: remove $state.link (#12943)

Rich-Harris · web-flow · commit 9f962d6f8187 · 2024-08-21T15:28:58.000-04:00
* Revert "breaking: remove `$state.link` callback (#12942)" This reverts commit 0b51ff0. * Revert "feat: adds $state.link rune (#12545)" This reverts commit 63ec2e2. * put changesets back * changeset * merge main
diff --git a/.changeset/green-walls-clap.md b/.changeset/green-walls-clap.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: remove `$state.link` rune pending further design work
diff --git a/documentation/docs/03-runes/01-state.md b/documentation/docs/03-runes/01-state.md
@@ -62,33 +62,6 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht
 
 > Only POJOs (plain old JavaScript objects) are made deeply reactive. Reactivity will stop at class boundaries and leave those alone
 
-## `$state.link`
-
-Linked state stays up to date with its input:
-
-```js
-let a = $state(0);
-let b = $state.link(a);
-
-a = 1;
-console.log(a, b); // 1, 1
-```
-
-You can temporarily _unlink_ state. It will be _relinked_ when the input value changes:
-
-```js
-let a = 1;
-let b = 1;
-// ---cut---
-b = 2; // unlink
-console.log(a, b); // 1, 2
-
-a = 3; // relink
-console.log(a, b); // 3, 3
-```
-
-As with `$state`, if `$state.link` is passed a plain object or array it will be made deeply reactive. If passed an existing state proxy it will be reused, meaning that mutating the linked state will mutate the original. To clone a state proxy, you can use [`$state.snapshot`](#$state-snapshot).
-
 ## `$state.raw`
 
 State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
@@ -124,32 +124,6 @@ declare namespace $state {
 	 *
 	 * @param initial The initial value
 	 */
-
-	/**
-	 * Declares reactive state that is linked to another value. Local reassignments
-	 * will override the linked value until the linked value changes.
-	 *
-	 * Example:
-	 * ```ts
-	 * let a = $state(0);
-	 * let b = $state.link(a);
-
-	 * a = 1;
-	 * console.log(a, b); // 1, 1
-
-	 * b = 2; // unlink
-	 * console.log(a, b); // 1, 2
-	 *
-	 * a = 3; // relink
-	 * console.log(a, b); // 3, 3
-	 * ```
-	 *
-	 * https://svelte-5-preview.vercel.app/docs/runes#$state-link
-	 *
-	 * @param value The linked value
-	 */
-	export function link<T>(value: T): T;
-
 	export function raw<T>(initial: T): T;
 	export function raw<T>(): T | undefined;
 	/**
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -34,7 +34,6 @@ export function BindDirective(node, context) {
 			node.name !== 'this' && // bind:this also works for regular variables
 			(!binding ||
 				(binding.kind !== 'state' &&
-					binding.kind !== 'linked_state' &&
 					binding.kind !== 'raw_state' &&
 					binding.kind !== 'prop' &&
 					binding.kind !== 'bindable_prop' &&
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -74,7 +74,6 @@ export function CallExpression(node, context) {
 
 		case '$state':
 		case '$state.raw':
-		case '$state.link':
 		case '$derived':
 		case '$derived.by':
 			if (
@@ -86,7 +85,7 @@ 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' || rune === '$state.link') && node.arguments.length > 1) {
+			} else if (rune === '$state' && node.arguments.length > 1) {
 				e.rune_invalid_arguments_length(node, rune, 'zero or one arguments');
 			}
 
@@ -170,7 +169,7 @@ export function CallExpression(node, context) {
 	}
 
 	// `$inspect(foo)` or `$derived(foo) should not trigger the `static-state-reference` warning
-	if (rune === '$inspect' || rune === '$derived' || rune === '$state.link') {
+	if (rune === '$inspect' || rune === '$derived') {
 		context.next({ ...context.state, function_depth: context.state.function_depth + 1 });
 	} else {
 		context.next();
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
@@ -38,10 +38,7 @@ function validate_export(node, scope, name) {
 		e.derived_invalid_export(node);
 	}
 
-	if (
-		(binding.kind === 'state' || binding.kind === 'raw_state' || binding.kind === 'linked_state') &&
-		binding.reassigned
-	) {
+	if ((binding.kind === 'state' || binding.kind === 'raw_state') && binding.reassigned) {
 		e.state_invalid_export(node);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -99,7 +99,7 @@ export function Identifier(node, context) {
 			context.state.function_depth === binding.scope.function_depth &&
 			// If we have $state that can be proxied or frozen and isn't re-assigned, then that means
 			// it's likely not using a primitive value and thus this warning isn't that helpful.
-			(((binding.kind === 'state' || binding.kind === 'linked_state') &&
+			((binding.kind === 'state' &&
 				(binding.reassigned ||
 					(binding.initial?.type === 'CallExpression' &&
 						binding.initial.arguments.length === 1 &&
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
@@ -21,7 +21,6 @@ export function VariableDeclarator(node, context) {
 		// TODO feels like this should happen during scope creation?
 		if (
 			rune === '$state' ||
-			rune === '$state.link' ||
 			rune === '$state.raw' ||
 			rune === '$derived' ||
 			rune === '$derived.by' ||
@@ -33,15 +32,13 @@ export function VariableDeclarator(node, context) {
 				binding.kind =
 					rune === '$state'
 						? 'state'
-						: rune === '$state.link'
-							? 'linked_state'
-							: rune === '$state.raw'
-								? 'raw_state'
-								: rune === '$derived' || rune === '$derived.by'
-									? 'derived'
-									: path.is_rest
-										? 'rest_prop'
-										: 'prop';
+						: rune === '$state.raw'
+							? 'raw_state'
+							: rune === '$derived' || rune === '$derived.by'
+								? 'derived'
+								: path.is_rest
+									? 'rest_prop'
+									: 'prop';
 			}
 		}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -88,7 +88,7 @@ export interface ComponentClientTransformState extends ClientTransformState {
 }
 
 export interface StateField {
-	kind: 'state' | 'raw_state' | 'linked_state' | 'derived' | 'derived_by';
+	kind: 'state' | 'raw_state' | 'derived' | 'derived_by';
 	id: PrivateIdentifier;
 }
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
@@ -44,7 +44,6 @@ export function ClassBody(node, context) {
 				const rune = get_rune(definition.value, context.state.scope);
 				if (
 					rune === '$state' ||
-					rune === '$state.link' ||
 					rune === '$state.raw' ||
 					rune === '$derived' ||
 					rune === '$derived.by'
@@ -56,11 +55,9 @@ export function ClassBody(node, context) {
 								? 'state'
 								: rune === '$state.raw'
 									? 'raw_state'
-									: rune === '$state.link'
-										? 'linked_state'
-										: rune === '$derived.by'
-											? 'derived_by'
-											: 'derived',
+									: rune === '$derived.by'
+										? 'derived_by'
+										: 'derived',
 						// @ts-expect-error this is set in the next pass
 						id: is_private ? definition.key : null
 					};
@@ -119,18 +116,11 @@ export function ClassBody(node, context) {
 									'$.source',
 									should_proxy(init, context.state.scope) ? b.call('$.proxy', init) : init
 								)
-							: field.kind === 'linked_state'
-								? b.call(
-										'$.source_link',
-										b.thunk(
-											should_proxy(init, context.state.scope) ? b.call('$.proxy', init) : init
-										)
-									)
-								: field.kind === 'raw_state'
-									? b.call('$.source', init)
-									: field.kind === 'derived_by'
-										? b.call('$.derived', init)
-										: b.call('$.derived', b.thunk(init));
+							: field.kind === 'raw_state'
+								? b.call('$.source', init)
+								: field.kind === 'derived_by'
+									? b.call('$.derived', init)
+									: b.call('$.derived', b.thunk(init));
 				} else {
 					// if no arguments, we know it's state as `$derived()` is a compile error
 					value = b.call('$.source');
@@ -143,24 +133,8 @@ export function ClassBody(node, context) {
 					const member = b.member(b.this, field.id);
 					body.push(b.prop_def(field.id, value));
 
-					if (field.kind === 'linked_state') {
-						// get foo() { return this.#foo; }
-						body.push(b.method('get', definition.key, [], [b.return(b.call(member))]));
-
-						// set foo(value) { this.#foo = value; }
-						const value = b.id('value');
-						body.push(
-							b.method(
-								'set',
-								definition.key,
-								[value],
-								[b.stmt(b.call(member, build_proxy_reassignment(value, field.id)))]
-							)
-						);
-					} else {
-						// get foo() { return this.#foo; }
-						body.push(b.method('get', definition.key, [], [b.return(b.call('$.get', member))]));
-					}
+					// get foo() { return this.#foo; }
+					body.push(b.method('get', definition.key, [], [b.return(b.call('$.get', member))]));
 
 					if (field.kind === 'state') {
 						// set foo(value) { this.#foo = value; }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
@@ -102,7 +102,7 @@ export function Program(_, context) {
 			if (is_prop_source(binding, context.state)) {
 				context.state.transform[name] = {
 					read: b.call,
-					assign: b.call,
+					assign: (node, value) => b.call(node, value),
 					mutate: (node, value) => {
 						if (binding.kind === 'bindable_prop') {
 							// only necessary for interop with legacy parent bindings
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
@@ -113,7 +113,7 @@ export function VariableDeclaration(node, context) {
 			const value =
 				args.length === 0 ? b.id('undefined') : /** @type {Expression} */ (context.visit(args[0]));
 
-			if (rune === '$state' || rune === '$state.raw' || rune === '$state.link') {
+			if (rune === '$state' || rune === '$state.raw') {
 				/**
 				 * @param {Identifier} id
 				 * @param {Expression} value
@@ -122,20 +122,12 @@ export function VariableDeclaration(node, context) {
 					const binding = /** @type {import('#compiler').Binding} */ (
 						context.state.scope.get(id.name)
 					);
-
-					if (
-						(rune === '$state' || rune === '$state.link') &&
-						should_proxy(value, context.state.scope)
-					) {
+					if (rune === '$state' && should_proxy(value, context.state.scope)) {
 						value = b.call('$.proxy', value);
 					}
-
-					if (rune === '$state.link') {
-						value = b.call('$.source_link', b.thunk(value));
-					} else if (is_state_source(binding, context.state.analysis)) {
+					if (is_state_source(binding, context.state.analysis)) {
 						value = b.call('$.source', value);
 					}
-
 					return value;
 				};
 
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
@@ -49,12 +49,5 @@ export function add_state_transformers(context) {
 				}
 			};
 		}
-
-		if (binding.kind === 'linked_state') {
-			context.state.transform[name] = {
-				read: b.call,
-				assign: b.call
-			};
-		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
@@ -11,12 +11,7 @@ export function PropertyDefinition(node, context) {
 	if (context.state.analysis.runes && node.value != null && node.value.type === 'CallExpression') {
 		const rune = get_rune(node.value, context.state.scope);
 
-		if (
-			rune === '$state' ||
-			rune === '$state.link' ||
-			rune === '$state.raw' ||
-			rune === '$derived'
-		) {
+		if (rune === '$state' || rune === '$state.raw' || rune === '$derived') {
 			return {
 				...node,
 				value:
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
@@ -278,7 +278,6 @@ export interface Binding {
 		| 'bindable_prop'
 		| 'rest_prop'
 		| 'state'
-		| 'linked_state'
 		| 'raw_state'
 		| 'derived'
 		| 'each'
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
@@ -105,7 +105,7 @@ export {
 	user_effect,
 	user_pre_effect
 } from './reactivity/effects.js';
-export { mutable_source, mutate, source, source_link, set } from './reactivity/sources.js';
+export { mutable_source, mutate, source, set } from './reactivity/sources.js';
 export {
 	prop,
 	rest_props,
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -26,7 +26,6 @@ import {
 	MAYBE_DIRTY
 } from '../constants.js';
 import * as e from '../errors.js';
-import { derived } from './deriveds.js';
 
 let inspect_effects = new Set();
 
@@ -46,39 +45,6 @@ export function source(v) {
 	};
 }
 
-/**
- * @template V
- * @param {() => V} get_value
- * @returns {(value?: V) => V}
- */
-export function source_link(get_value) {
-	var was_local = false;
-	var local_source = source(/** @type {V} */ (undefined));
-
-	var linked_derived = derived(() => {
-		var local_value = /** @type {V} */ (get(local_source));
-		var linked_value = get_value();
-
-		if (was_local) {
-			was_local = false;
-			return local_value;
-		}
-
-		return linked_value;
-	});
-
-	return function (/** @type {any} */ value) {
-		if (arguments.length > 0) {
-			was_local = true;
-			set(local_source, value);
-			get(linked_derived);
-			return value;
-		}
-
-		return (local_source.v = get(linked_derived));
-	};
-}
-
 /**
  * @template V
  * @param {V} initial_value
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
@@ -393,7 +393,6 @@ export function is_mathml(name) {
 
 const RUNES = /** @type {const} */ ([
 	'$state',
-	'$state.link',
 	'$state.raw',
 	'$state.snapshot',
 	'$props',
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-class/_config.js b/packages/svelte/tests/runtime-runes/samples/state-link-class/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-class/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-link-class/main.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-object/_config.js b/packages/svelte/tests/runtime-runes/samples/state-link-object/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-link-object/main.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link/_config.js b/packages/svelte/tests/runtime-runes/samples/state-link/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-link/main.svelte
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
diff --git a/sites/svelte-5-preview/src/lib/autocomplete.js b/sites/svelte-5-preview/src/lib/autocomplete.js
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': patch
 +---
++
 +breaking: remove `$state.link` rune pending further design work
Original file line number	Diff line number	Diff line change
`@@ -38,10 +38,7 @@ function validate_export(node, scope, name) {`
`38`	`38`	`e.derived_invalid_export(node);`
`39`	`39`	`}`
`40`	`40`
`41`		`- if (`
`42`		`- (binding.kind === 'state' \|\| binding.kind === 'raw_state' \|\| binding.kind === 'linked_state') &&`
`43`		`- binding.reassigned`
`44`		`- ) {`
	`41`	`+ if ((binding.kind === 'state' \|\| binding.kind === 'raw_state') && binding.reassigned) {`
`45`	`42`	`e.state_invalid_export(node);`
`46`	`43`	`}`
`47`	`44`	`}`
Original file line number	Diff line number	Diff line change
`@@ -88,7 +88,7 @@ export interface ComponentClientTransformState extends ClientTransformState {`
`88`	`88`	`}`
`89`	`89`
`90`	`90`	`export interface StateField {`
`91`		`- kind: 'state' \| 'raw_state' \| 'linked_state' \| 'derived' \| 'derived_by';`
	`91`	`+ kind: 'state' \| 'raw_state' \| 'derived' \| 'derived_by';`
`92`	`92`	`id: PrivateIdentifier;`
`93`	`93`	`}`
`94`	`94`