juxscript 1.1.154 → 1.1.155

package/machinery/compiler4.js

@@ -508,6 +508,12 @@ export class JuxCompiler {
         fs.writeFileSync(snapshotPath, JSON.stringify(this._sourceSnapshot, null, 2));
         console.log(`📸 Source snapshot written`);
 
+        // ✅ Also write to dist root so the error overlay can fetch it via /__jux_sources.json
+        const distSnapshotPath = path.join(this.config.distDir, '__jux_sources.json');
+        if (distSnapshotPath !== snapshotPath) {
+            fs.writeFileSync(distSnapshotPath, JSON.stringify(this._sourceSnapshot, null, 2));
+        }
+
         const validation = this.reportValidationIssues();
         if (!validation.isValid) {
             console.log('🛑 BUILD FAILED\n');

package/machinery/errors.js

@@ -1,6 +1,7 @@
 /**
  * Generates an injectable client-side error collector script.
  * Full-screen overlay similar to Vite's error screen.
+ * Resolves bundle line numbers back to original .jux source using __jux_sources.json.
  *
  * @param {Object} options
  * @param {boolean} [options.enabled=true]
@@ -22,6 +23,114 @@ export function generateErrorCollector(options = {}) {
     var __maxErrors = ${maxErrors};
     var __overlay = null;
     var __list = null;
+    var __sources = null;
+    var __sourcesFetched = false;
+    var __bundleLines = null;
+
+    // Fetch source map + bundle on first error
+    function loadSources(cb) {
+        if (__sourcesFetched) return cb();
+        __sourcesFetched = true;
+
+        var done = 0;
+        function check() { if (++done >= 2) cb(); }
+
+        // Fetch source snapshot
+        var xhr1 = new XMLHttpRequest();
+        xhr1.open('GET', '/__jux_sources.json', true);
+        xhr1.onload = function() {
+            try { __sources = JSON.parse(xhr1.responseText); } catch(e) {}
+            check();
+        };
+        xhr1.onerror = check;
+        xhr1.send();
+
+        // Fetch bundle to split into lines
+        var xhr2 = new XMLHttpRequest();
+        xhr2.open('GET', '/bundle.js', true);
+        xhr2.onload = function() {
+            try { __bundleLines = xhr2.responseText.split('\\n'); } catch(e) {}
+            check();
+        };
+        xhr2.onerror = check;
+        xhr2.send();
+    }
+
+    // Given a bundle line number, find which view function it belongs to
+    // and map back to the original .jux source line
+    function resolveSourceLocation(bundleLine) {
+        if (!__sources || !__bundleLines || !bundleLine) return null;
+
+        // Find the renderJuxN function that contains this line
+        // by scanning backwards from bundleLine for "async function renderJux"
+        var funcName = null;
+        var funcStartLine = 0;
+        for (var i = bundleLine - 1; i >= 0; i--) {
+            var line = __bundleLines[i];
+            if (!line) continue;
+            var match = line.match(/async\\s+function\\s+(renderJux\\d+)/);
+            if (match) {
+                funcName = match[1];
+                funcStartLine = i + 1; // 1-based
+                break;
+            }
+        }
+
+        if (!funcName) return null;
+
+        // Find the source entry that maps to this function
+        var sourceEntry = null;
+        for (var key in __sources) {
+            if (__sources[key].functionName === funcName) {
+                sourceEntry = __sources[key];
+                break;
+            }
+        }
+
+        if (!sourceEntry) return null;
+
+        // Calculate approximate original line
+        // bundleLine is inside the function body, funcStartLine is the function declaration
+        // +1 because function body starts after the declaration line
+        var offsetInFunc = bundleLine - funcStartLine - 1;
+        var originalLines = sourceEntry.lines || [];
+        var approxLine = Math.max(0, Math.min(offsetInFunc, originalLines.length - 1));
+
+        return {
+            file: sourceEntry.file,
+            name: sourceEntry.name,
+            functionName: funcName,
+            originalLine: approxLine + 1,
+            originalCode: originalLines[approxLine] || '',
+            // Provide surrounding context (3 lines before/after)
+            context: originalLines.slice(
+                Math.max(0, approxLine - 3),
+                Math.min(originalLines.length, approxLine + 4)
+            ),
+            contextStartLine: Math.max(0, approxLine - 3) + 1,
+            highlightLine: approxLine + 1
+        };
+    }
+
+    // Parse stack trace and extract bundle line numbers
+    function parseStack(stack) {
+        if (!stack) return [];
+        var frames = [];
+        var lines = stack.split('\\n');
+        for (var i = 0; i < lines.length; i++) {
+            // Match patterns like "at funcName (url:line:col)" or "at url:line:col"
+            var m = lines[i].match(/(?:at\\s+(.+?)\\s+\\()?(?:https?:\\/\\/[^:]+):([\\d]+):([\\d]+)\\)?/);
+            if (m) {
+                frames.push({
+                    raw: lines[i].trim(),
+                    func: m[1] || '(anonymous)',
+                    line: parseInt(m[2], 10),
+                    col: parseInt(m[3], 10)
+                });
+            }
+        }
+        return frames;
+    }
 
     function createOverlay() {
         __overlay = document.createElement('div');
@@ -53,7 +162,6 @@ export function generateErrorCollector(options = {}) {
             'background:#1a1a1a'
         ].join(';'));
 
-        // Title bar
         var header = document.createElement('div');
         header.setAttribute('style', [
             'display:flex',
@@ -120,6 +228,38 @@ export function generateErrorCollector(options = {}) {
         if (__overlay) __overlay.style.display = 'none';
     }
 
+    function renderSourceContext(resolved) {
+        if (!resolved) return '';
+
+        var lines = resolved.context || [];
+        var startLine = resolved.contextStartLine || 1;
+        var highlight = resolved.highlightLine || -1;
+
+        var html = '<div style="margin-top:8px;padding:8px;background:#111;border:1px solid #333;border-radius:4px;">';
+        html += '<div style="color:#ff5555;font-size:12px;margin-bottom:6px;font-weight:bold;">' +
+            escapeHtml(resolved.file) + ':' + resolved.originalLine +
+            '</div>';
+
+        for (var i = 0; i < lines.length; i++) {
+            var lineNum = startLine + i;
+            var isHighlight = lineNum === highlight;
+            var bg = isHighlight ? 'background:#3a1a1a;' : '';
+            var color = isHighlight ? 'color:#ff8888;' : 'color:#888;';
+            var numColor = isHighlight ? 'color:#ff5555;' : 'color:#555;';
+            var marker = isHighlight ? '>' : ' ';
+
+            html += '<div style="' + bg + 'padding:1px 8px;white-space:pre;">' +
+                '<span style="' + numColor + 'display:inline-block;width:40px;text-align:right;margin-right:12px;user-select:none;">' +
+                    marker + ' ' + lineNum +
+                '</span>' +
+                '<span style="' + color + '">' + escapeHtml(lines[i]) + '</span>' +
+            '</div>';
+        }
+
+        html += '</div>';
+        return html;
+    }
+
     function addError(type, message, source, line, col, stack) {
         if (__errors.length >= __maxErrors) __errors.shift();
 
@@ -148,34 +288,57 @@ export function generateErrorCollector(options = {}) {
 
         var typeLabel = type === 'error' ? 'Error' : type === 'rejection' ? 'Unhandled Rejection' : 'console.error';
 
-        var meta = entry.source ? entry.source + ':' + entry.line + ':' + entry.col : '';
-
         item.innerHTML =
             '<div style="color:#888;font-size:12px;margin-bottom:4px;">' +
-                typeLabel + (meta ? '  ' + escapeHtml(meta) : '') +
+                typeLabel +
                 '<span style="float:right;">' + entry.time + '</span>' +
             '</div>' +
-            '<div style="color:#ff8888;white-space:pre-wrap;word-break:break-word;">' +
+            '<div style="color:#ff8888;font-size:14px;white-space:pre-wrap;word-break:break-word;font-weight:bold;">' +
                 escapeHtml(entry.message) +
-            '</div>' +
-            (entry.stack ?
-                '<pre style="margin:8px 0 0;padding:8px;font-size:12px;color:#888;' +
-                'white-space:pre-wrap;background:#1a1a1a;border-radius:4px;' +
-                'border:1px solid #333;max-height:200px;overflow-y:auto;">' +
-                    escapeHtml(cleanStack(entry.stack)) +
-                '</pre>'
-            : '');
+            '</div>';
 
         __list.appendChild(item);
-    }
 
-    function cleanStack(stack) {
-        // Remove the first line if it duplicates the message
-        var lines = stack.split('\\n');
-        if (lines.length > 1 && lines[0].indexOf('Error:') !== -1) {
-            lines.shift();
-        }
-        return lines.join('\\n').trim();
+        // Resolve source location asynchronously
+        loadSources(function() {
+            var frames = parseStack(entry.stack);
+            var resolved = null;
+
+            // Try each frame until we find one that maps to a .jux source
+            for (var i = 0; i < frames.length; i++) {
+                var r = resolveSourceLocation(frames[i].line);
+                if (r) {
+                    resolved = r;
+                    break;
+                }
+            }
+
+            // Also try the direct line/col from the error itself
+            if (!resolved && entry.line) {
+                resolved = resolveSourceLocation(entry.line);
+            }
+
+            if (resolved) {
+                // Add source context block
+                var sourceBlock = document.createElement('div');
+                sourceBlock.innerHTML = renderSourceContext(resolved);
+                item.appendChild(sourceBlock);
+            }
+
+            // Add raw stack (collapsed) if present
+            if (entry.stack) {
+                var stackBlock = document.createElement('details');
+                stackBlock.setAttribute('style', 'margin-top:8px;');
+                stackBlock.innerHTML =
+                    '<summary style="cursor:pointer;color:#555;font-size:12px;user-select:none;">Raw stack trace</summary>' +
+                    '<pre style="margin:4px 0 0;padding:8px;font-size:12px;color:#666;' +
+                    'white-space:pre-wrap;background:#111;border-radius:4px;' +
+                    'border:1px solid #333;max-height:200px;overflow-y:auto;">' +
+                        escapeHtml(entry.stack) +
+                    '</pre>';
+                item.appendChild(stackBlock);
+            }
+        });
     }
 
     function escapeHtml(str) {

package/package.json

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