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

diff --git a/packages/integrations/solid/client.js b/packages/integrations/solid/client.js
index 867d951c6..ceb7546d2 100644
--- a/packages/integrations/solid/client.js
+++ b/packages/integrations/solid/client.js
@@ -2,7 +2,7 @@ import { sharedConfig } from 'solid-js';
 import { hydrate, render, createComponent } from 'solid-js/web';
 
 export default (element) =>
-	(Component, props, childHTML, { client }) => {
+	(Component, props, slotted, { client }) => {
 		// Prepare global object expected by Solid's hydration logic
 		if (!window._$HY) {
 			window._$HY = { events: [], completed: new WeakSet(), r: {} };
@@ -11,26 +11,30 @@ export default (element) =>
 
 		const fn = client === 'only' ? render : hydrate;
 
-		// Perform actual hydration
-		let children;
+		let _slots = {};
+		if (Object.keys(slotted).length > 0) {
+			// hydrating
+			if (sharedConfig.context) {
+				element.querySelectorAll('astro-slot').forEach((slot) => {
+					_slots[slot.getAttribute('name') || 'default'] = slot.cloneNode(true);
+				});
+			} else {
+				for (const [key, value] of Object.entries(slotted)) {
+					_slots[key] = document.createElement('astro-slot');
+					if (key !== 'default') _slots[key].setAttribute('name', key);
+					_slots[key].innerHTML = value;
+				}
+			}
+		}
+
+		const { default: children, ...slots } = _slots;
+
 		fn(
 			() =>
 				createComponent(Component, {
 					...props,
-					get children() {
-						if (childHTML != null) {
-							// hydrating
-							if (sharedConfig.context) {
-								children = element.querySelector('astro-fragment');
-							}
-
-							if (children == null) {
-								children = document.createElement('astro-fragment');
-								children.innerHTML = childHTML;
-							}
-						}
-						return children;
-					},
+					...slots,
+					children
 				}),
 			element
 		);