mirror of https://github.com/sveltejs/svelte
Rich Harris
3 months ago
commit
680cb6aa43
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: untrack `$inspect.with` and add check for unsafe mutation
|
||||
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '0');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,8 @@
|
||||
<svelte:options runes={false} />
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
</script>
|
||||
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
||||
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '0');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
|
||||
$$props;
|
||||
</script>
|
||||
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
||||
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '0');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
|
||||
$$restProps;
|
||||
</script>
|
||||
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
||||
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '1');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
|
||||
export const x = 42;
|
||||
</script>
|
||||
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
||||
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '0');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
|
||||
$: console.log("");
|
||||
</script>
|
||||
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
||||
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '0');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
|
||||
export let x = 42;
|
||||
</script>
|
||||
|
||||
{x}
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
||||
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '0');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
|
||||
let x = 42;
|
||||
|
||||
export { x };
|
||||
</script>
|
||||
|
||||
{x}
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
||||
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '1');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
</script>
|
||||
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
||||
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true,
|
||||
runes: true
|
||||
},
|
||||
|
||||
test({ assert, target }) {
|
||||
const [button1, button2] = target.querySelectorAll('button');
|
||||
|
||||
assert.throws(() => {
|
||||
button1?.click();
|
||||
flushSync();
|
||||
}, /state_unsafe_mutation/);
|
||||
|
||||
assert.doesNotThrow(() => {
|
||||
button2?.click();
|
||||
flushSync();
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,25 @@
|
||||
<script>
|
||||
let visibleExternal = $state(false);
|
||||
let external = $state([]);
|
||||
const throws = $derived.by(() => {
|
||||
external.push(1);
|
||||
return external;
|
||||
});
|
||||
|
||||
let visibleInternal = $state(false)
|
||||
const works = $derived.by(() => {
|
||||
let internal = $state([]);
|
||||
internal.push(1);
|
||||
return internal;
|
||||
});
|
||||
</script>
|
||||
|
||||
<button onclick={() => (visibleExternal = true)}>external</button>
|
||||
{#if visibleExternal}
|
||||
{throws}
|
||||
{/if}
|
||||
<button onclick={() => (visibleInternal = true)}>internal</button>
|
||||
{#if visibleInternal}
|
||||
{works}
|
||||
{/if}
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true,
|
||||
runes: true
|
||||
},
|
||||
|
||||
test({ assert, target }) {
|
||||
const [button1, button2] = target.querySelectorAll('button');
|
||||
|
||||
assert.throws(() => {
|
||||
button1?.click();
|
||||
flushSync();
|
||||
}, /state_unsafe_mutation/);
|
||||
|
||||
assert.doesNotThrow(() => {
|
||||
button2?.click();
|
||||
flushSync();
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
import { SvelteDate } from 'svelte/reactivity';
|
||||
|
||||
let visibleExternal = $state(false);
|
||||
let external = new SvelteDate();
|
||||
const throws = $derived.by(() => {
|
||||
external.setTime(12345);
|
||||
return external;
|
||||
})
|
||||
|
||||
let visibleInternal = $state(false);
|
||||
const works = $derived.by(() => {
|
||||
let internal = new SvelteDate();
|
||||
internal.setTime(12345);
|
||||
return internal;
|
||||
})
|
||||
</script>
|
||||
|
||||
<button onclick={() => (visibleExternal = true)}>external</button>
|
||||
{#if visibleExternal}
|
||||
{throws}
|
||||
{/if}
|
||||
<button onclick={() => (visibleInternal = true)}>internal</button>
|
||||
{#if visibleInternal}
|
||||
{works}
|
||||
{/if}
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true,
|
||||
runes: true
|
||||
},
|
||||
|
||||
test({ assert, target }) {
|
||||
const [button1, button2] = target.querySelectorAll('button');
|
||||
|
||||
assert.throws(() => {
|
||||
button1?.click();
|
||||
flushSync();
|
||||
}, /state_unsafe_mutation/);
|
||||
|
||||
assert.doesNotThrow(() => {
|
||||
button2?.click();
|
||||
flushSync();
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
import { SvelteMap } from 'svelte/reactivity';
|
||||
|
||||
let visibleExternal = $state(false);
|
||||
let external = new SvelteMap();
|
||||
const throws = $derived.by(() => {
|
||||
external.set(1, 1);
|
||||
return external;
|
||||
});
|
||||
|
||||
let visibleInternal = $state(false);
|
||||
const works = $derived.by(() => {
|
||||
let internal = new SvelteMap();
|
||||
internal.set(1, 1);
|
||||
return internal;
|
||||
});
|
||||
</script>
|
||||
|
||||
<button onclick={() => (visibleExternal = true)}>external</button>
|
||||
{#if visibleExternal}
|
||||
{throws}
|
||||
{/if}
|
||||
<button onclick={() => (visibleInternal = true)}>internal</button>
|
||||
{#if visibleInternal}
|
||||
{works}
|
||||
{/if}
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true,
|
||||
runes: true
|
||||
},
|
||||
|
||||
test({ assert, target }) {
|
||||
const [button1, button2] = target.querySelectorAll('button');
|
||||
|
||||
assert.throws(() => {
|
||||
button1?.click();
|
||||
flushSync();
|
||||
}, /state_unsafe_mutation/);
|
||||
|
||||
assert.doesNotThrow(() => {
|
||||
button2?.click();
|
||||
flushSync();
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,25 @@
|
||||
<script>
|
||||
let visibleExternal = $state(false);
|
||||
let external = $state({ v: 1 });
|
||||
const throws = $derived.by(() => {
|
||||
external.v = 2;
|
||||
return external;
|
||||
});
|
||||
|
||||
let visibleInternal = $state(false)
|
||||
const works = $derived.by(() => {
|
||||
let internal = $state({ v: 1 });
|
||||
internal.v = 2;
|
||||
return internal;
|
||||
});
|
||||
</script>
|
||||
|
||||
<button onclick={() => (visibleExternal = true)}>external</button>
|
||||
{#if visibleExternal}
|
||||
{throws}
|
||||
{/if}
|
||||
<button onclick={() => (visibleInternal = true)}>internal</button>
|
||||
{#if visibleInternal}
|
||||
{works}
|
||||
{/if}
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true,
|
||||
runes: true
|
||||
},
|
||||
|
||||
test({ assert, target }) {
|
||||
const [button1, button2] = target.querySelectorAll('button');
|
||||
|
||||
assert.throws(() => {
|
||||
button1?.click();
|
||||
flushSync();
|
||||
}, /state_unsafe_mutation/);
|
||||
|
||||
assert.doesNotThrow(() => {
|
||||
button2?.click();
|
||||
flushSync();
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,25 @@
|
||||
<script>
|
||||
let visibleExternal = $state(false);
|
||||
let external = $state(1);
|
||||
const throws = $derived.by(() => {
|
||||
external = 2;
|
||||
return external;
|
||||
});
|
||||
|
||||
let visibleInternal = $state(false);
|
||||
const works = $derived.by(() => {
|
||||
let internal = $state(1);
|
||||
internal = 2;
|
||||
return internal;
|
||||
});
|
||||
</script>
|
||||
|
||||
<button onclick={() => (visibleExternal = true)}>external</button>
|
||||
{#if visibleExternal}
|
||||
{throws}
|
||||
{/if}
|
||||
<button onclick={() => (visibleInternal = true)}>internal</button>
|
||||
{#if visibleInternal}
|
||||
{works}
|
||||
{/if}
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true,
|
||||
runes: true
|
||||
},
|
||||
|
||||
test({ assert, target }) {
|
||||
const [button1, button2] = target.querySelectorAll('button');
|
||||
|
||||
assert.throws(() => {
|
||||
button1?.click();
|
||||
flushSync();
|
||||
}, /state_unsafe_mutation/);
|
||||
|
||||
assert.doesNotThrow(() => {
|
||||
button2?.click();
|
||||
flushSync();
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
import { SvelteSet } from 'svelte/reactivity';
|
||||
|
||||
let visibleExternal = $state(false);
|
||||
let external = new SvelteSet();
|
||||
const throws = $derived.by(() => {
|
||||
external.add(1);
|
||||
return external;
|
||||
})
|
||||
|
||||
let visibleInternal = $state(false);
|
||||
const works = $derived.by(() => {
|
||||
let internal = new SvelteSet();
|
||||
internal.add(1);
|
||||
return internal;
|
||||
})
|
||||
</script>
|
||||
|
||||
<button onclick={() => (visibleExternal = true)}>external</button>
|
||||
{#if visibleExternal}
|
||||
{throws}
|
||||
{/if}
|
||||
<button onclick={() => (visibleInternal = true)}>internal</button>
|
||||
{#if visibleInternal}
|
||||
{works}
|
||||
{/if}
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true,
|
||||
runes: true
|
||||
},
|
||||
|
||||
test({ assert, target }) {
|
||||
const [button1, button2] = target.querySelectorAll('button');
|
||||
|
||||
assert.throws(() => {
|
||||
button1?.click();
|
||||
flushSync();
|
||||
}, /state_unsafe_mutation/);
|
||||
|
||||
assert.doesNotThrow(() => {
|
||||
button2?.click();
|
||||
flushSync();
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
import { SvelteURLSearchParams } from 'svelte/reactivity';
|
||||
|
||||
let visibleExternal = $state(false);
|
||||
let external = new SvelteURLSearchParams();
|
||||
const throws = $derived.by(() => {
|
||||
external.append('foo', 'bar')
|
||||
return external;
|
||||
})
|
||||
|
||||
let visibleInternal = $state(false);
|
||||
const works = $derived.by(() => {
|
||||
let internal = new SvelteURLSearchParams();
|
||||
internal.append('foo', 'bar')
|
||||
return internal;
|
||||
})
|
||||
</script>
|
||||
|
||||
<button onclick={() => (visibleExternal = true)}>external</button>
|
||||
{#if visibleExternal}
|
||||
{throws}
|
||||
{/if}
|
||||
<button onclick={() => (visibleInternal = true)}>internal</button>
|
||||
{#if visibleInternal}
|
||||
{works}
|
||||
{/if}
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true,
|
||||
runes: true
|
||||
},
|
||||
|
||||
test({ assert, target }) {
|
||||
const [button1, button2] = target.querySelectorAll('button');
|
||||
|
||||
assert.throws(() => {
|
||||
button1?.click();
|
||||
flushSync();
|
||||
}, /state_unsafe_mutation/);
|
||||
|
||||
assert.doesNotThrow(() => {
|
||||
button2?.click();
|
||||
flushSync();
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
import { SvelteURL } from 'svelte/reactivity';
|
||||
|
||||
let visibleExternal = $state(false);
|
||||
let external = new SvelteURL('https://svelte.dev');
|
||||
const throws = $derived.by(() => {
|
||||
external.host = 'kit.svelte.dev'
|
||||
return external;
|
||||
})
|
||||
|
||||
let visibleInternal = $state(false);
|
||||
const works = $derived.by(() => {
|
||||
let internal = new SvelteURL('https://svelte.dev');
|
||||
internal.host = 'kit.svelte.dev'
|
||||
return internal;
|
||||
})
|
||||
</script>
|
||||
|
||||
<button onclick={() => (visibleExternal = true)}>external</button>
|
||||
{#if visibleExternal}
|
||||
{throws}
|
||||
{/if}
|
||||
<button onclick={() => (visibleInternal = true)}>internal</button>
|
||||
{#if visibleInternal}
|
||||
{works}
|
||||
{/if}
|
||||
|
||||
Loading…
Reference in new issue