mirror of
https://github.com/withastro/astro.git
synced 2024-12-23 21:53:55 -05:00
fix hydration in solid renderer (#8365)
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
This commit is contained in:
parent
88c76a9a42
commit
a525d5db17
2 changed files with 22 additions and 12 deletions
5
.changeset/giant-cycles-marry.md
Normal file
5
.changeset/giant-cycles-marry.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'@astrojs/solid-js': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fix hydration in Solid renderer
|
|
@ -1,4 +1,3 @@
|
||||||
import { sharedConfig } from 'solid-js';
|
|
||||||
import { createComponent, hydrate, render } from 'solid-js/web';
|
import { createComponent, hydrate, render } from 'solid-js/web';
|
||||||
|
|
||||||
export default (element: HTMLElement) =>
|
export default (element: HTMLElement) =>
|
||||||
|
@ -11,19 +10,25 @@ export default (element: HTMLElement) =>
|
||||||
|
|
||||||
const boostrap = client === 'only' ? render : hydrate;
|
const boostrap = client === 'only' ? render : hydrate;
|
||||||
|
|
||||||
|
let slot: HTMLElement | null;
|
||||||
let _slots: Record<string, any> = {};
|
let _slots: Record<string, any> = {};
|
||||||
if (Object.keys(slotted).length > 0) {
|
if (Object.keys(slotted).length > 0) {
|
||||||
// hydrating
|
// hydratable
|
||||||
if (sharedConfig.context) {
|
if (client !== "only") {
|
||||||
element.querySelectorAll('astro-slot').forEach((slot) => {
|
const iterator = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT, (node) => {
|
||||||
_slots[slot.getAttribute('name') || 'default'] = slot.cloneNode(true);
|
if (node === element) return NodeFilter.FILTER_SKIP
|
||||||
});
|
if (node.nodeName === "ASTRO-SLOT") return NodeFilter.FILTER_ACCEPT;
|
||||||
} else {
|
if (node.nodeName === "ASTRO-ISLAND") return NodeFilter.FILTER_REJECT;
|
||||||
for (const [key, value] of Object.entries(slotted)) {
|
return NodeFilter.FILTER_SKIP;
|
||||||
_slots[key] = document.createElement('astro-slot');
|
});
|
||||||
if (key !== 'default') _slots[key].setAttribute('name', key);
|
while(slot = iterator.nextNode() as HTMLElement | null)
|
||||||
_slots[key].innerHTML = value;
|
_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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue