Skip to content

Commit

Permalink
fix: solid nested hydration
Browse files Browse the repository at this point in the history
  • Loading branch information
ryansolid committed Apr 6, 2022
1 parent cf92954 commit 3224fb8
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 16 deletions.
27 changes: 19 additions & 8 deletions packages/integrations/solid/client.js
Original file line number Diff line number Diff line change
@@ -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 changes: 19 additions & 8 deletions packages/renderers/renderer-solid/client.js
Original file line number Diff line number Diff line change
@@ -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
);
};

0 comments on commit 3224fb8

Please sign in to comment.