@preprio/toolkit 0.5.0-rc.1 → 0.6.0-alpha.0

package/dist/nextjs/components.js

@@ -2,11 +2,100 @@
 import {
   createPreprPreview,
   loadTrackingPixel
-} from "../chunk-4JNKYIEV.js";
+} from "../chunk-BJ2LBLWO.js";
+import "../chunk-DGZA7KX7.js";
 
 // src/nextjs/components.ts
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect as useEffect2, useRef } from "react";
+import {
+  createElement,
+  useEffect as useEffect2,
+  useLayoutEffect,
+  useRef
+} from "react";
+
+// src/react/hydration.ts
+var PROPS_KEY_PREFIX = "__reactProps$";
+function reactProps(element) {
+  for (const key of Object.keys(element)) {
+    if (key.startsWith(PROPS_KEY_PREFIX)) {
+      return element[key];
+    }
+  }
+  return void 0;
+}
+function isReactHydrated(text) {
+  for (let el = text.parentElement; el; el = el.parentElement) {
+    const props = reactProps(el);
+    if (!props) continue;
+    return el === text.parentElement || props.dangerouslySetInnerHTML != null;
+  }
+  return true;
+}
+
+// src/nextjs/ab-switch.ts
+function applyPreprAbBucket() {
+  const match = document.cookie.match(/(?:^|; )prepr_ab_bucket=([AB])(?:;|$)/);
+  const bucket = match ? match[1] : "A";
+  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 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}';
+      }
+    });
+  });
+  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;
+  }
+}
 
 // src/react/components.ts
 import { useEffect } from "react";
@@ -36,13 +125,52 @@ function PreprToolbar({
       navigation: {
         navigate: (url) => router.push(url),
         currentPath: () => pathnameRef.current + window.location.search
-      }
+      },
+      isHydrated: isReactHydrated
     });
     return () => toolbar.destroy();
   }, []);
   return null;
 }
+function PreprAbSwitch() {
+  useLayoutEffect(() => {
+    applyPreprAbBucket();
+    applyPreprDecisions();
+  });
+  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;
+    });
+    return () => {
+      for (const [element] of tagged) {
+        element.removeAttribute(VARIANT_KEY_ATTRIBUTE);
+      }
+    };
+  }, [keys]);
+  return createElement(
+    "div",
+    ab === void 0 ? { ref, style: { display: "contents" } } : { ref, "data-prepr-ab": ab },
+    children
+  );
+}
 export {
+  PreprAbSwitch,
   PreprToolbar,
-  PreprTrackingPixel
+  PreprTrackingPixel,
+  PreprVariantTracking
 };