@probat/react 0.1.2 → 0.1.4

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 "use client";
-import React4, { createContext, useMemo, useEffect, useContext, useCallback, useState } from 'react';
+import React4, { createContext, useMemo, useContext, useCallback, useState, useEffect } from 'react';
 
 // src/utils/environment.ts
 function detectEnvironment() {
@@ -13,6 +13,41 @@ function detectEnvironment() {
   }
   return "prod";
 }
+
+// src/context/ProbatContext.tsx
+var ProbatContext = createContext(null);
+function ProbatProvider({
+  apiBaseUrl,
+  clientKey,
+  environment: explicitEnvironment,
+  repoFullName: explicitRepoFullName,
+  children
+}) {
+  const contextValue = useMemo(() => {
+    const resolvedApiBaseUrl = apiBaseUrl || typeof import.meta !== "undefined" && import.meta.env?.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 import.meta !== "undefined" && import.meta.env?.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.createElement(ProbatContext.Provider, { value: contextValue }, children);
+}
+function useProbatContext() {
+  const context = 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.createElement(ProbatProvider, props);
+}
 var pendingFetches = /* @__PURE__ */ new Map();
 async function fetchDecision(baseUrl, proposalId) {
   const existingFetch = pendingFetches.get(proposalId);
@@ -55,7 +90,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",
@@ -65,26 +100,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) {
@@ -141,11 +157,109 @@ async function fetchComponentExperimentConfig(baseUrl, repoFullName, componentPa
   return fetchPromise;
 }
 var variantComponentCache = /* @__PURE__ */ new Map();
+var moduleCache = /* @__PURE__ */ new Map();
 if (typeof window !== "undefined") {
   window.__probatReact = React4;
   window.React = window.React || React4;
 }
-async function loadVariantComponent(baseUrl, proposalId, experimentId, filePath) {
+function resolveRelativePath(relativePath, basePath) {
+  const baseDir = basePath.substring(0, basePath.lastIndexOf("/"));
+  const parts = baseDir.split("/").filter(Boolean);
+  const relativeParts = relativePath.split("/").filter(Boolean);
+  for (const part of relativeParts) {
+    if (part === "..") {
+      parts.pop();
+    } else if (part !== ".") {
+      parts.push(part);
+    }
+  }
+  return "/" + parts.join("/");
+}
+async function loadRelativeModule(absolutePath, baseFilePath, repoFullName, baseRef) {
+  const cacheKey = `${baseFilePath}:${absolutePath}`;
+  if (moduleCache.has(cacheKey)) {
+    return moduleCache.get(cacheKey);
+  }
+  const extensions = [".jsx", ".tsx", ".js", ".ts"];
+  let moduleCode = null;
+  let modulePath = null;
+  for (const ext of extensions) {
+    const testPath = absolutePath + (absolutePath.includes(".") ? "" : ext);
+    try {
+      const localRes = await fetch(testPath, {
+        method: "GET",
+        headers: { Accept: "text/plain" }
+      });
+      if (localRes.ok) {
+        moduleCode = await localRes.text();
+        modulePath = testPath;
+        break;
+      }
+    } catch {
+    }
+    if (!moduleCode && repoFullName) {
+      try {
+        const githubPath = testPath.startsWith("/") ? testPath.substring(1) : testPath;
+        const githubUrl = `https://raw.githubusercontent.com/${repoFullName}/${baseRef || "main"}/${githubPath}`;
+        const res = await fetch(githubUrl, { method: "GET", headers: { Accept: "text/plain" } });
+        if (res.ok) {
+          moduleCode = await res.text();
+          modulePath = testPath;
+          break;
+        }
+      } catch {
+      }
+    }
+  }
+  if (!moduleCode || !modulePath) {
+    throw new Error(`Could not resolve module: ${absolutePath} from ${baseFilePath}`);
+  }
+  let Babel;
+  if (typeof window !== "undefined" && window.Babel) {
+    Babel = window.Babel;
+  } else {
+    try {
+      const babelModule = await import('@babel/standalone');
+      Babel = babelModule.default || babelModule;
+    } catch {
+      throw new Error("Babel not available for compiling relative import");
+    }
+  }
+  let processedCode = moduleCode;
+  processedCode = processedCode.replace(/^import\s+['"].*\.css['"];?\s*$/gm, "");
+  processedCode = processedCode.replace(/^import\s+React\s+from\s+['"]react['"];?\s*$/m, "const React = window.React || globalThis.React;");
+  processedCode = processedCode.replace(/import\.meta\.env\.[\w$]+/g, "undefined");
+  processedCode = processedCode.replace(/\bimport\.meta\b/g, "({})");
+  const isTSX = modulePath.endsWith(".tsx");
+  const compiled = Babel.transform(processedCode, {
+    presets: [
+      ["react", { runtime: "classic" }],
+      ["typescript", { allExtensions: true, isTSX }]
+    ],
+    plugins: [["transform-modules-commonjs", { allowTopLevelThis: true }]],
+    sourceType: "module",
+    filename: modulePath
+  }).code;
+  const moduleCodeWrapper = `
+        var require = function(name) {
+            if (name === "react" || name === "react/jsx-runtime") {
+                return window.React || globalThis.React;
+            }
+            if (name.startsWith("/@vite") || name.includes("@vite/client")) {
+                return {};
+            }
+            throw new Error("Unsupported module in relative import: " + name);
+        };
+        var module = { exports: {} };
+        var exports = module.exports;
+        ${compiled}
+        return module.exports;
+    `;
+  const moduleExports = new Function(moduleCodeWrapper)();
+  moduleCache.set(cacheKey, moduleExports);
+  return moduleExports;
+}
+async function loadVariantComponent(baseUrl, proposalId, experimentId, filePath, repoFullName, baseRef) {
   if (!filePath) {
     return null;
   }
@@ -156,16 +270,190 @@ 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}`);
+      let code = "";
+      let rawCode = "";
+      let rawCodeFetched = false;
+      const isBrowser = typeof window !== "undefined";
+      const isNextJSServer = typeof window === "undefined" || typeof globalThis.process !== "undefined" && globalThis.process.env?.NEXT_RUNTIME === "nodejs";
+      if (isBrowser && !isNextJSServer) {
+        try {
+          const variantUrl = `/probat/${filePath}`;
+          const mod = await import(
+            /* @vite-ignore */
+            variantUrl
+          );
+          const VariantComponent2 = mod?.default || mod;
+          if (VariantComponent2 && typeof VariantComponent2 === "function") {
+            console.log(`[PROBAT] \u2705 Loaded variant via dynamic import (CSR): ${variantUrl}`);
+            return VariantComponent2;
+          }
+        } catch (dynamicImportError) {
+          console.debug(`[PROBAT] Dynamic import failed, using fetch+babel:`, dynamicImportError);
+        }
+      }
+      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 relativeImportMap = /* @__PURE__ */ new Map();
+          rawCode = rawCode.replace(
+            /^import\s+(\w+)\s+from\s+['"](\.\.?\/[^'"]+)['"];?\s*$/gm,
+            (match, importName, relativePath) => {
+              const baseDir = filePath.substring(0, filePath.lastIndexOf("/"));
+              const resolvedPath = resolveRelativePath(relativePath, baseDir);
+              const absolutePath = resolvedPath.startsWith("/") ? resolvedPath : "/" + resolvedPath;
+              relativeImportMap.set(importName, absolutePath);
+              return `import ${importName} from "${absolutePath}";`;
+            }
+          );
+          const compiled = Babel.transform(rawCode, {
+            presets: [
+              ["react", { runtime: "classic" }],
+              ["typescript", { allExtensions: true, isTSX }]
+            ],
+            plugins: [["transform-modules-commonjs", { allowTopLevelThis: true }]],
+            sourceType: "module",
+            filename: filePath
+          }).code;
+          const relativeModules = {};
+          if (relativeImportMap.size > 0) {
+            for (const [importName, absolutePath] of relativeImportMap.entries()) {
+              try {
+                const moduleExports = await loadRelativeModule(absolutePath, filePath, repoFullName, baseRef);
+                relativeModules[absolutePath] = moduleExports.default || moduleExports;
+              } catch (err) {
+                console.warn(`[PROBAT] Failed to load relative import ${absolutePath}:`, err);
+                relativeModules[absolutePath] = null;
+              }
+            }
+          }
+          const relativeModulesJson = JSON.stringify(relativeModules);
+          code = `
+                        var __probatVariant = (function() {
+                            var relativeModules = ${relativeModulesJson};
+                            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;
+                                }
+                                // Handle relative imports (now converted to absolute paths)
+                                if (name.startsWith("/") && relativeModules.hasOwnProperty(name)) {
+                                    var mod = relativeModules[name];
+                                    if (mod === null) {
+                                        throw new Error("Failed to load module: " + name);
+                                    }
+                                    return mod;
+                                }
+                                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;
       }
@@ -192,146 +480,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 = createContext(null);
-function ProbatProvider({
-  apiBaseUrl,
-  clientKey,
-  environment: explicitEnvironment,
-  repoFullName: explicitRepoFullName,
-  children
-}) {
-  const contextValue = useMemo(() => {
-    const resolvedApiBaseUrl = apiBaseUrl || typeof import.meta !== "undefined" && import.meta.env?.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 import.meta !== "undefined" && import.meta.env?.VITE_PROBAT_REPO || typeof window !== "undefined" && window.__PROBAT_REPO || void 0;
-    return {
-      apiBaseUrl: resolvedApiBaseUrl,
-      environment,
-      clientKey,
-      repoFullName: resolvedRepoFullName
-    };
-  }, [apiBaseUrl, clientKey, explicitEnvironment, explicitRepoFullName]);
-  useEffect(() => {
-    initDocumentClickTracking();
-    return () => {
-      cleanupDocumentClickTracking();
-    };
-  }, []);
-  return /* @__PURE__ */ React4.createElement(ProbatContext.Provider, { value: contextValue }, children);
-}
-function useProbatContext() {
-  const context = 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.createElement(ProbatProvider, props);
-}
+// src/hooks/useProbatMetrics.ts
 function useProbatMetrics() {
   const { apiBaseUrl } = useProbatContext();
   const trackClick = useCallback(
@@ -595,7 +744,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;
@@ -694,28 +845,16 @@ function withExperiment(Control, options) {
     }
     const label = choice?.label ?? "control";
     const Variant = registry[label] || registry.control || ControlComponent;
-    return /* @__PURE__ */ React4.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.createElement(Variant, {
-        key: `${proposalId}:${label}`,
-        ...props,
-        probat: { trackClick: () => trackClick(null, { force: true }) }
-      })
-    );
+    return /* @__PURE__ */ React4.createElement("div", { onClick: (event) => trackClick(event), "data-probat-proposal": proposalId }, React4.createElement(Variant, {
+      key: `${proposalId}:${label}`,
+      ...props,
+      probat: { trackClick: () => trackClick(null, { force: true }) }
+    }));
   }
   Wrapped.displayName = `withExperiment(${Control.displayName || Control.name || "Component"})`;
   return Wrapped;
 }
 
-export { ProbatProvider, ProbatProviderClient, cleanupDocumentClickTracking, clearProposalCache, detectEnvironment, extractClickMeta, fetchDecision, hasTrackedVisit, initDocumentClickTracking, markTrackedVisit, readChoice, sendMetric, updateProposalMetadata, useExperiment, useProbatContext, useProbatMetrics, withExperiment, writeChoice };
+export { ProbatProvider, ProbatProviderClient, detectEnvironment, extractClickMeta, fetchDecision, hasTrackedVisit, markTrackedVisit, readChoice, sendMetric, useExperiment, useProbatContext, useProbatMetrics, withExperiment, writeChoice };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map