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

@@ -0,0 +1,5 @@
+---
+'@astrojs/renderer-solid': patch
+---
+
+Uses Solid's `render` function to render our components on the client.

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) => {
+export default (element) => (Component, props, childHTML) => {
-  // Solid `createComponent` just returns a DOM node with all reactivity
+  // Solid's `render` does not replace the element's children.
-  // already attached. There's no VDOM, so there's no real need to "mount".
+  // Deleting the root's children is necessary before calling `render`.
-  // Likewise, `children` can just reuse the nearest `astro-fragment` node.
+  element.replaceChildren();
-  const component = createComponent(Component, {
-    ...props,
-    children: element.querySelector('astro-fragment'),
-  });
 
-  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);
 };