mirror of https://github.com/sveltejs/svelte
paoloricciuti
2 years ago
commit
71fbcbdc9b
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: hydrate multiple `<svelte:head>` elements correctly
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: assign correct scope to attributes of named slot
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
feat: add createRawSnippet API
|
||||
@ -0,0 +1,22 @@
|
||||
/** @import { Snippet } from 'svelte' */
|
||||
/** @import { Payload } from '#server' */
|
||||
/** @import { Getters } from '#shared' */
|
||||
import { add_snippet_symbol } from '../../shared/validate.js';
|
||||
|
||||
/**
|
||||
* Create a snippet programmatically
|
||||
* @template {unknown[]} Params
|
||||
* @param {(...params: Getters<Params>) => {
|
||||
* render: () => string
|
||||
* setup?: (element: Element) => void
|
||||
* }} fn
|
||||
* @returns {Snippet<Params>}
|
||||
*/
|
||||
export function createRawSnippet(fn) {
|
||||
return add_snippet_symbol((/** @type {Payload} */ payload, /** @type {Params} */ ...args) => {
|
||||
var getters = /** @type {Getters<Params>} */ (args.map((value) => () => value));
|
||||
payload.out += fn(...getters)
|
||||
.render()
|
||||
.trim();
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
error: {
|
||||
code: 'snippet_invalid_rest_parameter',
|
||||
message: 'Snippets do not support rest parameters; use an array instead',
|
||||
position: [19, 26]
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,3 @@
|
||||
{#snippet children(...args)}
|
||||
{args}
|
||||
{/snippet}
|
||||
@ -1,2 +1,2 @@
|
||||
{@html '<meta name="head_nested_html" content="head_nested_html">'}
|
||||
<meta name="head_nested" content="head_nested">
|
||||
<meta name="head_nested" content="head_nested" />
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<script>
|
||||
let text = $state('foo');
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{@html '<meta name="nested_html" content="nested_html">'}
|
||||
<meta name="nested" content="nested">
|
||||
<meta name="nested" content="nested" />
|
||||
<meta name="foo" content={text} />
|
||||
</svelte:head>
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
snapshot(target) {
|
||||
return {
|
||||
p: target.querySelector('p')
|
||||
};
|
||||
}
|
||||
});
|
||||
@ -0,0 +1 @@
|
||||
<!--[--><p>hydrated</p><!--]-->
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
import { createRawSnippet } from 'svelte';
|
||||
|
||||
const snippet = createRawSnippet(() => ({
|
||||
render: () => `
|
||||
<p>rendered</p>
|
||||
`,
|
||||
setup(p) {
|
||||
p.textContent = 'hydrated';
|
||||
}
|
||||
}));
|
||||
</script>
|
||||
|
||||
{@render snippet()}
|
||||
@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
export let onclick;
|
||||
</script>
|
||||
|
||||
<button {onclick}>
|
||||
<slot />
|
||||
</button>
|
||||
@ -0,0 +1 @@
|
||||
<slot name="item" item={1} />
|
||||
@ -0,0 +1,12 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
test({ assert, logs, target }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
btn?.click();
|
||||
flushSync();
|
||||
assert.deepEqual(logs, [1]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,8 @@
|
||||
<script lang="ts">
|
||||
import Parent from './Parent.svelte';
|
||||
import Child from './Child.svelte';
|
||||
</script>
|
||||
|
||||
<Parent>
|
||||
<Child slot="item" let:item onclick={() => console.log(item)}>asd</Child>
|
||||
</Parent>
|
||||
@ -0,0 +1,11 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
test({ target, assert, logs }) {
|
||||
const button = target.querySelector('button');
|
||||
|
||||
flushSync(() => button?.click());
|
||||
assert.deepEqual(logs, ['tearing down']);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
import { createRawSnippet } from 'svelte';
|
||||
|
||||
let show = $state(true);
|
||||
|
||||
const snippet = createRawSnippet(() => ({
|
||||
render: () => `<hr>`,
|
||||
setup(p) {
|
||||
return () => console.log('tearing down')
|
||||
}
|
||||
}));
|
||||
</script>
|
||||
|
||||
<button onclick={() => show = !show}>click</button>
|
||||
|
||||
{#if show}
|
||||
{@render snippet()}
|
||||
{/if}
|
||||
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true // Render in dev mode to check that the validation error is not thrown
|
||||
},
|
||||
|
||||
html: `<button>click</button><p>clicks: 0</p>`,
|
||||
|
||||
test({ target, assert }) {
|
||||
const button = target.querySelector('button');
|
||||
|
||||
flushSync(() => button?.click());
|
||||
assert.htmlEqual(target.innerHTML, `<button>click</button><p>clicks: 1</p>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
import { createRawSnippet } from 'svelte';
|
||||
|
||||
let count = $state(0);
|
||||
|
||||
const hello = createRawSnippet((count) => ({
|
||||
render: () => `
|
||||
<p>clicks: ${count()}</p>
|
||||
`,
|
||||
setup(p) {
|
||||
$effect(() => {
|
||||
p.textContent = `clicks: ${count()}`
|
||||
});
|
||||
}
|
||||
}));
|
||||
</script>
|
||||
|
||||
<button onclick={() => count += 1}>click</button>
|
||||
|
||||
{@render hello(count)}
|
||||
Loading…
Reference in new issue