diff --git a/.changeset/four-yaks-boil.md b/.changeset/four-yaks-boil.md new file mode 100644 index 0000000000..ede6c1de19 --- /dev/null +++ b/.changeset/four-yaks-boil.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +breaking: replace `$state.frozen` with `$state.raw` diff --git a/packages/svelte/messages/client-errors/errors.md b/packages/svelte/messages/client-errors/errors.md index f0ca476ff1..e509c970a2 100644 --- a/packages/svelte/messages/client-errors/errors.md +++ b/packages/svelte/messages/client-errors/errors.md @@ -64,10 +64,6 @@ > The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files -## state_frozen_invalid_argument - -> The argument to `$state.frozen(...)` cannot be an object created with `$state(...)`. You should create a copy of it first, for example with `$state.snapshot` - ## state_prototype_fixed > Cannot set prototype of `$state` object diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts index 63a3873d3f..82242cb494 100644 --- a/packages/svelte/src/ambient.d.ts +++ b/packages/svelte/src/ambient.d.ts @@ -102,12 +102,13 @@ declare namespace $state { : never; /** - * Declares reactive read-only state that is shallowly immutable. + * Declares state that is _not_ made deeply reactive — instead of mutating it, + * you must reassign it. * * Example: * ```ts * - - diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/_config.js b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/_config.js similarity index 80% rename from packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/_config.js rename to packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/_config.js index 4b043a75e2..ad93c66761 100644 --- a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/_config.js @@ -4,7 +4,7 @@ import { test } from '../../test'; export default test({ html: ``, - test({ assert, target, logs }) { + test({ assert, target }) { const btn = target.querySelector('button'); btn?.click(); @@ -14,7 +14,5 @@ export default test({ btn?.click(); flushSync(); assert.htmlEqual(target.innerHTML, ``); - - assert.deepEqual(logs, ['read only', 'read only']); } }); diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/main.svelte similarity index 60% rename from packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/main.svelte rename to packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/main.svelte index 557dc86998..f7f1c74c29 100644 --- a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/main.svelte @@ -1,6 +1,6 @@ - + diff --git a/packages/svelte/tests/runtime-runes/samples/class-frozen-state/_config.js b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state/_config.js similarity index 100% rename from packages/svelte/tests/runtime-runes/samples/class-frozen-state/_config.js rename to packages/svelte/tests/runtime-runes/samples/class-private-raw-state/_config.js diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state/main.svelte similarity index 91% rename from packages/svelte/tests/runtime-runes/samples/class-private-frozen-state/main.svelte rename to packages/svelte/tests/runtime-runes/samples/class-private-raw-state/main.svelte index f509f351bb..f4812b1dde 100644 --- a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state/main.svelte @@ -1,6 +1,6 @@ + + diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state/_config.js b/packages/svelte/tests/runtime-runes/samples/class-raw-state/_config.js similarity index 100% rename from packages/svelte/tests/runtime-runes/samples/class-private-frozen-state/_config.js rename to packages/svelte/tests/runtime-runes/samples/class-raw-state/_config.js diff --git a/packages/svelte/tests/runtime-runes/samples/class-frozen-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-raw-state/main.svelte similarity index 83% rename from packages/svelte/tests/runtime-runes/samples/class-frozen-state/main.svelte rename to packages/svelte/tests/runtime-runes/samples/class-raw-state/main.svelte index a723976ea9..2913d1ecec 100644 --- a/packages/svelte/tests/runtime-runes/samples/class-frozen-state/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/class-raw-state/main.svelte @@ -1,6 +1,6 @@ diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-frozen/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-raw/_config.js similarity index 100% rename from packages/svelte/tests/runtime-runes/samples/class-state-frozen/_config.js rename to packages/svelte/tests/runtime-runes/samples/class-state-raw/_config.js diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-frozen/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-raw/main.svelte similarity index 100% rename from packages/svelte/tests/runtime-runes/samples/class-state-frozen/main.svelte rename to packages/svelte/tests/runtime-runes/samples/class-state-raw/main.svelte diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-frozen/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-updates-frozen/main.svelte deleted file mode 100644 index 8aabde46cf..0000000000 --- a/packages/svelte/tests/runtime-runes/samples/each-updates-frozen/main.svelte +++ /dev/null @@ -1,16 +0,0 @@ - - -{#each frozen_items as item (item.id)} - {console.log(item.text)} - {item.text} -{/each} - - diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-frozen/_config.js b/packages/svelte/tests/runtime-runes/samples/each-updates-raw/_config.js similarity index 100% rename from packages/svelte/tests/runtime-runes/samples/each-updates-frozen/_config.js rename to packages/svelte/tests/runtime-runes/samples/each-updates-raw/_config.js diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-raw/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-updates-raw/main.svelte new file mode 100644 index 0000000000..07efc5e349 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/each-updates-raw/main.svelte @@ -0,0 +1,18 @@ + + +{#each raw_items as item (item.id)} + {console.log(item.text)} + {item.text} +{/each} + + diff --git a/packages/svelte/tests/runtime-runes/samples/readonly-state-replace/main.svelte b/packages/svelte/tests/runtime-runes/samples/readonly-state-replace/main.svelte index 4a53807030..4b5dc5ac59 100644 --- a/packages/svelte/tests/runtime-runes/samples/readonly-state-replace/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/readonly-state-replace/main.svelte @@ -1,5 +1,5 @@ + + + diff --git a/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/_config.js b/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/_config.js new file mode 100644 index 0000000000..995aec0ad8 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/_config.js @@ -0,0 +1,20 @@ +import { flushSync } from 'svelte'; +import { ok, test } from '../../test'; + +export default test({ + html: '

0

', + test({ assert, target }) { + const [reassign, mutate] = target.querySelectorAll('button'); + const output = target.querySelector('p'); + ok(output); + + flushSync(() => mutate.click()); + assert.htmlEqual(output.innerHTML, '0'); + + flushSync(() => reassign.click()); + assert.htmlEqual(output.innerHTML, '2'); + + flushSync(() => mutate.click()); + assert.htmlEqual(output.innerHTML, '2'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/main.svelte new file mode 100644 index 0000000000..39599673fc --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/main.svelte @@ -0,0 +1,8 @@ + + + +

{object.count}

diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index ed61515c5a..f31cb2a6d3 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -927,7 +927,7 @@ declare module 'svelte/compiler' { | 'bindable_prop' | 'rest_prop' | 'state' - | 'frozen_state' + | 'raw_state' | 'derived' | 'each' | 'snippet' @@ -2879,12 +2879,13 @@ declare namespace $state { : never; /** - * Declares reactive read-only state that is shallowly immutable. + * Declares state that is _not_ made deeply reactive — instead of mutating it, + * you must reassign it. * * Example: * ```ts *