@probat/react 0.1.0 → 0.1.2

package/dist/index.d.mts

@@ -190,4 +190,33 @@ declare function writeChoice(proposalId: string, experiment_id: string, label: s
 declare function hasTrackedVisit(proposalId: string, label: string): boolean;
 declare function markTrackedVisit(proposalId: string, label: string): void;
 
-export { type Choice, type ProbatContextValue, ProbatProvider, ProbatProviderClient, type ProbatProviderProps as ProbatProviderClientProps, type ProbatProviderProps, type RetrieveResponse, type UseExperimentReturn, type UseProbatMetricsReturn, type WithExperimentOptions, detectEnvironment, extractClickMeta, fetchDecision, hasTrackedVisit, markTrackedVisit, readChoice, sendMetric, useExperiment, useProbatContext, useProbatMetrics, withExperiment, writeChoice };
+/**
+ * Document-level click tracking for Probat experiments
+ *
+ * This module implements event delegation at the document level to track clicks
+ * even when components don't have onClick handlers or when stopPropagation() is called.
+ */
+/**
+ * Initialize document-level click tracking
+ * Call this once when your app initializes (typically in ProbatProvider)
+ */
+declare function initDocumentClickTracking(): void;
+/**
+ * Clean up the listener (useful for testing or cleanup)
+ */
+declare function cleanupDocumentClickTracking(): void;
+/**
+ * Update proposal metadata cache (call this when proposal data changes)
+ * This is useful if you want to update the cache without waiting for DOM queries
+ */
+declare function updateProposalMetadata(proposalId: string, metadata: {
+    experimentId?: string | null;
+    variantLabel?: string;
+    apiBaseUrl?: string;
+}): void;
+/**
+ * Clear the proposal cache (useful for testing)
+ */
+declare function clearProposalCache(): void;
+
+export { type Choice, type ProbatContextValue, ProbatProvider, ProbatProviderClient, type ProbatProviderProps as ProbatProviderClientProps, type ProbatProviderProps, type RetrieveResponse, type UseExperimentReturn, type UseProbatMetricsReturn, type WithExperimentOptions, cleanupDocumentClickTracking, clearProposalCache, detectEnvironment, extractClickMeta, fetchDecision, hasTrackedVisit, initDocumentClickTracking, markTrackedVisit, readChoice, sendMetric, updateProposalMetadata, useExperiment, useProbatContext, useProbatMetrics, withExperiment, writeChoice };

package/dist/index.d.ts

@@ -190,4 +190,33 @@ declare function writeChoice(proposalId: string, experiment_id: string, label: s
 declare function hasTrackedVisit(proposalId: string, label: string): boolean;
 declare function markTrackedVisit(proposalId: string, label: string): void;
 
-export { type Choice, type ProbatContextValue, ProbatProvider, ProbatProviderClient, type ProbatProviderProps as ProbatProviderClientProps, type ProbatProviderProps, type RetrieveResponse, type UseExperimentReturn, type UseProbatMetricsReturn, type WithExperimentOptions, detectEnvironment, extractClickMeta, fetchDecision, hasTrackedVisit, markTrackedVisit, readChoice, sendMetric, useExperiment, useProbatContext, useProbatMetrics, withExperiment, writeChoice };
+/**
+ * Document-level click tracking for Probat experiments
+ *
+ * This module implements event delegation at the document level to track clicks
+ * even when components don't have onClick handlers or when stopPropagation() is called.
+ */
+/**
+ * Initialize document-level click tracking
+ * Call this once when your app initializes (typically in ProbatProvider)
+ */
+declare function initDocumentClickTracking(): void;
+/**
+ * Clean up the listener (useful for testing or cleanup)
+ */
+declare function cleanupDocumentClickTracking(): void;
+/**
+ * Update proposal metadata cache (call this when proposal data changes)
+ * This is useful if you want to update the cache without waiting for DOM queries
+ */
+declare function updateProposalMetadata(proposalId: string, metadata: {
+    experimentId?: string | null;
+    variantLabel?: string;
+    apiBaseUrl?: string;
+}): void;
+/**
+ * Clear the proposal cache (useful for testing)
+ */
+declare function clearProposalCache(): void;
+
+export { type Choice, type ProbatContextValue, ProbatProvider, ProbatProviderClient, type ProbatProviderProps as ProbatProviderClientProps, type ProbatProviderProps, type RetrieveResponse, type UseExperimentReturn, type UseProbatMetricsReturn, type WithExperimentOptions, cleanupDocumentClickTracking, clearProposalCache, detectEnvironment, extractClickMeta, fetchDecision, hasTrackedVisit, initDocumentClickTracking, markTrackedVisit, readChoice, sendMetric, updateProposalMetadata, useExperiment, useProbatContext, useProbatMetrics, withExperiment, writeChoice };

package/dist/index.js

@@ -20,41 +20,6 @@ function detectEnvironment() {
   }
   return "prod";
 }
-
-// src/context/ProbatContext.tsx
-var ProbatContext = React4.createContext(null);
-function ProbatProvider({
-  apiBaseUrl,
-  clientKey,
-  environment: explicitEnvironment,
-  repoFullName: explicitRepoFullName,
-  children
-}) {
-  const contextValue = React4.useMemo(() => {
-    const resolvedApiBaseUrl = apiBaseUrl || typeof ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.js', document.baseURI).href)) }) !== "undefined" && undefined?.VITE_PROBAT_API || typeof globalThis !== "undefined" && globalThis.process?.env?.NEXT_PUBLIC_PROBAT_API || typeof window !== "undefined" && window.__PROBAT_API || "https://gushi.onrender.com";
-    const environment = explicitEnvironment || detectEnvironment();
-    const resolvedRepoFullName = explicitRepoFullName || typeof globalThis !== "undefined" && globalThis.process?.env?.NEXT_PUBLIC_PROBAT_REPO || typeof ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.js', document.baseURI).href)) }) !== "undefined" && undefined?.VITE_PROBAT_REPO || typeof window !== "undefined" && window.__PROBAT_REPO || void 0;
-    return {
-      apiBaseUrl: resolvedApiBaseUrl,
-      environment,
-      clientKey,
-      repoFullName: resolvedRepoFullName
-    };
-  }, [apiBaseUrl, clientKey, explicitEnvironment, explicitRepoFullName]);
-  return /* @__PURE__ */ React4__default.default.createElement(ProbatContext.Provider, { value: contextValue }, children);
-}
-function useProbatContext() {
-  const context = React4.useContext(ProbatContext);
-  if (!context) {
-    throw new Error(
-      "useProbatContext must be used within a ProbatProvider. Please wrap your app with <ProbatProvider>."
-    );
-  }
-  return context;
-}
-function ProbatProviderClient(props) {
-  return React4__default.default.createElement(ProbatProvider, props);
-}
 var pendingFetches = /* @__PURE__ */ new Map();
 async function fetchDecision(baseUrl, proposalId) {
   const existingFetch = pendingFetches.get(proposalId);
@@ -97,7 +62,7 @@ async function sendMetric(baseUrl, proposalId, metricName, variantLabel = "contr
     captured_at: (/* @__PURE__ */ new Date()).toISOString()
   };
   try {
-    await fetch(url, {
+    const response = await fetch(url, {
       method: "POST",
       headers: {
         Accept: "application/json",
@@ -107,7 +72,26 @@ async function sendMetric(baseUrl, proposalId, metricName, variantLabel = "contr
       // CRITICAL: Include cookies to distinguish different users
       body: JSON.stringify(body)
     });
-  } catch {
+    if (!response.ok) {
+      console.warn("[PROBAT] Metric send failed:", {
+        status: response.status,
+        statusText: response.statusText,
+        url,
+        body
+      });
+    } else {
+      console.log("[PROBAT] Metric sent successfully:", {
+        metricName,
+        proposalId,
+        variantLabel
+      });
+    }
+  } catch (error) {
+    console.error("[PROBAT] Error sending metric:", {
+      error: error instanceof Error ? error.message : String(error),
+      url,
+      body
+    });
   }
 }
 function extractClickMeta(event) {
@@ -215,7 +199,146 @@ async function loadVariantComponent(baseUrl, proposalId, experimentId, filePath)
   return loadPromise;
 }
 
-// src/hooks/useProbatMetrics.ts
+// src/utils/documentClickTracker.ts
+var proposalCache = /* @__PURE__ */ new Map();
+var isListenerAttached = false;
+var lastClickTime = /* @__PURE__ */ new Map();
+var DEBOUNCE_MS = 100;
+function getProposalMetadata(element) {
+  const probatWrapper = element.closest("[data-probat-proposal]");
+  if (!probatWrapper) return null;
+  const proposalId = probatWrapper.getAttribute("data-probat-proposal");
+  if (!proposalId) return null;
+  const cacheKey = `${proposalId}`;
+  const cached = proposalCache.get(cacheKey);
+  if (cached) return cached;
+  const experimentId = probatWrapper.getAttribute("data-probat-experiment-id");
+  const variantLabel = probatWrapper.getAttribute("data-probat-variant-label") || "control";
+  const apiBaseUrl = probatWrapper.getAttribute("data-probat-api-base-url") || typeof window !== "undefined" && window.__PROBAT_API || "https://gushi.onrender.com";
+  const metadata = {
+    proposalId,
+    experimentId: experimentId || null,
+    variantLabel,
+    apiBaseUrl
+  };
+  proposalCache.set(cacheKey, metadata);
+  return metadata;
+}
+function handleDocumentClick(event) {
+  const target = event.target;
+  if (!target) return;
+  const metadata = getProposalMetadata(target);
+  if (!metadata) {
+    return;
+  }
+  const now2 = Date.now();
+  const lastClick = lastClickTime.get(metadata.proposalId) || 0;
+  if (now2 - lastClick < DEBOUNCE_MS) {
+    return;
+  }
+  lastClickTime.set(metadata.proposalId, now2);
+  const clickMeta = extractClickMeta(event);
+  target.hasAttribute("data-probat-track") || target.closest("[data-probat-track]") !== null;
+  const finalMeta = clickMeta || {
+    target_tag: target.tagName,
+    target_class: target.className || "",
+    target_id: target.id || "",
+    clicked_inside_probat: true
+    // Flag to indicate this was tracked via document-level listener
+  };
+  const experimentId = metadata.variantLabel === "control" ? void 0 : metadata.experimentId && !metadata.experimentId.startsWith("exp_") ? metadata.experimentId : void 0;
+  void sendMetric(
+    metadata.apiBaseUrl,
+    metadata.proposalId,
+    "click",
+    metadata.variantLabel,
+    experimentId,
+    finalMeta
+  );
+  console.log("[PROBAT] Click tracked:", {
+    proposalId: metadata.proposalId,
+    variantLabel: metadata.variantLabel,
+    target: target.tagName,
+    targetId: target.id || "none",
+    targetClass: target.className || "none",
+    meta: finalMeta
+  });
+  console.log("[PROBAT] Sending metric to:", `${metadata.apiBaseUrl}/send_metrics/${metadata.proposalId}`);
+}
+function initDocumentClickTracking() {
+  if (isListenerAttached) {
+    console.warn("[PROBAT] Document click listener already attached");
+    return;
+  }
+  if (typeof document === "undefined") {
+    return;
+  }
+  document.addEventListener("click", handleDocumentClick, true);
+  isListenerAttached = true;
+  console.log("[PROBAT] Document-level click tracking initialized");
+}
+function cleanupDocumentClickTracking() {
+  if (!isListenerAttached) return;
+  if (typeof document !== "undefined") {
+    document.removeEventListener("click", handleDocumentClick, true);
+  }
+  isListenerAttached = false;
+  proposalCache.clear();
+  lastClickTime.clear();
+}
+function updateProposalMetadata(proposalId, metadata) {
+  const existing = proposalCache.get(proposalId);
+  if (existing) {
+    proposalCache.set(proposalId, {
+      ...existing,
+      ...metadata
+    });
+  }
+}
+function clearProposalCache() {
+  proposalCache.clear();
+}
+
+// src/context/ProbatContext.tsx
+var ProbatContext = React4.createContext(null);
+function ProbatProvider({
+  apiBaseUrl,
+  clientKey,
+  environment: explicitEnvironment,
+  repoFullName: explicitRepoFullName,
+  children
+}) {
+  const contextValue = React4.useMemo(() => {
+    const resolvedApiBaseUrl = apiBaseUrl || typeof ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.js', document.baseURI).href)) }) !== "undefined" && undefined?.VITE_PROBAT_API || typeof globalThis !== "undefined" && globalThis.process?.env?.NEXT_PUBLIC_PROBAT_API || typeof window !== "undefined" && window.__PROBAT_API || "https://gushi.onrender.com";
+    const environment = explicitEnvironment || detectEnvironment();
+    const resolvedRepoFullName = explicitRepoFullName || typeof globalThis !== "undefined" && globalThis.process?.env?.NEXT_PUBLIC_PROBAT_REPO || typeof ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.js', document.baseURI).href)) }) !== "undefined" && undefined?.VITE_PROBAT_REPO || typeof window !== "undefined" && window.__PROBAT_REPO || void 0;
+    return {
+      apiBaseUrl: resolvedApiBaseUrl,
+      environment,
+      clientKey,
+      repoFullName: resolvedRepoFullName
+    };
+  }, [apiBaseUrl, clientKey, explicitEnvironment, explicitRepoFullName]);
+  React4.useEffect(() => {
+    initDocumentClickTracking();
+    return () => {
+      cleanupDocumentClickTracking();
+    };
+  }, []);
+  return /* @__PURE__ */ React4__default.default.createElement(ProbatContext.Provider, { value: contextValue }, children);
+}
+function useProbatContext() {
+  const context = React4.useContext(ProbatContext);
+  if (!context) {
+    throw new Error(
+      "useProbatContext must be used within a ProbatProvider. Please wrap your app with <ProbatProvider>."
+    );
+  }
+  return context;
+}
+function ProbatProviderClient(props) {
+  return React4__default.default.createElement(ProbatProvider, props);
+}
 function useProbatMetrics() {
   const { apiBaseUrl } = useProbatContext();
   const trackClick = React4.useCallback(
@@ -578,11 +701,23 @@ function withExperiment(Control, options) {
     }
     const label = choice?.label ?? "control";
     const Variant = registry[label] || registry.control || ControlComponent;
-    return /* @__PURE__ */ React4__default.default.createElement("div", { onClick: (event) => trackClick(event), "data-probat-proposal": proposalId }, React4__default.default.createElement(Variant, {
-      key: `${proposalId}:${label}`,
-      ...props,
-      probat: { trackClick: () => trackClick(null, { force: true }) }
-    }));
+    return /* @__PURE__ */ React4__default.default.createElement(
+      "div",
+      {
+        onClick: (event) => {
+          trackClick(event);
+        },
+        "data-probat-proposal": proposalId,
+        "data-probat-experiment-id": choice?.experiment_id || "",
+        "data-probat-variant-label": label,
+        "data-probat-api-base-url": apiBaseUrl
+      },
+      React4__default.default.createElement(Variant, {
+        key: `${proposalId}:${label}`,
+        ...props,
+        probat: { trackClick: () => trackClick(null, { force: true }) }
+      })
+    );
   }
   Wrapped.displayName = `withExperiment(${Control.displayName || Control.name || "Component"})`;
   return Wrapped;
@@ -590,13 +725,17 @@ function withExperiment(Control, options) {
 
 exports.ProbatProvider = ProbatProvider;
 exports.ProbatProviderClient = ProbatProviderClient;
+exports.cleanupDocumentClickTracking = cleanupDocumentClickTracking;
+exports.clearProposalCache = clearProposalCache;
 exports.detectEnvironment = detectEnvironment;
 exports.extractClickMeta = extractClickMeta;
 exports.fetchDecision = fetchDecision;
 exports.hasTrackedVisit = hasTrackedVisit;
+exports.initDocumentClickTracking = initDocumentClickTracking;
 exports.markTrackedVisit = markTrackedVisit;
 exports.readChoice = readChoice;
 exports.sendMetric = sendMetric;
+exports.updateProposalMetadata = updateProposalMetadata;
 exports.useExperiment = useExperiment;
 exports.useProbatContext = useProbatContext;
 exports.useProbatMetrics = useProbatMetrics;