From ef4b6facb653bfb17535742c229fbe1a3da04b36 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 12 Aug 2024 09:58:55 -0400 Subject: [PATCH 01/17] breaking: replace `$state.frozen` with `$state.raw` --- .changeset/four-yaks-boil.md | 5 +++ .../svelte/messages/client-errors/errors.md | 4 -- packages/svelte/src/ambient.d.ts | 9 +++-- .../2-analyze/visitors/CallExpression.js | 2 +- .../2-analyze/visitors/VariableDeclarator.js | 4 +- .../3-transform/client/transform-client.js | 14 +------ .../client/visitors/AssignmentExpression.js | 8 ++-- .../3-transform/client/visitors/ClassBody.js | 18 ++------- .../3-transform/client/visitors/EachBlock.js | 21 +++++++--- .../client/visitors/VariableDeclaration.js | 6 +-- .../server/visitors/PropertyDefinition.js | 2 +- .../svelte/src/internal/client/constants.js | 1 - .../src/internal/client/dom/blocks/each.js | 15 +------ packages/svelte/src/internal/client/freeze.js | 40 ------------------- .../svelte/src/internal/client/freeze.test.ts | 16 -------- packages/svelte/src/internal/client/index.js | 1 - packages/svelte/src/internal/client/proxy.js | 9 +---- packages/svelte/src/utils.js | 2 +- .../samples/bind-this-frozen/main.svelte | 2 +- .../binding-property-static/_config.js | 4 +- .../binding-property-static/main.svelte | 6 +-- .../class-frozen-state-object/_config.js | 4 +- .../class-frozen-state-object/main.svelte | 14 +++---- .../samples/class-frozen-state/main.svelte | 2 +- .../_config.js | 4 +- .../main.svelte | 14 +++---- .../class-private-frozen-state/main.svelte | 2 +- .../samples/each-updates-frozen/main.svelte | 22 +++++----- .../readonly-state-replace/main.svelte | 2 +- .../samples/readonly-state/main.svelte | 4 +- 30 files changed, 83 insertions(+), 174 deletions(-) create mode 100644 .changeset/four-yaks-boil.md delete mode 100644 packages/svelte/src/internal/client/freeze.js delete mode 100644 packages/svelte/src/internal/client/freeze.test.ts diff --git a/.changeset/four-yaks-boil.md b/.changeset/four-yaks-boil.md new file mode 100644 index 000000000000..ede6c1de19a5 --- /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 f0ca476ff122..e509c970a2ec 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 63a3873d3f19..82242cb4948c 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-frozen-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-frozen-state/main.svelte index a723976ea969..2913d1ececaa 100644 --- a/packages/svelte/tests/runtime-runes/samples/class-frozen-state/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/class-frozen-state/main.svelte @@ -1,6 +1,6 @@ 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-frozen-state-object/_config.js index 4b043a75e2b1..ad93c66761bc 100644 --- a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/class-private-frozen-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-frozen-state-object/main.svelte index 557dc8699811..f7f1c74c29b9 100644 --- a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/main.svelte @@ -1,6 +1,6 @@ - + diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state/main.svelte index f509f351bbfa..f4812b1dde28 100644 --- a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state/main.svelte @@ -1,6 +1,6 @@ -{#each frozen_items as item (item.id)} +{#each raw_items as item (item.id)} {console.log(item.text)} - {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 4a538070301b..4b5dc5ac59d7 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 000000000000..995aec0ad8a1 --- /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 000000000000..39599673fc51 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/main.svelte @@ -0,0 +1,8 @@ + + + +

{object.count}