mirror of https://github.com/sveltejs/svelte
Simon H
2 years ago
committed by
GitHub
commit
f38006a1b5
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
perf: bail early when traversing non-state
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: improve ssr html mismatch validation
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: handle TypeScript's optional parameter syntax in snippets
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: improve ssr code generation for class property $derived
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: warn when `$props` rune not called
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: improve derived rune destructuring support
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: allow arbitrary call expressions and optional chaining for snippets
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: add `$set` and `$on` methods in legacy compat mode
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: deduplicate generated props and action arg names
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
error: {
|
||||||
|
code: 'invalid-render-call',
|
||||||
|
message: 'Calling a snippet function using apply, bind or call is not allowed'
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1 @@
|
|||||||
|
{@render snippet.apply(null, [1, 2, 3])}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
accessors: false,
|
||||||
|
async test({ assert, target }) {
|
||||||
|
assert.htmlEqual(target.innerHTML, '<button>foo / foo</button><div></div>');
|
||||||
|
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
button?.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(target.innerHTML, '<button>bar / bar</button><div></div>');
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
import Component from "./sub.svelte"
|
||||||
|
let state = 'foo';
|
||||||
|
let param = '';
|
||||||
|
|
||||||
|
function action(node, _param) {
|
||||||
|
param = _param
|
||||||
|
return {
|
||||||
|
update(_param) {
|
||||||
|
param = _param;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={() => state = 'bar'}>{state} / {param}</button>
|
||||||
|
<Component {action} {state}></Component>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
export let action;
|
||||||
|
export let state;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div use:action={state}></div>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
compileOptions: {
|
||||||
|
legacy: {
|
||||||
|
componentApi: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
html: '<button>0</button>',
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
await button?.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(target.innerHTML, '<button>1</button>');
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<script>
|
||||||
|
import Sub from './sub.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
let count = 0;
|
||||||
|
let component;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
component.$on('increment', (e) => {
|
||||||
|
count += e.detail;
|
||||||
|
component.$set({ count });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Sub bind:this={component} />
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
|
||||||
|
export let count = 0;
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={() => dispatch('increment', 1)}>{count}</button>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `2`
|
||||||
|
});
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
export class Counter {
|
||||||
|
count = $state(0);
|
||||||
|
doubled = $derived(this.count * 2);
|
||||||
|
|
||||||
|
constructor(initialCount = 0) {
|
||||||
|
this.count = initialCount;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const counter = new Counter(1);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{counter.doubled}
|
||||||
|
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const btn = target.querySelector('button');
|
||||||
|
await btn?.click();
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>1 1 1</button>`);
|
||||||
|
|
||||||
|
await btn?.click();
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>2 2 2</button>`);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
|
||||||
|
<script>
|
||||||
|
function get_values() {
|
||||||
|
let a = $state(0);
|
||||||
|
let b = $state(0);
|
||||||
|
let c = $state(0);
|
||||||
|
|
||||||
|
return {
|
||||||
|
get a() { return a },
|
||||||
|
get b() { return b },
|
||||||
|
get c() { return c },
|
||||||
|
increment() {
|
||||||
|
a++;
|
||||||
|
b++;
|
||||||
|
c++;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const { a, b, c, increment } = $derived(get_values());
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={increment}>{a} {b} {c}</button>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<h1>foo</h1>
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
let console_error = console.error;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {any[]}
|
||||||
|
*/
|
||||||
|
const log = [];
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
compileOptions: {
|
||||||
|
dev: true
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `<p></p><h1>foo</h1><p></p>`,
|
||||||
|
|
||||||
|
recover: true,
|
||||||
|
|
||||||
|
before_test() {
|
||||||
|
console.error = (x) => {
|
||||||
|
log.push(x);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
after_test() {
|
||||||
|
console.error = console_error;
|
||||||
|
log.length = 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
async test({ assert, target, variant }) {
|
||||||
|
await assert.htmlEqual(target.innerHTML, `<p></p><h1>foo</h1><p></p>`);
|
||||||
|
if (variant === 'hydrate') {
|
||||||
|
assert.equal(
|
||||||
|
log[0],
|
||||||
|
`Svelte SSR validation error:\n\n<h1> is invalid inside <p>\n\n` +
|
||||||
|
'Ensure your components render valid HTML as the browser will try to repair invalid HTML, ' +
|
||||||
|
'which may result in content being shifted around and will likely result in a hydration mismatch.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
import Component from "./Component.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<Component />
|
||||||
|
</p>
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `
|
||||||
|
<p>foo</p>
|
||||||
|
<hr>
|
||||||
|
<p>foo</p>
|
||||||
|
<hr>
|
||||||
|
<p>foo</p>
|
||||||
|
<hr>
|
||||||
|
<p>foo</p>
|
||||||
|
<hr>
|
||||||
|
<p>bar</p>
|
||||||
|
<hr>
|
||||||
|
<hr>
|
||||||
|
<button>toggle</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const btn = target.querySelector('button');
|
||||||
|
await btn?.click();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<p>bar</p>
|
||||||
|
<hr>
|
||||||
|
<p>bar</p>
|
||||||
|
<hr>
|
||||||
|
<p>foo</p>
|
||||||
|
<hr>
|
||||||
|
<p>foo</p>
|
||||||
|
<hr>
|
||||||
|
<p>foo</p>
|
||||||
|
<hr>
|
||||||
|
<p>foo</p>
|
||||||
|
<hr>
|
||||||
|
<p>foo</p>
|
||||||
|
<button>toggle</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<script>
|
||||||
|
let { snippets, snippet, optional } = $props();
|
||||||
|
|
||||||
|
function getOptional() {
|
||||||
|
return optional;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{@render snippets[snippet]()}
|
||||||
|
<hr>
|
||||||
|
{@render snippets?.[snippet]?.()}
|
||||||
|
<hr>
|
||||||
|
{@render snippets.foo()}
|
||||||
|
<hr>
|
||||||
|
{@render snippets.foo?.()}
|
||||||
|
<hr>
|
||||||
|
{@render (optional ?? snippets.bar)()}
|
||||||
|
<hr>
|
||||||
|
{@render optional?.()}
|
||||||
|
<hr>
|
||||||
|
{@render getOptional()?.()}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
import Child from './child.svelte';
|
||||||
|
let snippet = $state('foo');
|
||||||
|
let show = $state(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#snippet foo()}
|
||||||
|
<p>foo</p>
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
{#snippet bar()}
|
||||||
|
<p>bar</p>
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
<Child snippets={{foo, bar}} {snippet} optional={show ? foo : undefined} />
|
||||||
|
|
||||||
|
<button on:click={() => { snippet = 'bar'; show = true; }}>toggle</button>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: '1 2 3 4 5'
|
||||||
|
});
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#snippet counter1(c: number)}
|
||||||
|
{c}
|
||||||
|
{/snippet}
|
||||||
|
{#snippet counter2({ c }: {c: number})}
|
||||||
|
{c}
|
||||||
|
{/snippet}
|
||||||
|
{#snippet counter3(c?: number)}
|
||||||
|
{c}
|
||||||
|
{/snippet}
|
||||||
|
{#snippet counter4(c: number = 4)}
|
||||||
|
{c}
|
||||||
|
{/snippet}
|
||||||
|
{#snippet counter5(c?: number = 5)}
|
||||||
|
{c}
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
{@render counter1(1)}
|
||||||
|
{@render counter2({ c: 2 })}
|
||||||
|
{@render counter3(3)}
|
||||||
|
{@render counter4()}
|
||||||
|
{@render counter5()}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({});
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<script>
|
||||||
|
let { a } = $props;
|
||||||
|
</script>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "invalid-props-declaration",
|
||||||
|
"message": "Component properties are declared using $props() in runes mode. Did you forget to call the function?",
|
||||||
|
"start": {
|
||||||
|
"column": 5,
|
||||||
|
"line": 2
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"column": 19,
|
||||||
|
"line": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
Loading…
Reference in new issue