Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

Add support for Svelte 5 @render syntax (#12390)

Browse source 
Co-authored-by: Jonas Robertsson <jonas.robertsson@icloud.com>
This commit is contained in:
Bjorn Lu 2024-11-06 22:09:22 +08:00 committed by GitHub
parent b7e46910fb
commit 6fd3d5960f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 30 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/shaggy-kids-juggle.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/svelte': patch
---
Adds support for Svelte 5's new `@render` syntax while maintaining backward compatibility with traditional slots.

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

@ -8,7 +8,11 @@ export default (element) => {
let children = undefined;
let $$slots = undefined;
let renderFns = {};
for (const [key, value] of Object.entries(slotted)) {
// Legacy slot support
$$slots ??= {};
if (key === 'default') {
$$slots.default = true;
@ -20,6 +24,16 @@ export default (element) => {
render: () => `<astro-slot name="${key}">${value}</astro-slot>`,
}));
}
// @render support for Svelte ^5.0
if (key === 'default') {
renderFns.children = createRawSnippet(() => ({
render: () => `<astro-slot>${value}</astro-slot>`
}));
} else {
renderFns[key] = createRawSnippet(() => ({
render: () => `<astro-slot name="${key}">${value}</astro-slot>`
}));
}
}
const bootstrap = client !== 'only' ? hydrate : mount;
@ -28,6 +42,7 @@ export default (element) => {
...props,
children,
$$slots,
...renderFns
});
} else {
const component = bootstrap(Component, {
@ -36,6 +51,7 @@ export default (element) => {
...props,
children,
$$slots,
...renderFns
},
});
existingApplications.set(element, component);

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

@ -17,7 +17,10 @@ async function renderToStaticMarkup(Component, props, slotted, metadata) {
let children = undefined;
let $$slots = undefined;
const renderProps = {};
for (const [key, value] of Object.entries(slotted)) {
// Legacy slot support
$$slots ??= {};
if (key === 'default') {
$$slots.default = true;
@ -29,6 +32,11 @@ async function renderToStaticMarkup(Component, props, slotted, metadata) {
render: () => `<${tagName} name="${key}">${value}</${tagName}>`,
}));
}
// @render support for Svelte ^5.0
const slotName = key === 'default' ? 'children' : key;
renderProps[slotName] = createRawSnippet(() => ({
render: () => `<${tagName}${key !== 'default' ? ` name="${key}"` : ''}>${value}</${tagName}>`
}));
}
const result = render(Component, {
@ -36,6 +44,7 @@ async function renderToStaticMarkup(Component, props, slotted, metadata) {
...props,
children,
$$slots,
...renderProps
},
});
return { html: result.body };