@probat/react 0.1.2 → 0.1.3

package/src/utils/api.ts

@@ -15,6 +15,8 @@ export type ComponentVariantInfo = {
 
 export type ComponentExperimentConfig = {
     proposal_id: string;
+    repo_full_name: string;
+    base_ref?: string;  // Git branch/ref (default: "main")
     variants: Record<string, ComponentVariantInfo>;
 };
 
@@ -82,7 +84,7 @@ export async function sendMetric(
         captured_at: new Date().toISOString(),
     };
     try {
-        const response = await fetch(url, {
+        await fetch(url, {
             method: "POST",
             headers: {
                 Accept: "application/json",
@@ -91,29 +93,8 @@ export async function sendMetric(
             credentials: "include", // CRITICAL: Include cookies to distinguish different users
             body: JSON.stringify(body),
         });
-        
-        // Log in development for debugging
-        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) {
-        // Log error in development, but don't break the app
-        console.error('[PROBAT] Error sending metric:', {
-            error: error instanceof Error ? error.message : String(error),
-            url,
-            body,
-        });
+    } catch {
+        // Silently fail - metrics should not break the app
     }
 }
 
@@ -208,7 +189,9 @@ export async function loadVariantComponent(
     baseUrl: string,
     proposalId: string,
     experimentId: string,
-    filePath: string | null
+    filePath: string | null,
+    repoFullName?: string,
+    baseRef?: string
 ): Promise<React.ComponentType<any> | null> {
     if (!filePath) {
         return null;
@@ -225,29 +208,167 @@ export async function loadVariantComponent(
     // Create new load promise
     const loadPromise = (async () => {
         try {
-            // Fetch the variant code (server compiles TSX/JSX to JS)
-            const variantUrl = `${baseUrl.replace(/\/$/, "")}/variants/${filePath}`;
+            // ============================================
+            // Preferred path: dynamic ESM import (Vite/Next can resolve deps)
+            // ============================================
+            try {
+                const variantUrl = `/probat/${filePath}`;
+                const mod = await import(/* @vite-ignore */ variantUrl);
+                const VariantComponent = (mod as any)?.default || mod;
+                if (VariantComponent && typeof VariantComponent === "function") {
+                    return VariantComponent as React.ComponentType<any>;
+                }
+            } catch {
+                // Fall through to legacy path
+            }
+
+            // Legacy path (fetch + babel + eval) retained for non-Vite envs
+            let code: string = "";
+            let rawCode: string = "";
+            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] ✅ 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] ⚠️ Loaded variant from GitHub (fallback): ${githubUrl}`);
+                } else {
+                    console.warn(`[PROBAT] ⚠️ GitHub fetch failed (${res.status}), falling back to server compilation`);
+                }
+            }
 
-            const res = await fetch(variantUrl, {
+            if (rawCodeFetched && rawCode) {
+                let Babel: any;
+                if (typeof window !== "undefined" && (window as any).Babel) {
+                    Babel = (window as any).Babel;
+                } else {
+                    try {
+                        // @ts-ignore
+                        const babelModule = await import("@babel/standalone");
+                        Babel = babelModule.default || babelModule;
+                    } catch (importError) {
+                        try {
+                            await new Promise<void>((resolve, reject) => {
+                                if (typeof document === "undefined") {
+                                    reject(new Error("Document not available"));
+                                    return;
+                                }
+                                if ((window as any).Babel) {
+                                    Babel = (window as any).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 as any).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 (!res.ok) {
-                throw new Error(`HTTP ${res.status}`);
+                if (!serverRes.ok) {
+                    throw new Error(`HTTP ${serverRes.status}`);
+                }
+                code = await serverRes.text();
             }
 
-            const code = await res.text();
-
-            // The server returns an IIFE that assigns to __probatVariant
-            // Execute the code to get the component
-            // First, ensure React is available globally
             if (typeof window !== "undefined") {
                 (window as any).React = (window as any).React || React;
             }
 
-            // Execute the IIFE code
             const evalFunc = new Function(`
                 var __probatVariant;
                 ${code}
@@ -255,10 +376,7 @@ export async function loadVariantComponent(
             `);
 
             const result = evalFunc();
-
-            // The result is { default: Component } from esbuild's IIFE output
             const VariantComponent = result?.default || result;
-
             if (typeof VariantComponent === "function") {
                 return VariantComponent as React.ComponentType<any>;
             }