@probat/react 0.1.2 → 0.1.3

package/dist/index.d.mts

@@ -190,33 +190,4 @@ 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;
 
-/**
- * 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 };
+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 };

package/dist/index.d.ts

@@ -190,33 +190,4 @@ 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;
 
-/**
- * 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 };
+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 };

package/dist/index.js

@@ -20,6 +20,41 @@ 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);
@@ -62,7 +97,7 @@ async function sendMetric(baseUrl, proposalId, metricName, variantLabel = "contr
     captured_at: (/* @__PURE__ */ new Date()).toISOString()
   };
   try {
-    const response = await fetch(url, {
+    await fetch(url, {
       method: "POST",
       headers: {
         Accept: "application/json",
@@ -72,26 +107,7 @@ async function sendMetric(baseUrl, proposalId, metricName, variantLabel = "contr
       // CRITICAL: Include cookies to distinguish different users
       body: JSON.stringify(body)
     });
-    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
-    });
+  } catch {
   }
 }
 function extractClickMeta(event) {
@@ -152,7 +168,7 @@ if (typeof window !== "undefined") {
   window.__probatReact = React4__default.default;
   window.React = window.React || React4__default.default;
 }
-async function loadVariantComponent(baseUrl, proposalId, experimentId, filePath) {
+async function loadVariantComponent(baseUrl, proposalId, experimentId, filePath, repoFullName, baseRef) {
   if (!filePath) {
     return null;
   }
@@ -163,16 +179,151 @@ async function loadVariantComponent(baseUrl, proposalId, experimentId, filePath)
   }
   const loadPromise = (async () => {
     try {
-      const variantUrl = `${baseUrl.replace(/\/$/, "")}/variants/${filePath}`;
-      const res = await fetch(variantUrl, {
-        method: "GET",
-        headers: { Accept: "text/javascript" },
-        credentials: "include"
-      });
-      if (!res.ok) {
-        throw new Error(`HTTP ${res.status}`);
+      try {
+        const variantUrl = `/probat/${filePath}`;
+        const mod = await import(
+          /* @vite-ignore */
+          variantUrl
+        );
+        const VariantComponent2 = mod?.default || mod;
+        if (VariantComponent2 && typeof VariantComponent2 === "function") {
+          return VariantComponent2;
+        }
+      } catch {
+      }
+      let code = "";
+      let rawCode = "";
+      let rawCodeFetched = false;
+      const localUrl = `/probat/${filePath}`;
+      try {
+        const localRes = await fetch(localUrl, {
+          method: "GET",
+          headers: { Accept: "text/plain" }
+        });
+        if (localRes.ok) {
+          rawCode = await localRes.text();
+          rawCodeFetched = true;
+          console.log(`[PROBAT] \u2705 Loaded variant from local (user's repo): ${localUrl}`);
+        }
+      } catch {
+        console.debug(`[PROBAT] Local file not available (${localUrl}), trying GitHub...`);
+      }
+      if (!rawCodeFetched && repoFullName) {
+        const githubPath = `probat/${filePath}`;
+        const gitRef = baseRef || "main";
+        const githubUrl = `https://raw.githubusercontent.com/${repoFullName}/${gitRef}/${githubPath}`;
+        const res = await fetch(githubUrl, { method: "GET", headers: { Accept: "text/plain" } });
+        if (res.ok) {
+          rawCode = await res.text();
+          rawCodeFetched = true;
+          console.log(`[PROBAT] \u26A0\uFE0F Loaded variant from GitHub (fallback): ${githubUrl}`);
+        } else {
+          console.warn(`[PROBAT] \u26A0\uFE0F GitHub fetch failed (${res.status}), falling back to server compilation`);
+        }
+      }
+      if (rawCodeFetched && rawCode) {
+        let Babel;
+        if (typeof window !== "undefined" && window.Babel) {
+          Babel = window.Babel;
+        } else {
+          try {
+            const babelModule = await import('@babel/standalone');
+            Babel = babelModule.default || babelModule;
+          } catch (importError) {
+            try {
+              await new Promise((resolve, reject) => {
+                if (typeof document === "undefined") {
+                  reject(new Error("Document not available"));
+                  return;
+                }
+                if (window.Babel) {
+                  Babel = window.Babel;
+                  resolve();
+                  return;
+                }
+                const script = document.createElement("script");
+                script.src = "https://unpkg.com/@babel/standalone/babel.min.js";
+                script.async = true;
+                script.onload = () => {
+                  Babel = window.Babel;
+                  if (!Babel) reject(new Error("Babel not found after script load"));
+                  else resolve();
+                };
+                script.onerror = () => reject(new Error("Failed to load Babel from CDN"));
+                document.head.appendChild(script);
+              });
+            } catch (babelError) {
+              console.error("[PROBAT] Failed to load Babel, falling back to server compilation", babelError);
+              rawCodeFetched = false;
+            }
+          }
+        }
+        if (rawCodeFetched && rawCode && Babel) {
+          const isTSX = filePath.endsWith(".tsx");
+          rawCode = rawCode.replace(/^import\s+['"].*\.css['"];?\s*$/gm, "");
+          rawCode = rawCode.replace(/^import\s+.*from\s+['"].*\.css['"];?\s*$/gm, "");
+          rawCode = rawCode.replace(
+            /^import\s+React(?:\s*,\s*\{[^}]*\})?\s+from\s+['"]react['"];?\s*$/m,
+            "const React = window.React || globalThis.React;"
+          );
+          rawCode = rawCode.replace(
+            /^import\s+\*\s+as\s+React\s+from\s+['"]react['"];?\s*$/m,
+            "const React = window.React || globalThis.React;"
+          );
+          rawCode = rawCode.replace(
+            /^import\s+\{([^}]+)\}\s+from\s+['"]react['"];?\s*$/m,
+            (match, imports) => `const {${imports}} = window.React || globalThis.React;`
+          );
+          rawCode = rawCode.replace(/import\.meta\.env\.[\w$]+/g, "undefined");
+          rawCode = rawCode.replace(/\bimport\.meta\b/g, "({})");
+          rawCode = rawCode.replace(/^import\s+.*\/@vite\/client.*$/gm, "");
+          rawCode = rawCode.replace(/import\.meta\.hot(?:\.[\w$]+)*/g, "undefined");
+          const compiled = Babel.transform(rawCode, {
+            presets: [
+              ["react", { runtime: "classic" }],
+              ["typescript", { allExtensions: true, isTSX }]
+            ],
+            plugins: [["transform-modules-commonjs", { allowTopLevelThis: true }]],
+            sourceType: "module",
+            filename: filePath
+          }).code;
+          code = `
+                        var __probatVariant = (function() {
+                            var require = function(name) {
+                                if (name === "react" || name === "react/jsx-runtime") {
+                                    return window.React || globalThis.React;
+                                }
+                                if (name.startsWith("/@vite") || name.includes("@vite/client") || name.includes(".vite/deps")) {
+                                    return {};
+                                }
+                                if (name === "react/jsx-runtime.js") {
+                                    return window.React || globalThis.React;
+                                }
+                                throw new Error("Unsupported module: " + name);
+                            };
+                            var module = { exports: {} };
+                            var exports = module.exports;
+                            ${compiled}
+                            return module.exports.default || module.exports;
+                        })();
+                    `;
+        } else {
+          rawCodeFetched = false;
+          code = "";
+        }
+      }
+      if (!rawCodeFetched || code === "") {
+        const variantUrl = `${baseUrl.replace(/\/$/, "")}/variants/${filePath}`;
+        const serverRes = await fetch(variantUrl, {
+          method: "GET",
+          headers: { Accept: "text/javascript" },
+          credentials: "include"
+        });
+        if (!serverRes.ok) {
+          throw new Error(`HTTP ${serverRes.status}`);
+        }
+        code = await serverRes.text();
       }
-      const code = await res.text();
       if (typeof window !== "undefined") {
         window.React = window.React || React4__default.default;
       }
@@ -199,146 +350,7 @@ async function loadVariantComponent(baseUrl, proposalId, experimentId, filePath)
   return loadPromise;
 }
 
-// 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);
-}
+// src/hooks/useProbatMetrics.ts
 function useProbatMetrics() {
   const { apiBaseUrl } = useProbatContext();
   const trackClick = React4.useCallback(
@@ -602,7 +614,9 @@ function withExperiment(Control, options) {
                   apiBaseUrl,
                   componentConfig.proposal_id,
                   variantInfo.experiment_id,
-                  variantInfo.file_path
+                  variantInfo.file_path,
+                  componentConfig.repo_full_name,
+                  componentConfig.base_ref
                 );
                 if (VariantComp && typeof VariantComp === "function" && alive) {
                   variantComponents[label2] = VariantComp;
@@ -701,23 +715,11 @@ 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,
-        "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 }) }
-      })
-    );
+    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 }) }
+    }));
   }
   Wrapped.displayName = `withExperiment(${Control.displayName || Control.name || "Component"})`;
   return Wrapped;
@@ -725,17 +727,13 @@ 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;