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, 17 insertions, 12 deletions

diff --git a/packages/integrations/solid/server.js b/packages/integrations/solid/server.js
index dc4f88227..92b614012 100644
--- a/packages/integrations/solid/server.js
+++ b/packages/integrations/solid/server.js
@@ -1,23 +1,28 @@
 import { renderToString, ssr, createComponent } from 'solid-js/web';
 
+const slotName = str => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
+
 function check(Component, props, children) {
 	if (typeof Component !== 'function') return false;
 	const { html } = renderToStaticMarkup(Component, props, children);
 	return typeof html === 'string';
 }
 
-function renderToStaticMarkup(Component, props, children) {
-	const html = renderToString(() =>
-		createComponent(Component, {
-			...props,
-			// In Solid SSR mode, `ssr` creates the expected structure for `children`.
-			// In Solid client mode, `ssr` is just a stub.
-			children: children != null ? ssr(`<astro-fragment>${children}</astro-fragment>`) : children,
-		})
-	);
-	return {
-		html: html,
-	};
+function renderToStaticMarkup(Component, props, { default: children, ...slotted }) {
+	const slots = {};
+	for (const [key, value] of Object.entries(slotted)) {
+		const name = slotName(key);
+		slots[name] = ssr(`<astro-slot name="${name}">${value}</astro-slot>`);
+	}
+	// Note: create newProps to avoid mutating `props` before they are serialized
+	const newProps = { 
+		...props,
+		...slots,
+		// In Solid SSR mode, `ssr` creates the expected structure for `children`.
+		children: children != null ? ssr(`<astro-slot>${children}</astro-slot>`) : children,
+	}
+	const html = renderToString(() => createComponent(Component, newProps));
+	return { html }
 }
 
 export default {