juxscript 1.1.90 → 1.1.92

package/machinery/compiler3.js

@@ -13,7 +13,7 @@ export class JuxCompiler {
         this.config = config;
         this.srcDir = config.srcDir || './jux';
         this.distDir = config.distDir || './.jux-dist';
-        this.publicDir = config.publicDir || './public'; // ✅ Configurable public path
+        this.publicDir = config.publicDir || './public';
         this.defaults = config.defaults || {};
         this.paths = config.paths || {};
         this._juxscriptExports = null;
@@ -53,24 +53,56 @@ export class JuxCompiler {
         return null;
     }
 
-    scanFiles() {
-        const files = fs.readdirSync(this.srcDir)
-            .filter(f => (f.endsWith('.jux') || f.endsWith('.js')) && !this.isAssetFile(f));
+    /**
+     * ✅ Recursively scan for .jux and .js files
+     */
+    scanFiles(dir = this.srcDir, baseDir = this.srcDir) {
+        const views = [];
+        const dataModules = [];
+        const sharedModules = [];
 
-        const views = [], dataModules = [], sharedModules = [];
+        const entries = fs.readdirSync(dir, { withFileTypes: true });
 
-        files.forEach(file => {
-            const content = fs.readFileSync(path.join(this.srcDir, file), 'utf8');
-            const name = file.replace(/\.[^/.]+$/, '');
+        for (const entry of entries) {
+            // Skip hidden files/folders
+            if (entry.name.startsWith('.')) continue;
 
-            if (file.includes('data')) {
-                dataModules.push({ name, file, content });
-            } else if (/export\s+(function|const|let|var|class)\s+/.test(content)) {
-                sharedModules.push({ name, file, content });
-            } else {
-                views.push({ name, file, content });
+            const fullPath = path.join(dir, entry.name);
+            const relativePath = path.relative(baseDir, fullPath);
+
+            if (entry.isDirectory()) {
+                // ✅ Recurse into subdirectories
+                const nested = this.scanFiles(fullPath, baseDir);
+                views.push(...nested.views);
+                dataModules.push(...nested.dataModules);
+                sharedModules.push(...nested.sharedModules);
+            } else if ((entry.name.endsWith('.jux') || entry.name.endsWith('.js')) && !this.isAssetFile(entry.name)) {
+                const content = fs.readFileSync(fullPath, 'utf8');
+
+                // ✅ Generate name from folder structure
+                // Example: abc/juxabc.jux -> abc_juxabc
+                const nameFromPath = relativePath
+                    .replace(/\.[^/.]+$/, '') // Remove extension
+                    .replace(/\\/g, '/') // Normalize Windows paths
+                    .replace(/\//g, '_') // Folder separator -> underscore
+                    .replace(/[^a-zA-Z0-9_]/g, '_'); // Sanitize
+
+                const module = {
+                    name: nameFromPath,
+                    file: relativePath,
+                    fullPath: fullPath,
+                    content: content
+                };
+
+                if (entry.name.includes('data')) {
+                    dataModules.push(module);
+                } else if (/export\s+(function|const|let|var|class)\s+/.test(content)) {
+                    sharedModules.push(module);
+                } else {
+                    views.push(module);
+                }
             }
-        });
+        }
 
         return { views, dataModules, sharedModules };
     }
@@ -171,7 +203,220 @@ export class JuxCompiler {
     }
 
     /**
-     * Generate entry point without layout/theme logic
+     * ✅ Generate routes based on folder structure
+     */
+    _generateRouter(views) {
+        let routeMap = '';
+
+        views.forEach(v => {
+            // ✅ Generate route from folder structure
+            // abc/juxabc.jux -> /abc/juxabc
+            // index.jux -> /
+            // abc/index.jux -> /abc
+
+            const routePath = this._generateRoutePath(v.file);
+            const functionName = this._generateFunctionName(v.name);
+
+            routeMap += `  '${routePath}': render${functionName},\n`;
+        });
+
+        return `
+// --- JUX SOURCE LOADER ---
+var __juxSources = null;
+async function __juxLoadSources() {
+    if (__juxSources) return __juxSources;
+    try {
+        var res = await fetch('/__jux_sources.json');
+        __juxSources = await res.json();
+    } catch (e) {
+        __juxSources = {};
+    }
+    return __juxSources;
+}
+
+function __juxFindSource(stack) {
+    var match = stack.match(/render([A-Z][a-zA-Z0-9_]*)/);
+    if (match) {
+        var funcName = match[1];
+        for (var file in __juxSources || {}) {
+            var normalized = __juxSources[file].name
+                .split('_')
+                .map(s => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase())
+                .join('');
+            
+            if (normalized === funcName) {
+                return { file: file, source: __juxSources[file], viewName: funcName };
+            }
+        }
+    }
+    return null;
+}
+
+// --- JUX RUNTIME ERROR OVERLAY ---
+var __juxErrorOverlay = {
+    styles: \`
+        #__jux-error-overlay {
+            position: fixed; inset: 0; z-index: 99999;
+            background: rgba(0, 0, 0, 0.4);
+            display: flex; align-items: center; justify-content: center;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+            opacity: 0; transition: opacity 0.2s ease-out; backdrop-filter: blur(2px);
+        }
+        #__jux-error-overlay.visible { opacity: 1; }
+        #__jux-error-overlay * { box-sizing: border-box; }
+        .__jux-modal {
+            background: #f8f9fa; border-radius: 4px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+            max-width: 80vw; width: 90%; max-height: 90vh;
+            overflow: hidden; display: flex; flex-direction: column;
+            transform: translateY(10px); transition: transform 0.2s ease-out;
+        }
+        #__jux-error-overlay.visible .__jux-modal { transform: translateY(0); }
+        .__jux-header { background: #fff; padding: 20px 24px; border-bottom: 1px solid #e5e7eb; }
+        .__jux-header h3 { margin: 0 0 6px; font-weight: 600; font-size: 11px; color: #9ca3af; text-transform: uppercase; }
+        .__jux-header h1 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #dc2626; line-height: 1.3; }
+        .__jux-header .file-info { color: #6b7280; font-size: 13px; }
+        .__jux-header .file-info strong { color: #dc2626; font-weight: 600; }
+        .__jux-source { padding: 16px 24px; overflow: auto; flex: 1; background: #f8f9fa; }
+        .__jux-code { background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; }
+        .__jux-code-line { display: flex; font-size: 13px; line-height: 1.7; }
+        .__jux-code-line.error { background: #fef2f2; }
+        .__jux-code-line.error .__jux-line-code { color: #dc2626; font-weight: 500; }
+        .__jux-code-line.context { background: #fefce8; }
+        .__jux-line-num { min-width: 44px; padding: 4px 12px; text-align: right; color: #9ca3af; background: #f9fafb; border-right: 1px solid #e5e7eb; font-size: 12px; }
+        .__jux-code-line.error .__jux-line-num { background: #fef2f2; color: #dc2626; }
+        .__jux-line-code { flex: 1; padding: 4px 16px; color: #374151; white-space: pre; overflow-x: auto; }
+        .__jux-footer { padding: 16px 24px; background: #fff; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
+        .__jux-tip { color: #6b7280; font-size: 12px; }
+        .__jux-dismiss { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; }
+        .__jux-dismiss:hover { background: #e5e7eb; }
+        .__jux-no-source { color: #6b7280; padding: 24px; text-align: center; }
+        .__jux-no-source pre { background: #fff; padding: 16px; border-radius: 8px; margin-top: 16px; font-size: 11px; color: #6b7280; overflow-x: auto; text-align: left; border: 1px solid #e5e7eb; }
+    \`,
+
+    show: async function(error, title) {
+        title = title || 'Runtime Error';
+        var existing = document.getElementById('__jux-error-overlay');
+        if (existing) existing.remove();
+        await __juxLoadSources();
+        
+        var overlay = document.createElement('div');
+        overlay.id = '__jux-error-overlay';
+        var stack = error && error.stack ? error.stack : '';
+        var msg = error && error.message ? error.message : String(error);
+        var found = __juxFindSource(stack);
+        var sourceHtml = '', fileInfo = '';
+        
+        if (found && found.source && found.source.lines) {
+            var lines = found.source.lines;
+            fileInfo = '<span class="file-info">in <strong>' + found.file + '</strong></span>';
+            var errorLineIndex = -1;
+            var errorMethod = msg.match(/\\.([a-zA-Z]+)\\s*is not a function/);
+            if (errorMethod) {
+                for (var i = 0; i < lines.length; i++) {
+                    if (lines[i].indexOf('.' + errorMethod[1]) > -1) { errorLineIndex = i; break; }
+                }
+            }
+            if (errorLineIndex === -1) {
+                for (var i = 0; i < lines.length; i++) {
+                    if (lines[i].indexOf('throw ') > -1) { errorLineIndex = i; break; }
+                }
+            }
+            var contextStart = Math.max(0, errorLineIndex - 3);
+            var contextEnd = Math.min(lines.length - 1, errorLineIndex + 5);
+            if (errorLineIndex === -1) { contextStart = 0; contextEnd = Math.min(14, lines.length - 1); }
+            
+            for (var i = contextStart; i <= contextEnd; i++) {
+                var isError = (i === errorLineIndex);
+                var isContext = !isError && errorLineIndex > -1 && Math.abs(i - errorLineIndex) <= 2;
+                var lineClass = isError ? ' error' : (isContext ? ' context' : '');
+                var lineCode = lines[i].replace(/</g, '&lt;').replace(/>/g, '&gt;') || ' ';
+                sourceHtml += '<div class="__jux-code-line' + lineClass + '"><span class="__jux-line-num">' + (i + 1) + '</span><span class="__jux-line-code">' + lineCode + '</span></div>';
+            }
+        } else {
+            sourceHtml = '<div class="__jux-no-source"><p>Could not locate source file.</p><pre>' + stack + '</pre></div>';
+        }
+        
+        overlay.innerHTML = '<style>' + this.styles + '</style><div class="__jux-modal"><div class="__jux-header"><h3>' + title + '</h3><h1>' + msg + '</h1>' + fileInfo + '</div><div class="__jux-source"><div class="__jux-code">' + sourceHtml + '</div></div><div class="__jux-footer"><span class="__jux-tip">💡 Fix the error and save to reload</span><button class="__jux-dismiss" onclick="document.getElementById(\\'__jux-error-overlay\\').remove()">Dismiss</button></div></div>';
+        document.body.appendChild(overlay);
+        requestAnimationFrame(function() { overlay.classList.add('visible'); });
+        console.error(title + ':', error);
+    }
+};
+
+window.addEventListener('error', function(e) { __juxErrorOverlay.show(e.error || new Error(e.message), 'Uncaught Error'); }, true);
+window.addEventListener('unhandledrejection', function(e) { __juxErrorOverlay.show(e.reason || new Error('Promise rejected'), 'Unhandled Promise Rejection'); }, true);
+
+// --- JUX ROUTER ---
+const routes = {\n${routeMap}};
+
+async function navigate(path) {
+    const view = routes[path];
+    if (!view) {
+        document.getElementById('app').innerHTML = '<h1 style="padding:40px;">404 - Not Found</h1>';
+        return;
+    }
+    document.getElementById('app').innerHTML = '';
+    var overlay = document.getElementById('__jux-error-overlay');
+    if (overlay) overlay.remove();
+    try { await view(); } catch (err) { __juxErrorOverlay.show(err, 'Jux Render Error'); }
+}
+
+document.addEventListener('click', e => {
+    const a = e.target.closest('a');
+    if (!a || a.dataset.router === 'false') return;
+    try { if (new URL(a.href, location.origin).origin !== location.origin) return; } catch { return; }
+    e.preventDefault();
+    history.pushState({}, '', a.href);
+    navigate(new URL(a.href, location.origin).pathname);
+});
+
+window.addEventListener('popstate', () => navigate(location.pathname));
+navigate(location.pathname);
+`;
+    }
+
+    /**
+     * ✅ Generate route path from file path
+     * Examples:
+     *   index.jux -> /
+     *   abc/juxabc.jux -> /abc/juxabc
+     *   abc/index.jux -> /abc
+     */
+    _generateRoutePath(filePath) {
+        // Normalize separators
+        const normalized = filePath.replace(/\\/g, '/');
+
+        // Remove extension
+        const withoutExt = normalized.replace(/\.[^/.]+$/, '');
+
+        // Handle index files
+        if (withoutExt === 'index') {
+            return '/';
+        }
+
+        // Remove trailing /index
+        const cleaned = withoutExt.replace(/\/index$/, '');
+
+        // Ensure leading slash
+        return '/' + cleaned.toLowerCase();
+    }
+
+    /**
+     * ✅ Generate PascalCase function name from sanitized name
+     * Examples:
+     *   abc_juxabc -> AbcJuxabc
+     *   index -> Index
+     */
+    _generateFunctionName(name) {
+        return name
+            .split('_')
+            .map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+            .join('');
+    }
+
+    /**
+     * ✅ Generate entry point with nested folder support
      */
     generateEntryPoint(views, dataModules, sharedModules) {
         let entry = `// Auto-generated JUX entry point\n\n`;
@@ -209,7 +454,7 @@ export class JuxCompiler {
         entry += `\n// --- VIEW FUNCTIONS ---\n`;
 
         views.forEach(v => {
-            const capitalized = v.name.charAt(0).toUpperCase() + v.name.slice(1);
+            const functionName = this._generateFunctionName(v.name);
             allIssues.push(...this.validateViewCode(v.name, v.content));
 
             sourceSnapshot[v.file] = {
@@ -222,7 +467,7 @@ export class JuxCompiler {
             let viewCode = this.removeImports(v.content).replace(/^\s*export\s+default\s+.*$/gm, '');
             const asyncPrefix = viewCode.includes('await ') ? 'async ' : '';
 
-            entry += `\n${asyncPrefix}function render${capitalized}() {\n${viewCode}\n}\n`;
+            entry += `\n${asyncPrefix}function render${functionName}() {\n${viewCode}\n}\n`;
         });
 
         dataModules.forEach(m => {
@@ -257,10 +502,17 @@ export class JuxCompiler {
 
     _generateRouter(views) {
         let routeMap = '';
+
         views.forEach(v => {
-            const cap = v.name.charAt(0).toUpperCase() + v.name.slice(1);
-            if (v.name.toLowerCase() === 'index') routeMap += `  '/': render${cap},\n`;
-            routeMap += `  '/${v.name.toLowerCase()}': render${cap},\n`;
+            // ✅ Generate route from folder structure
+            // abc/juxabc.jux -> /abc/juxabc
+            // index.jux -> /
+            // abc/index.jux -> /abc
+
+            const routePath = this._generateRoutePath(v.file);
+            const functionName = this._generateFunctionName(v.name);
+
+            routeMap += `  '${routePath}': render${functionName},\n`;
         });
 
         return `
@@ -278,12 +530,17 @@ async function __juxLoadSources() {
 }
 
 function __juxFindSource(stack) {
-    var match = stack.match(/render(\\w+)/);
+    var match = stack.match(/render([A-Z][a-zA-Z0-9_]*)/);
     if (match) {
-        var viewName = match[1].toLowerCase();
+        var funcName = match[1];
         for (var file in __juxSources || {}) {
-            if (__juxSources[file].name.toLowerCase() === viewName) {
-                return { file: file, source: __juxSources[file], viewName: match[1] };
+            var normalized = __juxSources[file].name
+                .split('_')
+                .map(s => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase())
+                .join('');
+            
+            if (normalized === funcName) {
+                return { file: file, source: __juxSources[file], viewName: funcName };
             }
         }
     }
@@ -414,94 +671,6 @@ navigate(location.pathname);
 `;
     }
 
-    async build() {
-        console.log('🚀 JUX Build\n');
-
-        const juxscriptPath = this.findJuxscriptPath();
-        if (!juxscriptPath) {
-            console.error('❌ Could not locate juxscript package');
-            return { success: false, errors: [{ message: 'juxscript not found' }], warnings: [] };
-        }
-        console.log(`📦 Using: ${juxscriptPath}`);
-
-        await this.loadJuxscriptExports();
-
-        if (fs.existsSync(this.distDir)) {
-            fs.rmSync(this.distDir, { recursive: true, force: true });
-        }
-        fs.mkdirSync(this.distDir, { recursive: true });
-
-        // ✅ Copy public folder if exists
-        this.copyPublicFolder();
-
-        const { views, dataModules, sharedModules } = this.scanFiles();
-        console.log(`📁 Found ${views.length} views, ${sharedModules.length} shared, ${dataModules.length} data`);
-
-        // Copy data/shared modules to dist
-        const juxDistDir = path.join(this.distDir, 'jux');
-        fs.mkdirSync(juxDistDir, { recursive: true });
-        [...dataModules, ...sharedModules].forEach(m => {
-            fs.writeFileSync(path.join(juxDistDir, m.file), m.content);
-        });
-
-        const entryContent = this.generateEntryPoint(views, dataModules, sharedModules);
-        const entryPath = path.join(this.distDir, 'entry.js');
-        fs.writeFileSync(entryPath, entryContent);
-
-        const snapshotPath = path.join(this.distDir, '__jux_sources.json');
-        fs.writeFileSync(snapshotPath, JSON.stringify(this._sourceSnapshot, null, 2));
-        console.log(`📸 Source snapshot written`);
-
-        const validation = this.reportValidationIssues();
-        if (!validation.isValid) {
-            console.log('🛑 BUILD FAILED\n');
-            return { success: false, errors: validation.errors, warnings: validation.warnings };
-        }
-
-        try {
-            await esbuild.build({
-                entryPoints: [entryPath],
-                bundle: true,
-                outfile: path.join(this.distDir, 'bundle.js'),
-                format: 'esm',
-                platform: 'browser',
-                target: 'esnext',
-                sourcemap: true,
-                loader: { '.jux': 'js', '.css': 'empty' },
-                plugins: [{
-                    name: 'juxscript-resolver',
-                    setup: (build) => {
-                        build.onResolve({ filter: /^juxscript$/ }, () => ({ path: juxscriptPath }));
-                    }
-                }],
-            });
-            console.log('✅ esbuild complete');
-        } catch (err) {
-            console.error('❌ esbuild failed:', err);
-            return { success: false, errors: [{ message: err.message }], warnings: [] };
-        }
-
-        const html = `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>JUX App</title>
-    <script type="module" src="./bundle.js"></script>
-</head>
-<body>
-    <div id="app"></div>
-</body>
-</html>`;
-        fs.writeFileSync(path.join(this.distDir, 'index.html'), html);
-
-        fs.unlinkSync(entryPath);
-        fs.rmSync(juxDistDir, { recursive: true, force: true });
-
-        console.log(`\n✅ Build Complete!\n`);
-        return { success: true, errors: [], warnings: validation.warnings };
-    }
-
     /**
      * Copy public folder contents to dist
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.90",
+  "version": "1.1.92",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",