mirror of https://github.com/sveltejs/svelte
Raw snippet alternative (#12425)
* feat: add createRawSnippet API * handle missing hydrate function, improve types * fix * tweak types * beef up test * build * types * oops this was temporary * typo * regenerate types * make mount/render optional, error if missing * move code to new module * test hydration * simpler createRawSnippet API * regenerate types * change signature * docs * h1 -> node * allow `setup` to return a teardown function --------- Co-authored-by: Dominic Gannaway <dg@domgan.com>pull/12472/head
parent
9666215e6d
commit
c287bd503d
@ -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({
|
||||
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,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