@probat/react 0.1.2 → 0.1.4

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
     }
 }
 
@@ -197,6 +178,7 @@ export async function fetchComponentExperimentConfig(
 
 // Cache for variant component loads
 const variantComponentCache = new Map<string, Promise<React.ComponentType<any> | null>>();
+const moduleCache = new Map<string, any>(); // Cache for loaded modules (relative imports)
 
 // Make React available globally for variant components
 if (typeof window !== "undefined") {
@@ -204,11 +186,146 @@ if (typeof window !== "undefined") {
     (window as any).React = (window as any).React || React;
 }
 
+/**
+ * Resolve relative import path to absolute path
+ */
+function resolveRelativePath(relativePath: string, basePath: string): string {
+    // Remove file extension if present
+    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('/');
+}
+
+/**
+ * Fetch and compile a module from absolute path
+ */
+async function loadRelativeModule(
+    absolutePath: string,
+    baseFilePath: string,
+    repoFullName?: string,
+    baseRef?: string
+): Promise<any> {
+    const cacheKey = `${baseFilePath}:${absolutePath}`;
+    if (moduleCache.has(cacheKey)) {
+        return moduleCache.get(cacheKey);
+    }
+
+    // Try to determine file extension
+    const extensions = ['.jsx', '.tsx', '.js', '.ts'];
+    let moduleCode: string | null = null;
+    let modulePath: string | null = null;
+
+    // Try each extension
+    for (const ext of extensions) {
+        const testPath = absolutePath + (absolutePath.includes('.') ? '' : ext);
+
+        // Try local first
+        try {
+            const localRes = await fetch(testPath, {
+                method: "GET",
+                headers: { Accept: "text/plain" },
+            });
+            if (localRes.ok) {
+                moduleCode = await localRes.text();
+                modulePath = testPath;
+                break;
+            }
+        } catch {
+            // Continue to next extension or GitHub
+        }
+
+        // Try GitHub if local failed
+        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 {
+                // Continue
+            }
+        }
+    }
+
+    if (!moduleCode || !modulePath) {
+        throw new Error(`Could not resolve module: ${absolutePath} from ${baseFilePath}`);
+    }
+
+    // Compile the module
+    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 {
+            throw new Error("Babel not available for compiling relative import");
+        }
+    }
+
+    // Preprocess module code
+    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;
+
+    // Execute compiled module
+    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;
+}
+
 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 +342,220 @@ 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}`;
+            // ============================================
+            // Hybrid approach: Dynamic import for CSR (Vite), fetch+babel for SSR (Next.js)
+            // ============================================
+            let code: string = "";
+            let rawCode: string = "";
+            let rawCodeFetched = false;
+
+            // Try dynamic import first (works great for Vite/CSR, resolves relative imports automatically)
+            // Only attempt in browser and not during Next.js server-side compilation
+            const isBrowser = typeof window !== "undefined";
+            const isNextJSServer = typeof window === "undefined" ||
+                (typeof (globalThis as any).process !== "undefined" && (globalThis as any).process.env?.NEXT_RUNTIME === "nodejs");
+
+            if (isBrowser && !isNextJSServer) {
+                try {
+                    const variantUrl = `/probat/${filePath}`;
+                    // Use dynamic import - Vite can resolve relative imports automatically
+                    const mod = await import(/* @vite-ignore */ variantUrl);
+                    const VariantComponent = (mod as any)?.default || mod;
+                    if (VariantComponent && typeof VariantComponent === "function") {
+                        console.log(`[PROBAT] ✅ Loaded variant via dynamic import (CSR): ${variantUrl}`);
+                        return VariantComponent as React.ComponentType<any>;
+                    }
+                } catch (dynamicImportError) {
+                    // Dynamic import failed (might be Next.js or other issue), fall through to fetch+babel
+                    console.debug(`[PROBAT] Dynamic import failed, using fetch+babel:`, dynamicImportError);
+                }
+            }
 
-            const res = await fetch(variantUrl, {
-                method: "GET",
-                headers: { Accept: "text/javascript" },
-                credentials: "include",
-            });
+            // Fallback: fetch + babel compilation (works for Next.js SSR and when dynamic import fails)
+            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 (!res.ok) {
-                throw new Error(`HTTP ${res.status}`);
+            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 code = await res.text();
+            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");
+
+                    // Preprocess relative imports: convert to absolute paths that can be fetched
+                    // This allows the require shim to fetch them later
+                    const relativeImportMap = new Map<string, string>();
+                    rawCode = rawCode.replace(
+                        /^import\s+(\w+)\s+from\s+['"](\.\.?\/[^'"]+)['"];?\s*$/gm,
+                        (match, importName, relativePath) => {
+                            // Resolve relative path to absolute
+                            const baseDir = filePath.substring(0, filePath.lastIndexOf('/'));
+                            const resolvedPath = resolveRelativePath(relativePath, baseDir);
+                            // Try to find the file with extension
+                            const absolutePath = resolvedPath.startsWith('/') ? resolvedPath : '/' + resolvedPath;
+                            relativeImportMap.set(importName, absolutePath);
+                            // Replace with absolute path import - Babel will compile this to require()
+                            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;
+
+                    // Pre-load relative imports if any
+                    const relativeModules: Record<string, any> = {};
+                    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;
+                            }
+                        }
+                    }
+
+                    // Build require shim that can resolve relative imports
+                    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();
+            }
 
-            // 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 +563,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>;
             }