michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: Nested hydration with Solid (#3003)

Browse source 
* fix: solid nested hydration

* Create ten-rice-unite.md

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
This commit is contained in:
Ryan Carniato 2022-04-06 12:42:01 -07:00 committed by GitHub
parent debdf11b19
commit 13b782f421
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/ten-rice-unite.md Normal file
View file

@ -0,0 +1,6 @@
---
"@astrojs/solid-js": patch
"@astrojs/renderer-solid": patch
---
Improve nested hydration with Solid

27
packages/integrations/solid/client.js
View file

@ -1,14 +1,25 @@
import { sharedConfig } from 'solid-js';
import { hydrate, createComponent } from 'solid-js/web'; import { hydrate, createComponent } from 'solid-js/web';
export default (element) => (Component, props, childHTML) => { export default (element) => (Component, props, childHTML) => {
let children; let children;
if (childHTML != null) { hydrate(
children = document.createElement('astro-fragment'); () =>
children.innerHTML = childHTML; 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 if (children == null) {
// in order to properly handle reactivity. It also handles children = document.createElement('astro-fragment');
// components that are not native HTML elements. children.innerHTML = childHTML;
hydrate(() => createComponent(Component, { ...props, children }), element); }
}
return children;
},
}),
element
);
}; };

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

@ -1,14 +1,25 @@
import { sharedConfig } from 'solid-js';
import { hydrate, createComponent } from 'solid-js/web'; import { hydrate, createComponent } from 'solid-js/web';
export default (element) => (Component, props, childHTML) => { export default (element) => (Component, props, childHTML) => {
let children; let children;
if (childHTML != null) { hydrate(
children = document.createElement('astro-fragment'); () =>
children.innerHTML = childHTML; 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 if (children == null) {
// in order to properly handle reactivity. It also handles children = document.createElement('astro-fragment');
// components that are not native HTML elements. children.innerHTML = childHTML;
hydrate(() => createComponent(Component, { ...props, children }), element); }
}
return children;
},
}),
element
);
}; };