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

package/dist/nextjs/components.d.cts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactNode, ReactElement } from 'react';
 import { k as PreprToolbarComponentProps } from '../types-BYH9XqmN.cjs';
 import { P as PreprPixelConfig } from '../pixel-DwW7cXJm.cjs';
 
@@ -23,24 +23,30 @@ declare function PreprTrackingPixel({ id, config, }: PreprTrackingPixelProps): n
  */
 declare function PreprToolbar({ options, ...props }: PreprToolbarComponentProps): null;
 /**
- * Applies the visitor's A/B bucket 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
+ * Decides every client-side navigation to another page: when the visitor
+ * presses a same-site link, it asks `createPreprProxy` which variants they
+ * get on that page, and holds the click until the answer is in. The new page
+ * then paints with those variants, never with the default variant first.
+ * Pressing starts the request, so the wait mostly overlaps the click itself.
+ *
+ * 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. A click's decision is in before the page
+ * paints; Back and Forward show the page as this tab last showed it. On a
+ * page load, and any other view without a decision (a navigation started
+ * from code, or Back to a page this tab never showed), its personalized
+ * sections stay hidden until the decision request answers. Rendered by
  * `PreprStack`; you do not need it yourself.
  */
-declare function PreprAbSwitch(): null;
-interface PreprPersonalizationSwitchProps {
-    /**
-     * Keep segment decisions fresh in the background. Default `true`. Leave it
-     * on for the instance in your root layout; `PreprStack` renders its own
-     * with `false`.
-     */
-    refresh?: boolean;
-    /** Same as `createPreprProxy`'s `freshFor`. Default 10 000 ms. */
-    freshFor?: number;
-}
-declare function PreprPersonalizationSwitch({ refresh, freshFor, }: PreprPersonalizationSwitchProps): ReactElement | 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
@@ -55,11 +61,9 @@ declare function PreprPersonalizationSwitch({ refresh, freshFor, }: PreprPersona
  * 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, PreprPersonalizationSwitch, type PreprPersonalizationSwitchProps, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, PreprVariantTracking };
+export { PreprDecisionApplier, PreprPersonalizationSwitch, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, PreprVariantTracking };

package/dist/nextjs/components.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactNode, ReactElement } from 'react';
 import { k as PreprToolbarComponentProps } from '../types-BYH9XqmN.js';
 import { P as PreprPixelConfig } from '../pixel-DwW7cXJm.js';
 
@@ -23,24 +23,30 @@ declare function PreprTrackingPixel({ id, config, }: PreprTrackingPixelProps): n
  */
 declare function PreprToolbar({ options, ...props }: PreprToolbarComponentProps): null;
 /**
- * Applies the visitor's A/B bucket 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
+ * Decides every client-side navigation to another page: when the visitor
+ * presses a same-site link, it asks `createPreprProxy` which variants they
+ * get on that page, and holds the click until the answer is in. The new page
+ * then paints with those variants, never with the default variant first.
+ * Pressing starts the request, so the wait mostly overlaps the click itself.
+ *
+ * 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. A click's decision is in before the page
+ * paints; Back and Forward show the page as this tab last showed it. On a
+ * page load, and any other view without a decision (a navigation started
+ * from code, or Back to a page this tab never showed), its personalized
+ * sections stay hidden until the decision request answers. Rendered by
  * `PreprStack`; you do not need it yourself.
  */
-declare function PreprAbSwitch(): null;
-interface PreprPersonalizationSwitchProps {
-    /**
-     * Keep segment decisions fresh in the background. Default `true`. Leave it
-     * on for the instance in your root layout; `PreprStack` renders its own
-     * with `false`.
-     */
-    refresh?: boolean;
-    /** Same as `createPreprProxy`'s `freshFor`. Default 10 000 ms. */
-    freshFor?: number;
-}
-declare function PreprPersonalizationSwitch({ refresh, freshFor, }: PreprPersonalizationSwitchProps): ReactElement | 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
@@ -55,11 +61,9 @@ declare function PreprPersonalizationSwitch({ refresh, freshFor, }: PreprPersona
  * 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, PreprPersonalizationSwitch, type PreprPersonalizationSwitchProps, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, PreprVariantTracking };
+export { PreprDecisionApplier, PreprPersonalizationSwitch, PreprToolbar, PreprTrackingPixel, type PreprTrackingPixelProps, PreprVariantTracking };

package/dist/nextjs/components.js

@@ -2,9 +2,9 @@
 import {
   createPreprPreview,
   loadTrackingPixel
-} from "../chunk-Y7DWVOOY.js";
+} from "../chunk-U7TRFVK7.js";
 import "../chunk-S5RWVMDJ.js";
-import "../chunk-NSQOGI5K.js";
+import "../chunk-VQIPTUN4.js";
 
 // src/nextjs/components.ts
 import { usePathname, useRouter } from "next/navigation";
@@ -12,9 +12,7 @@ import {
   createElement,
   useEffect as useEffect2,
   useLayoutEffect,
-  useRef,
-  useState,
-  Suspense
+  useRef
 } from "react";
 
 // src/react/hydration.ts
@@ -36,197 +34,35 @@ 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((e) => e.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((e) => e.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
@@ -264,62 +100,152 @@ function PreprToolbar({
   }, []);
   return null;
 }
-function PreprAbSwitch() {
-  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 viewCount = 0;
-function PreprPersonalizationSwitch({
-  refresh = true,
-  freshFor
-}) {
-  const [scheduler, setScheduler] = useState(
-    null
-  );
-  const viewUrl = useRef(null);
-  useLayoutEffect(() => {
-    const url = location.pathname + location.search;
-    if (viewUrl.current === url) return;
-    viewUrl.current = url;
-    applyPreprDecisions(`${url}#${++viewCount}`);
+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 };
+}
+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() {
   useEffect2(() => {
-    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 ? createElement(
-    Suspense,
-    { fallback: null },
-    createElement(ViewCounter, { scheduler })
-  ) : null;
+  }, []);
 }
-function ViewCounter({
-  scheduler
-}) {
-  const pathname = usePathname();
-  useEffect2(() => {
-    scheduler.view();
-  }, [pathname, scheduler]);
+function PreprPersonalizationSwitch() {
+  useDecisionRequests();
+  return null;
+}
+function PreprDecisionApplier() {
+  useDecisionRequests();
+  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 = useRef(null);
   const keys = variantKeys.join(" ");
   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, i) => [element, list[i]]) : elements.slice(0, 1).map((element) => [element, list[0]]);
@@ -328,22 +254,27 @@ 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 createElement(
     "div",
-    ab === void 0 ? { ref, style: { display: "contents" } } : { ref, "data-prepr-ab": ab },
+    { ref, style: { display: "contents" } },
     children
   );
 }
 export {
-  PreprAbSwitch,
+  PreprDecisionApplier,
   PreprPersonalizationSwitch,
   PreprToolbar,
   PreprTrackingPixel,