Enable named slots in renderers (#3652)

* feat: pass all slots to renderers

* refactor: pass `slots` as top-level props

* test: add named slot test for frameworks

* fix: nested hydration, slots that are not initially rendered

* test: add nested-recursive e2e test

* fix: render unmatched custom element children

* chore: update lockfile

* fix: unrendered slots for client:only

* fix(lit): ensure lit integration uses new slots API

* chore: add changeset

* chore: add changesets

* fix: lit slots

* feat: convert dash-case or snake_case slots to camelCase for JSX

* feat: remove tmpl special logic

* test: add slot components-in-markdown test

* refactor: prefer Object.entries.map() to for/of loop

Co-authored-by: Nate Moore <nate@astro.build>

1 files changed, 6 insertions, 8 deletions

diff --git a/packages/integrations/svelte/server.js b/packages/integrations/svelte/server.js
index 3c989cd5a..7a5610b4a 100644
--- a/packages/integrations/svelte/server.js
+++ b/packages/integrations/svelte/server.js
@@ -1,15 +1,13 @@
-import SvelteWrapper from './Wrapper.svelte.ssr.js';
-
 function check(Component) {
 	return Component['render'] && Component['$$render'];
 }
 
-async function renderToStaticMarkup(Component, props, children) {
-	const { html } = SvelteWrapper.render({
-		__astro_component: Component,
-		__astro_children: children,
-		...props,
-	});
+async function renderToStaticMarkup(Component, props, slotted) {
+	const slots = {};
+	for (const [key, value] of Object.entries(slotted)) {
+		slots[key] = () => `<astro-slot${key === 'default' ? '' : ` name="${key}"`}>${value}</astro-slot>`;
+	}
+	const { html } = Component.render(props, { $$slots: slots });
 	return { html };
 }