Skip to content

Commit

Permalink
fix hydration in solid renderer (#8365)
Browse files Browse the repository at this point in the history
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
  • Loading branch information
ryansolid and natemoo-re committed Sep 6, 2023
1 parent 88c76a9 commit a525d5d
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 12 deletions.
5 changes: 5 additions & 0 deletions .changeset/giant-cycles-marry.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/solid-js': patch
---

Fix hydration in Solid renderer
29 changes: 17 additions & 12 deletions packages/integrations/solid/src/client.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { sharedConfig } from 'solid-js';
import { createComponent, hydrate, render } from 'solid-js/web';

export default (element: HTMLElement) =>
Expand All @@ -11,19 +10,25 @@ export default (element: HTMLElement) =>

const boostrap = client === 'only' ? render : hydrate;

let slot: HTMLElement | null;
let _slots: Record<string, any> = {};
if (Object.keys(slotted).length > 0) {
// hydrating
if (sharedConfig.context) {
element.querySelectorAll('astro-slot').forEach((slot) => {
_slots[slot.getAttribute('name') || 'default'] = slot.cloneNode(true);
});
} else {
for (const [key, value] of Object.entries(slotted)) {
_slots[key] = document.createElement('astro-slot');
if (key !== 'default') _slots[key].setAttribute('name', key);
_slots[key].innerHTML = value;
}
// hydratable
if (client !== "only") {
const iterator = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT, (node) => {
if (node === element) return NodeFilter.FILTER_SKIP
if (node.nodeName === "ASTRO-SLOT") return NodeFilter.FILTER_ACCEPT;
if (node.nodeName === "ASTRO-ISLAND") return NodeFilter.FILTER_REJECT;
return NodeFilter.FILTER_SKIP;
});
while(slot = iterator.nextNode() as HTMLElement | null)
_slots[slot.getAttribute("name") || "default"] = slot;
}
for (const [key, value] of Object.entries(slotted)) {
if (_slots[key]) continue;
_slots[key] = document.createElement('astro-slot');
if (key !== 'default') _slots[key].setAttribute('name', key);
_slots[key].innerHTML = value;
}
}

Expand Down

0 comments on commit a525d5d

Please sign in to comment.