2022-08-25 13:50:45 -05:00
|
|
|
import { createElement, startTransition } from 'react';
|
2022-05-12 11:05:55 -05:00
|
|
|
import { createRoot, hydrateRoot } from 'react-dom/client';
|
2022-03-18 17:35:45 -05:00
|
|
|
import StaticHtml from './static-html.js';
|
|
|
|
|
2022-05-31 11:29:36 -05:00
|
|
|
function isAlreadyHydrated(element) {
|
|
|
|
for (const key in element) {
|
|
|
|
if (key.startsWith('__reactContainer')) {
|
|
|
|
return key;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-10-24 07:05:19 -05:00
|
|
|
function createReactElementFromDOMElement(element) {
|
|
|
|
let attrs = {};
|
2023-10-24 07:07:52 -05:00
|
|
|
for (const attr of element.attributes) {
|
2023-10-24 07:05:19 -05:00
|
|
|
attrs[attr.name] = attr.value;
|
|
|
|
}
|
2024-02-07 13:08:44 -05:00
|
|
|
// If the element has no children, we can create a simple React element
|
|
|
|
if (element.firstChild === null) {
|
|
|
|
return createElement(element.localName, attrs);
|
|
|
|
}
|
2023-10-24 07:05:19 -05:00
|
|
|
|
2023-10-24 07:07:52 -05:00
|
|
|
return createElement(
|
|
|
|
element.localName,
|
|
|
|
attrs,
|
|
|
|
Array.from(element.childNodes)
|
|
|
|
.map((c) => {
|
|
|
|
if (c.nodeType === Node.TEXT_NODE) {
|
|
|
|
return c.data;
|
|
|
|
} else if (c.nodeType === Node.ELEMENT_NODE) {
|
|
|
|
return createReactElementFromDOMElement(c);
|
|
|
|
} else {
|
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.filter((a) => !!a)
|
2023-10-24 07:05:19 -05:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function getChildren(childString, experimentalReactChildren) {
|
2023-10-24 07:07:52 -05:00
|
|
|
if (experimentalReactChildren && childString) {
|
2023-10-24 07:05:19 -05:00
|
|
|
let children = [];
|
|
|
|
let template = document.createElement('template');
|
|
|
|
template.innerHTML = childString;
|
2023-10-24 07:07:52 -05:00
|
|
|
for (let child of template.content.children) {
|
|
|
|
children.push(createReactElementFromDOMElement(child));
|
2023-10-24 07:05:19 -05:00
|
|
|
}
|
|
|
|
return children;
|
2023-10-24 07:07:52 -05:00
|
|
|
} else if (childString) {
|
2023-10-24 07:05:19 -05:00
|
|
|
return createElement(StaticHtml, { value: childString });
|
|
|
|
} else {
|
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-03-08 05:54:16 -05:00
|
|
|
// Keep a map of roots so we can reuse them on re-renders
|
|
|
|
let rootMap = new WeakMap();
|
|
|
|
const getOrCreateRoot = (element, creator) => {
|
|
|
|
let root = rootMap.get(element);
|
|
|
|
if(!root) {
|
|
|
|
root = creator();
|
|
|
|
rootMap.set(element, root);
|
|
|
|
}
|
|
|
|
return root;
|
|
|
|
};
|
|
|
|
|
2022-05-12 11:06:40 -05:00
|
|
|
export default (element) =>
|
2022-06-23 10:10:54 -05:00
|
|
|
(Component, props, { default: children, ...slotted }, { client }) => {
|
2022-05-31 11:29:36 -05:00
|
|
|
if (!element.hasAttribute('ssr')) return;
|
2023-05-04 09:23:00 -05:00
|
|
|
const renderOptions = {
|
2023-05-04 09:25:03 -05:00
|
|
|
identifierPrefix: element.getAttribute('prefix'),
|
|
|
|
};
|
2022-06-23 10:10:54 -05:00
|
|
|
for (const [key, value] of Object.entries(slotted)) {
|
|
|
|
props[key] = createElement(StaticHtml, { value, name: key });
|
|
|
|
}
|
2023-10-24 07:07:52 -05:00
|
|
|
|
2022-05-12 11:05:55 -05:00
|
|
|
const componentEl = createElement(
|
2022-03-18 17:35:45 -05:00
|
|
|
Component,
|
2022-05-12 11:05:55 -05:00
|
|
|
props,
|
2023-10-24 07:05:19 -05:00
|
|
|
getChildren(children, element.hasAttribute('data-react-children'))
|
2022-05-12 11:05:55 -05:00
|
|
|
);
|
2022-05-31 11:29:36 -05:00
|
|
|
const rootKey = isAlreadyHydrated(element);
|
2022-12-19 06:00:00 -05:00
|
|
|
// HACK: delete internal react marker for nested components to suppress aggressive warnings
|
2022-05-31 11:29:36 -05:00
|
|
|
if (rootKey) {
|
|
|
|
delete element[rootKey];
|
|
|
|
}
|
2022-05-12 11:05:55 -05:00
|
|
|
if (client === 'only') {
|
2022-08-25 13:50:45 -05:00
|
|
|
return startTransition(() => {
|
2024-03-08 05:54:16 -05:00
|
|
|
const root = getOrCreateRoot(element, () => {
|
|
|
|
const r = createRoot(element);
|
|
|
|
element.addEventListener('astro:unmount', () => r.unmount(), { once: true });
|
|
|
|
return r;
|
|
|
|
});
|
2023-08-29 09:30:11 -05:00
|
|
|
root.render(componentEl);
|
2022-08-25 13:53:12 -05:00
|
|
|
});
|
2022-05-12 11:05:55 -05:00
|
|
|
}
|
2023-08-29 09:30:11 -05:00
|
|
|
startTransition(() => {
|
2024-03-08 05:54:16 -05:00
|
|
|
const root = getOrCreateRoot(element, () => {
|
|
|
|
const r = hydrateRoot(element, componentEl, renderOptions);
|
|
|
|
element.addEventListener('astro:unmount', () => r.unmount(), { once: true });
|
|
|
|
return r;
|
|
|
|
});
|
2023-08-29 09:30:11 -05:00
|
|
|
root.render(componentEl);
|
2022-08-25 13:53:12 -05:00
|
|
|
});
|
2022-05-12 11:05:55 -05:00
|
|
|
};
|