juxscript 1.1.92 → 1.1.93

package/dom-structure-map.json

@@ -1,6 +1,6 @@
 {
   "totalComponents": 63,
-  "generatedAt": "2026-02-12T19:55:15.526Z",
+  "generatedAt": "2026-02-12T20:01:42.916Z",
   "components": [
     {
       "file": "alert.js",

package/machinery/compiler3.js

@@ -202,180 +202,6 @@ export class JuxCompiler {
         return issues;
     }
 
-    /**
-     * ✅ 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:
@@ -484,191 +310,101 @@ navigate(location.pathname);
     }
 
     reportValidationIssues() {
-        const issues = this._validationIssues || [];
-        const errors = issues.filter(i => i.type === 'error');
-        const warnings = issues.filter(i => i.type === 'warning');
-
-        if (issues.length > 0) {
-            console.log('\n⚠️  Validation Issues:\n');
-            issues.forEach(issue => {
-                const icon = issue.type === 'error' ? '❌' : '⚠️';
-                console.log(`${icon} [${issue.view}:${issue.line}] ${issue.message}`);
-            });
-            console.log('');
-        }
+        if (!this._validationIssues || this._validationIssues.length === 0) return;
 
-        return { isValid: errors.length === 0, errors, warnings };
+        console.log('\n⚠️  Validation Issues:\n');
+        this._validationIssues.forEach(issue => {
+            const icon = issue.type === 'error' ? '❌' : '⚠️';
+            console.log(`   ${icon} ${issue.view}:${issue.line} - ${issue.message}`);
+        });
+        console.log('');
     }
 
-    _generateRouter(views) {
-        let routeMap = '';
+    /**
+     * ✅ Build method - INSIDE the class
+     */
+    async build() {
+        console.log('🔨 Building JUX application...\n');
 
-        views.forEach(v => {
-            // ✅ Generate route from folder structure
-            // abc/juxabc.jux -> /abc/juxabc
-            // index.jux -> /
-            // abc/index.jux -> /abc
+        try {
+            const startTime = Date.now();
 
-            const routePath = this._generateRoutePath(v.file);
-            const functionName = this._generateFunctionName(v.name);
+            // Scan files
+            const { views, dataModules, sharedModules } = this.scanFiles();
 
-            routeMap += `  '${routePath}': render${functionName},\n`;
-        });
+            console.log(`📂 Found ${views.length} views, ${dataModules.length} data modules, ${sharedModules.length} shared modules\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;
-}
+            // Load juxscript exports for validation
+            await this.loadJuxscriptExports();
 
-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 };
+            // Ensure dist directory exists
+            if (!fs.existsSync(this.distDir)) {
+                fs.mkdirSync(this.distDir, { recursive: true });
             }
-        }
-    }
-    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}};
+            // Generate entry point
+            const entryCode = this.generateEntryPoint(views, dataModules, sharedModules);
+            const entryPath = path.join(this.distDir, 'entry.js');
+            fs.writeFileSync(entryPath, entryCode);
+
+            // Bundle with esbuild
+            console.log('📦 Bundling with esbuild...');
+            await esbuild.build({
+                entryPoints: [entryPath],
+                bundle: true,
+                format: 'esm',
+                outfile: path.join(this.distDir, 'bundle.js'),
+                platform: 'browser',
+                target: 'es2020',
+                sourcemap: true,
+                external: []
+            });
 
-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'); }
-}
+            // Generate index.html
+            console.log('📄 Generating index.html...');
+            const indexHtml = `<!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>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/juxscript@latest/lib/layouts/default.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/bundle.js"></script>
+</body>
+</html>`;
+
+            fs.writeFileSync(path.join(this.distDir, 'index.html'), indexHtml);
+
+            // Copy public folder
+            this.copyPublicFolder();
+
+            // Write source snapshot for error overlay
+            const snapshotPath = path.join(this.distDir, '__jux_sources.json');
+            fs.writeFileSync(snapshotPath, JSON.stringify(this._sourceSnapshot, null, 2));
+
+            const endTime = Date.now();
+            console.log(`\n✅ Build complete in ${endTime - startTime}ms`);
+            console.log(`   Output: ${this.distDir}`);
+
+            this.reportValidationIssues();
+
+            return {
+                success: true,
+                errors: this._validationIssues || [],
+                distDir: this.distDir
+            };
 
-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);
-`;
+        } catch (err) {
+            console.error('❌ Build failed:', err.message);
+            console.error(err.stack);
+            return {
+                success: false,
+                errors: [err.message]
+            };
+        }
     }
 
     /**

package/package.json

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