juxscript 1.0.71 → 1.0.73

package/machinery/compiler.js

@@ -89,12 +89,15 @@ export async function copyPresetsToOutput(packageRoot, distDir) {
 }
 
 function findFiles(dir, extension, fileList = []) {
+  if (!fs.existsSync(dir)) return fileList;
   const files = fs.readdirSync(dir);
   files.forEach(file => {
     const filePath = path.join(dir, file);
     const stat = fs.statSync(filePath);
     if (stat.isDirectory()) {
-      findFiles(filePath, extension, fileList);
+      if (file !== 'node_modules' && file !== '.git' && file !== 'jux-dist') {
+        findFiles(filePath, extension, fileList);
+      }
     } else if (file.endsWith(extension)) {
       fileList.push(filePath);
     }
@@ -149,12 +152,22 @@ function findProjectFiles(dir, extensions, fileList = [], rootDir = dir, exclude
  */
 export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {}) {
   const { routePrefix = '', config } = options;
+
+  // ✅ 1. Find all processable source files (.jux AND .js)
+  // This ensures locally imported helper JS files are bundled and namespaced correctly.
   const juxFiles = findFiles(projectRoot, '.jux');
+  const jsFiles = findFiles(projectRoot, '.js');
+
+  // Combine, filtering duplicates if any
+  const allSourceFiles = Array.from(new Set([...juxFiles, ...jsFiles]));
 
-  if (juxFiles.length === 0) {
+  if (allSourceFiles.length === 0) {
     return { mainJsFilename: 'main.js', routes: [], external: new Set(), vendoredPaths: {} };
   }
 
+  // Set of relative paths being bundled (used to decide if an import should be skipped)
+  const bundledPaths = new Set(allSourceFiles.map(f => path.relative(projectRoot, f).replace(/\\/g, '/')));
+
   const pages = config?.pages || {};
   const views = [];
   const routes = [];
@@ -163,28 +176,50 @@ export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {})
   const externalModules = new Set();
   const fileToFunction = new Map();
 
-  for (const juxFile of juxFiles) {
-    const relativePath = path.relative(projectRoot, juxFile);
+  for (const sourceFile of allSourceFiles) {
+    const isJux = sourceFile.endsWith('.jux');
+    const relativePath = path.relative(projectRoot, sourceFile);
     const parsedPath = path.parse(relativePath);
+
+    // Normalize function name: experiments/my-data -> ExperimentsMyData
     const rawFunctionName = parsedPath.dir ? `${parsedPath.dir.replace(/\//g, '_')}_${parsedPath.name}` : parsedPath.name;
     const cleanFunctionName = rawFunctionName.replace(/[-_]/g, ' ').split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join('');
 
-    fileToFunction.set(relativePath, cleanFunctionName);
-    fileToFunction.set(relativePath.split(path.sep).join('/'), cleanFunctionName);
+    // Only .jux files generate Routes/Views
+    if (isJux) {
+      fileToFunction.set(relativePath, cleanFunctionName);
+      fileToFunction.set(relativePath.split(path.sep).join('/'), cleanFunctionName);
+    }
 
     const routePath = routePrefix + '/' + (parsedPath.dir ? `${parsedPath.dir}/` : '') + parsedPath.name;
     const cleanRoutePath = routePath.replace(/\/+/g, '/');
-    const juxContent = fs.readFileSync(juxFile, 'utf-8');
 
+    const fileContent = fs.readFileSync(sourceFile, 'utf-8');
+
+    // Parse Imports
     try {
-      const ast = acorn.parse(juxContent, { ecmaVersion: 'latest', sourceType: 'module' });
+      const ast = acorn.parse(fileContent, { ecmaVersion: 'latest', sourceType: 'module' });
       ast.body.forEach(node => {
         if (node.type === 'ImportDeclaration') {
-          const importStatement = juxContent.slice(node.start, node.end);
-          allImports.push({ code: importStatement, filePath: relativePath });
+          const importStatement = fileContent.slice(node.start, node.end);
           const moduleName = node.source.value;
-          if (!moduleName.startsWith('.') && !moduleName.startsWith('/') && !moduleName.startsWith('http') && !moduleName.startsWith('juxscript')) {
-            externalModules.add(moduleName);
+
+          // ✅ CHECK: Is this import pointing to a file we are bundling?
+          let isBundledLocal = false;
+          if (moduleName.startsWith('.')) {
+            const resolved = resolveImportPath(moduleName, relativePath);
+            if (bundledPaths.has(resolved)) {
+              isBundledLocal = true;
+            }
+          }
+
+          // ONLY add to global imports if it is NOT a local bundled file
+          if (!isBundledLocal) {
+            allImports.push({ code: importStatement, filePath: relativePath });
+
+            if (!moduleName.startsWith('.') && !moduleName.startsWith('/') && !moduleName.startsWith('http') && !moduleName.startsWith('juxscript')) {
+              externalModules.add(moduleName);
+            }
           }
         }
       });
@@ -192,18 +227,23 @@ export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {})
       console.warn(`   ⚠️  Failed to parse imports in ${relativePath}, skipping`);
     }
 
-    const hasExports = /^\s*export\s+(const|let|function|class|{)/m.test(juxContent);
+    // Process Exports -> Shared Modules (Code Hoisting)
+    const hasExports = /^\s*export\s+(const|let|function|class|{)/m.test(fileContent);
     if (hasExports) {
       const exportKey = relativePath;
-      const exportCode = extractSharedModule(juxContent, rawFunctionName, relativePath);
+      const exportCode = extractSharedModule(fileContent, rawFunctionName, relativePath);
       if (exportCode.trim()) sharedModules.set(exportKey, exportCode);
     }
 
-    const viewFunction = transformJuxToViewFunction(juxContent, rawFunctionName, parsedPath.name, relativePath, sharedModules);
-    views.push(viewFunction);
+    // Process .jux -> View Functions
+    if (isJux) {
+      // Pass bundledPaths so we know which imports to rewrite
+      const viewFunction = transformJuxToViewFunction(fileContent, rawFunctionName, parsedPath.name, relativePath, sharedModules, bundledPaths);
+      views.push(viewFunction);
 
-    if (config?.defaults?.autoRoute !== false) {
-      routes.push({ path: cleanRoutePath, functionName: cleanFunctionName });
+      if (config?.defaults?.autoRoute !== false) {
+        routes.push({ path: cleanRoutePath, functionName: cleanFunctionName });
+      }
     }
   }
 
@@ -265,7 +305,8 @@ function extractSharedModule(juxContent, moduleName, sourceFilePath) {
 }
 
 function namespaceExportedIdentifiers(code, sourceFilePath) {
-  const namespace = sourceFilePath.replace(/\.jux$/, '').replace(/[\/\\]/g, '$').replace(/[^a-zA-Z0-9$]/g, '_');
+  // ✅ FIX: Strip .jux AND .js extensions for stable namespacing
+  const namespace = sourceFilePath.replace(/\.(jux|js)$/, '').replace(/[\/\\]/g, '$').replace(/[^a-zA-Z0-9$]/g, '_');
   try {
     const ast = acorn.parse(code, { ecmaVersion: 'latest', sourceType: 'module' });
     const identifiers = [];
@@ -285,7 +326,7 @@ function namespaceExportedIdentifiers(code, sourceFilePath) {
   }
 }
 
-function transformJuxToViewFunction(juxContent, functionName, pageName, relativePath, sharedModules) {
+function transformJuxToViewFunction(juxContent, functionName, pageName, relativePath, sharedModules, bundledPaths) {
   let result;
   try {
     const ast = acorn.parse(juxContent, { ecmaVersion: 'latest', sourceType: 'module' });
@@ -294,16 +335,22 @@ function transformJuxToViewFunction(juxContent, functionName, pageName, relative
     ast.body.forEach(node => {
       if (node.type === 'ImportDeclaration') {
         const importPath = node.source.value;
-        if (importPath.endsWith('.jux')) {
+        const resolvedPath = resolveImportPath(importPath, relativePath);
+
+        // ✅ Check if this import is pointing to a bundled file
+        const isBundled = (bundledPaths && bundledPaths.has(resolvedPath)) || importPath.endsWith('.jux');
+
+        if (isBundled) {
           node.specifiers.forEach(spec => {
             if (spec.type === 'ImportSpecifier') {
-              const resolvedPath = resolveImportPath(importPath, relativePath);
-              const namespace = resolvedPath.replace(/\.jux$/, '').replace(/[\/\\]/g, '$').replace(/[^a-zA-Z0-9$]/g, '_');
+              // ✅ Apply namespace convention to .js imports too
+              const namespace = resolvedPath.replace(/\.(jux|js)$/, '').replace(/[\/\\]/g, '$').replace(/[^a-zA-Z0-9$]/g, '_');
               importReplacements.set(spec.local.name, `${spec.imported.name}$${namespace}`);
             }
           });
+          // Remove local imports as they will be inlined in main.js
+          nodesToRemove.push({ start: node.start, end: node.end });
         }
-        nodesToRemove.push({ start: node.start, end: node.end });
       }
       if (node.type === 'ExportNamedDeclaration' || node.type === 'ExportDefaultDeclaration') {
         nodesToRemove.push({ start: node.start, end: node.end });
@@ -320,7 +367,19 @@ function transformJuxToViewFunction(juxContent, functionName, pageName, relative
   }
   result = result.replace(/\.renderTo\(container\)/g, '.render("#app")').replace(/\.render\(\s*\)/g, '.render("#app")');
   const cleanName = functionName.replace(/[-_]/g, ' ').split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join('');
-  return `\n// View: ${cleanName}\nfunction ${cleanName}() {\n${result}\n  \n  return document.getElementById('app');\n}`;
+
+  // ✅ Wrap View implementation in underscore function, then export Wrapped version
+  return `
+// View: ${cleanName}
+function _${cleanName}() {
+${result}
+  
+  return document.getElementById('app');
+}
+const ${cleanName} = JuxError.wrap('${cleanName}', _${cleanName});
+// Register Source
+JuxError.register('${cleanName}', '${relativePath}');
+`;
 }
 
 function resolveImportPath(importPath, currentFilePath) {
@@ -342,7 +401,7 @@ function generateRouterBundle(views, routes, sharedModules = new Map(), allImpor
     }
     if (joinedPath.includes('lib/components')) return 'juxscript/components';
 
-    // ✅ FIX: Ensure local paths start with ./ or / to avoid Ghost Dependency errors in Verifier
+    // ✅ Fix: Ensure local relative paths start with ./ or /
     let normalized = joinedPath.replace(/\\/g, '/');
     if (!normalized.startsWith('.') && !normalized.startsWith('/')) {
       normalized = './' + normalized;
@@ -359,7 +418,6 @@ function generateRouterBundle(views, routes, sharedModules = new Map(), allImpor
       const node = ast.body[0];
       if (node && node.type === 'ImportDeclaration') {
         const rawSource = node.source.value;
-        if (rawSource.endsWith('.jux')) continue;
         const source = getCanonicalSource(rawSource, filePath);
         if (!mergedImports.has(source)) mergedImports.set(source, { defaults: new Set(), named: new Set(), namespace: null });
         const storage = mergedImports.get(source);
@@ -382,13 +440,71 @@ function generateRouterBundle(views, routes, sharedModules = new Map(), allImpor
     else if (parts.length > 0) filteredImports.push(`import ${parts.join(', ')} from '${source}';`);
   });
 
+  const juxDebugUtils = `
+// ============================================
+// JUX DEBUG UTILITIES
+// ============================================
+const JUX_DEBUG = true; 
+
+const JuxError = {
+    sourceMap: {},
+    
+    register(viewName, sourceFile) {
+        this.sourceMap[viewName] = sourceFile;
+    },
+    
+    wrap(viewName, viewFn) {
+        return function() {
+            const sourceFile = JuxError.sourceMap[viewName] || 'unknown';
+            if (JUX_DEBUG) console.log(\`🚀 [JUX] Rendering: \${viewName} (\${sourceFile})\`);
+            
+            try {
+                return viewFn.apply(this, arguments);
+            } catch (error) {
+                console.error(\`🚨 JUX RUNTIME ERROR\\nView:   \${viewName}\\nSource: \${sourceFile}\`);
+                console.error(error);
+                
+                const app = document.getElementById('app');
+                if (app) {
+                    app.innerHTML = \`
+                        <div style="font-family: monospace; background: #1e1e1e; color: #ff6b6b; min-height: 100vh; padding: 2rem;">
+                            <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;">
+                                <div style="font-size: 2rem;">🚨</div>
+                                <div>
+                                    <h1 style="margin:0; font-size: 1.5rem; color: #ff6b6b;">JUX Runtime Error</h1>
+                                </div>
+                            </div>
+                            
+                            <div style="margin-bottom: 1rem;">
+                                <div style="color: #888; margin-bottom: 4px;">View:</div> 
+                                <span style="color: #fff; font-weight: bold;">\${viewName}</span>
+                            </div>
+
+                            <div style="margin-bottom: 2rem;">
+                                <div style="color: #888; margin-bottom: 4px;">Source:</div> 
+                                <span style="color: #4caf50; font-family: monospace;">\${sourceFile}</span>
+                            </div>
+
+                            <pre style="background: #2d2d2d; padding: 20px; border-radius: 8px; overflow-x: auto; color: #e0e0e0; border-left: 4px solid #ff6b6b;">\${error.message}\\n\\n\${error.stack}</pre>
+                        </div>
+                    \`;
+                }
+                throw error;
+            }
+        };
+    }
+};
+`;
+
   return `// Generated Jux Router Bundle
 ${filteredImports.join('\n')}
 
+${juxDebugUtils}
+
 // SHARED MODULES
 ${Array.from(sharedModules.values()).filter(c => c.trim()).join('\n\n')}
 
-// VIEWS
+// VIEWS (Wrapped in JuxError)
 ${views.filter(v => v.trim()).join('\n\n')}
 
 function JuxNotFound() { jux.heading(1, { text: '404 - Page Not Found' }).render('#app'); return document.getElementById('app'); }
@@ -413,7 +529,7 @@ document.addEventListener('click', e => {
   const a = e.target.closest('a');
   if (!a || a.dataset.router === 'false' || new URL(a.href).origin !== location.origin) return;
   e.preventDefault();
-  history.pushState({}, '', url.pathname);
+  history.pushState({}, '', a.href);
   render();
 });
 window.addEventListener('popstate', render);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.71",
+  "version": "1.0.73",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",