juxscript 1.0.59 → 1.0.61

package/machinery/compiler.js

@@ -1,23 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import esbuild from 'esbuild';
-
-/**
- * Generate import map script tag
- */
-function generateImportMapScript() {
-  return `<script type="importmap">
-{
-  "imports": {
-    "juxscript": "./lib/jux.js",
-    "juxscript/": "./lib/",
-    "juxscript/reactivity": "./lib/reactivity/state.js",
-    "juxscript/presets/": "./presets/",
-    "juxscript/components/": "./lib/components/"
-  }
-}
-</script>`;
-}
+import * as acorn from 'acorn';
 
 /**
  * Copy and build the JUX library from TypeScript to JavaScript
@@ -224,7 +208,7 @@ function copyNonTsFiles(src, dest) {
       if (entry.name === 'layouts') {
         continue;
       }
-      
+
       if (!fs.existsSync(destPath)) {
         fs.mkdirSync(destPath, { recursive: true });
       }
@@ -276,12 +260,7 @@ function findProjectFiles(dir, extensions, fileList = [], rootDir = dir, exclude
 
 /**
  * Bundle all .jux files into a single router-based main.js
- * 
- * @param {string} projectRoot - Source directory (jux/)
- * @param {string} distDir - Destination directory (jux-dist/)
- * @param {Object} options - Bundle options
- * @param {string} options.routePrefix - Route prefix (e.g., '/experiments')
- * @returns {Promise<string>} - Returns the generated filename (e.g., 'main.1234567890.js')
+ * ✅ MODIFIED: Vendor dependencies locally
  */
 export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {}) {
   const startTime = performance.now();
@@ -293,7 +272,13 @@ export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {})
 
   if (juxFiles.length === 0) {
     console.log('   No .jux files found');
-    return;
+    // ✅ FIX: Return empty result instead of undefined
+    return {
+      mainJsFilename: 'main.js',
+      routes: [],
+      external: new Set(),
+      vendoredPaths: {}
+    };
   }
 
   console.log(`   Found ${juxFiles.length} .jux file(s)`);
@@ -301,7 +286,9 @@ export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {})
   const fileTimings = [];
   const views = [];
   const routes = [];
-  const sharedModules = new Map(); // Track shared .jux modules
+  const sharedModules = new Map(); // ✅ Map<filePath, exportCode>
+  const allImports = new Set();
+  const externalModules = new Set();  // ✅ NEW: Track external modules directly
 
   for (const juxFile of juxFiles) {
     const fileStartTime = performance.now();
@@ -324,15 +311,52 @@ export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {})
 
     const juxContent = fs.readFileSync(juxFile, 'utf-8');
 
-    // Check if this file exports components (shared module)
-    const hasExports = /export\s+(const|let|function|class|{)/.test(juxContent);
+    // ✅ FIX: Extract imports AND detect external modules in one pass
+    try {
+      const ast = acorn.parse(juxContent, {
+        ecmaVersion: 'latest',
+        sourceType: 'module'
+      });
+
+      ast.body.forEach(node => {
+        if (node.type === 'ImportDeclaration') {
+          const importStatement = juxContent.slice(node.start, node.end);
+          allImports.add(importStatement);
+
+          const moduleName = node.source.value;
+          if (!moduleName.startsWith('.') &&
+            !moduleName.startsWith('/') &&
+            !moduleName.startsWith('http') &&
+            !moduleName.startsWith('juxscript')) {
+            externalModules.add(moduleName);
+          }
+        }
+      });
+    } catch (parseErr) {
+      console.warn(`   ⚠️  Failed to parse imports in ${relativePath}, skipping`);
+    }
+
+    // Check if file has exports
+    const hasExports = /^\s*export\s+(const|let|function|class|{)/m.test(juxContent);
 
     if (hasExports) {
-      // Extract exports to shared modules section
-      sharedModules.set(relativePath, extractSharedModule(juxContent, rawFunctionName));
+      // ✅ Store exports with UNIQUE KEY (file path)
+      const exportKey = relativePath;
+      const exportCode = extractSharedModule(juxContent, rawFunctionName, relativePath);
+
+      if (exportCode.trim()) {
+        sharedModules.set(exportKey, exportCode);
+      }
     }
 
-    const viewFunction = transformJuxToViewFunction(juxContent, rawFunctionName, parsedPath.name, relativePath, sharedModules);
+    // Transform to view function (exports removed entirely)
+    const viewFunction = transformJuxToViewFunction(
+      juxContent,
+      rawFunctionName,
+      parsedPath.name,
+      relativePath,
+      sharedModules
+    );
 
     views.push(viewFunction);
     routes.push({ path: cleanRoutePath, functionName: cleanFunctionName });
@@ -354,14 +378,20 @@ export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {})
   }
 
   const bundleStartTime = performance.now();
-  const routerCode = generateRouterBundle(views, routes, sharedModules);
+
+  // ✅ CHANGE: Single summary instead of verbose list
+  if (externalModules.size > 0) {
+    console.log(`\n   📦 External dependencies: ${Array.from(externalModules).join(', ')}`);
+  }
+
+  const vendoredPaths = await vendorExternalDependencies(externalModules, distDir);
+
+  const routerCode = generateRouterBundle(views, routes, sharedModules, allImports);
   const bundleGenTime = performance.now() - bundleStartTime;
 
-  // ✅ Use fixed filename (no timestamp)
   const mainJsFilename = 'main.js';
   const mainJsPath = path.join(distDir, mainJsFilename);
 
-  // Write to dist/main.js
   const writeStartTime = performance.now();
   fs.writeFileSync(mainJsPath, routerCode);
   const writeTime = performance.now() - writeStartTime;
@@ -371,124 +401,228 @@ export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {})
   console.log(`   ✓ Generated: ${path.relative(projectRoot, mainJsPath)}`);
   console.log(`\n   📊 Bundle Statistics:`);
   console.log(`      Files processed:    ${juxFiles.length}`);
+  console.log(`      External deps:      ${externalModules.size}`);
+  console.log(`      Vendored locally:   ${Object.keys(vendoredPaths).length}`);
   console.log(`      Bundle size:        ${(routerCode.length / 1024).toFixed(1)} KB`);
-  console.log(`      Code generation:    ${bundleGenTime.toFixed(0)}ms`);
-  console.log(`      File write:         ${writeTime.toFixed(0)}ms`);
   console.log(`      Total bundle time:  ${totalTime.toFixed(0)}ms`);
   console.log('✅ Router bundle complete\n');
 
-  // ✅ Return the filename so index.html can reference it
-  return mainJsFilename;
+  // ✅ Return bundleResult with vendor info
+  return {
+    mainJsFilename,
+    routes: routes.map(r => ({ path: r.path, functionName: r.functionName })),
+    external: externalModules,  // ✅ FIX: Use externalModules instead of external
+    vendoredPaths
+  };
 }
 
 /**
- * Extract and replace all string literals with placeholders
- * Handles: template literals WITHOUT interpolations, single quotes, double quotes
- * SKIPS: Template literals WITH ${} interpolations (those are dynamic code)
+ * Extract shared module exports from a .jux file using AST parsing
+ * ✅ Namespaces exported identifiers to prevent collisions
  */
-function extractStrings(code) {
-  const strings = [];
-  let result = code;
-
-  // 1. Template literals WITHOUT interpolations (static strings only)
-  //    Match backticks that DON'T contain ${ 
-  result = result.replace(/`([^`$\\]|\\[^$])*`/g, (match) => {
-    // Double-check it doesn't contain ${ 
-    if (!match.includes('${')) {
-      strings.push(match);
-      return `__STRING_${strings.length - 1}__`;
-    }
-    return match; // Leave dynamic templates alone
-  });
+function extractSharedModule(juxContent, moduleName, sourceFilePath) {
+  const exportLines = [];
 
-  // 2. Double-quoted strings (with escaped quotes)
-  result = result.replace(/"(?:[^"\\]|\\.)*"/g, (match) => {
-    strings.push(match);
-    return `__STRING_${strings.length - 1}__`;
-  });
+  try {
+    const ast = acorn.parse(juxContent, {
+      ecmaVersion: 'latest',
+      sourceType: 'module'
+    });
 
-  // 3. Single-quoted strings (with escaped quotes)
-  result = result.replace(/'(?:[^'\\]|\\.)*'/g, (match) => {
-    strings.push(match);
-    return `__STRING_${strings.length - 1}__`;
-  });
+    ast.body.forEach(node => {
+      if (node.type === 'ExportNamedDeclaration') {
+        // Case 1: Inline export (export const foo = ...)
+        if (node.declaration) {
+          const exportCode = juxContent.slice(node.start, node.end);
+          const cleaned = exportCode.replace(/^export\s+/, '');
+
+          // ✅ Namespace the identifier
+          const namespacedCode = namespaceExportedIdentifiers(cleaned, sourceFilePath);
+
+          exportLines.push(`// From: ${sourceFilePath}\n${namespacedCode}`);
+        }
+        // Case 2: Named export block (export { foo, bar })
+        else if (node.specifiers && node.specifiers.length > 0) {
+          console.log(`   ℹ️  Skipping named export block in ${sourceFilePath} (declarations already present)`);
+        }
+      }
+      else if (node.type === 'ExportDefaultDeclaration') {
+        const exportCode = juxContent.slice(node.start, node.end);
+        const cleaned = exportCode.replace(/^export\s+default\s+/, '');
 
-  return { code: result, strings };
-}
+        // ✅ Namespace default export
+        const namespacedCode = namespaceExportedIdentifiers(cleaned, sourceFilePath);
 
-/**
- * Restore string placeholders back to original strings
- */
-function restoreStrings(code, strings) {
-  return code.replace(/__STRING_(\d+)__/g, (match, index) => {
-    const idx = parseInt(index, 10);
-    if (idx >= 0 && idx < strings.length) {
-      return strings[idx];
-    }
-    console.warn(`[Compiler] String placeholder ${match} not found (idx: ${idx}, available: ${strings.length})`);
-    return match; // Leave as-is for debugging
-  });
+        exportLines.push(`// From: ${sourceFilePath}\n${namespacedCode}`);
+      }
+    });
+
+  } catch (err) {
+    console.error(`\n❌ Failed to parse ${sourceFilePath}`);
+    console.error(`   Syntax Error: ${err.message}`);
+    console.error(`   Line: ${err.loc?.line}, Column: ${err.loc?.column}\n`);
+    throw new Error(`Invalid JavaScript syntax in ${sourceFilePath}. Please fix and retry.`);
+  }
+
+  return exportLines.join('\n\n');
 }
 
 /**
- * Extract shared module exports from a .jux file
- * 
- * @param {string} juxContent - Original .jux file content
- * @param {string} moduleName - Module identifier
- * @returns {string} Shared module code
+ * Namespace exported identifiers by appending source file path
+ * @param {string} code - The export code (e.g., "function myFunction() { ... }")
+ * @param {string} sourceFilePath - Source file path (e.g., "experiments/test1.jux")
+ * @returns {string} - Namespaced code (e.g., "function myFunction$experiments$test1() { ... }")
  */
-function extractSharedModule(juxContent, moduleName) {
-  const { code, strings } = extractStrings(juxContent);
-
-  // Remove ALL imports
-  let result = code.replace(/import\s+\{[^}]+\}\s+from\s+__STRING_\d+__;?\s*/g, '');
-  result = result.replace(/import\s+\*\s+as\s+\w+\s+from\s+__STRING_\d+__;?\s*/g, '');
-  result = result.replace(/import\s+__STRING_\d+__;?\s*/g, '');
-
-  // Convert exports to declarations
-  result = result.replace(/export\s+const\s+/g, 'const ');
-  result = result.replace(/export\s+let\s+/g, 'let ');
-  result = result.replace(/export\s+function\s+/g, 'function ');
-  result = result.replace(/export\s+class\s+/g, 'class ');
-  result = result.replace(/export\s+\{([^}]+)\}\s*;?\s*/g, '');
-
-  // Restore strings
-  return restoreStrings(result, strings);
+function namespaceExportedIdentifiers(code, sourceFilePath) {
+  // Create namespace suffix from file path
+  const namespace = sourceFilePath
+    .replace(/\.jux$/, '')
+    .replace(/[\/\\]/g, '$')
+    .replace(/[^a-zA-Z0-9$]/g, '_');
+
+  try {
+    const ast = acorn.parse(code, {
+      ecmaVersion: 'latest',
+      sourceType: 'module'
+    });
+
+    // Find all exported identifiers
+    const identifiers = [];
+
+    ast.body.forEach(node => {
+      if (node.type === 'FunctionDeclaration' && node.id) {
+        identifiers.push({
+          name: node.id.name,
+          start: node.id.start,
+          end: node.id.end
+        });
+      }
+      else if (node.type === 'VariableDeclaration') {
+        node.declarations.forEach(decl => {
+          if (decl.id.type === 'Identifier') {
+            identifiers.push({
+              name: decl.id.name,
+              start: decl.id.start,
+              end: decl.id.end
+            });
+          }
+        });
+      }
+      else if (node.type === 'ClassDeclaration' && node.id) {
+        identifiers.push({
+          name: node.id.name,
+          start: node.id.start,
+          end: node.id.end
+        });
+      }
+    });
+
+    // Replace identifiers in reverse order (to preserve offsets)
+    identifiers.sort((a, b) => b.start - a.start);
+
+    let result = code;
+    identifiers.forEach(id => {
+      const namespacedName = `${id.name}$${namespace}`;
+      result = result.slice(0, id.start) + namespacedName + result.slice(id.end);
+    });
+
+    return result;
+
+  } catch (err) {
+    console.warn(`⚠️  Failed to namespace exports in ${sourceFilePath}, returning as-is`);
+    return code;
+  }
 }
 
 /**
- * Transform .jux file content into a view function
- * 
- * @param {string} juxContent - Original .jux file content
- * @param {string} functionName - Function name for the view
- * @param {string} pageName - Page name for data attribute
- * @param {string} relativePath - Relative path of the .jux file
- * @param {Map} sharedModules - Map of shared module paths to their code
- * @returns {string} View function code
+ * Transform .jux file content into a view function using AST
+ * ✅ Rewrites imports to use namespaced identifiers
  */
 function transformJuxToViewFunction(juxContent, functionName, pageName, relativePath, sharedModules) {
-  const { code, strings } = extractStrings(juxContent);
-
-  // Remove ALL imports
-  let result = code.replace(/import\s+\{[^}]+\}\s+from\s+__STRING_\d+__;?\s*/g, '');
-  result = result.replace(/import\s+\*\s+as\s+\w+\s+from\s+__STRING_\d+__;?\s*/g, '');
-  result = result.replace(/import\s+__STRING_\d+__;?\s*/g, '');
-
-  // Handle exports
-  result = result.replace(/export\s+const\s+(\w+)\s*=/g, 'const $1 =');
-  result = result.replace(/export\s+let\s+(\w+)\s*=/g, 'let $1 =');
-  result = result.replace(/export\s+function\s+(\w+)/g, 'const $1 = function');
-  result = result.replace(/export\s+class\s+/g, 'class ');
-  result = result.replace(/export\s+default\s+/g, '');
-  result = result.replace(/export\s+\{([^}]+)\}\s*;?\s*/g, '');
-
-  // Replace render patterns
+  let result;
+
+  try {
+    const ast = acorn.parse(juxContent, {
+      ecmaVersion: 'latest',
+      sourceType: 'module'
+    });
+
+    const nodesToRemove = [];
+    const importReplacements = new Map();  // ✅ Track import → namespace mappings
+
+    ast.body.forEach(node => {
+      // Process import declarations
+      if (node.type === 'ImportDeclaration') {
+        const importPath = node.source.value;
+
+        // Only process .jux imports
+        if (importPath.endsWith('.jux')) {
+          // Extract imported identifiers
+          node.specifiers.forEach(spec => {
+            if (spec.type === 'ImportSpecifier') {
+              const localName = spec.local.name;
+              const importedName = spec.imported.name;
+
+              // Resolve import path to namespace
+              const resolvedPath = resolveImportPath(importPath, relativePath);
+              const namespace = resolvedPath
+                .replace(/\.jux$/, '')
+                .replace(/[\/\\]/g, '$')
+                .replace(/[^a-zA-Z0-9$]/g, '_');
+
+              const namespacedName = `${importedName}$${namespace}`;
+
+              // Map local name to namespaced name
+              importReplacements.set(localName, namespacedName);
+            }
+          });
+        }
+
+        nodesToRemove.push({ start: node.start, end: node.end });
+      }
+
+      // Remove export declarations
+      if (node.type === 'ExportNamedDeclaration') {
+        if (node.declaration) {
+          nodesToRemove.push({ start: node.start, end: node.end });
+        }
+        else if (node.specifiers && node.specifiers.length > 0) {
+          nodesToRemove.push({ start: node.start, end: node.end });
+        }
+      }
+
+      if (node.type === 'ExportDefaultDeclaration') {
+        nodesToRemove.push({ start: node.start, end: node.end });
+      }
+    });
+
+    nodesToRemove.sort((a, b) => b.start - a.start);
+
+    result = juxContent;
+    nodesToRemove.forEach(({ start, end }) => {
+      result = result.slice(0, start) + result.slice(end);
+    });
+
+    result = result.trim();
+
+    // ✅ Replace imported identifiers with namespaced versions
+    importReplacements.forEach((namespacedName, localName) => {
+      // Use regex to replace all occurrences of the identifier
+      // Must use word boundaries to avoid partial matches
+      const regex = new RegExp(`\\b${localName}\\b`, 'g');
+      result = result.replace(regex, namespacedName);
+    });
+
+  } catch (err) {
+    console.error(`\n❌ Failed to parse ${relativePath}`);
+    console.error(`   Syntax Error: ${err.message}`);
+    console.error(`   Line: ${err.loc?.line}, Column: ${err.loc?.column}\n`);
+    throw new Error(`Invalid JavaScript syntax in ${relativePath}. Please fix and retry.`);
+  }
+
   result = result.replace(/\.renderTo\(container\)/g, '.render("#app")');
   result = result.replace(/\.render\(\s*\)/g, '.render("#app")');
 
-  // Restore strings
-  result = restoreStrings(result, strings);
-
   const cleanName = functionName
     .replace(/[-_]/g, ' ')
     .split(' ')
@@ -498,40 +632,80 @@ function transformJuxToViewFunction(juxContent, functionName, pageName, relative
   return `
 // View: ${cleanName}
 function ${cleanName}() {
-  ${result}
+${result}
   
   return document.getElementById('app');
 }`;
 }
 
 /**
- * Generate complete router bundle with all views and routing logic
- * 
- * @param {string[]} views - Array of view function code
- * @param {Array<{path: string, functionName: string}>} routes - Route definitions
- * @param {Map} sharedModules - Map of shared module code
- * @returns {string} Complete bundle code
+ * Resolve relative import path to absolute path
+ * @param {string} importPath - Import path from import statement (e.g., './test1.jux')
+ * @param {string} currentFilePath - Current file path (e.g., 'experiments/test3.jux')
+ * @returns {string} - Resolved path (e.g., 'experiments/test1.jux')
+ */
+function resolveImportPath(importPath, currentFilePath) {
+  const currentDir = path.dirname(currentFilePath);
+  const resolved = path.join(currentDir, importPath);
+  return resolved.replace(/\\/g, '/');  // Normalize to forward slashes
+}
+
+/**
+ * Generate complete router bundle
  */
-function generateRouterBundle(views, routes, sharedModules = new Map()) {
+function generateRouterBundle(views, routes, sharedModules = new Map(), allImports = new Set()) {
   const libImport = './lib/jux.js';
 
-  // Generate shared modules section
+  // ✅ Filter out redundant imports
+  const filteredImports = Array.from(allImports)
+    .filter(imp => {
+      const impStr = imp.trim();
+
+      // Remove imports from 'juxscript' (already imported)
+      if (impStr.includes("from 'juxscript'") || impStr.includes('from "juxscript"')) {
+        return false;
+      }
+
+      // Remove imports from 'juxscript/reactivity' (already available)
+      if (impStr.includes("from 'juxscript/reactivity'") || impStr.includes('from "juxscript/reactivity"')) {
+        return false;
+      }
+
+      // ✅ CRITICAL: Remove ANY import that references a .jux file
+      if (impStr.includes('.jux')) {
+        return false;
+      }
+
+      // Keep everything else (external libraries like axios, etc.)
+      return impStr.length > 0;
+    });
+
+  // ✅ Generate shared modules section (deduplicated by file)
   const sharedModulesCode = Array.from(sharedModules.values())
     .filter(code => code.trim())
     .join('\n\n');
 
-  // Filter out empty views (shared modules)
+  // Filter out empty views
   const viewsCode = views.filter(v => v.trim()).join('\n\n');
 
   const routeTable = routes
     .map(r => `  '${r.path}': ${r.functionName}`)
     .join(',\n');
 
+  // Build imports section (now filtered)
+  const importsSection = filteredImports.join('\n');
+
   return `// Generated Jux Router Bundle
 import { jux, state } from '${libImport}';
 
 // ═══════════════════════════════════════════════════════════════════
-// SHARED MODULES
+// COLLECTED IMPORTS FROM SOURCE FILES
+// ═══════════════════════════════════════════════════════════════════
+
+${importsSection}
+
+// ═══════════════════════════════════════════════════════════════════
+// SHARED MODULES (Exported Components)
 // ═══════════════════════════════════════════════════════════════════
 
 ${sharedModulesCode}
@@ -633,20 +807,25 @@ render();
 
 /**
  * Generate a unified index.html for router bundle
- * 
- * @param {string} distDir - Destination directory
- * @param {Array<{path: string, functionName: string}>} routes - Route definitions
- * @param {string} mainJsFilename - The generated main.js filename (e.g., 'main.1234567890.js')
+ * ✅ MODIFIED: Use vendored paths instead of CDN
  */
-export function generateIndexHtml(distDir, routes, mainJsFilename = 'main.js') {
-  console.log('📄 Generating index.html...');
+export function generateIndexHtml(distDir, bundleResult) {
+  // ✅ ADD: Defensive check and fallback
+  if (!bundleResult) {
+    console.warn('⚠️  generateIndexHtml called without bundleResult, using defaults');
+    bundleResult = {
+      mainJsFilename: 'main.js',
+      routes: [],
+      vendoredPaths: {}
+    };
+  }
 
-  // Generate navigation links
-  const navLinks = routes
-    .map(r => `    <a href="${r.path}">${r.functionName.replace(/_/g, ' ')}</a>`)
-    .join(' |\n');
+  const { mainJsFilename = 'main.js', routes = [], vendoredPaths = {} } = bundleResult;
 
-  const importMapScript = generateImportMapScript();
+  console.log('📄 Generating index.html...');
+
+  // ✅ Use vendor import map
+  const importMapScript = generateVendorImportMap(vendoredPaths);
 
   const html = `<!DOCTYPE html>
 <html lang="en">
@@ -656,7 +835,6 @@ export function generateIndexHtml(distDir, routes, mainJsFilename = 'main.js') {
   <title>Jux Application</title>
 </head>
 <body data-theme="">
-  <!-- App container - router renders here -->
   <div id="app"></div>
   ${importMapScript}
   <script type="module" src="/${mainJsFilename}"></script>
@@ -669,3 +847,101 @@ export function generateIndexHtml(distDir, routes, mainJsFilename = 'main.js') {
   console.log(`   ✓ Generated: index.html (references ${mainJsFilename})`);
   console.log('✅ Index HTML complete\n');
 }
+
+/**
+ * ✅ NEW: Download and vendor external dependencies locally
+ * Copies dependencies from node_modules to .jux-dist/vendor/
+ * NO CDN - everything is local, zero hardcoded mappings
+ * BUNDLES dependencies to resolve internal imports
+ */
+async function vendorExternalDependencies(externalDeps, distDir) {
+  const vendorDir = path.join(distDir, 'vendor');
+
+  if (!fs.existsSync(vendorDir)) {
+    fs.mkdirSync(vendorDir, { recursive: true });
+  }
+
+  const vendoredPaths = {};
+
+  for (const dep of externalDeps) {
+    try {
+      const nodeModulePath = path.join(process.cwd(), 'node_modules', dep);
+
+      if (!fs.existsSync(nodeModulePath)) {
+        console.warn(`   ⚠️  ${dep} not found in node_modules`);
+        continue;
+      }
+
+      const packageJsonPath = path.join(nodeModulePath, 'package.json');
+
+      if (!fs.existsSync(packageJsonPath)) {
+        console.warn(`   ⚠️  ${dep}: package.json not found`);
+        continue;
+      }
+
+      const packageJson = JSON.parse(
+        fs.readFileSync(packageJsonPath, 'utf-8')
+      );
+
+      const entryPoints = [
+        packageJson.module,
+        packageJson.browser,
+        packageJson.main,
+        'index.js'
+      ].filter(Boolean);
+
+      let entryFile = null;
+      for (const entry of entryPoints) {
+        const candidatePath = path.join(nodeModulePath, entry);
+        if (fs.existsSync(candidatePath)) {
+          entryFile = candidatePath;
+          break;
+        }
+      }
+
+      if (!entryFile) {
+        console.warn(`   ⚠️  ${dep}: no valid entry point`);
+        continue;
+      }
+
+      const vendorFile = path.join(vendorDir, `${dep}.js`);
+
+      await esbuild.build({
+        entryPoints: [entryFile],
+        bundle: true,
+        format: 'esm',
+        outfile: vendorFile,
+        platform: 'browser',
+        target: 'es2020',
+        minify: false,
+        logLevel: 'warning'
+      });
+
+      vendoredPaths[dep] = `/vendor/${dep}.js`;
+      console.log(`   ✓ ${dep} → vendor/${dep}.js`);
+
+    } catch (err) {
+      console.error(`   ❌ ${dep}: ${err.message}`);
+    }
+  }
+
+  return vendoredPaths;
+}
+
+/**
+ * ✅ NEW: Generate import map with local vendor paths
+ */
+function generateVendorImportMap(vendoredPaths) {
+  const imports = {
+    "juxscript": "./lib/jux.js",
+    "juxscript/": "./lib/",
+    "juxscript/reactivity": "./lib/reactivity/state.js",
+    "juxscript/presets/": "./presets/",
+    "juxscript/components/": "./lib/components/",
+    ...vendoredPaths  // ✅ These are LOCAL paths: "./vendor/axios.js"
+  };
+
+  return `<script type="importmap">
+${JSON.stringify({ imports }, null, 2)}
+</script>`;
+}