Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-23 21:53:55 -05:00
Code Issues Activity

Fix renderer-solid not creating a reactive root (#848)

Browse source 
* use Solid's render method on the client

* add changeset

* use createComponent
This commit is contained in:
Pablo Berganza 2021-07-27 14:51:20 +02:00 committed by GitHub
parent b8af49f035
commit bef5103ae3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/friendly-tigers-smoke.md Normal file
View file

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

23
packages/renderers/renderer-solid/client.js
View file

@ -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);
};