Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-31 23:31:30 -05:00
Code Issues Activity

Fix Svelte 5 slots change (#11490)

Browse source 
* Fix Svelte 5 slots change

* Use alternative

* Fix Svelte 5 slots
This commit is contained in:
Bjorn Lu 2024-07-18 21:32:39 +08:00 • committed by GitHub
parent 7c9ed71bf1
commit 6ad02b5902
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 26 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/nine-carpets-doubt.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/svelte': minor
---
Bumps Svelte 5 peer dependency to `^5.0.0-next.190` and support the latest slots/snippets API

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

@ -1,8 +1,4 @@
import { hydrate, mount, unmount } from 'svelte';
import { add_snippet_symbol } from 'svelte/internal/client';
// Allow a slot to be rendered as a snippet (dev validation only)
const tagSlotAsSnippet = import.meta.env.DEV ? add_snippet_symbol : (s) => s;
import { createRawSnippet, hydrate, mount, unmount } from 'svelte';
export default (element) => {
return async (Component, props, slotted, { client }) => {
@ -11,11 +7,16 @@ export default (element) => {
let children = undefined;
let $$slots = undefined;
for (const [key, value] of Object.entries(slotted)) {
$$slots ??= {};
if (key === 'default') {
children = createSlotDefinition(key, value);
$$slots.default = true;
children = createRawSnippet(() => ({
render: () => `<astro-slot>${value}</astro-slot>`,
}));
} else {
$$slots ??= {};
$$slots[key] = createSlotDefinition(key, value);
$$slots[key] = createRawSnippet(() => ({
render: () => `<astro-slot name="${key}">${value}</astro-slot>`,
}));
}
}
@ -33,18 +34,3 @@ export default (element) => {
element.addEventListener('astro:unmount', () => unmount(component), { once: true });
};
};
function createSlotDefinition(key, children) {
/**
* @param {Comment} $$anchor A comment node for slots in Svelte 5
*/
const fn = ($$anchor, _$$slotProps) => {
const parent = $$anchor.parentNode;
const el = document.createElement('div');
el.innerHTML = `<astro-slot${
key === 'default' ? '' : ` name="${key}"`
}>${children}</astro-slot>`;
parent.insertBefore(el.children[0], $$anchor);
};
return tagSlotAsSnippet(fn);
}

2
packages/integrations/svelte/package.json
View file

@ -61,7 +61,7 @@
},
"peerDependencies": {
"astro": "^4.0.0",
"svelte": "^4.0.0 || ^5.0.0-next.90",
"svelte": "^4.0.0 || ^5.0.0-next.190",
"typescript": "^5.3.3"
},
"engines": {

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

@ -1,9 +1,6 @@
import { add_snippet_symbol } from 'svelte/internal/server';
import { createRawSnippet } from 'svelte';
import { render } from 'svelte/server';
// 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
const str = Component.toString();
@ -21,22 +18,27 @@ async function renderToStaticMarkup(Component, props, slotted, metadata) {
let children = undefined;
let $$slots = undefined;
for (const [key, value] of Object.entries(slotted)) {
$$slots ??= {};
if (key === 'default') {
children = tagSlotAsSnippet(() => `<${tagName}>${value}</${tagName}>`);
$$slots.default = true;
children = createRawSnippet(() => ({
render: () => `<${tagName}>${value}</${tagName}>`,
}));
} else {
$$slots ??= {};
$$slots[key] = tagSlotAsSnippet(() => `<${tagName} name="${key}">${value}</${tagName}>`);
$$slots[key] = createRawSnippet(() => ({
render: () => `<${tagName} name="${key}">${value}</${tagName}>`,
}));
}
}
const { html } = render(Component, {
const result = render(Component, {
props: {
...props,
children,
$$slots,
},
});
return { html };
return { html: result.body };
}
export default {