msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

breaking: remove `$state.link` (#12943)

Browse Source 
* Revert "breaking: remove `$state.link` callback (#12942)"

This reverts commit 0b51ff04b0.

* Revert "feat: adds $state.link rune (#12545)"

This reverts commit 63ec2e2e88.

* put changesets back

* changeset

* merge main
pull/12957/head
Rich Harris 3 months ago committed by GitHub
parent af7f90020d
commit 9f962d6f81
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
27 changed files with 33 additions and 315 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/green-walls-clap.md
Unescape View File

@ -0,0 +1,5 @@
---
'svelte': patch
---
breaking: remove `$state.link` rune pending further design work

27
documentation/docs/03-runes/01-state.md
Unescape View File

@ -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 > 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.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: 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:

26
packages/svelte/src/ambient.d.ts vendored
Unescape View File

@ -124,32 +124,6 @@ declare namespace $state {
* *
* @param initial The initial value * @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>(initial: T): T;
export function raw<T>(): T | undefined; export function raw<T>(): T | undefined;
/** /**

1
packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
Unescape View File

@ -34,7 +34,6 @@ export function BindDirective(node, context) {
node.name !== 'this' && // bind:this also works for regular variables node.name !== 'this' && // bind:this also works for regular variables
(!binding || (!binding ||
(binding.kind !== 'state' && (binding.kind !== 'state' &&
binding.kind !== 'linked_state' &&
binding.kind !== 'raw_state' && binding.kind !== 'raw_state' &&
binding.kind !== 'prop' && binding.kind !== 'prop' &&
binding.kind !== 'bindable_prop' && binding.kind !== 'bindable_prop' &&

5
packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
Unescape View File

@ -74,7 +74,6 @@ export function CallExpression(node, context) {
case '$state': case '$state':
case '$state.raw': case '$state.raw':
case '$state.link':
case '$derived': case '$derived':
case '$derived.by': case '$derived.by':
if ( if (
@ -86,7 +85,7 @@ export function CallExpression(node, context) {
if ((rune === '$derived' || rune === '$derived.by') && node.arguments.length !== 1) { if ((rune === '$derived' || rune === '$derived.by') && node.arguments.length !== 1) {
e.rune_invalid_arguments_length(node, rune, 'exactly one argument'); 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'); 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 // `$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 }); context.next({ ...context.state, function_depth: context.state.function_depth + 1 });
} else { } else {
context.next(); context.next();

5
packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
Unescape View File

@ -38,10 +38,7 @@ function validate_export(node, scope, name) {
e.derived_invalid_export(node); e.derived_invalid_export(node);
} }
if ( if ((binding.kind === 'state' || binding.kind === 'raw_state') && binding.reassigned) {
(binding.kind === 'state' || binding.kind === 'raw_state' || binding.kind === 'linked_state') &&
binding.reassigned
) {
e.state_invalid_export(node); e.state_invalid_export(node);
} }
} }

2
packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
Unescape View File

@ -99,7 +99,7 @@ export function Identifier(node, context) {
context.state.function_depth === binding.scope.function_depth && 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 // 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. // 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.reassigned ||
(binding.initial?.type === 'CallExpression' && (binding.initial?.type === 'CallExpression' &&
binding.initial.arguments.length === 1 && binding.initial.arguments.length === 1 &&

3
packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
Unescape View File

@ -21,7 +21,6 @@ export function VariableDeclarator(node, context) {
// TODO feels like this should happen during scope creation? // TODO feels like this should happen during scope creation?
if ( if (
rune === '$state' || rune === '$state' ||
rune === '$state.link' ||
rune === '$state.raw' || rune === '$state.raw' ||
rune === '$derived' || rune === '$derived' ||
rune === '$derived.by' || rune === '$derived.by' ||
@ -33,8 +32,6 @@ export function VariableDeclarator(node, context) {
binding.kind = binding.kind =
rune === '$state' rune === '$state'
? 'state' ? 'state'
: rune === '$state.link'
? 'linked_state'
: rune === '$state.raw' : rune === '$state.raw'
? 'raw_state' ? 'raw_state'
: rune === '$derived' || rune === '$derived.by' : rune === '$derived' || rune === '$derived.by'

2
packages/svelte/src/compiler/phases/3-transform/client/types.d.ts vendored
Unescape View File

@ -88,7 +88,7 @@ export interface ComponentClientTransformState extends ClientTransformState {
} }
export interface StateField { export interface StateField {
kind: 'state' | 'raw_state' | 'linked_state' | 'derived' | 'derived_by'; kind: 'state' | 'raw_state' | 'derived' | 'derived_by';
id: PrivateIdentifier; id: PrivateIdentifier;
} }

26
packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
Unescape View File

@ -44,7 +44,6 @@ export function ClassBody(node, context) {
const rune = get_rune(definition.value, context.state.scope); const rune = get_rune(definition.value, context.state.scope);
if ( if (
rune === '$state' || rune === '$state' ||
rune === '$state.link' ||
rune === '$state.raw' || rune === '$state.raw' ||
rune === '$derived' || rune === '$derived' ||
rune === '$derived.by' rune === '$derived.by'
@ -56,8 +55,6 @@ export function ClassBody(node, context) {
? 'state' ? 'state'
: rune === '$state.raw' : rune === '$state.raw'
? 'raw_state' ? 'raw_state'
: rune === '$state.link'
? 'linked_state'
: rune === '$derived.by' : rune === '$derived.by'
? 'derived_by' ? 'derived_by'
: 'derived', : 'derived',
@ -119,13 +116,6 @@ export function ClassBody(node, context) {
'$.source', '$.source',
should_proxy(init, context.state.scope) ? b.call('$.proxy', init) : init 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' : field.kind === 'raw_state'
? b.call('$.source', init) ? b.call('$.source', init)
: field.kind === 'derived_by' : field.kind === 'derived_by'
@ -143,24 +133,8 @@ export function ClassBody(node, context) {
const member = b.member(b.this, field.id); const member = b.member(b.this, field.id);
body.push(b.prop_def(field.id, value)); 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; } // get foo() { return this.#foo; }
body.push(b.method('get', definition.key, [], [b.return(b.call('$.get', member))])); body.push(b.method('get', definition.key, [], [b.return(b.call('$.get', member))]));
}
if (field.kind === 'state') { if (field.kind === 'state') {
// set foo(value) { this.#foo = value; } // set foo(value) { this.#foo = value; }

2
packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
Unescape View File

@ -102,7 +102,7 @@ export function Program(_, context) {
if (is_prop_source(binding, context.state)) { if (is_prop_source(binding, context.state)) {
context.state.transform[name] = { context.state.transform[name] = {
read: b.call, read: b.call,
assign: b.call, assign: (node, value) => b.call(node, value),
mutate: (node, value) => { mutate: (node, value) => {
if (binding.kind === 'bindable_prop') { if (binding.kind === 'bindable_prop') {
// only necessary for interop with legacy parent bindings // only necessary for interop with legacy parent bindings

14
packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
Unescape View File

@ -113,7 +113,7 @@ export function VariableDeclaration(node, context) {
const value = const value =
args.length === 0 ? b.id('undefined') : /** @type {Expression} */ (context.visit(args[0])); 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 {Identifier} id
* @param {Expression} value * @param {Expression} value
@ -122,20 +122,12 @@ export function VariableDeclaration(node, context) {
const binding = /** @type {import('#compiler').Binding} */ ( const binding = /** @type {import('#compiler').Binding} */ (
context.state.scope.get(id.name) context.state.scope.get(id.name)
); );
if (rune === '$state' && should_proxy(value, context.state.scope)) {
if (
(rune === '$state' || rune === '$state.link') &&
should_proxy(value, context.state.scope)
) {
value = b.call('$.proxy', value); value = b.call('$.proxy', value);
} }
if (is_state_source(binding, context.state.analysis)) {
if (rune === '$state.link') {
value = b.call('$.source_link', b.thunk(value));
} else if (is_state_source(binding, context.state.analysis)) {
value = b.call('$.source', value); value = b.call('$.source', value);
} }
return value; return value;
}; };

7
packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
Unescape View File

@ -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
};
}
} }
} }

7
packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
Unescape View File

@ -11,12 +11,7 @@ export function PropertyDefinition(node, context) {
if (context.state.analysis.runes && node.value != null && node.value.type === 'CallExpression') { if (context.state.analysis.runes && node.value != null && node.value.type === 'CallExpression') {
const rune = get_rune(node.value, context.state.scope); const rune = get_rune(node.value, context.state.scope);
if ( if (rune === '$state' || rune === '$state.raw' || rune === '$derived') {
rune === '$state' ||
rune === '$state.link' ||
rune === '$state.raw' ||
rune === '$derived'
) {
return { return {
...node, ...node,
value: value:

1
packages/svelte/src/compiler/types/index.d.ts vendored
Unescape View File

@ -278,7 +278,6 @@ export interface Binding {
| 'bindable_prop' | 'bindable_prop'
| 'rest_prop' | 'rest_prop'
| 'state' | 'state'
| 'linked_state'
| 'raw_state' | 'raw_state'
| 'derived' | 'derived'
| 'each' | 'each'

2
packages/svelte/src/internal/client/index.js
Unescape View File

@ -105,7 +105,7 @@ export {
user_effect, user_effect,
user_pre_effect user_pre_effect
} from './reactivity/effects.js'; } 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 { export {
prop, prop,
rest_props, rest_props,

34
packages/svelte/src/internal/client/reactivity/sources.js
Unescape View File

@ -26,7 +26,6 @@ import {
MAYBE_DIRTY MAYBE_DIRTY
} from '../constants.js'; } from '../constants.js';
import * as e from '../errors.js'; import * as e from '../errors.js';
import { derived } from './deriveds.js';
let inspect_effects = new Set(); 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 * @template V
* @param {V} initial_value * @param {V} initial_value

1
packages/svelte/src/utils.js
Unescape View File

@ -393,7 +393,6 @@ export function is_mathml(name) {
const RUNES = /** @type {const} */ ([ const RUNES = /** @type {const} */ ([
'$state', '$state',
'$state.link',
'$state.raw', '$state.raw',
'$state.snapshot', '$state.snapshot',
'$props', '$props',

19
packages/svelte/tests/runtime-runes/samples/state-link-class/_config.js
Unescape View File

@ -1,19 +0,0 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
export default test({
html: `<button>0</button><button>0</button>`,
test({ assert, target }) {
const [btn1, btn2] = target.querySelectorAll('button');
flushSync(() => btn1.click());
assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button>`);
flushSync(() => btn2.click());
assert.htmlEqual(target.innerHTML, `<button>1</button><button>2</button>`);
flushSync(() => btn1.click());
assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button>`);
}
});

11
packages/svelte/tests/runtime-runes/samples/state-link-class/main.svelte
Unescape View File

@ -1,11 +0,0 @@
<script>
class Instance {
a = $state(0);
b = $state.link(this.a);
}
const instance = new Instance();
</script>
<button onclick={() => instance.a++}>{instance.a}</button>
<button onclick={() => instance.b++}>{instance.b}</button>

24
packages/svelte/tests/runtime-runes/samples/state-link-object/_config.js
Unescape View File

@ -1,24 +0,0 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
export default test({
html: `<button>0</button><button>0</button><button>0</button>`,
test({ assert, target }) {
const [btn1, btn2, btn3] = target.querySelectorAll('button');
flushSync(() => btn1.click());
assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button><button>1</button>`);
// mutate the original object, via the link
flushSync(() => btn2.click());
assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button><button>2</button>`);
// mutate the copy
flushSync(() => btn3.click());
assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button><button>3</button>`);
flushSync(() => btn1.click());
assert.htmlEqual(target.innerHTML, `<button>3</button><button>3</button><button>3</button>`);
}
});

9
packages/svelte/tests/runtime-runes/samples/state-link-object/main.svelte
Unescape View File

@ -1,9 +0,0 @@
<script>
let a = $state({ value: 0 });
let b = $state.link(a);
let c = $state.link({ ...a });
</script>
<button onclick={() => a.value++}>{a.value}</button>
<button onclick={() => b.value++}>{b.value}</button>
<button onclick={() => c.value++}>{c.value}</button>

19
packages/svelte/tests/runtime-runes/samples/state-link/_config.js
Unescape View File

@ -1,19 +0,0 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
export default test({
html: `<button>0</button><button>0</button>`,
test({ assert, target }) {
const [btn1, btn2] = target.querySelectorAll('button');
flushSync(() => btn1.click());
assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button>`);
flushSync(() => btn2.click());
assert.htmlEqual(target.innerHTML, `<button>1</button><button>2</button>`);
flushSync(() => btn1.click());
assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button>`);
}
});

7
packages/svelte/tests/runtime-runes/samples/state-link/main.svelte
Unescape View File

@ -1,7 +0,0 @@
<script>
let a = $state(0);
let b = $state.link(a);
</script>
<button onclick={() => a++}>{a}</button>
<button onclick={() => b++}>{b}</button>

27
packages/svelte/types/index.d.ts vendored
Unescape View File

@ -927,7 +927,6 @@ declare module 'svelte/compiler' {
| 'bindable_prop' | 'bindable_prop'
| 'rest_prop' | 'rest_prop'
| 'state' | 'state'
| 'linked_state'
| 'raw_state' | 'raw_state'
| 'derived' | 'derived'
| 'each' | 'each'
@ -2913,32 +2912,6 @@ declare namespace $state {
* *
* @param initial The initial value * @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>(initial: T): T;
export function raw<T>(): T | undefined; export function raw<T>(): T | undefined;
/** /**

1
sites/svelte-5-preview/src/lib/autocomplete.js
Unescape View File

@ -118,7 +118,6 @@ const runes = [
{ snippet: '$bindable()', test: is_bindable }, { snippet: '$bindable()', test: is_bindable },
{ snippet: '$effect.root(() => {\n\t${}\n})' }, { snippet: '$effect.root(() => {\n\t${}\n})' },
{ snippet: '$state.snapshot(${})' }, { snippet: '$state.snapshot(${})' },
{ snippet: '$state.link(${})' },
{ snippet: '$effect.tracking()' }, { snippet: '$effect.tracking()' },
{ snippet: '$inspect(${});', test: is_statement } { snippet: '$inspect(${});', test: is_statement }
]; ];

27
sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
Unescape View File

@ -64,33 +64,6 @@ Only plain objects and arrays [are made deeply reactive](/#H4sIAAAAAAAAE42QwWrDM
In non-runes mode, a `let` declaration is treated as reactive state if it is updated at some point. Unlike `$state(...)`, which works anywhere in your app, `let` only behaves this way at the top level of a component. In non-runes mode, a `let` declaration is treated as reactive state if it is updated at some point. Unlike `$state(...)`, which works anywhere in your app, `let` only behaves this way at the top level of a component.
## `$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.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: 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:

Write Preview
Loading…
Cancel
Save