mirror of https://github.com/sveltejs/svelte
Paolo Ricciuti
2 months ago
committed by
GitHub
commit
8d5f108c31
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: inline primitive constants in attribute values during SSR
|
||||
@ -0,0 +1,7 @@
|
||||
<style>
|
||||
@keyframes foo {
|
||||
0% { left: 0px; }
|
||||
50% { left: 50px; }
|
||||
100% { left: 100px; }
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<style>
|
||||
@keyframes foo {
|
||||
0% {
|
||||
left: 0px;
|
||||
}
|
||||
50% {
|
||||
left: 50px;
|
||||
}
|
||||
100% {
|
||||
left: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1 @@
|
||||
<svelte:body onmousemove={handleMousemove} />
|
||||
@ -0,0 +1 @@
|
||||
<svelte:body onmousemove={handleMousemove}></svelte:body>
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import { push } from "./main.svelte";
|
||||
const x = await push(1);
|
||||
const y = await push(2);
|
||||
</script>
|
||||
|
||||
{x} {y}
|
||||
@ -0,0 +1,26 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [show, resolve, count] = target.querySelectorAll('button');
|
||||
|
||||
show.click();
|
||||
await tick();
|
||||
resolve.click();
|
||||
await tick();
|
||||
count.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
'<button>show</button> <button>resolve</button> <button>1</button>'
|
||||
);
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
'1 2 <button>show</button> <button>resolve</button> <button>1</button>'
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,23 @@
|
||||
<script module>
|
||||
const queued = [];
|
||||
export function push(v) {
|
||||
return new Promise((fulfil) => {
|
||||
queued.push(() => fulfil(v));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import Child from "./Child.svelte";
|
||||
|
||||
let show = $state(false);
|
||||
let count = $state(0);
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<Child />
|
||||
{/if}
|
||||
|
||||
<button onclick={() => show = true}>show</button>
|
||||
<button onclick={() => queued.shift()?.()}>resolve</button>
|
||||
<button onclick={() => count++}>{count}</button>
|
||||
@ -0,0 +1,21 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: { dev: true }, // for testing that teardown effect in eager $.get(loaded) doesn't lead to a crash (because it means REACTION_RAN is set, which means unfreeze_derived runs)
|
||||
async test({ assert, target }) {
|
||||
const [count, shift] = target.querySelectorAll('button');
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>0</button><button>shift</button><p>0</p>`);
|
||||
|
||||
count.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>1</button><button>shift</button><p>0 (...)</p>`);
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>1</button><button>shift</button><p>1</p>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
let count = $state(0);
|
||||
|
||||
let resolvers = [];
|
||||
|
||||
function push(value) {
|
||||
const { promise, resolve } = Promise.withResolvers();
|
||||
resolvers.push(() => resolve(value));
|
||||
return promise;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => count += 1}>{$state.eager(count)}</button>
|
||||
<button onclick={() => resolvers.shift()?.()}>shift</button>
|
||||
|
||||
<svelte:boundary>
|
||||
{@const loaded = $state.eager(count) === count}
|
||||
<p>{await push(count)} {loaded ? '' : '(...)'}</p>
|
||||
|
||||
{#snippet pending()}{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
// Not read before the outro, by which time the derived is destroyed
|
||||
let duration = $derived(10);
|
||||
</script>
|
||||
|
||||
<div in:fly={{ duration: 10 }} out:fly={{ duration }}>
|
||||
hello
|
||||
</div>
|
||||
@ -0,0 +1,32 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { raf } from '../../../animation-helpers';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [fly_in, fly_out] = target.querySelectorAll('button');
|
||||
|
||||
fly_in.click();
|
||||
flushSync();
|
||||
raf.tick(25);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>fly in</button>
|
||||
<button>fly out</button>
|
||||
<div style="">hello</div>
|
||||
`
|
||||
);
|
||||
|
||||
fly_out.click();
|
||||
flushSync();
|
||||
raf.tick(50);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>fly in</button>
|
||||
<button>fly out</button>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
let show = $state(false);
|
||||
</script>
|
||||
|
||||
<button onclick={() => (show = true)}>fly in</button>
|
||||
<button onclick={() => (show = false)}>fly out</button>
|
||||
|
||||
{#if show}
|
||||
<Child />
|
||||
{/if}
|
||||
@ -1,8 +1,9 @@
|
||||
import * as $ from 'svelte/internal/server';
|
||||
|
||||
export default function Nullish_coallescence_omittance($$renderer) {
|
||||
export default function Nullish_coallescence_omittance($$renderer, $$props) {
|
||||
let name = 'world';
|
||||
let count = 0;
|
||||
let { value } = $$props;
|
||||
|
||||
$$renderer.push(`<h1>Hello, world!</h1> <b>123</b> <button>Count is ${$.escape(count)}</button> <h1>Hello, world</h1>`);
|
||||
$$renderer.push(`<h1>Hello, world!</h1> <b>123</b> <button>Count is ${$.escape(count)}</button> <h1>Hello, world</h1> <div${$.attr('title', `Hello, world ${$.stringify(count)} 1 ${typeof value} ${$.stringify(value)}`)}></div>`);
|
||||
}
|
||||
@ -1,8 +1,10 @@
|
||||
<script>
|
||||
let name = 'world';
|
||||
let count = $state(0);
|
||||
let { value } = $props();
|
||||
</script>
|
||||
<h1>Hello, {null}{name}!</h1>
|
||||
<b>{1 ?? 'stuff'}{2 ?? 'more stuff'}{3 ?? 'even more stuff'}</b>
|
||||
<button onclick={()=>count++}>Count is {count}</button>
|
||||
<h1>Hello, {name ?? 'earth' ?? null}</h1>
|
||||
<h1>Hello, {name ?? 'earth' ?? null}</h1>
|
||||
<div title="Hello, {name} {count} {null} {1} {undefined} {typeof value} {value}"></div>
|
||||
|
||||
Loading…
Reference in new issue