mirror of https://github.com/sveltejs/svelte
feat: add $state.frozen rune (#9851)
* feat: add $state.raw rune fix typo fix typo * add more tests, fix example * add other test * change to $state.readonly * fix readme * fix validation * fix more * improve types * improve REPL * switch to $state.frozen * update docs * update docs * update docs * Update .changeset/dry-clocks-grow.md Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> * Update packages/svelte/src/internal/client/runtime.js Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> * Update packages/svelte/src/internal/client/runtime.js * docs * Update sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --------- Co-authored-by: Rich Harris <richard.a.harris@gmail.com> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> Co-authored-by: Rich Harris <rich.harris@vercel.com>pull/10008/head
Dominic Gannaway
1 year ago
committed by
GitHub
parent
eab690d31a
commit
75cd1e825c
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
feat: add `$state.frozen` rune
|
||||
@ -0,0 +1,22 @@
|
||||
import { test } from '../../test';
|
||||
import { log } from './log.js';
|
||||
|
||||
export default test({
|
||||
html: `<button>0</button>`,
|
||||
|
||||
before_test() {
|
||||
log.length = 0;
|
||||
},
|
||||
|
||||
async test({ assert, target }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
await btn?.click();
|
||||
assert.htmlEqual(target.innerHTML, `<button>0</button>`);
|
||||
|
||||
await btn?.click();
|
||||
assert.htmlEqual(target.innerHTML, `<button>0</button>`);
|
||||
|
||||
assert.deepEqual(log, ['read only', 'read only']);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,2 @@
|
||||
/** @type {any[]} */
|
||||
export const log = [];
|
||||
@ -0,0 +1,16 @@
|
||||
<script>
|
||||
import { log } from './log.js';
|
||||
|
||||
class Counter {
|
||||
count = $state.frozen({ a: 0 });
|
||||
}
|
||||
const counter = new Counter();
|
||||
</script>
|
||||
|
||||
<button on:click={() => {
|
||||
try {
|
||||
counter.count.a++
|
||||
} catch (e) {
|
||||
log.push('read only')
|
||||
}
|
||||
}}>{counter.count.a}</button>
|
||||
@ -0,0 +1,15 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>0</button>`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
await btn?.click();
|
||||
assert.htmlEqual(target.innerHTML, `<button>1</button>`);
|
||||
|
||||
await btn?.click();
|
||||
assert.htmlEqual(target.innerHTML, `<button>2</button>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
class Counter {
|
||||
count = $state.frozen(0);
|
||||
}
|
||||
const counter = new Counter();
|
||||
</script>
|
||||
|
||||
<button on:click={() => counter.count++}>{counter.count}</button>
|
||||
@ -0,0 +1,22 @@
|
||||
import { test } from '../../test';
|
||||
import { log } from './log.js';
|
||||
|
||||
export default test({
|
||||
html: `<button>0</button>`,
|
||||
|
||||
before_test() {
|
||||
log.length = 0;
|
||||
},
|
||||
|
||||
async test({ assert, target }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
await btn?.click();
|
||||
assert.htmlEqual(target.innerHTML, `<button>0</button>`);
|
||||
|
||||
await btn?.click();
|
||||
assert.htmlEqual(target.innerHTML, `<button>0</button>`);
|
||||
|
||||
assert.deepEqual(log, ['read only', 'read only']);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,2 @@
|
||||
/** @type {any[]} */
|
||||
export const log = [];
|
||||
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
import { log } from './log.js';
|
||||
|
||||
class Counter {
|
||||
#count = $state.frozen();
|
||||
|
||||
constructor(initial_count) {
|
||||
this.#count = { a: initial_count };
|
||||
}
|
||||
|
||||
get count() {
|
||||
return this.#count;
|
||||
}
|
||||
set count(val) {
|
||||
this.#count = val;
|
||||
}
|
||||
}
|
||||
const counter = new Counter(0);
|
||||
</script>
|
||||
|
||||
<button on:click={() => {
|
||||
try {
|
||||
counter.count.a++
|
||||
} catch (e) {
|
||||
log.push('read only')
|
||||
}
|
||||
}}>{counter.count.a}</button>
|
||||
@ -0,0 +1,15 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>0</button>`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
await btn?.click();
|
||||
assert.htmlEqual(target.innerHTML, `<button>1</button>`);
|
||||
|
||||
await btn?.click();
|
||||
assert.htmlEqual(target.innerHTML, `<button>2</button>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
class Counter {
|
||||
#count = $state.frozen(0);
|
||||
|
||||
constructor(initial_count) {
|
||||
this.#count = initial_count;
|
||||
}
|
||||
|
||||
get count() {
|
||||
return this.#count;
|
||||
}
|
||||
set count(val) {
|
||||
this.#count = val;
|
||||
}
|
||||
}
|
||||
const counter = new Counter(0);
|
||||
</script>
|
||||
|
||||
<button on:click={() => counter.count++}>{counter.count}</button>
|
||||
@ -0,0 +1,11 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [b1] = target.querySelectorAll('button');
|
||||
b1.click();
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<button>0, 1</button>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
let items = $state.frozen([0]);
|
||||
|
||||
const addItem = () => {
|
||||
items = [...items, items.length];
|
||||
};
|
||||
</script>
|
||||
|
||||
<button on:click={addItem}>
|
||||
{items.join(', ')}
|
||||
</button>
|
||||
@ -0,0 +1,17 @@
|
||||
import { test } from '../../test';
|
||||
import { log } from './log.js';
|
||||
|
||||
export default test({
|
||||
before_test() {
|
||||
log.length = 0;
|
||||
},
|
||||
|
||||
async test({ assert, target }) {
|
||||
const [b1, b2] = target.querySelectorAll('button');
|
||||
b1.click();
|
||||
b2.click();
|
||||
await Promise.resolve();
|
||||
|
||||
assert.deepEqual(log, [0, 1]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,2 @@
|
||||
/** @type {any[]} */
|
||||
export const log = [];
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import { log } from './log.js';
|
||||
|
||||
let x = $state.frozen(0);
|
||||
let y = $state.frozen(0);
|
||||
|
||||
$effect(() => {
|
||||
log.push(x);
|
||||
});
|
||||
</script>
|
||||
|
||||
<button on:click={() => x++}>{x}</button>
|
||||
<button on:click={() => y++}>{y}</button>
|
||||
Loading…
Reference in new issue