Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues 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';
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
);
};

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