diff options
| -rw-r--r-- | .changeset/big-shirts-travel.md | 5 | ||||
| -rw-r--r-- | packages/integrations/svelte/client-v5.js | 7 | ||||
| -rw-r--r-- | packages/integrations/svelte/server-v5.js | 8 |
3 files changed, 17 insertions, 3 deletions
diff --git a/.changeset/big-shirts-travel.md b/.changeset/big-shirts-travel.md new file mode 100644 index 000000000..2adfa3e4e --- /dev/null +++ b/.changeset/big-shirts-travel.md @@ -0,0 +1,5 @@ +--- +'@astrojs/svelte': patch +--- + +When using Svelte 5, slots can now be rendered as snippets diff --git a/packages/integrations/svelte/client-v5.js b/packages/integrations/svelte/client-v5.js index b3d2e1964..eaa06974c 100644 --- a/packages/integrations/svelte/client-v5.js +++ b/packages/integrations/svelte/client-v5.js @@ -1,4 +1,8 @@ import { mount } from 'svelte'; +import { add_snippet_symbol } from 'svelte/internal'; + +// Allow a slot to be rendered as a snippet (dev validation only) +const tagSlotAsSnippet = import.meta.env.DEV ? add_snippet_symbol : (s) => s; export default (element) => { return async (Component, props, slotted) => { @@ -32,7 +36,7 @@ function createSlotDefinition(key, children) { /** * @param {Comment} $$anchor A comment node for slots in Svelte 5 */ - return ($$anchor, _$$slotProps) => { + const fn = ($$anchor, _$$slotProps) => { const parent = $$anchor.parentNode; const el = document.createElement('div'); el.innerHTML = `<astro-slot${ @@ -40,4 +44,5 @@ function createSlotDefinition(key, children) { }>${children}</astro-slot>`; parent.insertBefore(el.children[0], $$anchor); }; + return tagSlotAsSnippet(fn); } diff --git a/packages/integrations/svelte/server-v5.js b/packages/integrations/svelte/server-v5.js index 105b843fb..e1d246ff4 100644 --- a/packages/integrations/svelte/server-v5.js +++ b/packages/integrations/svelte/server-v5.js @@ -1,4 +1,8 @@ import { render } from 'svelte/server'; +import { add_snippet_symbol } from 'svelte/internal'; + +// Allow a slot to be rendered as a snippet (dev validation only) +const tagSlotAsSnippet = import.meta.env.DEV ? add_snippet_symbol : (s) => s; function check(Component) { // Svelte 5 generated components always accept these two props @@ -18,10 +22,10 @@ async function renderToStaticMarkup(Component, props, slotted, metadata) { let $$slots = undefined; for (const [key, value] of Object.entries(slotted)) { if (key === 'default') { - children = () => `<${tagName}>${value}</${tagName}>`; + children = tagSlotAsSnippet(() => `<${tagName}>${value}</${tagName}>`); } else { $$slots ??= {}; - $$slots[key] = () => `<${tagName} name="${key}">${value}</${tagName}>`; + $$slots[key] = tagSlotAsSnippet(() => `<${tagName} name="${key}">${value}</${tagName}>`); } } |