mirror of https://github.com/sveltejs/svelte
paoloricciuti
3 weeks ago
commit
425e68ac6c
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
perf: run blocks eagerly during flush instead of aborting
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: destroy dynamic component instance before creating new one
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: don't clone non-proxies in `$inspect`
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: avoid recursion error when tagging circular references
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
$effect.pre(() => {
|
||||
console.log('create A');
|
||||
return () => console.log('destroy A');
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1>A</h1>
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
$effect.pre(() => {
|
||||
console.log('create B');
|
||||
return () => console.log('destroy B');
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1>B</h1>
|
||||
@ -0,0 +1,13 @@
|
||||
import { test } from '../../test';
|
||||
import { flushSync } from 'svelte';
|
||||
|
||||
export default test({
|
||||
mode: ['client', 'hydrate'],
|
||||
|
||||
async test({ assert, target, logs }) {
|
||||
const [button] = target.querySelectorAll('button');
|
||||
|
||||
flushSync(() => button.click());
|
||||
assert.deepEqual(logs, ['create A', 'destroy A', 'create B']);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import A from './A.svelte';
|
||||
import B from './B.svelte';
|
||||
|
||||
let condition = $state(true);
|
||||
let Component = $derived(condition ? A : B);
|
||||
</script>
|
||||
|
||||
<button onclick={() => condition = !condition}>
|
||||
toggle ({condition})
|
||||
</button>
|
||||
|
||||
<Component />
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
let { children } = $props();
|
||||
|
||||
let inited = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
inited = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if inited}
|
||||
<span>{@render children()}</span>
|
||||
{/if}
|
||||
@ -0,0 +1,12 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [button] = target.querySelectorAll('button');
|
||||
|
||||
assert.doesNotThrow(() => {
|
||||
flushSync(() => button.click());
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
|
||||
let show = $state(false);
|
||||
</script>
|
||||
|
||||
<button onclick={() => show = !show}>
|
||||
toggle
|
||||
</button>
|
||||
|
||||
{#if show}
|
||||
{#each { length: 1234 } as i}
|
||||
<Child>{i}</Child>
|
||||
{/each}
|
||||
{/if}
|
||||
@ -1,11 +1,12 @@
|
||||
<script>
|
||||
import B from './B.svelte';
|
||||
|
||||
let { boolean, closed } = $props();
|
||||
let { boolean, closed, close } = $props();
|
||||
|
||||
// this runs after the effect in B, because child effects run first
|
||||
$effect(() => {
|
||||
console.log(boolean);
|
||||
console.log({ boolean, closed });
|
||||
});
|
||||
</script>
|
||||
|
||||
<B {closed} />
|
||||
<B {closed} {close} />
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
<script module>
|
||||
let object = $state();
|
||||
|
||||
export function open() {
|
||||
object = { boolean: true };
|
||||
}
|
||||
|
||||
export function close() {
|
||||
object = undefined;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
{#if object?.boolean}
|
||||
<!-- error occurs here, this is executed when the if should already make it falsy -->
|
||||
{@render children(object.boolean)}
|
||||
{/if}
|
||||
@ -1,9 +1,9 @@
|
||||
<script>
|
||||
import B from './B.svelte';
|
||||
|
||||
let { boolean, closed } = $props();
|
||||
let { boolean, closed, close } = $props();
|
||||
</script>
|
||||
|
||||
<span>{boolean}</span>
|
||||
<span>{boolean} {closed}</span>
|
||||
|
||||
<B {closed} />
|
||||
<B {closed} {close} />
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
<script module>
|
||||
let object = $state();
|
||||
|
||||
export function open() {
|
||||
object = { nested: { boolean: true } };
|
||||
}
|
||||
|
||||
export function close() {
|
||||
object = undefined;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
{#if object?.nested}
|
||||
<!-- error occurs here, this is executed when the if should already make it falsy -->
|
||||
{@render children(object.nested)}
|
||||
{/if}
|
||||
@ -0,0 +1,26 @@
|
||||
import { test } from '../../test';
|
||||
import { normalise_trace_logs } from '../../../helpers.js';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
|
||||
test({ assert, logs }) {
|
||||
const files = { id: 1, items: [{ id: 2, items: [{ id: 3 }, { id: 4 }] }] };
|
||||
// @ts-expect-error
|
||||
files.items[0].parent = files;
|
||||
assert.deepEqual(normalise_trace_logs(logs), [
|
||||
{ log: 'test (main.svelte:5:4)' },
|
||||
{ log: '$state', highlighted: true },
|
||||
{ log: 'filesState.files', highlighted: false },
|
||||
{ log: files },
|
||||
{ log: '$state', highlighted: true },
|
||||
{ log: 'filesState.files.items[0].parent.items', highlighted: false },
|
||||
{ log: files.items },
|
||||
{ log: '$state', highlighted: true },
|
||||
{ log: 'filesState.files.items[0].parent.items[0]', highlighted: false },
|
||||
{ log: files.items[0] }
|
||||
]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
const filesState = $state({ files: {} });
|
||||
let nodes = { id: 1, items: [{ id: 2, items: [{ id: 3 }, { id: 4 }] }] };
|
||||
filesState.files = nodes;
|
||||
function test() {
|
||||
$inspect.trace();
|
||||
filesState.files.items[0].parent = filesState.files;
|
||||
}
|
||||
$effect(test);
|
||||
</script>
|
||||
Loading…
Reference in new issue