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