@preprio/toolkit 0.5.0-rc.4 → 0.5.1-dom.0

package/dist/chunk-SZTHSJUA.js

@@ -0,0 +1,326 @@
+import {
+  HEADER_LIVE_RENDER
+} from "./chunk-RRM5762S.js";
+import {
+  createLiveBridge,
+  createLiveStore
+} from "./chunk-IKOOXTPM.js";
+import {
+  createScopedLogger
+} from "./chunk-S3VT4UWM.js";
+
+// src/core/live-preview/dom-patch.ts
+var INDEX_SEGMENT = /^\d+$/;
+var LIVE_ATTRIBUTE = "data-prepr-live";
+function fieldKey(path) {
+  return path.split(".").filter((segment) => segment && segment !== "items").map(
+    (segment) => INDEX_SEGMENT.test(segment) ? String(Number.parseInt(segment, 10)) : segment
+  ).join(".");
+}
+function patchTargets(patch) {
+  if (patch.type !== "field") return [];
+  const targets = [{ item: patch.itemId, field: patch.field }];
+  if (patch.edit) targets.unshift(patch.edit);
+  return targets;
+}
+function matchingElements(candidates, item, field) {
+  const wanted = fieldKey(field);
+  return candidates.filter((element) => {
+    if (element.getAttribute("data-prepr-id") !== item) return false;
+    const tagged = element.getAttribute("data-prepr-field");
+    return tagged !== null && fieldKey(tagged) === wanted;
+  });
+}
+var DROPPED_ELEMENTS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "IFRAME",
+  "OBJECT",
+  "EMBED",
+  "TEMPLATE",
+  "NOSCRIPT",
+  "SVG",
+  "MATH",
+  "LINK",
+  "META",
+  "BASE",
+  "FORM",
+  "INPUT",
+  "BUTTON",
+  "TEXTAREA",
+  "SELECT"
+]);
+var ALLOWED_ELEMENTS = /* @__PURE__ */ new Set([
+  "A",
+  "ABBR",
+  "B",
+  "BLOCKQUOTE",
+  "BR",
+  "CODE",
+  "DEL",
+  "DIV",
+  "EM",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "HR",
+  "I",
+  "INS",
+  "LI",
+  "MARK",
+  "OL",
+  "P",
+  "PRE",
+  "S",
+  "SMALL",
+  "SPAN",
+  "STRONG",
+  "SUB",
+  "SUP",
+  "TABLE",
+  "TBODY",
+  "TD",
+  "TH",
+  "THEAD",
+  "TR",
+  "U",
+  "UL"
+]);
+var SAFE_HREF = /^(?:https?:|mailto:|tel:|\/|#|\.{0,2}\/|[^:]*$)/i;
+function sanitizeRichText(html) {
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  const out = document.createDocumentFragment();
+  const copy = (source, target) => {
+    for (const child of Array.from(source.childNodes)) {
+      if (child.nodeType === Node.TEXT_NODE) {
+        target.appendChild(document.createTextNode(child.textContent ?? ""));
+        continue;
+      }
+      if (child.nodeType !== Node.ELEMENT_NODE) continue;
+      const element = child;
+      const tag = element.tagName.toUpperCase();
+      if (DROPPED_ELEMENTS.has(tag)) continue;
+      if (!ALLOWED_ELEMENTS.has(tag)) {
+        copy(element, target);
+        continue;
+      }
+      const clean = document.createElement(tag.toLowerCase());
+      if (tag === "A") {
+        const href = element.getAttribute("href")?.trim();
+        if (href && SAFE_HREF.test(href.replace(/[\t\n\r]/g, ""))) {
+          clean.setAttribute("href", href);
+        }
+        if (element.getAttribute("target") === "_blank") {
+          clean.setAttribute("target", "_blank");
+          clean.setAttribute("rel", "noopener noreferrer");
+        }
+      }
+      copy(element, clean);
+      target.appendChild(clean);
+    }
+  };
+  copy(template.content, out);
+  return out;
+}
+var RICH_TEXT = /^\s*<[a-z!/]/i;
+function writeText(element, text) {
+  if (!element.children.length) {
+    if (element.textContent !== text) element.textContent = text;
+    return true;
+  }
+  for (const node of Array.from(element.childNodes)) {
+    const current = node.textContent ?? "";
+    if (node.nodeType !== Node.TEXT_NODE || !current.trim()) continue;
+    const next = current.match(/^\s*/)[0] + text + current.match(/\s*$/)[0];
+    if (current !== next) node.textContent = next;
+    return true;
+  }
+  return false;
+}
+function applyPatchLogToDom(log, root = document) {
+  const candidates = Array.from(
+    root.querySelectorAll("[data-prepr-encoded]")
+  );
+  let applied = 0;
+  let skipped = 0;
+  for (const patch of log) {
+    if (patch.type !== "field" || typeof patch.value !== "string") {
+      skipped++;
+      continue;
+    }
+    let elements = [];
+    for (const { item, field } of patchTargets(patch)) {
+      elements = matchingElements(candidates, item, field);
+      if (elements.length) break;
+    }
+    let written = false;
+    for (const element of elements) {
+      const mode = element.closest(`[${LIVE_ATTRIBUTE}]`)?.getAttribute(LIVE_ATTRIBUTE);
+      if (mode === "off") continue;
+      if (mode === "html") {
+        element.replaceChildren(sanitizeRichText(patch.value));
+        written = true;
+      } else if (RICH_TEXT.test(patch.value)) {
+        continue;
+      } else if (writeText(element, patch.value)) {
+        written = true;
+      }
+    }
+    if (written) applied++;
+    else skipped++;
+  }
+  return { applied, skipped };
+}
+
+// src/core/live-preview/morph.ts
+function morphElement(current, next) {
+  syncAttributes(current, next);
+  morphChildren(current, next);
+}
+var SKIP_ATTR = "data-prepr-morph-skip";
+var RUNTIME_ATTR_PREFIXES = ["data-prepr-"];
+function isRuntimeAttribute(name) {
+  return RUNTIME_ATTR_PREFIXES.some((prefix) => name.startsWith(prefix));
+}
+function syncAttributes(current, next) {
+  for (const { name } of Array.from(current.attributes)) {
+    if (!next.hasAttribute(name) && !isRuntimeAttribute(name)) {
+      current.removeAttribute(name);
+    }
+  }
+  for (const { name, value } of Array.from(next.attributes)) {
+    if (current.getAttribute(name) !== value) current.setAttribute(name, value);
+  }
+}
+function isSkipped(node) {
+  return node.nodeType === Node.ELEMENT_NODE && (node.hasAttribute(SKIP_ATTR) || node.localName === "prepr-toolbar");
+}
+function sameKind(a, b) {
+  if (a.nodeType !== b.nodeType) return false;
+  if (a.nodeType !== Node.ELEMENT_NODE) return true;
+  const ea = a;
+  const eb = b;
+  return ea.localName === eb.localName && ea.id === eb.id;
+}
+function morphChildren(current, next) {
+  const wanted = Array.from(next.childNodes).filter((n) => !isSkipped(n));
+  const existing = Array.from(current.childNodes).filter((n) => !isSkipped(n));
+  wanted.forEach((target, i) => {
+    const node = existing[i];
+    if (node && sameKind(node, target)) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node;
+        if (element.localName === "script") return;
+        if (element.localName === "astro-island" && !element.isEqualNode(target)) {
+          element.replaceWith(adopt(target, current));
+          return;
+        }
+        morphElement(element, target);
+      } else if (node.nodeValue !== target.nodeValue) {
+        node.nodeValue = target.nodeValue;
+      }
+      return;
+    }
+    const replacement = adopt(target, current);
+    if (node) node.replaceWith(replacement);
+    else current.appendChild(replacement);
+  });
+  for (const extra of existing.slice(wanted.length)) extra.remove();
+}
+function adopt(node, parent) {
+  const copy = parent.ownerDocument.importNode(node, true);
+  if (copy.nodeType === Node.ELEMENT_NODE) {
+    const element = copy;
+    const scripts = element.localName === "script" ? [element] : Array.from(element.querySelectorAll("script"));
+    scripts.forEach((s) => s.setAttribute("data-prepr-morphed", ""));
+  }
+  return copy;
+}
+
+// src/core/live-preview/html-live.ts
+var debug = createScopedLogger("live-preview:html");
+var COMPLETE_DOCUMENT = /<\/html>\s*$/i;
+var SYNC_DEBOUNCE_MS = 150;
+function startHtmlLivePreview(options = {}) {
+  if (typeof window === "undefined" || window.self === window.top) {
+    return { stop() {
+    } };
+  }
+  const store = createLiveStore();
+  const bridge = createLiveBridge(store, {
+    allowedEditorOrigins: () => options.allowedEditorOrigins,
+    strictMode: () => options.strictMode
+  });
+  bridge.start();
+  let timer = null;
+  let inFlight = false;
+  let pending = null;
+  let stopped = false;
+  const render = async (log) => {
+    inFlight = true;
+    try {
+      const response = await fetch(window.location.href, {
+        method: log.length ? "POST" : "GET",
+        headers: log.length ? { "Content-Type": "application/json", [HEADER_LIVE_RENDER]: "1" } : {},
+        body: log.length ? JSON.stringify({ log }) : void 0,
+        credentials: "same-origin",
+        cache: "no-store"
+      });
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const html = await response.text();
+      if (stopped) return;
+      if (!COMPLETE_DOCUMENT.test(html)) {
+        throw new Error("incomplete page; a component failed to render");
+      }
+      const next = new DOMParser().parseFromString(html, "text/html");
+      if (next.title && next.title !== document.title)
+        document.title = next.title;
+      morphElement(document.body, next.body);
+    } catch (error) {
+      debug.log("re-render failed", error);
+    } finally {
+      inFlight = false;
+    }
+    if (pending && !stopped) {
+      const queued = pending;
+      pending = null;
+      void render(queued);
+    }
+  };
+  const schedule = (log) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      if (inFlight) pending = log;
+      else void render(log);
+    }, SYNC_DEBOUNCE_MS);
+  };
+  const apply = options.apply ?? "server";
+  const offLog = store.onLogChange((log) => {
+    if (!log.length) return;
+    if (apply === "server") {
+      schedule(log);
+      return;
+    }
+    applyPatchLogToDom(log);
+  });
+  const offInvalidate = store.onInvalidate(() => schedule([]));
+  return {
+    stop() {
+      stopped = true;
+      if (timer) clearTimeout(timer);
+      offLog();
+      offInvalidate();
+      bridge.stop();
+    }
+  };
+}
+
+export {
+  applyPatchLogToDom,
+  startHtmlLivePreview
+};

package/dist/{chunk-46ISDRHT.js → chunk-TEB7M7EM.js}

@@ -1,6 +1,3 @@
-// src/version.ts
-var VERSION = "0.5.0-rc.4";
-
 // src/core/features.ts
 function isEnabled(config) {
   if (typeof config === "boolean") return config;
@@ -20,7 +17,6 @@ var ALL_FEATURES_ENABLED = Object.freeze({
 });
 
 export {
-  VERSION,
   resolveFeatures,
   ALL_FEATURES_ENABLED
 };

package/dist/chunk-UK664KSV.js

@@ -0,0 +1,6 @@
+// src/version.ts
+var VERSION = "0.5.1-dom.0";
+
+export {
+  VERSION
+};