mirror of https://github.com/sveltejs/svelte
Simon Holthausen
2 weeks ago
commit
626b9fcf2b
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: place instance-level snippets inside async body
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: restore batch along with effect context
|
||||
@ -0,0 +1,10 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async: true,
|
||||
error: {
|
||||
code: 'const_tag_invalid_reference',
|
||||
message: 'The `{@const foo = ...}` declaration is not available in this snippet ',
|
||||
position: [376, 379]
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,32 @@
|
||||
<svelte:options runes />
|
||||
|
||||
<!-- ok -->
|
||||
<svelte:boundary>
|
||||
{@const foo = 'bar'}
|
||||
|
||||
{#snippet other()}
|
||||
{foo}
|
||||
{/snippet}
|
||||
|
||||
{foo}
|
||||
|
||||
<svelte:boundary>
|
||||
{#snippet failed()}
|
||||
{foo}
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
|
||||
{#snippet failed()}
|
||||
{@const foo = 'bar'}
|
||||
{foo}
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
|
||||
<!-- error -->
|
||||
<svelte:boundary>
|
||||
{@const foo = 'bar'}
|
||||
|
||||
{#snippet failed()}
|
||||
{foo}
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1,10 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async: true,
|
||||
error: {
|
||||
code: 'const_tag_invalid_reference',
|
||||
message: 'The `{@const foo = ...}` declaration is not available in this snippet ',
|
||||
position: [298, 301]
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
<svelte:options runes />
|
||||
|
||||
<!-- ok -->
|
||||
<Component>
|
||||
{@const foo = 'bar'}
|
||||
{foo}
|
||||
|
||||
<Component>
|
||||
{#snippet prop()}
|
||||
{foo}
|
||||
{/snippet}
|
||||
</Component>
|
||||
|
||||
{#snippet prop()}
|
||||
{@const foo = 'bar'}
|
||||
{foo}
|
||||
{/snippet}
|
||||
</Component>
|
||||
|
||||
<!-- error -->
|
||||
<Component>
|
||||
{@const foo = 'bar'}
|
||||
|
||||
{#snippet prop()}
|
||||
{foo}
|
||||
{/snippet}
|
||||
</Component>
|
||||
@ -0,0 +1,9 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, 'value');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
const value = await 'value';
|
||||
</script>
|
||||
|
||||
{#snippet valueSnippet()}
|
||||
{value}
|
||||
{/snippet}
|
||||
|
||||
{@render valueSnippet()}
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import App from './app.svelte';
|
||||
</script>
|
||||
<svelte:boundary>
|
||||
{#snippet pending()}
|
||||
{/snippet}
|
||||
<App />
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1,9 @@
|
||||
import { tick } from 'svelte';
|
||||
import { ok, test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, '<p>foo bar</p>');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,17 @@
|
||||
<script>
|
||||
function foo() {
|
||||
return 'foo';
|
||||
}
|
||||
|
||||
async function bar() {
|
||||
return Promise.resolve('bar');
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:boundary>
|
||||
<p>{foo()} {await bar()}</p>
|
||||
|
||||
{#snippet pending()}
|
||||
<p>pending</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import { route } from "./main.svelte";
|
||||
|
||||
await new Promise(async (_, reject) => {
|
||||
await Promise.resolve();
|
||||
route.current = 'other'
|
||||
route.reject = reject;
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,15 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>reject</button> <p>pending</p>`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
const [reject] = target.querySelectorAll('button');
|
||||
|
||||
await tick();
|
||||
reject.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, '<button>reject</button> <p>route: other</p>');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,18 @@
|
||||
<script module>
|
||||
import Child from './Child.svelte';
|
||||
export let route = $state({ current: 'home' });
|
||||
</script>
|
||||
|
||||
<button onclick={() => route.reject()}>reject</button>
|
||||
|
||||
<svelte:boundary>
|
||||
{#if route.current === 'home'}
|
||||
<Child />
|
||||
{:else}
|
||||
<p>route: {route.current}</p>
|
||||
{/if}
|
||||
|
||||
{#snippet pending()}
|
||||
<p>pending</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import { route } from "./main.svelte";
|
||||
|
||||
await new Promise(async (_, reject) => {
|
||||
route.reject = reject;
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,14 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>reject</button> <p>pending</p>`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
const [reject] = target.querySelectorAll('button');
|
||||
|
||||
reject.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, '<button>reject</button> <p>failed</p>');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,18 @@
|
||||
<script module>
|
||||
import Child from './Child.svelte';
|
||||
export let route = $state({});
|
||||
</script>
|
||||
|
||||
<button onclick={() => route.reject()}>reject</button>
|
||||
|
||||
<svelte:boundary>
|
||||
<Child />
|
||||
|
||||
{#snippet pending()}
|
||||
<p>pending</p>
|
||||
{/snippet}
|
||||
|
||||
{#snippet failed()}
|
||||
<p>failed</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -1,3 +1,3 @@
|
||||
<script>
|
||||
throw new Error();
|
||||
</script>
|
||||
</script>
|
||||
@ -0,0 +1,18 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip_async: true,
|
||||
html: '<button></button><p>2</p>',
|
||||
mode: ['client'],
|
||||
test({ target, assert }) {
|
||||
const btn = target.querySelector('button');
|
||||
const p = target.querySelector('p');
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.equal(p?.innerHTML, '4');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
import FlakyComponent from "./FlakyComponent.svelte";
|
||||
let test=$state(1);
|
||||
</script>
|
||||
|
||||
<button onclick={()=>test++}></button>
|
||||
|
||||
<svelte:boundary>
|
||||
{@const double = test * 2}
|
||||
{#snippet failed()}
|
||||
<p>{double}</p>
|
||||
{/snippet}
|
||||
<FlakyComponent />
|
||||
</svelte:boundary>
|
||||
@ -1,14 +1,10 @@
|
||||
<script>
|
||||
import FlakyComponent from "./FlakyComponent.svelte";
|
||||
let test=$state(1);
|
||||
let count = $state(1);
|
||||
</script>
|
||||
|
||||
<button onclick={()=>test++}></button>
|
||||
<button onclick={()=>count++}>increment</button>
|
||||
|
||||
<svelte:boundary>
|
||||
{@const double = test * 2}
|
||||
{#snippet failed()}
|
||||
<p>{double}</p>
|
||||
{/snippet}
|
||||
<FlakyComponent />
|
||||
</svelte:boundary>
|
||||
{@const double = count * 2}
|
||||
<p>{double}</p>
|
||||
</svelte:boundary>
|
||||
|
||||
@ -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