@preprio/toolkit 0.6.0-alpha.6 → 0.6.0-alpha.7

package/dist/nextjs/{chunk-PIQF5ZI5.js → chunk-CZK7SMBD.js}

@@ -2,7 +2,7 @@
 import { NextResponse } from "next/server";
 
 // src/version.ts
-var VERSION = "0.6.0-alpha.6";
+var VERSION = "0.6.0-alpha.7";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";
@@ -426,55 +426,6 @@ function isPersonalizedResponse(source) {
   return PERSONALIZED_VARY.test(headers2.get("vary") ?? "");
 }
 
-// src/nextjs/bucket.ts
-var PREPR_BUCKET_COOKIE = "prepr_ab_bucket";
-var isBucket = (value) => value === "A" || value === "B";
-function setBucketCookie(request, response, bucket) {
-  response.cookies.set(PREPR_BUCKET_COOKIE, bucket, {
-    path: "/",
-    sameSite: "lax",
-    // Readable on purpose: PreprStack's inline switch reads it before first
-    // paint. It holds only "A" or "B".
-    httpOnly: false,
-    secure: request.nextUrl.protocol === "https:",
-    maxAge: 60 * 60 * 24 * 365
-  });
-}
-async function resolvePreprBucket(request, response, options) {
-  const stored = request.cookies.get(PREPR_BUCKET_COOKIE)?.value;
-  const forced = response.headers.get("x-middleware-request-prepr-abtesting") ?? request.cookies.get(COOKIE_VARIANT)?.value;
-  if (options.preview && isBucket(forced)) {
-    if (forced !== stored) setBucketCookie(request, response, forced);
-    return forced;
-  }
-  if (isBucket(stored)) return stored;
-  if (options.onlyIf) {
-    const needed = await Promise.resolve().then(options.onlyIf).catch(() => true);
-    if (!needed) return "A";
-  }
-  const customerId = request.cookies.get(COOKIE_UID)?.value ?? response.cookies.get(COOKIE_UID)?.value;
-  if (!customerId) return "A";
-  try {
-    const res = await fetch(options.url, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "Prepr-Customer-Id": customerId
-      },
-      body: JSON.stringify({ query: "{ __typename }" }),
-      cache: "no-store",
-      signal: AbortSignal.timeout(options.timeoutMs ?? 1500)
-    });
-    const bucket = res.headers.get("x-prepr-customer-bucket");
-    if (isBucket(bucket)) {
-      setBucketCookie(request, response, bucket);
-      return bucket;
-    }
-  } catch {
-  }
-  return "A";
-}
-
 // src/nextjs/draft.ts
 import { cookies, draftMode } from "next/headers";
 import { redirect } from "next/navigation";
@@ -525,6 +476,56 @@ function createPreprDraftRoute(options) {
   };
 }
 
+// src/core/graphql/cache-tags.ts
+var MAX_TAGS = 128;
+var MAX_TAG_LENGTH = 256;
+var PREPR_ANY_ITEM_TAG = "prepr:any";
+var PREPR_SCHEMA_TAG = "prepr:schema";
+var preprItemTag = (id) => `prepr:${id}`;
+var NOT_ALPHANUMERIC = /[^a-z0-9]/g;
+var preprModelTag = (model) => `prepr:model:${model.toLowerCase().replace(NOT_ALPHANUMERIC, "")}`;
+function preprModelTagsFor(document, data, schema) {
+  const operation = document.definitions.find(
+    (definition) => definition.kind === "OperationDefinition" && definition.operation === "query"
+  );
+  const root = schema.types[schema.queryType];
+  if (!operation || !root) return [];
+  const models = (type) => {
+    const members = schema.types[type]?.possibleTypes ?? [];
+    return members.length > 0 ? members : [type];
+  };
+  const tags = /* @__PURE__ */ new Set();
+  for (const selection of operation.selectionSet.selections) {
+    if (selection.kind !== "Field") continue;
+    const type = root.fields[selection.name.value]?.type;
+    const info = type ? schema.types[type] : void 0;
+    if (!type || !info) continue;
+    const items = info.fields.items?.type;
+    const key = (selection.alias ?? selection.name).value;
+    const found = typeof data === "object" && data !== null && data[key] != null;
+    const affected = items ? models(items) : found ? [] : models(type);
+    for (const model of affected) tags.add(preprModelTag(model));
+  }
+  return [...tags];
+}
+function preprCacheTags(data) {
+  const tags = /* @__PURE__ */ new Set();
+  const stack = [data];
+  while (stack.length > 0) {
+    const value = stack.pop();
+    if (typeof value !== "object" || value === null) continue;
+    const id = value._id;
+    if (typeof id === "string" && id !== "") {
+      const tag = preprItemTag(id);
+      if (tag.length > MAX_TAG_LENGTH) return [PREPR_ANY_ITEM_TAG];
+      tags.add(tag);
+      if (tags.size > MAX_TAGS) return [PREPR_ANY_ITEM_TAG];
+    }
+    for (const child of Object.values(value)) stack.push(child);
+  }
+  return [...tags];
+}
+
 export {
   createPreprMiddleware,
   PreprError,
@@ -537,8 +538,12 @@ export {
   getPreprHeaders,
   getToolbarProps,
   isPersonalizedResponse,
-  PREPR_BUCKET_COOKIE,
-  resolvePreprBucket,
   preprDraftRedirect,
-  createPreprDraftRoute
+  createPreprDraftRoute,
+  PREPR_ANY_ITEM_TAG,
+  PREPR_SCHEMA_TAG,
+  preprItemTag,
+  preprModelTag,
+  preprModelTagsFor,
+  preprCacheTags
 };

package/dist/nextjs/components.cjs

@@ -21,7 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/nextjs/components.ts
 var components_exports = {};
 __export(components_exports, {
-  PreprAbSwitch: () => PreprAbSwitch,
+  PreprDecisionApplier: () => PreprDecisionApplier,
   PreprPersonalizationSwitch: () => PreprPersonalizationSwitch,
   PreprToolbar: () => PreprToolbar,
   PreprTrackingPixel: () => PreprTrackingPixel,
@@ -458,11 +458,11 @@ function createStegaAutoClean(options) {
     const settled = stripText ? info?.cleaned : info?.original;
     if (info && textContent === settled) {
       if (!info.decoded) return false;
-      const shown = resolveEditTarget(textNode);
-      if (!shown) return false;
+      const shown2 = resolveEditTarget(textNode);
+      if (!shown2) return false;
       pendingHidden.delete(textNode);
-      if (shown.hasAttribute("data-prepr-encoded")) return false;
-      tagEncodedElement(shown, info.decoded);
+      if (shown2.hasAttribute("data-prepr-encoded")) return false;
+      tagEncodedElement(shown2, info.decoded);
       return true;
     }
     try {
@@ -1055,7 +1055,7 @@ var DEFAULT_STATE = {
 };
 function createToolbarStore(initial = {}) {
   let state = { ...DEFAULT_STATE, ...initial };
-  const listeners = /* @__PURE__ */ new Set();
+  const listeners2 = /* @__PURE__ */ new Set();
   function get() {
     return state;
   }
@@ -1064,14 +1064,14 @@ function createToolbarStore(initial = {}) {
     const hasChange = keys.some((key) => patch[key] !== state[key]);
     if (!hasChange) return;
     state = { ...state, ...patch };
-    for (const listener of listeners) {
+    for (const listener of listeners2) {
       listener(state);
     }
   }
   function subscribe(fn) {
-    listeners.add(fn);
+    listeners2.add(fn);
     return () => {
-      listeners.delete(fn);
+      listeners2.delete(fn);
     };
   }
   return { get, set, subscribe };
@@ -2316,204 +2316,42 @@ function isReactHydrated(text) {
   return true;
 }
 
-// src/core/refresh.ts
-var PREPR_REFRESH_COOKIE = "prepr_refresh";
-var PREPR_REFRESH_HEADER = "Prepr-Refresh";
-var REFRESH_MAX_PATHS = 5;
-var SAFE_PATH = /^\/(?![/\\])[\w\-./%]{0,200}$/;
-function safePath(path) {
-  return SAFE_PATH.test(path) ? path : void 0;
-}
-function isFresh(at, freshFor, now = Date.now()) {
-  const age = now - at;
-  return at > 0 && age >= 0 && age < freshFor;
-}
-function cleanEntries(entries) {
-  const out = [];
-  for (const entry of entries) {
-    if (out.length === REFRESH_MAX_PATHS) break;
-    if (safePath(entry.path) && !out.some((e2) => e2.path === entry.path)) {
-      out.push(entry);
-    }
-  }
-  return out;
-}
-function parseRefresh(raw) {
-  return cleanEntries(
-    (raw ?? "").split("|").map((pair) => {
-      const split = pair.lastIndexOf("~");
-      const at = Number(split < 0 ? "" : pair.slice(split + 1));
-      return {
-        path: split < 0 ? pair : pair.slice(0, split),
-        at: Number.isFinite(at) && at > 0 ? Math.floor(at) : 0
-      };
-    })
-  );
-}
-
-// src/core/refresh-scheduler.ts
-var VIEW_DELAYS_MS = [3e3, 1e4];
-var INTENT_MIN_AGE_MS = 2e3;
-var INTENT_EVENTS = ["pointerover", "focusin", "touchstart"];
-var LISTENER = { capture: true, passive: true };
-var COOKIE_PATTERN = new RegExp(`(?:^|; )${PREPR_REFRESH_COOKIE}=([^;]*)`);
-var UNSUPPORTED_KEY = "prepr_refresh_unsupported";
-function readEntries() {
-  const match = document.cookie.match(COOKIE_PATTERN);
-  try {
-    return parseRefresh(match ? decodeURIComponent(match[1]) : void 0);
-  } catch {
-    return [];
-  }
-}
-function unsupported() {
-  try {
-    return sessionStorage.getItem(UNSUPPORTED_KEY) === "1";
-  } catch {
-    return false;
-  }
-}
-function createPreprRefreshScheduler(options = {}) {
-  const freshFor = options.freshFor ?? 1e4;
-  let timers = [];
-  let inFlight = false;
-  let stopped = unsupported();
-  function refresh() {
-    if (inFlight || stopped) return;
-    const paths = readEntries().map((entry) => entry.path);
-    if (paths.length === 0) return;
-    inFlight = true;
-    const controller = new AbortController();
-    fetch(location.pathname, {
-      headers: { [PREPR_REFRESH_HEADER]: paths.join("|") },
-      cache: "no-store",
-      credentials: "same-origin",
-      signal: controller.signal
-    }).then((response) => {
-      if (response.status === 204) return;
-      stopped = true;
-      controller.abort();
-      try {
-        sessionStorage.setItem(UNSUPPORTED_KEY, "1");
-      } catch {
-      }
-    }).catch(() => void 0).finally(() => {
-      inFlight = false;
-    });
-  }
-  function onIntent(event) {
-    const anchor = event.target?.closest?.("a[href]");
-    if (!(anchor instanceof HTMLAnchorElement)) return;
-    let url;
-    try {
-      url = new URL(anchor.href, location.href);
-    } catch {
-      return;
-    }
-    if (url.origin !== location.origin) return;
-    const entry = readEntries().find((e2) => e2.path === url.pathname);
-    if (entry && !isFresh(entry.at, INTENT_MIN_AGE_MS)) refresh();
-  }
-  function onVisibility() {
-    if (document.visibilityState === "visible" && readEntries().some((entry) => !isFresh(entry.at, freshFor))) {
-      refresh();
-    }
-  }
-  for (const type of INTENT_EVENTS) {
-    document.addEventListener(type, onIntent, LISTENER);
-  }
-  document.addEventListener("visibilitychange", onVisibility, {
-    passive: true
-  });
-  return {
-    view() {
-      timers.forEach(clearTimeout);
-      timers = VIEW_DELAYS_MS.map((delay) => setTimeout(refresh, delay));
-    },
-    stop() {
-      timers.forEach(clearTimeout);
-      timers = [];
-      for (const type of INTENT_EVENTS) {
-        document.removeEventListener(type, onIntent, LISTENER);
-      }
-      document.removeEventListener("visibilitychange", onVisibility);
-    }
-  };
-}
-
-// src/nextjs/ab-switch.ts
-function applyPreprAbBucket() {
-  const match = document.cookie.match(/(?:^|; )prepr_ab_bucket=([AB])(?:;|$)/);
-  const bucket = match ? match[1] : "A";
+// src/nextjs/decision-switch.ts
+function applyPreprDecisions(decision) {
   const state = window;
-  if (state.__preprAbBucket === bucket) return;
-  state.__preprAbBucket = bucket;
-  const css = bucket === "A" ? "" : '[data-prepr-ab="A"]{display:none!important}[data-prepr-ab="' + bucket + '"]{display:contents!important}';
-  try {
-    if (!state.__preprAbSheet) {
-      const sheet = new CSSStyleSheet();
-      document.adoptedStyleSheets = document.adoptedStyleSheets.concat(sheet);
-      state.__preprAbSheet = sheet;
-    }
-    state.__preprAbSheet.replaceSync(css);
-  } catch {
-    if (!state.__preprAbSheet) {
-      state.__preprAbSheet = document.createElement("style");
-      document.head.appendChild(state.__preprAbSheet);
-    }
-    state.__preprAbSheet.textContent = css;
-  }
-}
-function applyPreprDecisions(view) {
-  const viewState = window;
-  const current = view === void 0 ? location.pathname + location.search : view;
-  if (viewState.__preprDecisionsView === current) return;
-  viewState.__preprDecisionsView = current;
-  const match = document.cookie.match(/(?:^|; )prepr_decisions=([^;]*)/);
-  let raw;
-  try {
-    raw = match ? decodeURIComponent(match[1]) : "";
-  } catch {
-    raw = "";
-  }
-  const state = window;
-  if (state.__preprDecisions === raw) return;
-  state.__preprDecisions = raw;
-  const id = /^[\w-]+$/;
-  let css = "";
-  raw.split("~").forEach((pair) => {
-    const at = pair.indexOf(":");
-    const group = pair.slice(0, at);
-    if (at < 1 || !id.test(group)) return;
-    const selector = '[data-prepr-group="' + group + '"]';
-    css += selector + "{display:none!important}";
-    pair.slice(at + 1).split("|").forEach((variant) => {
-      if (id.test(variant)) {
-        css += selector + '[data-prepr-variant="' + variant + '"]{display:contents!important}';
-      }
+  const key = location.pathname + location.search;
+  if (decision !== void 0) state.__preprDecision = { key, value: decision };
+  const current = state.__preprDecision;
+  if (!current || current.key !== key) return false;
+  document.querySelectorAll("[data-prepr-decision]").forEach((marker) => {
+    marker.setAttribute("data-prepr-decided", "");
+  });
+  const defaults = current.value === "*";
+  const chosen = {};
+  current.value.split("~").forEach((pair) => {
+    const colon = pair.indexOf(":");
+    if (colon > 0)
+      chosen[pair.slice(0, colon)] = pair.slice(colon + 1).split("|");
+  });
+  document.querySelectorAll("[data-prepr-v]").forEach((element) => {
+    const nested = element.hasAttribute("data-prepr-nested");
+    const show = defaults ? element.hasAttribute("data-prepr-default") : (element.getAttribute("data-prepr-v") || "").split(" ").every((token) => {
+      const colon = token.indexOf(":");
+      const variant = token.slice(colon + 1);
+      const variants = chosen[token.slice(0, colon)];
+      return !!variants && (nested ? variants[0] === variant : variants.indexOf(variant) >= 0);
     });
+    if (show) element.setAttribute("data-prepr-show", "");
+    else element.removeAttribute("data-prepr-show");
   });
-  try {
-    if (!state.__preprDecisionSheet) {
-      const sheet = new CSSStyleSheet();
-      document.adoptedStyleSheets = document.adoptedStyleSheets.concat(sheet);
-      state.__preprDecisionSheet = sheet;
-    }
-    state.__preprDecisionSheet.replaceSync(css);
-  } catch {
-    if (!state.__preprDecisionSheet) {
-      state.__preprDecisionSheet = document.createElement("style");
-      document.head.appendChild(state.__preprDecisionSheet);
-    }
-    state.__preprDecisionSheet.textContent = css;
-  }
+  return true;
 }
 
 // src/react/components.ts
 var import_react = require("react");
 
 // src/version.ts
-var VERSION = "0.6.0-alpha.6";
+var VERSION = "0.6.0-alpha.7";
 
 // src/core/pixel.ts
 var PIXEL_SCRIPT_URL = "https://cdn.tracking.prepr.io/js/prepr.min.js";
@@ -2588,62 +2426,152 @@ function PreprToolbar({
   }, []);
   return null;
 }
-function PreprAbSwitch() {
-  (0, import_react2.useLayoutEffect)(() => {
-    applyPreprAbBucket();
+var DECIDE_HEADER = "Prepr-Decide";
+var DECIDE_TIMEOUT_MS = 6e3;
+function requestDecision(key) {
+  const pending = { key, value: null };
+  pending.value = fetch(key, {
+    headers: { [DECIDE_HEADER]: "1" },
+    cache: "no-store",
+    credentials: "same-origin",
+    signal: AbortSignal.timeout(DECIDE_TIMEOUT_MS)
+  }).then((response) => response.ok ? response.text() : "*").catch(() => "*").then((value) => {
+    pending.result = value;
+    try {
+      sessionStorage.setItem(
+        "prepr_decision",
+        JSON.stringify({ key, value, at: Date.now() })
+      );
+    } catch {
+    }
+    return value;
   });
-  return null;
+  return pending;
+}
+var pressed = null;
+var replaying = null;
+var shown = /* @__PURE__ */ new Map();
+var historyStep = false;
+var onPopState = () => {
+  historyStep = true;
+};
+function linkTarget(event) {
+  const anchor = event.target?.closest?.("a[href]");
+  if (!(anchor instanceof HTMLAnchorElement)) return null;
+  if (anchor.target && anchor.target !== "_self" || anchor.hasAttribute("download")) {
+    return null;
+  }
+  const url = new URL(anchor.href, location.href);
+  const key = url.pathname + url.search;
+  if (url.origin !== location.origin || key === location.pathname + location.search) {
+    return null;
+  }
+  return { anchor, key };
 }
-var viewCount = 0;
-function PreprPersonalizationSwitch({
-  refresh = true,
-  freshFor
-}) {
-  const [scheduler, setScheduler] = (0, import_react2.useState)(
-    null
-  );
-  const viewUrl = (0, import_react2.useRef)(null);
-  (0, import_react2.useLayoutEffect)(() => {
-    const url = location.pathname + location.search;
-    if (viewUrl.current === url) return;
-    viewUrl.current = url;
-    applyPreprDecisions(`${url}#${++viewCount}`);
+function onPointerDown(event) {
+  if (event.button !== 0) return;
+  const target = linkTarget(event);
+  if (!target || pressed?.key === target.key && pressed.result === void 0) {
+    return;
+  }
+  pressed = requestDecision(target.key);
+}
+function onClick(event) {
+  const target = linkTarget(event);
+  if (!target) return;
+  if (replaying === target.anchor) {
+    replaying = null;
+    return;
+  }
+  if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+    return;
+  }
+  const pending = pressed && pressed.key === target.key ? pressed : requestDecision(target.key);
+  pressed = null;
+  const record = (value) => {
+    window.__preprDecision = { key: target.key, value };
+  };
+  if (pending.result !== void 0) {
+    record(pending.result);
+    return;
+  }
+  event.preventDefault();
+  event.stopImmediatePropagation();
+  void pending.value.then((value) => {
+    record(value);
+    replaying = target.anchor;
+    target.anchor.click();
   });
+}
+var listeners = 0;
+function useDecisionRequests() {
   (0, import_react2.useEffect)(() => {
-    if (!refresh) return;
-    const started = createPreprRefreshScheduler({ freshFor });
-    setScheduler(started);
+    if (listeners++ === 0) {
+      window.addEventListener("pointerdown", onPointerDown, true);
+      window.addEventListener("click", onClick, true);
+      window.addEventListener("popstate", onPopState);
+    }
     return () => {
-      started.stop();
-      setScheduler(null);
+      if (--listeners === 0) {
+        window.removeEventListener("pointerdown", onPointerDown, true);
+        window.removeEventListener("click", onClick, true);
+        window.removeEventListener("popstate", onPopState);
+      }
     };
-  }, [refresh, freshFor]);
-  return scheduler ? (0, import_react2.createElement)(
-    import_react2.Suspense,
-    { fallback: null },
-    (0, import_react2.createElement)(ViewCounter, { scheduler })
-  ) : null;
-}
-function ViewCounter({
-  scheduler
-}) {
-  const pathname = (0, import_navigation.usePathname)();
-  (0, import_react2.useEffect)(() => {
-    scheduler.view();
-  }, [pathname, scheduler]);
+  }, []);
+}
+function PreprPersonalizationSwitch() {
+  useDecisionRequests();
+  return null;
+}
+function PreprDecisionApplier() {
+  useDecisionRequests();
+  (0, import_react2.useLayoutEffect)(() => {
+    const key = location.pathname + location.search;
+    const remember = () => {
+      const state = window.__preprDecision;
+      if (state) shown.set(key, state.value);
+    };
+    const previous = historyStep ? shown.get(key) : void 0;
+    historyStep = false;
+    if (applyPreprDecisions(previous)) {
+      remember();
+      return;
+    }
+    let live = true;
+    const started = window.__preprPending;
+    const value = started?.key === key ? started.value : requestDecision(key).value;
+    void value.then((value2) => {
+      if (live && location.pathname + location.search === key) {
+        applyPreprDecisions(value2);
+        remember();
+      }
+    });
+    return () => {
+      live = false;
+    };
+  });
   return null;
 }
 var VARIANT_KEY_ATTRIBUTE = "data-prepr-variant-key";
 function PreprVariantTracking({
   variantKeys,
-  ab,
   children
 }) {
   const ref = (0, import_react2.useRef)(null);
   const keys = variantKeys.join(" ");
   (0, import_react2.useLayoutEffect)(() => {
     let tagged = [];
-    const timer = setTimeout(() => {
+    const wrapper = ref.current?.closest("[data-prepr-v]");
+    const shown2 = () => !wrapper || wrapper.hasAttribute("data-prepr-show");
+    const untag = () => {
+      for (const [element] of tagged)
+        element.removeAttribute(VARIANT_KEY_ATTRIBUTE);
+      tagged = [];
+    };
+    const tag = () => {
+      if (!shown2()) return untag();
+      if (tagged.length > 0) return;
       const elements = [...ref.current?.children ?? []];
       const list = keys.split(" ");
       const pairs = elements.length === list.length ? elements.map((element, i2) => [element, list[i2]]) : elements.slice(0, 1).map((element) => [element, list[0]]);
@@ -2652,23 +2580,28 @@ function PreprVariantTracking({
         element.setAttribute(VARIANT_KEY_ATTRIBUTE, key);
         return true;
       });
+    };
+    const timer = setTimeout(tag);
+    const observer = wrapper && new MutationObserver(tag);
+    observer?.observe(wrapper, {
+      attributes: true,
+      attributeFilter: ["data-prepr-show"]
     });
     return () => {
       clearTimeout(timer);
-      for (const [element] of tagged) {
-        element.removeAttribute(VARIANT_KEY_ATTRIBUTE);
-      }
+      observer?.disconnect();
+      untag();
     };
   }, [keys]);
   return (0, import_react2.createElement)(
     "div",
-    ab === void 0 ? { ref, style: { display: "contents" } } : { ref, "data-prepr-ab": ab },
+    { ref, style: { display: "contents" } },
     children
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  PreprAbSwitch,
+  PreprDecisionApplier,
   PreprPersonalizationSwitch,
   PreprToolbar,
   PreprTrackingPixel,