@pierre/diffs
Version:
53 lines (49 loc) • 2.45 kB
JavaScript
'use client';
import { DIFFS_TAG_NAME } from "../constants.js";
import { getLineAnnotationName } from "../utils/getLineAnnotationName.js";
import { useEffect, useRef } from "react";
import { jsx } from "react/jsx-runtime";
import { hydrateRoot } from "react-dom/client";
import { renderToString } from "react-dom/server";
//#region src/ssr/FileDiffReact.tsx
function escapeHtml(unsafe) {
return unsafe.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
}
function serializeStyle(style) {
return Object.entries(style).map(([key, value]) => {
return `${key.replace(/([A-Z])/g, "-$1").toLowerCase()}:${escapeHtml(String(value))}`;
}).join(";");
}
function FileDiffSSR({ prerenderedHTML, annotations, className, style, renderAnnotation }) {
const wrapperRef = useRef(null);
const hydratedRef = useRef(false);
const htmlObjectRef = useRef(null);
if (htmlObjectRef.current === null) htmlObjectRef.current = { __html: `<${DIFFS_TAG_NAME}${className !== void 0 ? ` class="${escapeHtml(className)}"` : ""}${style !== void 0 ? ` style="${serializeStyle(style)}"` : ""}><template shadowrootmode="open">${prerenderedHTML}</template>${annotations !== void 0 && annotations.length > 0 && renderAnnotation != null ? annotations.map((annotation) => {
return `<div slot="${getLineAnnotationName(annotation)}">${renderToString(renderAnnotation(annotation))}</div>`;
}).join("") : ""}</${DIFFS_TAG_NAME}>` };
useEffect(() => {
if (wrapperRef.current !== null && annotations !== void 0 && !hydratedRef.current) {
const fileElement = wrapperRef.current.querySelector(DIFFS_TAG_NAME);
if (fileElement !== null) {
Array.from(fileElement.children).forEach((slotElement) => {
if (!(slotElement instanceof HTMLElement)) return;
const slotName = slotElement.getAttribute("slot");
if (slotName === null) return;
const annotation = annotations.find((annotation$1) => {
return slotName === getLineAnnotationName(annotation$1);
});
if (annotation !== void 0 && renderAnnotation != null) hydrateRoot(slotElement, renderAnnotation(annotation));
});
hydratedRef.current = true;
}
}
}, [annotations, renderAnnotation]);
return /* @__PURE__ */ jsx("div", {
ref: wrapperRef,
dangerouslySetInnerHTML: htmlObjectRef.current,
suppressHydrationWarning: true
});
}
//#endregion
export { FileDiffSSR };
//# sourceMappingURL=FileDiffReact.js.map