From 13b782f421871af36978f29154c715c66739d475 Mon Sep 17 00:00:00 2001
From: Ryan Carniato <ryansolid@gmail.com>
Date: Wed, 6 Apr 2022 12:42:01 -0700
Subject: [PATCH] fix: Nested hydration with Solid (#3003)

* fix: solid nested hydration

* Create ten-rice-unite.md

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
---
 .changeset/ten-rice-unite.md                |  6 +++++
 packages/integrations/solid/client.js       | 27 +++++++++++++++------
 packages/renderers/renderer-solid/client.js | 27 +++++++++++++++------
 3 files changed, 44 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/ten-rice-unite.md

diff --git a/.changeset/ten-rice-unite.md b/.changeset/ten-rice-unite.md
new file mode 100644
index 000000000000..9ae22d652951
--- /dev/null
+++ b/.changeset/ten-rice-unite.md
@@ -0,0 +1,6 @@
+---
+"@astrojs/solid-js": patch
+"@astrojs/renderer-solid": patch
+---
+
+Improve nested hydration with Solid
diff --git a/packages/integrations/solid/client.js b/packages/integrations/solid/client.js
index b67b3acdb7b9..4424e9b98526 100644
--- a/packages/integrations/solid/client.js
+++ b/packages/integrations/solid/client.js
@@ -1,14 +1,25 @@
+import { sharedConfig } from 'solid-js';
 import { hydrate, createComponent } from 'solid-js/web';
 
 export default (element) => (Component, props, childHTML) => {
 	let children;
-	if (childHTML != null) {
-		children = document.createElement('astro-fragment');
-		children.innerHTML = childHTML;
-	}
+	hydrate(
+		() =>
+			createComponent(Component, {
+				...props,
+				get children() {
+					if (childHTML != null) {
+						// hydrating
+						if (sharedConfig.context) children = element.querySelector('astro-fragment');
 
-	// Using Solid's `hydrate` method ensures that a `root` is created
-	// in order to properly handle reactivity. It also handles
-	// components that are not native HTML elements.
-	hydrate(() => createComponent(Component, { ...props, children }), element);
+						if (children == null) {
+							children = document.createElement('astro-fragment');
+							children.innerHTML = childHTML;
+						}
+					}
+					return children;
+				},
+			}),
+		element
+	);
 };
diff --git a/packages/renderers/renderer-solid/client.js b/packages/renderers/renderer-solid/client.js
index b67b3acdb7b9..4424e9b98526 100644
--- a/packages/renderers/renderer-solid/client.js
+++ b/packages/renderers/renderer-solid/client.js
@@ -1,14 +1,25 @@
+import { sharedConfig } from 'solid-js';
 import { hydrate, createComponent } from 'solid-js/web';
 
 export default (element) => (Component, props, childHTML) => {
 	let children;
-	if (childHTML != null) {
-		children = document.createElement('astro-fragment');
-		children.innerHTML = childHTML;
-	}
+	hydrate(
+		() =>
+			createComponent(Component, {
+				...props,
+				get children() {
+					if (childHTML != null) {
+						// hydrating
+						if (sharedConfig.context) children = element.querySelector('astro-fragment');
 
-	// Using Solid's `hydrate` method ensures that a `root` is created
-	// in order to properly handle reactivity. It also handles
-	// components that are not native HTML elements.
-	hydrate(() => createComponent(Component, { ...props, children }), element);
+						if (children == null) {
+							children = document.createElement('astro-fragment');
+							children.innerHTML = childHTML;
+						}
+					}
+					return children;
+				},
+			}),
+		element
+	);
 };