Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-27 22:19:04 -05:00
Code Issues Activity

Allow Svelte 5 render slots as snippets (#9285)

Browse source
This commit is contained in:
Bjorn Lu 2023-12-07 22:47:04 +08:00 • committed by GitHub
parent dfbc707908
commit 1aa7fe85c1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/big-shirts-travel.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/svelte': patch
---
When using Svelte 5, slots can now be rendered as snippets

7
packages/integrations/svelte/client-v5.js
View file

@ -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);
}

8
packages/integrations/svelte/server-v5.js
View file

@ -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}>`);
}
}