@preprio/toolkit 0.6.0-alpha.0 → 0.6.0-alpha.10

package/dist/nextjs/components.cjs

@@ -21,7 +21,8 @@ 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,
   PreprVariantTracking: () => PreprVariantTracking
@@ -457,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 {
@@ -1054,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;
   }
@@ -1063,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 };
@@ -2315,75 +2316,156 @@ function isReactHydrated(text) {
   return true;
 }
 
-// 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, options = {}) {
   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() {
-  const match = document.cookie.match(/(?:^|; )prepr_decisions=([^;]*)/);
-  let raw;
-  try {
-    raw = match ? decodeURIComponent(match[1]) : "";
-  } catch {
-    raw = "";
+  const key = location.pathname + location.search;
+  const previous = state.__preprDecision;
+  let value = decision;
+  if (value !== void 0 && value !== "*" && options.refresh && previous && previous.key === key && previous.value !== "*") {
+    const pairs = (from) => {
+      const out = {};
+      from.split("~").forEach((pair) => {
+        const colon = pair.indexOf(":");
+        if (colon > 0) out[pair.slice(0, colon)] = pair;
+      });
+      return out;
+    };
+    const before = pairs(previous.value);
+    const after = pairs(value);
+    document.querySelectorAll("[data-prepr-v][data-prepr-show]").forEach((element) => {
+      const range = document.createRange();
+      range.selectNodeContents(element);
+      if (range.getBoundingClientRect().top >= window.innerHeight) return;
+      (element.getAttribute("data-prepr-v") || "").split(" ").forEach((token) => {
+        const group = token.slice(0, token.indexOf(":"));
+        if (before[group]) after[group] = before[group];
+      });
+    });
+    value = Object.keys(after).map((group) => after[group]).join("~");
   }
-  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}';
-      }
+  if (value !== void 0) state.__preprDecision = { key, value };
+  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;
+  return true;
+}
+function requestPreprDecision(key, options = {}) {
+  const fresh = 1e4;
+  const keep = 18e5;
+  const keepStatic = 36e5;
+  const state = window;
+  const asking = state.__preprAsking = state.__preprAsking || {};
+  const read = () => {
+    const all = {};
+    try {
+      const match = document.cookie.match(/(?:^|; )prepr_decisions=([^;]*)/);
+      const parsed = match ? JSON.parse(decodeURIComponent(match[1])) : null;
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed))
+        Object.keys(parsed).forEach((stored) => {
+          const entry = parsed[stored];
+          if (stored.charAt(0) === "/" && Array.isArray(entry) && typeof entry[0] === "string" && typeof entry[1] === "number")
+            all[stored] = [entry[0], entry[1]];
+        });
+    } catch {
     }
-    state.__preprDecisionSheet.replaceSync(css);
-  } catch {
-    if (!state.__preprDecisionSheet) {
-      state.__preprDecisionSheet = document.createElement("style");
-      document.head.appendChild(state.__preprDecisionSheet);
+    return all;
+  };
+  const usable = (entry, now) => {
+    if (!entry) return false;
+    const age = now - entry[1];
+    return age >= 0 && age < (entry[0] === "*" ? fresh : entry[0] === "" ? keepStatic : keep);
+  };
+  const store = (answer) => {
+    const all = read();
+    const now = Date.now();
+    const kept = all[key];
+    const entries = Object.keys(all).filter((stored) => stored !== key && usable(all[stored], now)).map((stored) => [stored, all[stored]]);
+    entries.push([
+      key,
+      answer === "*" && kept && usable(kept, now) && kept[0] !== "*" ? kept : [answer, now]
+    ]);
+    entries.sort((a2, b2) => b2[1][1] - a2[1][1]);
+    entries.length = Math.min(entries.length, 20);
+    const encode = () => {
+      const out = {};
+      entries.forEach((entry) => {
+        out[entry[0]] = entry[1];
+      });
+      return encodeURIComponent(JSON.stringify(out));
+    };
+    let value = encode();
+    while (entries.length > 1 && value.length > 3e3) {
+      entries.pop();
+      value = encode();
+    }
+    document.cookie = "prepr_decisions=" + value + "; path=/; max-age=3600; samesite=lax" + (location.protocol === "https:" ? "; secure" : "");
+  };
+  const ask = () => {
+    if (!asking[key]) {
+      asking[key] = fetch(key, {
+        headers: { "Prepr-Decide": "1" },
+        cache: "no-store",
+        credentials: "same-origin",
+        // The proxy gives up on Prepr after its own `timeoutMs`; this only
+        // covers a proxy that never answers.
+        signal: AbortSignal.timeout ? AbortSignal.timeout(6e3) : void 0
+      }).then((response) => response.ok ? response.text() : "*").catch(() => "*").then((answer) => {
+        delete asking[key];
+        try {
+          store(answer);
+        } catch {
+        }
+        return answer;
+      });
     }
-    state.__preprDecisionSheet.textContent = css;
+    return asking[key];
+  };
+  const last = read()[key];
+  if (last && !(last[0] === "" && options.personalized) && usable(last, Date.now())) {
+    const value = last[0];
+    if (value !== "" && Date.now() - last[1] >= fresh) {
+      ask().then((answer) => {
+        if (answer !== "*" && answer !== value && options.onChange)
+          options.onChange(answer);
+      });
+    }
+    return { result: value, value: Promise.resolve(value) };
   }
+  const pending = {
+    value: ask()
+  };
+  pending.value.then((answer) => {
+    pending.result = answer;
+  });
+  return pending;
 }
 
 // src/react/components.ts
 var import_react = require("react");
 
 // src/version.ts
-var VERSION = "0.6.0-alpha.0";
+var VERSION = "0.6.0-alpha.10";
 
 // src/core/pixel.ts
 var PIXEL_SCRIPT_URL = "https://cdn.tracking.prepr.io/js/prepr.min.js";
@@ -2458,45 +2540,179 @@ function PreprToolbar({
   }, []);
   return null;
 }
-function PreprAbSwitch() {
+var shown = /* @__PURE__ */ new Map();
+var historyStep = false;
+var onPopState = () => {
+  historyStep = true;
+};
+function requestDecision(key, personalized = false) {
+  return requestPreprDecision(key, {
+    personalized,
+    onChange: (value) => {
+      if (location.pathname + location.search !== key) return;
+      applyPreprDecisions(value, { refresh: true });
+      const state = window.__preprDecision;
+      if (state) shown.set(key, state.value);
+    }
+  });
+}
+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 key;
+}
+var HOVER_DELAY_MS = 65;
+var hovering = null;
+function onPointerOver(event) {
+  if (event.pointerType !== "mouse") return;
+  const key = linkTarget(event);
+  if (hovering?.key === key) return;
+  if (hovering) clearTimeout(hovering.timer);
+  hovering = key ? { key, timer: setTimeout(() => requestDecision(key), HOVER_DELAY_MS) } : null;
+}
+function onPointerDown(event) {
+  if (event.button !== 0) return;
+  const key = linkTarget(event);
+  if (key) requestDecision(key);
+}
+var replaying = null;
+function onClick(event) {
+  const key = linkTarget(event);
+  if (!key) return;
+  const anchor = event.target.closest("a[href]");
+  if (replaying === anchor) {
+    replaying = null;
+    return;
+  }
+  if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+    return;
+  }
+  const pending = requestDecision(key);
+  if (pending.result !== void 0) return;
+  event.preventDefault();
+  event.stopImmediatePropagation();
+  void pending.value.then(() => {
+    replaying = anchor;
+    anchor.click();
+  });
+}
+var listeners = 0;
+function useDecisionRequests() {
+  (0, import_react2.useEffect)(() => {
+    if (listeners++ === 0) {
+      window.addEventListener("pointerover", onPointerOver, { passive: true });
+      window.addEventListener("pointerdown", onPointerDown, {
+        capture: true,
+        passive: true
+      });
+      window.addEventListener("click", onClick, true);
+      window.addEventListener("popstate", onPopState);
+    }
+    return () => {
+      if (--listeners === 0) {
+        window.removeEventListener("pointerover", onPointerOver);
+        window.removeEventListener("pointerdown", onPointerDown, true);
+        window.removeEventListener("click", onClick, true);
+        window.removeEventListener("popstate", onPopState);
+      }
+    };
+  }, []);
+}
+function PreprPersonalizationSwitch() {
+  useDecisionRequests();
+  return null;
+}
+function PreprDecisionApplier() {
+  useDecisionRequests();
   (0, import_react2.useLayoutEffect)(() => {
-    applyPreprAbBucket();
-    applyPreprDecisions();
+    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;
+    }
+    const pending = requestDecision(key, true);
+    if (pending.result !== void 0) {
+      applyPreprDecisions(pending.result);
+      remember();
+      return;
+    }
+    let live = true;
+    void pending.value.then((value) => {
+      if (live && location.pathname + location.search === key) {
+        applyPreprDecisions(value);
+        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)(() => {
-    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]]);
-    const tagged = pairs.filter(([element, key]) => {
-      if (element.hasAttribute(VARIANT_KEY_ATTRIBUTE)) return false;
-      element.setAttribute(VARIANT_KEY_ATTRIBUTE, key);
-      return true;
+    let tagged = [];
+    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]]);
+      tagged = pairs.filter(([element, key]) => {
+        if (element.hasAttribute(VARIANT_KEY_ATTRIBUTE)) return false;
+        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 () => {
-      for (const [element] of tagged) {
-        element.removeAttribute(VARIANT_KEY_ATTRIBUTE);
-      }
+      clearTimeout(timer);
+      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,
   PreprVariantTracking

package/dist/nextjs/components.d.cts

@@ -23,14 +23,31 @@ declare function PreprTrackingPixel({ id, config, }: PreprTrackingPixelProps): n
  */
 declare function PreprToolbar({ options, ...props }: PreprToolbarComponentProps): null;
 /**
- * Applies the visitor's A/B bucket, and the segment variants decided in the
- * proxy, after client-side navigation. A full page
- * load is covered by the inline script `PreprStack` renders, but React does
- * not run inline scripts that arrive with a client-side navigation; a layout
- * effect still runs before the browser paints the new page. Rendered by
- * `PreprStack`; you do not need it yourself.
+ * Gets each client-side navigation's decision in before the click: when the
+ * visitor hovers over a same-site link (or presses it, on touch devices), it
+ * asks `createPreprProxy` which variants they get on that page, so the new
+ * page paints with them. A click whose decision is not in yet (a quick tap,
+ * a link reached by keyboard) waits for it; one the visitor's recent
+ * decisions already cover, or one to a page without personalization, goes
+ * through at once.
+ *
+ * Mount it once in the root layout, so links on pages without a
+ * `PreprStack` are covered too. Clicks with a modifier key, links to other
+ * sites and links that open a new tab or download are left alone.
+ *
+ * @example
+ * <PreprPersonalizationSwitch />
+ */
+declare function PreprPersonalizationSwitch(): null;
+/**
+ * Applies this page view's decision to the variant wrappers of the
+ * `PreprStack` it is rendered by, before the page paints when the decision is
+ * already in: asked for on hover, or kept from an earlier view of the page.
+ * Back and Forward show the page as this tab last showed it. Any other view
+ * keeps its personalized sections hidden until the decision request answers.
+ * Rendered by `PreprStack`; you do not need it yourself.
  */
-declare function PreprAbSwitch(): null;
+declare function PreprDecisionApplier(): null;
 /**
  * Wraps one rendered variant and, once hydrated, puts the variant keys on the
  * elements inside, where Prepr's tracking pixel counts impressions and the
@@ -45,11 +62,9 @@ declare function PreprAbSwitch(): null;
  * carries a variant key is left alone. Rendered by `PreprStack` with
  * `trackVariants`; you do not need it yourself.
  */
-declare function PreprVariantTracking({ variantKeys, ab, children, }: {
+declare function PreprVariantTracking({ variantKeys, children, }: {
     variantKeys: string[];
-    /** The A/B bucket wrapper this also serves as; its CSS decides `display`. */
-    ab?: string;
     children?: ReactNode;
 }): ReactElement;
 
-export { PreprAbSwitch, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, PreprVariantTracking };
+export { PreprDecisionApplier, PreprPersonalizationSwitch, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, PreprVariantTracking };

package/dist/nextjs/components.d.ts

@@ -23,14 +23,31 @@ declare function PreprTrackingPixel({ id, config, }: PreprTrackingPixelProps): n
  */
 declare function PreprToolbar({ options, ...props }: PreprToolbarComponentProps): null;
 /**
- * Applies the visitor's A/B bucket, and the segment variants decided in the
- * proxy, after client-side navigation. A full page
- * load is covered by the inline script `PreprStack` renders, but React does
- * not run inline scripts that arrive with a client-side navigation; a layout
- * effect still runs before the browser paints the new page. Rendered by
- * `PreprStack`; you do not need it yourself.
+ * Gets each client-side navigation's decision in before the click: when the
+ * visitor hovers over a same-site link (or presses it, on touch devices), it
+ * asks `createPreprProxy` which variants they get on that page, so the new
+ * page paints with them. A click whose decision is not in yet (a quick tap,
+ * a link reached by keyboard) waits for it; one the visitor's recent
+ * decisions already cover, or one to a page without personalization, goes
+ * through at once.
+ *
+ * Mount it once in the root layout, so links on pages without a
+ * `PreprStack` are covered too. Clicks with a modifier key, links to other
+ * sites and links that open a new tab or download are left alone.
+ *
+ * @example
+ * <PreprPersonalizationSwitch />
+ */
+declare function PreprPersonalizationSwitch(): null;
+/**
+ * Applies this page view's decision to the variant wrappers of the
+ * `PreprStack` it is rendered by, before the page paints when the decision is
+ * already in: asked for on hover, or kept from an earlier view of the page.
+ * Back and Forward show the page as this tab last showed it. Any other view
+ * keeps its personalized sections hidden until the decision request answers.
+ * Rendered by `PreprStack`; you do not need it yourself.
  */
-declare function PreprAbSwitch(): null;
+declare function PreprDecisionApplier(): null;
 /**
  * Wraps one rendered variant and, once hydrated, puts the variant keys on the
  * elements inside, where Prepr's tracking pixel counts impressions and the
@@ -45,11 +62,9 @@ declare function PreprAbSwitch(): null;
  * carries a variant key is left alone. Rendered by `PreprStack` with
  * `trackVariants`; you do not need it yourself.
  */
-declare function PreprVariantTracking({ variantKeys, ab, children, }: {
+declare function PreprVariantTracking({ variantKeys, children, }: {
     variantKeys: string[];
-    /** The A/B bucket wrapper this also serves as; its CSS decides `display`. */
-    ab?: string;
     children?: ReactNode;
 }): ReactElement;
 
-export { PreprAbSwitch, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, PreprVariantTracking };
+export { PreprDecisionApplier, PreprPersonalizationSwitch, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, PreprVariantTracking };