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

fix hydration in solid renderer (#8365)

Browse source 
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
This commit is contained in:
Ryan Carniato 2023-09-06 15:22:58 -07:00 committed by GitHub
parent 88c76a9a42
commit a525d5db17
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/giant-cycles-marry.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/solid-js': patch
---
Fix hydration in Solid renderer

29
packages/integrations/solid/src/client.ts
View file

@ -1,4 +1,3 @@
import { sharedConfig } from 'solid-js';
import { createComponent, hydrate, render } from 'solid-js/web';
export default (element: HTMLElement) =>
@ -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;
}
}