mirror of https://github.com/sveltejs/svelte
fix: lift unsafe_state_mutation constraints for SvelteSet and SvelteMap created inside the derived (#16221)
Co-authored-by: Fedor Nezhivoi <f.nezhivoi@corp.vk.com>warn-read-just-created-state
parent
c4b32c2bff
commit
2af7ba2156
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
lift unsafe_state_mutation constraints for SvelteSet, SvelteMap, SvelteDate, SvelteURL and SvelteURLSearchParams created inside the derived
|
@ -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