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

package/dist/index.js

@@ -4,185 +4,341 @@ import {
   COOKIE_SEGMENT,
   COOKIE_UID,
   COOKIE_VARIANT,
+  HEADER_LIVE_RENDER,
   ONE_YEAR_SECONDS,
   PARAM_HIDE_BAR,
   PARAM_SEGMENT,
   PARAM_VARIANT,
   PreprToolbarElement,
-  VERSION,
   createPreprPreview,
   createToolbarStore,
+  decodeStega,
   definePreprToolbar,
   loadTrackingPixel,
-  resolveFeatures,
   setTrackingParam,
   stegaClean,
   trackEvent
-} from "./chunk-4JNKYIEV.js";
+} from "./chunk-IDEC77LZ.js";
+import {
+  PreprError,
+  extractAccessToken,
+  getActiveSegmentFromHeaders,
+  getActiveVariantFromHeaders,
+  getPreprEnvironmentSegments,
+  getPreprHeadersFromHeaders,
+  getPreprUUIDFromHeaders,
+  getToolbarPropsFromHeaders,
+  validatePreprToken
+} from "./chunk-TBBU3LDD.js";
+import {
+  VERSION,
+  resolveFeatures
+} from "./chunk-F46GJS6Y.js";
+import {
+  createLiveBridge,
+  createLiveStore
+} from "./chunk-IPMB32AZ.js";
+import "./chunk-URXSDJOU.js";
+import {
+  collectFields,
+  normalizeQuery,
+  parsePatchLog,
+  readQueryDocument
+} from "./chunk-KD3GK6TO.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");
-}
-function getActiveSegmentFromHeaders(headers) {
-  return headers.get("Prepr-Segments");
-}
-function getActiveVariantFromHeaders(headers) {
-  return headers.get("Prepr-ABtesting");
-}
-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;
-    }
+// 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
   };
-  for (const key of PREPR_HEADER_KEYS) {
-    copy(key);
-  }
-  return preprHeaders;
+  if (target.locale) attrs["data-prepr-locale"] = target.locale;
+  if (target.entryId) attrs["data-prepr-entry-id"] = target.entryId;
+  return attrs;
 }
-function validatePreprToken(token) {
-  if (!token) {
-    throw new PreprError(
-      "Token is required",
-      "MISSING_TOKEN",
-      "validatePreprToken"
-    );
+var URL_BASE = "https://prepr.invalid";
+function stegaTarget(value, options = {}) {
+  const decoded = value ? decodeStega(value) : null;
+  if (!decoded) return null;
+  let url;
+  try {
+    url = new URL(decoded.href, URL_BASE);
+  } catch {
+    return null;
   }
-  if (!token.startsWith("https://")) {
-    throw new PreprError(
-      "Token must be a valid HTTPS URL",
-      "INVALID_TOKEN",
-      "validatePreprToken"
-    );
+  const id = decodeURIComponent(url.pathname.split("/").pop() ?? "");
+  const field = url.searchParams.get("field");
+  if (!id || !field) return null;
+  return {
+    id,
+    field: options.field ? `${field.slice(0, field.lastIndexOf(".") + 1)}${options.field}` : field,
+    locale: url.searchParams.get("locale")
+  };
+}
+
+// src/core/live-preview/edit-links.ts
+import {
+  vercelStegaCombine,
+  vercelStegaDecode,
+  vercelStegaSplit
+} from "@vercel/stega";
+var ENTRY_PARAM = "entry";
+var TOP_LEVEL_ENTRY = /^[A-Za-z0-9_]+\.\d+$/;
+function entryIdOf(element) {
+  if (!isRecord(element)) return void 0;
+  if (typeof element._id === "string") return element._id;
+  if (element.__typename !== "Assets" || !Array.isArray(element.items)) {
+    return void 0;
   }
+  const first = element.items[0];
+  return isRecord(first) && typeof first._id === "string" ? first._id : void 0;
 }
-function extractAccessToken(graphqlUrl) {
-  let url;
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function annotate(value, ctx) {
+  if (!ctx.entryId) return value;
+  const { cleaned, encoded } = vercelStegaSplit(value);
+  if (!encoded) return value;
+  let payload;
   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))
-    );
+    payload = vercelStegaDecode(encoded);
+  } catch {
+    return value;
   }
-  if (url.hostname !== "graphql.prepr.io") {
-    throw new PreprError(
-      "Token must be a graphql.prepr.io URL",
-      "INVALID_TOKEN",
-      "extractAccessToken"
-    );
+  if (typeof payload?.href !== "string") return value;
+  let url;
+  try {
+    url = new URL(payload.href);
+  } catch {
+    return value;
   }
-  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"
-    );
+  if (url.searchParams.has(ENTRY_PARAM)) return value;
+  url.searchParams.set(ENTRY_PARAM, ctx.entryId);
+  const itemId = decodeURIComponent(url.pathname.split("/").pop() ?? "");
+  if (!url.searchParams.has("field") && ctx.entryField && TOP_LEVEL_ENTRY.test(ctx.entryField) && itemId === ctx.entryOwnerId) {
+    url.searchParams.set("field", ctx.entryField);
   }
-  return token;
+  return vercelStegaCombine(
+    cleaned,
+    { ...payload, href: url.toString() },
+    false
+  );
 }
-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
-                }
-            }`
-      })
+function walk(value, selections, ctx) {
+  if (typeof value === "string") return annotate(value, ctx);
+  if (Array.isArray(value)) {
+    let changed2 = false;
+    const next2 = value.map((element, index) => {
+      const path = [...ctx.path, String(index)];
+      const entryId = ctx.inAssets ? void 0 : entryIdOf(element);
+      const entry = entryId ? {
+        entryId,
+        entryField: ctx.ownerId ? path.join(".") : void 0,
+        entryOwnerId: ctx.ownerId,
+        inAssets: isRecord(element) && element._id === void 0
+      } : {};
+      const out = walk(element, selections, { ...ctx, ...entry, path });
+      if (out !== element) changed2 = true;
+      return out;
+    });
+    return changed2 ? next2 : value;
+  }
+  if (!isRecord(value)) return value;
+  const id = typeof value._id === "string" ? value._id : void 0;
+  const typename = typeof value.__typename === "string" ? value.__typename : void 0;
+  const fields = ctx.doc && selections ? collectFields(selections, typename, ctx.doc) : null;
+  let changed = false;
+  const next = {};
+  for (const [key, child] of Object.entries(value)) {
+    const field = fields?.get(key);
+    const name = field?.name ?? key;
+    const out = walk(child, field?.selections ?? null, {
+      ...ctx,
+      ownerId: id ?? ctx.ownerId,
+      path: id ? [name] : [...ctx.path, name]
     });
-    if (!response.ok) {
-      throw new PreprError(
-        `HTTP ${response.status}: ${response.statusText}`,
-        "HTTP_ERROR",
-        "getPreprEnvironmentSegments"
-      );
+    if (out !== child) changed = true;
+    next[key] = out;
+  }
+  return changed ? next : value;
+}
+function annotateEditLinks(result, query, operationName) {
+  let doc = null;
+  if (query !== void 0) {
+    try {
+      doc = readQueryDocument(query, operationName);
+    } catch {
+      doc = null;
     }
-    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 walk(result, doc?.operation ?? null, { doc, path: [] });
+}
+
+// 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);
     }
-    return json.data._Segments;
-  } catch (error) {
-    if (error instanceof PreprError) {
-      throw error;
+  }
+  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;
     }
-    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",
@@ -341,6 +497,7 @@ export {
   PreprError,
   PreprToolbarElement,
   VERSION,
+  annotateEditLinks,
   createPreprPreview,
   createToolbarStore,
   definePreprToolbar,
@@ -352,10 +509,16 @@ export {
   getPreprUUIDFromHeaders,
   getToolbarPropsFromHeaders,
   loadTrackingPixel,
+  normalizeQuery,
+  parsePatchLog,
+  previewAttrs,
   processPreprRequest,
+  readLiveLogFromRequest,
   resolveFeatures,
   setTrackingParam,
+  startHtmlLivePreview,
   stegaClean,
+  stegaTarget,
   trackEvent,
   validatePreprToken
 };

package/dist/live-preview-DLXGXRE5.js

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