@probat/react 0.1.3 → 0.1.4

package/src/utils/api.ts

@@ -178,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") {
@@ -185,6 +186,139 @@ 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,
@@ -209,24 +343,35 @@ export async function loadVariantComponent(
     const loadPromise = (async () => {
         try {
             // ============================================
-            // Preferred path: dynamic ESM import (Vite/Next can resolve deps)
+            // Hybrid approach: Dynamic import for CSR (Vite), fetch+babel for SSR (Next.js)
             // ============================================
-            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;
 
+            // 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);
+                }
+            }
+
+            // Fallback: fetch + babel compilation (works for Next.js SSR and when dynamic import fails)
             const localUrl = `/probat/${filePath}`;
             try {
                 const localRes = await fetch(localUrl, {
@@ -316,6 +461,23 @@ export async function loadVariantComponent(
                     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" }],
@@ -326,8 +488,25 @@ export async function loadVariantComponent(
                         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;
@@ -338,6 +517,14 @@ export async function loadVariantComponent(
                                 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: {} };
@@ -353,12 +540,12 @@ export async function loadVariantComponent(
             }
 
             if (!rawCodeFetched || code === "") {
-            const variantUrl = `${baseUrl.replace(/\/$/, "")}/variants/${filePath}`;
+                const variantUrl = `${baseUrl.replace(/\/$/, "")}/variants/${filePath}`;
                 const serverRes = await fetch(variantUrl, {
-                method: "GET",
-                headers: { Accept: "text/javascript" },
-                credentials: "include",
-            });
+                    method: "GET",
+                    headers: { Accept: "text/javascript" },
+                    credentials: "include",
+                });
                 if (!serverRes.ok) {
                     throw new Error(`HTTP ${serverRes.status}`);
                 }