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

diff --git a/packages/integrations/lit/server.js b/packages/integrations/lit/server.js
index bc8995061..2f9076672 100644
--- a/packages/integrations/lit/server.js
+++ b/packages/integrations/lit/server.js
@@ -26,7 +26,7 @@ async function check(Component, _props, _children) {
 	return !!(await isLitElement(Component));
 }
 
-function* render(Component, attrs, children) {
+function* render(Component, attrs, slots) {
 	let tagName = Component;
 	if (typeof tagName !== 'string') {
 		tagName = Component[Symbol.for('tagName')];
@@ -57,15 +57,23 @@ function* render(Component, attrs, children) {
 		yield* shadowContents;
 		yield '</template>';
 	}
-	yield children || ''; // don’t print “undefined” as string
+	if (slots) {
+		for (const [slot, value] of Object.entries(slots)) {
+			if (slot === 'default') {
+				yield `<astro-slot>${value || ''}</astro-slot>`;
+			} else {
+				yield `<astro-slot slot="${slot}">${value || ''}</astro-slot>`;
+			}
+		}
+	}
 	yield `</${tagName}>`;
 }
 
-async function renderToStaticMarkup(Component, props, children) {
+async function renderToStaticMarkup(Component, props, slots) {
 	let tagName = Component;
 
 	let out = '';
-	for (let chunk of render(tagName, props, children)) {
+	for (let chunk of render(tagName, props, slots)) {
 		out += chunk;
 	}