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

package/dist/nextjs/components.js

@@ -2,8 +2,9 @@
 import {
   createPreprPreview,
   loadTrackingPixel
-} from "../chunk-BJ2LBLWO.js";
-import "../chunk-DGZA7KX7.js";
+} from "../chunk-LIDUJWWJ.js";
+import "../chunk-S5RWVMDJ.js";
+import "../chunk-TN6SNAR2.js";
 
 // src/nextjs/components.ts
 import { usePathname, useRouter } from "next/navigation";
@@ -33,68 +34,149 @@ 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((a, b) => b[1][1] - a[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
@@ -132,44 +214,178 @@ 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() {
+  useEffect2(() => {
+    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();
   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 = useRef(null);
   const keys = variantKeys.join(" ");
   useLayoutEffect(() => {
-    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]]);
-    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, i) => [element, list[i]]) : 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 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,
   PreprVariantTracking