fluxel
Version:
An ultra-lightweight, high-performance library for efficient DOM building and dynamic web UIs
63 lines (62 loc) • 2.48 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function() {
return hydrate;
}
});
function hydrate(renderer, element) {
if (!element) {
throw new Error("Element is not provided. Ensure you are passing a valid HTMLElement.");
}
if (!element.dataset.fluxelSsr) element = element.querySelector("&>[data-fluxel-ssr]");
if (element.dataset.fluxelSsr !== "true") {
throw new Error("Element is not a Fluxel SSR element. Ensure you are using the correct element.");
} else if (element.dataset.fluxelHydrated === "true") {
console.warn("Element is already hydrated. Skipping hydration.");
return;
}
const maxEcount = Number(element.dataset.fluxelECount);
if (isNaN(maxEcount)) {
throw new Error("Essential data attribute 'data-fluxel-e-count' is missing or invalid. Ensure you are rendering the element with reactive option set to true.");
}
const hydrationMetadata = {
count: 0,
getElementByEid: (eid)=>{
const eidStr = `${eid}`;
if (element.dataset.fluxelEid === eidStr) {
return element;
}
const el = element.querySelector(`[data-fluxel-eid="${eidStr}"]`);
if (!el) {
throw new Error(`Element with eid ${eid} not found. Ensure the renderer matches the SSR output.`);
}
return el;
}
};
Object.defineProperty(window, "fluxelH", {
value: hydrationMetadata,
configurable: true,
enumerable: false
});
try {
renderer();
} catch (e) {
console.error("Error during hydration:", e);
throw Object.assign(new Error("Hydration failed. Ensure you are using the correct renderer and element."), {
cause: e
});
}
element.dataset.fluxelHydrated = "true";
if (hydrationMetadata.count !== maxEcount) {
console.error(`Hydration count mismatch. Expected ${maxEcount}, but got ${hydrationMetadata.count}. Ensure you are using the correct renderer. This can happen if the renderer does not match the SSR output or if the element has been modified after SSR. Hydration process was completed, but something might be wrong.`);
}
Object.defineProperty(window, "fluxelH", {
value: null,
configurable: true,
enumerable: false
});
}