@probat/react 0.1.1 → 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>;
 };
 
@@ -187,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;
@@ -204,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`);
+                }
+            }
+
+            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 = "";
+                }
+            }
 
-            const res = await fetch(variantUrl, {
+            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}
@@ -234,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>;
             }

package/src/utils/documentClickTracker.ts

@@ -35,31 +35,31 @@ function getProposalMetadata(element: HTMLElement): {
 } | null {
     // Find the nearest probat wrapper
     const probatWrapper = element.closest('[data-probat-proposal]') as HTMLElement | null;
-    
+
     if (!probatWrapper) return null;
-    
+
     const proposalId = probatWrapper.getAttribute('data-probat-proposal');
     if (!proposalId) return null;
-    
+
     // Check cache first
     const cacheKey = `${proposalId}`;
     const cached = proposalCache.get(cacheKey);
     if (cached) return cached;
-    
+
     // Extract metadata from data attributes
     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 as any).__PROBAT_API) ||
-                       'https://gushi.onrender.com';
-    
+    const apiBaseUrl = probatWrapper.getAttribute('data-probat-api-base-url') ||
+        (typeof window !== 'undefined' && (window as any).__PROBAT_API) ||
+        'https://gushi.onrender.com';
+
     const metadata = {
         proposalId,
         experimentId: experimentId || null,
         variantLabel,
         apiBaseUrl,
     };
-    
+
     // Cache it
     proposalCache.set(cacheKey, metadata);
     return metadata;
@@ -72,11 +72,13 @@ function getProposalMetadata(element: HTMLElement): {
 function handleDocumentClick(event: MouseEvent): void {
     const target = event.target as HTMLElement | null;
     if (!target) return;
-    
+
     // Get proposal metadata
     const metadata = getProposalMetadata(target);
-    if (!metadata) return;
-    
+    if (!metadata) {
+        return; // Click outside probat component
+    }
+
     // Rate limiting: prevent duplicate rapid clicks
     const now = Date.now();
     const lastClick = lastClickTime.get(metadata.proposalId) || 0;
@@ -84,52 +86,65 @@ function handleDocumentClick(event: MouseEvent): void {
         return; // Ignore rapid duplicate clicks
     }
     lastClickTime.set(metadata.proposalId, now);
-    
+
     // Extract click metadata (your existing function)
     const clickMeta = extractClickMeta(event);
-    
+
     // Determine if we should track this click
     // Track if:
     // 1. It's an actionable element (button, link, etc.) - clickMeta exists
     // 2. Element has data-probat-track attribute
     // 3. Parent has data-probat-track attribute
-    const hasTrackAttribute = target.hasAttribute('data-probat-track') || 
-                              target.closest('[data-probat-track]') !== null;
-    
-    const shouldTrack = clickMeta !== undefined || hasTrackAttribute;
-    
+    // 4. ANY click within a probat component (more permissive - track all clicks)
+    const hasTrackAttribute = target.hasAttribute('data-probat-track') ||
+        target.closest('[data-probat-track]') !== null;
+
+    // More permissive: Track ALL clicks within probat components
+    // This ensures we capture clicks even if elements don't have explicit tracking attributes
+    const shouldTrack = clickMeta !== undefined || hasTrackAttribute || true; // Track all clicks in probat components
+
     if (!shouldTrack) {
-        // Optional: Track "dead clicks" for UX insights
-        // Uncomment the code below if you want to track clicks on non-interactive elements
-        /*
-        const deadClickMeta = {
-            dead_click: true,
-            target_tag: target.tagName,
-            target_class: target.className || '',
-            target_id: target.id || '',
-        };
-        
-        void sendMetric(
-            metadata.apiBaseUrl,
-            metadata.proposalId,
-            'dead_click',
-            metadata.variantLabel,
-            metadata.experimentId,
-            deadClickMeta
-        );
-        */
         return;
     }
-    
+
+    // Build metadata - use clickMeta if available, otherwise create basic metadata
+    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
+    };
+
     // Send click metric
+    // For control variant, don't send experiment_id (control might be synthetic)
+    // For other variants, send experiment_id if it exists and is valid (not synthetic "exp_" prefix)
+    const experimentId = metadata.variantLabel === 'control'
+        ? undefined
+        : (metadata.experimentId && !metadata.experimentId.startsWith('exp_')
+            ? metadata.experimentId
+            : undefined);
+
     void sendMetric(
         metadata.apiBaseUrl,
         metadata.proposalId,
         'click',
         metadata.variantLabel,
-        metadata.experimentId || undefined,
-        clickMeta
+        experimentId,
+        finalMeta
     );
+
+    // Debug logging (always log for now to help diagnose)
+    console.log('[PROBAT] Click tracked:', {
+        proposalId: metadata.proposalId,
+        variantLabel: metadata.variantLabel,
+        target: target.tagName,
+        targetId: target.id || 'none',
+        targetClass: target.className || 'none',
+        meta: finalMeta,
+    });
+
+    // Also log to help debug if API call fails
+    console.log('[PROBAT] Sending metric to:', `${metadata.apiBaseUrl}/send_metrics/${metadata.proposalId}`);
 }
 
 /**
@@ -141,16 +156,16 @@ export function initDocumentClickTracking(): void {
         console.warn('[PROBAT] Document click listener already attached');
         return;
     }
-    
+
     if (typeof document === 'undefined') {
         // Server-side rendering - skip
         return;
     }
-    
+
     // Use capture phase (true) to catch events before they bubble
     // This ensures we catch clicks even if stopPropagation() is called
     document.addEventListener('click', handleDocumentClick, true);
-    
+
     isListenerAttached = true;
     console.log('[PROBAT] Document-level click tracking initialized');
 }
@@ -160,11 +175,11 @@ export function initDocumentClickTracking(): void {
  */
 export function cleanupDocumentClickTracking(): void {
     if (!isListenerAttached) return;
-    
+
     if (typeof document !== 'undefined') {
         document.removeEventListener('click', handleDocumentClick, true);
     }
-    
+
     isListenerAttached = false;
     proposalCache.clear();
     lastClickTime.clear();