juxscript 1.0.62 → 1.0.63

package/machinery/server.js

@@ -4,6 +4,7 @@ import path from 'path';
 import fs from 'fs';
 import { fileURLToPath } from 'url';
 import { startWatcher } from './watcher.js';
+import { verifyRuntime } from './verifier.js'; // ✅ Import Verifier
 import { WebSocketServer } from 'ws';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -47,7 +48,8 @@ async function tryPort(startPort, maxAttempts = 5, reservedPorts = []) {
   throw new Error(`Could not find available port after ${maxAttempts} attempts starting from ${startPort}`);
 }
 
-async function serve(httpPort = 3000, wsPort = 3001, distDir = './.jux-dist') {
+// ✅ FIX: Added config parameter to serve function signature
+async function serve(httpPort = 3000, wsPort = 3001, distDir = './.jux-dist', config = {}) {
   const app = express();
   const absoluteDistDir = path.resolve(distDir);
   const projectRoot = path.resolve('.');
@@ -77,6 +79,9 @@ async function serve(httpPort = 3000, wsPort = 3001, distDir = './.jux-dist') {
     next();
   });
 
+  // ✅ SILENCE FAVICON: Return 204 (No Content) to stop browser 404 errors
+  app.get('/favicon.ico', (req, res) => res.status(204).end());
+
   // Serve static files
   app.use(express.static(absoluteDistDir));
 
@@ -134,17 +139,28 @@ async function serve(httpPort = 3000, wsPort = 3001, distDir = './.jux-dist') {
   console.log(`🔌 WebSocket server running at ws://localhost:${availableWsPort}`);
 
   // Start HTTP server
-  server.listen(availableHttpPort, () => {
+  server.listen(availableHttpPort, async () => {
     console.log(`🚀 JUX dev server running at http://localhost:${availableHttpPort}`);
     console.log(`   Serving: ${absoluteDistDir}`);
-    console.log(`   Press Ctrl+C to stop\n`);
+    // console.log(`   Press Ctrl+C to stop\n`); removed to group logs
+
+    // ✅ NEW: Post-Startup Runtime Verification
+    // Detects "Served HTML as JS" errors immediately
+    const isHealthy = await verifyRuntime(availableHttpPort);
+    if (!isHealthy) {
+      console.error('🛑 Server failed runtime verification. Shutting down due to critical errors.');
+      process.exit(1);
+    }
   });
 
   // Start file watcher
-  const juxSource = path.join(projectRoot, 'jux');
+  const sourceName = config?.directories?.source || 'jux';
+  const juxSource = path.join(projectRoot, sourceName);
+
   if (fs.existsSync(juxSource)) {
     console.log(`👀 Watching: ${juxSource}\n`);
-    startWatcher(juxSource, absoluteDistDir, clients);
+    // ✅ Pass availableWsPort so we can regenerate index.html with correct port on rebuild
+    startWatcher(juxSource, absoluteDistDir, clients, config, availableWsPort);
   }
 
   // Graceful shutdown
@@ -161,6 +177,6 @@ async function serve(httpPort = 3000, wsPort = 3001, distDir = './.jux-dist') {
   return { server, httpPort: availableHttpPort, wsPort: availableWsPort };
 }
 
-export async function start(httpPort = 3000, wsPort = 3001, distDir = './.jux-dist') {
-  return serve(httpPort, wsPort, distDir);
+export async function start(httpPort = 3000, wsPort = 3001, distDir = './.jux-dist', config = {}) {
+  return serve(httpPort, wsPort, distDir, config);
 }

package/machinery/verifier.js

@@ -0,0 +1,143 @@
+import fs from 'fs';
+import path from 'path';
+import http from 'http';
+import * as acorn from 'acorn'; // Needed to parse main.js
+
+/**
+ * Checks the static `distDir` for critical files and valid import map references.
+ * Returns true if healthy, false if broken.
+ */
+export function verifyStaticBuild(distDir) {
+    // console.log('🕵️  Verifying build integrity...');
+    const errors = [];
+
+    if (!fs.existsSync(distDir)) {
+        console.error('❌ Dist dir does not exist');
+        return false;
+    }
+
+    // 1. Critical Files Existence
+    const critical = ['index.html', 'main.js', 'lib/jux.js'];
+    for (const f of critical) {
+        if (!fs.existsSync(path.join(distDir, f))) {
+            errors.push(`Missing critical artifact: ${f}`);
+        }
+    }
+
+    // 2. Import Map Integrity Check
+    let importMap = {};
+    try {
+        const indexPath = path.join(distDir, 'index.html');
+        if (fs.existsSync(indexPath)) {
+            const html = fs.readFileSync(indexPath, 'utf8');
+            const match = html.match(/<script type="importmap">([\s\S]*?)<\/script>/);
+
+            if (match && match[1]) {
+                importMap = JSON.parse(match[1]).imports || {};
+                Object.entries(importMap).forEach(([key, url]) => {
+                    // Skip folders (trailing slash) and CDN links
+                    if (typeof url === 'string' && !url.endsWith('/') && !url.startsWith('http')) {
+                        const fsPath = url.replace(/^\//, '').split('?')[0];
+                        const fullPath = path.join(distDir, fsPath);
+
+                        if (!fs.existsSync(fullPath)) {
+                            errors.push(`Broken Import Map: "${key}" -> ${url} (File not found)`);
+                        }
+                    }
+                });
+            }
+        }
+    } catch (e) {
+        errors.push(`Import Map Verification Error: ${e.message}`);
+    }
+
+    // 3. Bundle Import Verification (Detect Ghost Dependencies)
+    const mainJsPath = path.join(distDir, 'main.js');
+    if (fs.existsSync(mainJsPath)) {
+        try {
+            const code = fs.readFileSync(mainJsPath, 'utf8');
+            const ast = acorn.parse(code, { ecmaVersion: 'latest', sourceType: 'module' });
+
+            ast.body.forEach(node => {
+                if (node.type === 'ImportDeclaration') {
+                    const source = node.source.value;
+
+                    // Allow internal relative paths if they exist
+                    if (source.startsWith('/') || source.startsWith('.')) {
+                        // basic existence check (simplified)
+                        return;
+                    }
+
+                    // Check if bare specifier exists in Import Map
+                    // e.g. import axios from 'axios' -> must be in map
+                    if (!importMap[source] && !importMap[source + '/']) {
+                        errors.push(`Ghost Dependency: '${source}' is imported in main.js but missing from Import Map.`);
+                    }
+                }
+            });
+        } catch (e) {
+            errors.push(`Failed to parse main.js for verification: ${e.message}`);
+        }
+    }
+
+    if (errors.length > 0) {
+        console.error(`\n❌ BUILD VERIFICATION FAILED (${errors.length} errors):`);
+        errors.forEach(e => console.error(`   - ${e}`));
+        console.log('');
+        return false;
+    }
+
+    // console.log('   ✓ Static verification passed');
+    return true;
+}
+
+/**
+ * Pings the running server to ensure correct MIME types and Route availability.
+ * Detects "serving JS as HTML" (MIME type mismatch) errors.
+ */
+export function verifyRuntime(port) {
+    return new Promise((resolve) => {
+        console.log('🩺 Performing runtime diagnostics...');
+        const errors = [];
+
+        // Helper to check a single URL
+        const check = (urlPath, expectedMime) => new Promise(r => {
+            const req = http.get(`http://localhost:${port}${urlPath}`, res => {
+                // Check Status
+                if (res.statusCode !== 200 && res.statusCode !== 304) {
+                    errors.push(`GET ${urlPath} : Status ${res.statusCode} (Expected 200)`);
+                } else {
+                    // Check MIME type
+                    const ct = res.headers['content-type'] || '';
+                    if (expectedMime && !ct.includes(expectedMime)) {
+                        errors.push(`GET ${urlPath} : Bad MIME type. Got "${ct}", expected "${expectedMime}". (Did you get index.html fallback?)`);
+                    }
+                }
+                res.resume(); // Consume stream
+                r();
+            });
+
+            req.on('error', e => {
+                errors.push(`GET ${urlPath} : Connection failed - ${e.message}`);
+                r();
+            });
+        });
+
+        // Run checks in parallel
+        Promise.all([
+            check('/', 'text/html'),                   // Route should be HTML
+            check('/main.js', 'application/javascript'), // Bundle must be JS
+            check('/lib/jux.js', 'application/javascript') // Library must be JS
+        ]).then(() => {
+            if (errors.length > 0) {
+                console.error(`\n💥 RUNTIME VERIFICATION FAILED (` + errors.length + ` errors):`);
+                errors.forEach(e => console.error(`   - ${e}`));
+                console.log('');
+                resolve(false);
+            } else {
+                console.log('   ✓ Runtime health healthy (Routes & MIME types OK)\n');
+                resolve(true);
+            }
+        });
+    });
+}

package/machinery/watcher.js

@@ -5,6 +5,7 @@ import {
   bundleJuxFilesToRouter,
   generateIndexHtml
 } from './compiler.js';
+import { verifyStaticBuild } from './verifier.js'; // ✅ Import Verifier
 
 let isRebuilding = false;
 let rebuildQueued = false;
@@ -36,7 +37,7 @@ function findJuxFiles(dir, fileList = []) {
 /**
  * Full rebuild of the entire bundle
  */
-async function fullRebuild(juxSource, distDir) {
+async function fullRebuild(juxSource, distDir, config, wsPort) {
   const startTime = performance.now(); // ✅ Start timing
   console.log('\n🔄 Rebuilding bundle...');
 
@@ -44,68 +45,29 @@ async function fullRebuild(juxSource, distDir) {
     // Find all .jux files
     const projectJuxFiles = findJuxFiles(juxSource);
     console.log(`   Found ${projectJuxFiles.length} .jux file(s)`);
-
     // ✅ Time the bundling step
     const bundleStartTime = performance.now();
-
     // Bundle all files
-    const mainJsFilename = await bundleJuxFilesToRouter(juxSource, distDir, {
-      routePrefix: ''
+
+    // ✅ Return bundleResult with vendor info
+    const bundleResult = await bundleJuxFilesToRouter(juxSource, distDir, {
+      routePrefix: '',
+      config
     });
 
     const bundleTime = performance.now() - bundleStartTime;
-
-    // ✅ Time the route generation step
-    const routeStartTime = performance.now();
-
-    // Generate routes for index.html
-    const routes = projectJuxFiles.map(juxFile => {
-      const relativePath = path.relative(juxSource, juxFile);
-      const parsedPath = path.parse(relativePath);
-
-      const rawFunctionName = parsedPath.dir
-        ? `${parsedPath.dir.replace(/\//g, '_')}_${parsedPath.name}`
-        : parsedPath.name;
-
-      const functionName = rawFunctionName
-        .replace(/[-_]/g, ' ')
-        .split(' ')
-        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-        .join('');
-
-      const routePath = '/' + (parsedPath.dir ? `${parsedPath.dir}/` : '') + parsedPath.name;
-
-      return {
-        path: routePath.replace(/\/+/g, '/'),
-        functionName
-      };
+    // ✅ Generate unified index.html (INJECT HOT RELOAD SCRIPT)
+    generateIndexHtml(distDir, bundleResult, {
+      isDev: true,
+      wsPort: wsPort || 3001
     });
 
-    // Generate index.html
-    generateIndexHtml(distDir, routes, mainJsFilename);
-
-    const routeTime = performance.now() - routeStartTime;
-    const totalTime = performance.now() - startTime;
-
-    // ✅ Pretty-print timing breakdown
-    console.log(`\n⏱️  Rebuild Performance:`);
-    console.log(`   Bundle generation: ${bundleTime.toFixed(0)}ms`);
-    console.log(`   Route/index.html:  ${routeTime.toFixed(0)}ms`);
-    console.log(`   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
-    console.log(`   Total rebuild:     ${totalTime.toFixed(0)}ms`);
-
-    // ✅ Color-coded performance indicator
-    if (totalTime < 100) {
-      console.log(`   ✅ Lightning fast! ⚡`);
-    } else if (totalTime < 500) {
-      console.log(`   ✅ Fast rebuild`);
-    } else if (totalTime < 1000) {
-      console.log(`   ⚠️  Moderate speed`);
-    } else {
-      console.log(`   🐌 Slow rebuild (consider optimizing)`);
+    // ✅ NEW: Verify Rebuild Artifacts
+    if (!verifyStaticBuild(distDir)) {
+      console.error('⚠️  Rebuild failed validation! Skipped client reload to preserve state.');
+      return false; // Return false prevents WebSocket reload message
     }
 
-    console.log(`✅ Bundle rebuilt: ${mainJsFilename}\n`);
     return true;
 
   } catch (err) {
@@ -118,18 +80,10 @@ async function fullRebuild(juxSource, distDir) {
 /**
  * Start watching for file changes and rebuild on change
  */
-export function startWatcher(juxSource, distDir, wsClients) {
+export function startWatcher(juxSource, distDir, wsClients, config, wsPort) {
   console.log(`👀 Watching: ${juxSource}`);
 
   const watcher = fs.watch(juxSource, { recursive: true }, async (eventType, filename) => {
-    // Ignore non-.jux files and certain patterns
-    if (!filename ||
-      !filename.endsWith('.jux') ||
-      filename.includes('node_modules') ||
-      filename.includes('jux-dist') ||
-      filename.startsWith('.')) {
-      return;
-    }
 
     // Debounce: If already rebuilding, queue another rebuild
     if (isRebuilding) {
@@ -140,8 +94,8 @@ export function startWatcher(juxSource, distDir, wsClients) {
     isRebuilding = true;
     console.log(`\n📝 File changed: ${filename}`);
 
-    // Rebuild the entire bundle
-    const success = await fullRebuild(juxSource, distDir);
+    // Rebuild the entire bundle (PASS PORT)
+    const success = await fullRebuild(juxSource, distDir, config, wsPort);
 
     isRebuilding = false;
 
@@ -168,4 +122,39 @@ export function startWatcher(juxSource, distDir, wsClients) {
   });
 
   return watcher;
+}
+
+async function rebuildOnChange(filePath) {
+  const rebuildStart = performance.now();
+  console.log(`\n📝 File changed: ${path.relative(projectRoot, filePath)}\n`);
+  console.log('🔄 Rebuilding bundle...');
+
+  try {
+    // ✅ FIX: Capture bundleResult from bundleJuxFilesToRouter
+    const bundleResult = await bundleJuxFilesToRouter(projectRoot, distDir, {
+      routePrefix: ''
+    });
+
+    // ✅ FIX: Pass bundleResult to generateIndexHtml
+    generateIndexHtml(distDir, bundleResult);
+
+    const rebuildTime = performance.now() - rebuildStart;
+
+    console.log(`\n⏱️  Rebuild Performance:`);
+    console.log(`   Bundle generation: ${rebuildTime.toFixed(0)}ms`);
+    console.log(`   Route/index.html:  ${(performance.now() - rebuildStart - rebuildTime).toFixed(0)}ms`);
+    console.log(`   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
+    console.log(`   Total rebuild:     ${(performance.now() - rebuildStart).toFixed(0)}ms`);
+
+    if (rebuildTime < 100) {
+      console.log(`   ✅ Lightning fast! ⚡`);
+    }
+
+    // ✅ FIX: Notify clients with bundleResult
+    notifyClients({ type: 'reload', bundleResult });
+
+  } catch (error) {
+    console.error('❌ Rebuild failed:', error.message);
+    notifyClients({ type: 'error', message: error.message });
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.62",
+  "version": "1.0.63",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",
@@ -49,16 +49,23 @@
   ],
   "scripts": {
     "build": "tsc",
+    "scaffold": "node lib/componentsv2/tools/Scaffold.js",
+    "create-skin": "node lib/componentsv2/tools/CreateSkin.js",
+    "doc-spam": "node lib/componentsv2/tools/DocSpam.js",
+    "test-compile-verifier": "node machinery/diagnose.js",
+    "check-types": "tsc --noEmit",
     "dev": "tsc --watch",
     "prepublishOnly": "npm run build",
     "analyze": "node scripts/analyze-components.js",
     "check-styles": "node scripts/check-inline-styles.js",
     "find-inject-styles": "node scripts/find-inject-styles.js",
-    "find-jux-classes": "node scripts/find-jux-classes.js"
+    "find-jux-classes": "node scripts/find-jux-classes.js",
+    "test": "node --loader ts-node/esm tests/dropdown-test.js"
   },
   "dependencies": {
     "acorn": "^8.15.0",
     "axios": "^1.6.0",
+    "better-sqlite3": "^12.6.2",
     "chart.js": "^4.5.1",
     "chokidar": "^3.5.3",
     "esbuild": "^0.19.0",
@@ -68,10 +75,12 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.17",
+    "@types/jsdom": "^27.0.0",
     "@types/node": "^20.0.0",
     "@types/ws": "^8.5.5",
     "acorn-walk": "^8.3.4",
     "jsdom": "^27.4.0",
+    "ts-node": "^10.9.2",
     "typescript": "^5.0.0"
   }
 }

package/lib/components/alert.ts

@@ -1,200 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['dismiss'] as const;
-
-export interface AlertOptions {
-    message?: string;
-    type?: 'info' | 'success' | 'warning' | 'error';
-    dismissible?: boolean;
-    icon?: string;
-    style?: string;
-    class?: string;
-}
-
-type AlertState = {
-    message: string;
-    type: string;
-    dismissible: boolean;
-    icon: string;
-    visible: boolean;
-    style: string;
-    class: string;
-};
-
-export class Alert extends BaseComponent<AlertState> {
-    private _alert: HTMLElement | null = null;
-
-    constructor(id: string, options: AlertOptions = {}) {
-        super(id, {
-            message: options.message ?? '',
-            type: options.type ?? 'info',
-            dismissible: options.dismissible ?? true,
-            icon: options.icon ?? '',
-            visible: true,
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    // ✅ Inherited from BaseComponent:
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - addClass(), removeClass(), toggleClass()
-    // - visible(), show(), hide(), toggleVisibility()
-    // - attr(), attrs(), removeAttr()
-    // - disabled(), enable(), disable()
-    // - loading(), focus(), blur(), remove()
-
-    message(value: string): this {
-        this.state.message = value;
-        return this;
-    }
-
-    type(value: 'info' | 'success' | 'warning' | 'error'): this {
-        this.state.type = value;
-        return this;
-    }
-
-    dismissible(value: boolean): this {
-        this.state.dismissible = value;
-        return this;
-    }
-
-    icon(value: string): this {
-        this.state.icon = value;
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string): this {
-        const container = this._setupContainer(targetId);
-
-        const { message, type, dismissible, icon, style, class: className } = this.state;
-        const hasVisibleSync = this._syncBindings.some(b => b.property === 'visible');
-
-        // Build alert element
-        const alert = document.createElement('div');
-        alert.className = `jux-alert jux-alert-${type}`;
-        alert.id = this._id;
-        if (className) alert.className += ` ${className}`;
-        if (style) alert.setAttribute('style', style);
-
-        if (icon) {
-            const iconEl = document.createElement('span');
-            iconEl.className = 'jux-alert-icon';
-            iconEl.appendChild(renderIcon(icon));
-            alert.appendChild(iconEl);
-        }
-
-        const content = document.createElement('div');
-        content.className = 'jux-alert-content';
-        content.textContent = message;
-        alert.appendChild(content);
-
-        if (dismissible) {
-            const closeBtn = document.createElement('button');
-            closeBtn.className = 'jux-alert-close';
-            closeBtn.innerHTML = '×';
-            alert.appendChild(closeBtn);
-        }
-
-        // Default dismiss behavior (only if NOT using sync)
-        if (!hasVisibleSync && dismissible) {
-            const closeBtn = alert.querySelector('.jux-alert-close');
-            closeBtn?.addEventListener('click', () => {
-                // 🎯 Fire the dismiss callback event
-                this._triggerCallback('dismiss');
-                alert.remove();
-            });
-        }
-
-        // Wire events using inherited method
-        this._wireStandardEvents(alert);
-
-        // Wire sync bindings
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'message') {
-                const transform = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transform(val);
-                    content.textContent = transformed;
-                    this.state.message = transformed;
-                });
-            }
-            else if (property === 'type') {
-                const transform = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transform(val);
-                    alert.className = `jux-alert jux-alert-${transformed}`;
-                    if (className) alert.className += ` ${className}`;
-                    this.state.type = transformed;
-                });
-            }
-            else if (property === 'visible') {
-                const transformToState = toState || ((v: any) => Boolean(v));
-                const transform = toComponent || ((v: any) => Boolean(v));
-
-                let isUpdating = false;
-
-                // State → Component
-                stateObj.subscribe((val: any) => {
-                    if (isUpdating) return;
-                    const transformed = transform(val);
-                    alert.style.display = transformed ? 'flex' : 'none';
-                });
-
-                // Component → State (close button)
-                if (dismissible) {
-                    const closeBtn = alert.querySelector('.jux-alert-close');
-                    closeBtn?.addEventListener('click', () => {
-                        if (isUpdating) return;
-                        isUpdating = true;
-
-                        alert.style.display = 'none';
-                        stateObj.set(transformToState(false));
-
-                        // 🎯 Fire the dismiss callback event
-                        this._triggerCallback('dismiss');
-
-                        setTimeout(() => { isUpdating = false; }, 0);
-                    });
-                }
-            }
-        });
-
-        container.appendChild(alert);
-        this._alert = alert;
-
-        requestAnimationFrame(() => {
-            if ((window as any).lucide) {
-                (window as any).lucide.createIcons();
-            }
-        });
-
-        return this;
-    }
-}
-
-export function alert(id: string, options: AlertOptions = {}): Alert {
-    return new Alert(id, options);
-}