@preprio/toolkit 0.5.0-rc.1 → 0.5.0-rc.3

package/dist/index.js

@@ -4,185 +4,220 @@ import {
   COOKIE_SEGMENT,
   COOKIE_UID,
   COOKIE_VARIANT,
+  HEADER_LIVE_RENDER,
   ONE_YEAR_SECONDS,
   PARAM_HIDE_BAR,
   PARAM_SEGMENT,
   PARAM_VARIANT,
   PreprToolbarElement,
-  VERSION,
   createPreprPreview,
   createToolbarStore,
   definePreprToolbar,
   loadTrackingPixel,
-  resolveFeatures,
   setTrackingParam,
   stegaClean,
   trackEvent
-} from "./chunk-4JNKYIEV.js";
+} from "./chunk-PP3O7RB4.js";
+import {
+  PreprError,
+  extractAccessToken,
+  getActiveSegmentFromHeaders,
+  getActiveVariantFromHeaders,
+  getPreprEnvironmentSegments,
+  getPreprHeadersFromHeaders,
+  getPreprUUIDFromHeaders,
+  getToolbarPropsFromHeaders,
+  validatePreprToken
+} from "./chunk-SXUDBGLZ.js";
+import {
+  VERSION,
+  resolveFeatures
+} from "./chunk-MDAV2FLM.js";
+import {
+  createLiveBridge,
+  createLiveStore
+} from "./chunk-6WY3MWCX.js";
+import "./chunk-URXSDJOU.js";
+import {
+  normalizeQuery,
+  parsePatchLog
+} from "./chunk-42Z2VW7G.js";
+import {
+  createScopedLogger
+} from "./chunk-S3VT4UWM.js";
 
-// src/core/server.ts
-var PreprError = class extends Error {
-  constructor(message, code, context, originalError) {
-    super(message);
-    this.code = code;
-    this.context = context;
-    this.originalError = originalError;
-    this.name = "PreprError";
-  }
-};
-function getPreprUUIDFromHeaders(headers) {
-  return headers.get("prepr-customer-id");
+// src/core/preview-attrs.ts
+function previewAttrs(target, options) {
+  if (!options.enabled || !target.id || !target.field) return {};
+  const attrs = {
+    "data-prepr-encoded": "",
+    "data-prepr-id": target.id,
+    "data-prepr-field": target.field
+  };
+  if (target.locale) attrs["data-prepr-locale"] = target.locale;
+  if (target.entryId) attrs["data-prepr-entry-id"] = target.entryId;
+  return attrs;
 }
-function getActiveSegmentFromHeaders(headers) {
-  return headers.get("Prepr-Segments");
+
+// src/core/live-preview/morph.ts
+function morphElement(current, next) {
+  syncAttributes(current, next);
+  morphChildren(current, next);
 }
-function getActiveVariantFromHeaders(headers) {
-  return headers.get("Prepr-ABtesting");
+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));
 }
-var PREPR_HEADER_KEYS = [
-  "prepr-customer-id",
-  "Prepr-Segments",
-  "Prepr-ABtesting",
-  "Prepr-Preview-Bar",
-  "Prepr-Context-utm_source",
-  "Prepr-Context-utm_medium",
-  "Prepr-Context-utm_term",
-  "Prepr-Context-utm_content",
-  "Prepr-Context-utm_campaign",
-  "Prepr-Context-initial_referral",
-  "Prepr-Visitor-IP",
-  "Prepr-Hubspot-Id",
-  "Prepr-Customer-Id-Created",
-  "User-Agent",
-  "Prepr-Package"
-];
-function getPreprHeadersFromHeaders(headers) {
-  const preprHeaders = {};
-  const copy = (key) => {
-    const value = headers.get(key);
-    if (value !== null) {
-      preprHeaders[key] = value;
+function syncAttributes(current, next) {
+  for (const { name } of Array.from(current.attributes)) {
+    if (!next.hasAttribute(name) && !isRuntimeAttribute(name)) {
+      current.removeAttribute(name);
     }
-  };
-  for (const key of PREPR_HEADER_KEYS) {
-    copy(key);
   }
-  return preprHeaders;
-}
-function validatePreprToken(token) {
-  if (!token) {
-    throw new PreprError(
-      "Token is required",
-      "MISSING_TOKEN",
-      "validatePreprToken"
-    );
-  }
-  if (!token.startsWith("https://")) {
-    throw new PreprError(
-      "Token must be a valid HTTPS URL",
-      "INVALID_TOKEN",
-      "validatePreprToken"
-    );
+  for (const { name, value } of Array.from(next.attributes)) {
+    if (current.getAttribute(name) !== value) current.setAttribute(name, value);
   }
 }
-function extractAccessToken(graphqlUrl) {
-  let url;
-  try {
-    url = new URL(graphqlUrl);
-  } catch (error) {
-    throw new PreprError(
-      "Token must be a valid URL",
-      "INVALID_TOKEN",
-      "extractAccessToken",
-      error instanceof Error ? error : new Error(String(error))
-    );
-  }
-  if (url.hostname !== "graphql.prepr.io") {
-    throw new PreprError(
-      "Token must be a graphql.prepr.io URL",
-      "INVALID_TOKEN",
-      "extractAccessToken"
-    );
-  }
-  const pathParts = url.pathname.split("/");
-  const token = pathParts[pathParts.length - 1];
-  if (!token) {
-    throw new PreprError(
-      "Token URL is missing an access token segment",
-      "INVALID_TOKEN",
-      "extractAccessToken"
-    );
-  }
-  return token;
+function isSkipped(node) {
+  return node.nodeType === Node.ELEMENT_NODE && (node.hasAttribute(SKIP_ATTR) || node.localName === "prepr-toolbar");
 }
-async function getPreprEnvironmentSegments(token) {
-  validatePreprToken(token);
-  try {
-    const response = await fetch(token, {
-      headers: {
-        "Prepr-Package": `@preprio/toolkit@${VERSION}`,
-        // Duplicates the version in Prepr-Package. It keeps the User-Agent
-        // format used by `@preprio/prepr-nextjs`, for Prepr API consumers that
-        // still identify the toolbar by that string.
-        "User-Agent": `Prepr-Preview-Bar/${VERSION}`,
-        "Content-Type": "application/json"
-      },
-      method: "POST",
-      body: JSON.stringify({
-        query: `{
-                _Segments {
-                    _id
-                    name
-                }
-            }`
-      })
-    });
-    if (!response.ok) {
-      throw new PreprError(
-        `HTTP ${response.status}: ${response.statusText}`,
-        "HTTP_ERROR",
-        "getPreprEnvironmentSegments"
-      );
-    }
-    const json = await response.json();
-    if (!json || !json.data || !json.data._Segments) {
-      throw new PreprError(
-        "Invalid response format from Prepr API",
-        "INVALID_RESPONSE",
-        "getPreprEnvironmentSegments"
-      );
-    }
-    return json.data._Segments;
-  } catch (error) {
-    if (error instanceof PreprError) {
-      throw error;
+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;
     }
-    throw new PreprError(
-      "Failed to fetch segments from Prepr API",
-      "FETCH_ERROR",
-      "getPreprEnvironmentSegments",
-      error instanceof Error ? error : new Error(String(error))
-    );
+    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;
 }
-async function getToolbarPropsFromHeaders(headers, token, features) {
-  const resolved = resolveFeatures(features);
-  let segments = [];
-  if (resolved.segments) {
+
+// 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 {
-      segments = await getPreprEnvironmentSegments(token);
-    } catch {
-      segments = [];
+      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 offLog = store.onLogChange((log) => {
+    if (log.length) schedule(log);
+  });
+  const offInvalidate = store.onInvalidate(() => schedule([]));
   return {
-    activeSegment: resolved.segments ? getActiveSegmentFromHeaders(headers) : null,
-    activeVariant: resolved.abTesting ? getActiveVariantFromHeaders(headers) : null,
-    segments,
-    data: segments
+    stop() {
+      stopped = true;
+      if (timer) clearTimeout(timer);
+      offLog();
+      offInvalidate();
+      bridge.stop();
+    }
   };
 }
 
+// src/core/live-preview/live-request.ts
+var MAX_BODY_BYTES = 1e6;
+async function readLiveLogFromRequest(request) {
+  try {
+    if (request.method !== "POST") return [];
+    if (request.headers.get(HEADER_LIVE_RENDER) !== "1") return [];
+    const origin = request.headers.get("origin");
+    if (!origin || origin !== new URL(request.url).origin) return [];
+    const type = request.headers.get("content-type") ?? "";
+    if (!type.toLowerCase().startsWith("application/json")) return [];
+    const length = Number(request.headers.get("content-length") ?? "0");
+    if (length > MAX_BODY_BYTES) return [];
+    const text = await request.clone().text();
+    if (text.length > MAX_BODY_BYTES) return [];
+    const body = JSON.parse(text);
+    return parsePatchLog(body?.log);
+  } catch {
+    return [];
+  }
+}
+
 // src/core/middleware.ts
 var UTM_PARAMS = [
   "utm_source",
@@ -352,9 +387,14 @@ export {
   getPreprUUIDFromHeaders,
   getToolbarPropsFromHeaders,
   loadTrackingPixel,
+  normalizeQuery,
+  parsePatchLog,
+  previewAttrs,
   processPreprRequest,
+  readLiveLogFromRequest,
   resolveFeatures,
   setTrackingParam,
+  startHtmlLivePreview,
   stegaClean,
   trackEvent,
   validatePreprToken

package/dist/live-preview-EADA3ZL4.js

@@ -0,0 +1,18 @@
+import {
+  createLiveBridge,
+  createLiveStore
+} from "./chunk-6WY3MWCX.js";
+import "./chunk-URXSDJOU.js";
+import {
+  applyPatchLog,
+  normalizeQuery,
+  parsePatchLog
+} from "./chunk-42Z2VW7G.js";
+import "./chunk-S3VT4UWM.js";
+export {
+  applyPatchLog,
+  createLiveBridge,
+  createLiveStore,
+  normalizeQuery,
+  parsePatchLog
+};