From bef5103ae349250a4821148bdb218fe520a33da6 Mon Sep 17 00:00:00 2001
From: Pablo Berganza <40573613+pablo-abc@users.noreply.github.com>
Date: Tue, 27 Jul 2021 14:51:20 +0200
Subject: [PATCH] Fix `renderer-solid` not creating a reactive root (#848)

* use Solid's render method on the client

* add changeset

* use createComponent
---
 .changeset/friendly-tigers-smoke.md         |  5 +++++
 packages/renderers/renderer-solid/client.js | 23 +++++++++++----------
 2 files changed, 17 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/friendly-tigers-smoke.md

diff --git a/.changeset/friendly-tigers-smoke.md b/.changeset/friendly-tigers-smoke.md
new file mode 100644
index 0000000000..04e6ca451d
--- /dev/null
+++ b/.changeset/friendly-tigers-smoke.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/renderer-solid': patch
+---
+
+Uses Solid's `render` function to render our components on the client.
diff --git a/packages/renderers/renderer-solid/client.js b/packages/renderers/renderer-solid/client.js
index 2b34d8a5fa..815f3d8e5b 100644
--- a/packages/renderers/renderer-solid/client.js
+++ b/packages/renderers/renderer-solid/client.js
@@ -1,15 +1,16 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent } from 'solid-js';
+import { render } from 'solid-js/web';
 
-export default (element) => (Component, props) => {
-  // Solid `createComponent` just returns a DOM node with all reactivity
-  // already attached. There's no VDOM, so there's no real need to "mount".
-  // Likewise, `children` can just reuse the nearest `astro-fragment` node.
-  const component = createComponent(Component, {
-    ...props,
-    children: element.querySelector('astro-fragment'),
-  });
+export default (element) => (Component, props, childHTML) => {
+  // Solid's `render` does not replace the element's children.
+  // Deleting the root's children is necessary before calling `render`.
+  element.replaceChildren();
 
-  const children = Array.isArray(component) ? component : [component];
+  const children = document.createElement('astro-fragment');
+  children.innerHTML = childHTML;
 
-  element.replaceChildren(...children);
+  // Using Solid's `render` method ensures that a `root` is created
+  // in order to properly handle reactivity. It also handles
+  // components that are not native HTML elements.
+  render(() => createComponent(Component, { ...props, children }), element);
 };