juxscript 1.1.3 → 1.1.4

package/machinery/build3.js

@@ -18,31 +18,23 @@ try {
 }
 
 // ═══════════════════════════════════════════════════════════════
-// EXPLODE CONFIG INTO NAMED OBJECTS
+// EXPLODE CONFIG
 // ═══════════════════════════════════════════════════════════════
 const directories = {
     source: rawConfig.directories?.source || './jux',
-    distribution: rawConfig.directories?.distribution || './.jux-dist',
-    themes: rawConfig.directories?.themes || './themes',
-    layouts: rawConfig.directories?.layouts || './themes/layouts',
-    assets: rawConfig.directories?.assets || './themes/assets'
+    distribution: rawConfig.directories?.distribution || './.jux-dist'
 };
 
 const defaults = {
     httpPort: rawConfig.defaults?.httpPort || 3000,
     wsPort: rawConfig.defaults?.wsPort || 3001,
-    autoRoute: rawConfig.defaults?.autoRoute ?? true,
-    layout: rawConfig.defaults?.layout || null,
-    theme: rawConfig.defaults?.theme || null
+    autoRoute: rawConfig.defaults?.autoRoute ?? true
 };
 
 // Resolve absolute paths
 const paths = {
     source: path.resolve(PROJECT_ROOT, directories.source),
-    distribution: path.resolve(PROJECT_ROOT, directories.distribution),
-    themes: path.resolve(PROJECT_ROOT, directories.source, directories.themes),
-    layouts: path.resolve(PROJECT_ROOT, directories.source, directories.layouts),
-    assets: path.resolve(PROJECT_ROOT, directories.source, directories.assets)
+    distribution: path.resolve(PROJECT_ROOT, directories.distribution)
 };
 
 // ═══════════════════════════════════════════════════════════════
@@ -50,84 +42,10 @@ const paths = {
 // ═══════════════════════════════════════════════════════════════
 console.log(`\n📁 Directory Check:`);
 
-const dirStatus = {};
-for (const [name, dirPath] of Object.entries(paths)) {
-    if (name === 'distribution') continue;
-
-    const exists = fs.existsSync(dirPath);
-    dirStatus[name] = exists;
-
-    const icon = exists ? '✓' : '✗';
-    const suffix = exists ? '' : ' (will be skipped)';
-    console.log(`   ${icon} ${name}: ${dirPath}${suffix}`);
-}
-
-// ═══════════════════════════════════════════════════════════════
-// RESOLVE DEFAULT LAYOUT & THEME
-// ═══════════════════════════════════════════════════════════════
-function resolveFile(filename, ...searchPaths) {
-    if (!filename) return null;
-
-    // First try the filename as-is
-    if (fs.existsSync(filename)) {
-        return path.resolve(filename);
-    }
-
-    // Try each search path
-    for (const searchPath of searchPaths) {
-        if (!searchPath || !fs.existsSync(searchPath)) continue;
-
-        const fullPath = path.resolve(searchPath, filename);
-        if (fs.existsSync(fullPath)) {
-            return fullPath;
-        }
-    }
-
-    return null;
-}
-
-console.log(`\n🎨 Defaults Resolution:`);
-
-// Resolve layout
-const layoutPath = defaults.layout ? resolveFile(
-    defaults.layout,
-    paths.layouts,
-    paths.source,
-    PROJECT_ROOT
-) : null;
-
-if (defaults.layout) {
-    if (layoutPath) {
-        console.log(`   ✓ layout: ${layoutPath}`);
-    } else {
-        console.log(`   ✗ layout: "${defaults.layout}" not found, will be skipped`);
-    }
+if (fs.existsSync(paths.source)) {
+    console.log(`   ✓ source: ${paths.source}`);
 } else {
-    console.log(`   - layout: not configured`);
-}
-
-// Resolve theme
-const themePath = defaults.theme ? resolveFile(
-    defaults.theme,
-    paths.themes,
-    paths.source,
-    PROJECT_ROOT
-) : null;
-
-if (defaults.theme) {
-    if (themePath) {
-        console.log(`   ✓ theme: ${themePath}`);
-    } else {
-        console.log(`   ✗ theme: "${defaults.theme}" not found, will be skipped`);
-    }
-} else {
-    console.log(`   - theme: not configured`);
-}
-
-// ═══════════════════════════════════════════════════════════════
-// VALIDATE SOURCE DIRECTORY EXISTS
-// ═══════════════════════════════════════════════════════════════
-if (!dirStatus.source) {
+    console.log(`   ✗ source: ${paths.source} (not found)`);
     console.error(`\n❌ Source directory not found: ${paths.source}`);
     console.error(`   Create the directory or update juxconfig.js`);
     process.exit(1);
@@ -141,8 +59,6 @@ console.log(`\n`);
 const compiler = new JuxCompiler({
     srcDir: paths.source,
     distDir: paths.distribution,
-    layoutPath,
-    themePath,
     defaults,
     paths
 });

package/machinery/compiler3.js

@@ -13,8 +13,6 @@ export class JuxCompiler {
         this.config = config;
         this.srcDir = config.srcDir || './jux';
         this.distDir = config.distDir || './.jux-dist';
-        this.layoutPath = config.layoutPath || null;
-        this.themePath = config.themePath || null;
         this.defaults = config.defaults || {};
         this.paths = config.paths || {};
         this._juxscriptExports = null;
@@ -94,163 +92,8 @@ export class JuxCompiler {
     }
 
     /**
-     * Copy all source assets (themes, layouts, assets folders) to dist
+     * Generate entry point without layout/theme logic
      */
-    copySourceAssets() {
-        const copied = { themes: 0, layouts: 0, assets: 0, other: 0 };
-
-        const copyDir = (srcDir, destDir, category) => {
-            if (!fs.existsSync(srcDir)) return 0;
-
-            let count = 0;
-            fs.mkdirSync(destDir, { recursive: true });
-
-            const entries = fs.readdirSync(srcDir, { withFileTypes: true });
-            for (const entry of entries) {
-                const srcPath = path.join(srcDir, entry.name);
-                const destPath = path.join(destDir, entry.name);
-
-                if (entry.isDirectory()) {
-                    count += copyDir(srcPath, destPath, category);
-                } else {
-                    fs.copyFileSync(srcPath, destPath);
-                    count++;
-                }
-            }
-            return count;
-        };
-
-        // Copy themes folder
-        if (this.paths.themes && fs.existsSync(this.paths.themes)) {
-            copied.themes = copyDir(this.paths.themes, path.join(this.distDir, 'themes'), 'themes');
-        }
-
-        // Copy layouts folder (if separate from themes)
-        if (this.paths.layouts && fs.existsSync(this.paths.layouts) && this.paths.layouts !== this.paths.themes) {
-            copied.layouts = copyDir(this.paths.layouts, path.join(this.distDir, 'layouts'), 'layouts');
-        }
-
-        // Copy assets folder
-        if (this.paths.assets && fs.existsSync(this.paths.assets)) {
-            copied.assets = copyDir(this.paths.assets, path.join(this.distDir, 'assets'), 'assets');
-        }
-
-        const total = copied.themes + copied.layouts + copied.assets;
-        if (total > 0) {
-            console.log(`📂 Copied source assets: ${copied.themes} themes, ${copied.layouts} layouts, ${copied.assets} assets`);
-        }
-
-        return copied;
-    }
-
-    /**
-     * Generate CSS links including theme if configured
-     */
-    generateCssLinks() {
-        const links = [];
-
-        // Note: Component CSS is no longer bundled (handled by Styler)
-
-        // User theme CSS
-        if (this.themePath) {
-            const themeName = path.basename(this.themePath);
-            links.push(`    <link rel="stylesheet" href="./themes/${themeName}" id="jux-theme">`);
-            console.log(`🎨 🎨 🎨 🎨 Included theme: ${themeName} 🎨 🎨 🎨 🎨 `);
-        }
-
-        return links.join('\n');
-    }
-
-    async loadJuxscriptExports() {
-        if (this._juxscriptExports) return this._juxscriptExports;
-
-        try {
-            const juxscriptPath = this.findJuxscriptPath();
-            if (juxscriptPath) {
-                const indexContent = fs.readFileSync(juxscriptPath, 'utf8');
-                const exports = new Set();
-
-                for (const match of indexContent.matchAll(/export\s*\{\s*([^}]+)\s*\}/g)) {
-                    match[1].split(',').forEach(exp => {
-                        const name = exp.trim().split(/\s+as\s+/)[0].trim();
-                        if (name) exports.add(name);
-                    });
-                }
-
-                this._juxscriptExports = [...exports];
-                if (this._juxscriptExports.length > 0) {
-                    console.log(`📦 juxscript exports: ${this._juxscriptExports.join(', ')}`);
-                }
-            }
-        } catch (err) {
-            this._juxscriptExports = [];
-        }
-
-        return this._juxscriptExports;
-    }
-
-    validateViewCode(viewName, code) {
-        const issues = [];
-
-        let ast;
-        try {
-            ast = acorn.parse(code, { ecmaVersion: 'latest', sourceType: 'module', locations: true });
-        } catch (parseError) {
-            issues.push({
-                type: 'error',
-                view: viewName,
-                line: parseError.loc?.line || 0,
-                message: `Syntax error: ${parseError.message}`,
-                code: ''
-            });
-            return issues;
-        }
-
-        const allImports = new Set();
-
-        walk(ast, {
-            ImportDeclaration(node) {
-                node.specifiers.forEach(spec => {
-                    allImports.add(spec.local.name);
-                });
-            }
-        });
-
-        // Default known facades/components if load fails
-        const knownComponents = this._juxscriptExports || ['element', 'input', 'buttonGroup'];
-
-        walk(ast, {
-            Identifier(node, parent) {
-                if (parent?.type === 'CallExpression' && parent.callee === node) {
-                    const name = node.name;
-                    // Updated: Removed strict Capitalization check to allow facades (lowercase)
-                    if (!allImports.has(name) && knownComponents.includes(name)) {
-                        issues.push({
-                            type: 'warning',
-                            view: viewName,
-                            line: node.loc?.start?.line || 0,
-                            message: `"${name}" is used but not imported from juxscript`,
-                            code: ''
-                        });
-                    }
-                }
-            }
-        });
-
-        return issues;
-    }
-
-    /**
-     * Extract layout function name from layout file
-     */
-    getLayoutFunctionName() {
-        if (!this.layoutPath || !fs.existsSync(this.layoutPath)) return null;
-
-        const content = fs.readFileSync(this.layoutPath, 'utf8');
-        const match = content.match(/export\s+function\s+(\w+)/);
-        return match ? match[1] : null;
-    }
-
     generateEntryPoint(views, dataModules, sharedModules) {
         let entry = `// Auto-generated JUX entry point\n\n`;
         const allIssues = [];
@@ -265,16 +108,6 @@ export class JuxCompiler {
             }
         });
 
-        // Check layout file for juxscript imports too
-        if (this.layoutPath && fs.existsSync(this.layoutPath)) {
-            const layoutContent = fs.readFileSync(this.layoutPath, 'utf8');
-            for (const match of layoutContent.matchAll(/import\s*\{\s*([^}]+)\s*\}\s*from\s*['"]juxscript['"]/g)) {
-                match[1].split(',').map(s => s.trim()).forEach(imp => {
-                    if (imp) juxImports.add(imp);
-                });
-            }
-        }
-
         if (juxImports.size > 0) {
             entry += `import { ${[...juxImports].sort().join(', ')} } from 'juxscript';\n\n`;
         }
@@ -294,25 +127,6 @@ export class JuxCompiler {
             entry += `\nObject.assign(window, { ${[...juxImports].join(', ')} });\n`;
         }
 
-        // Add layout function if configured
-        const layoutFnName = this.getLayoutFunctionName();
-        if (layoutFnName && this.layoutPath) {
-            const layoutContent = fs.readFileSync(this.layoutPath, 'utf8');
-            const layoutCode = this.removeImports(layoutContent);
-            entry += `\n// --- DEFAULT LAYOUT ---\n`;
-            entry += layoutCode;
-            entry += `\n`;
-
-            // Store in source snapshot
-            const layoutFile = path.basename(this.layoutPath);
-            sourceSnapshot[layoutFile] = {
-                name: 'layout',
-                file: layoutFile,
-                content: layoutContent,
-                lines: layoutContent.split('\n')
-            };
-        }
-
         entry += `\n// --- VIEW FUNCTIONS ---\n`;
 
         views.forEach(v => {
@@ -341,7 +155,6 @@ export class JuxCompiler {
 
         this._sourceSnapshot = sourceSnapshot;
         this._validationIssues = allIssues;
-        this._layoutFnName = layoutFnName;
         entry += this._generateRouter(views);
         return entry;
     }
@@ -371,11 +184,6 @@ export class JuxCompiler {
             routeMap += `  '/${v.name.toLowerCase()}': render${cap},\n`;
         });
 
-        // Initialize layout call if configured
-        const layoutInit = this._layoutFnName
-            ? `\n// Initialize default layout\nif (typeof ${this._layoutFnName} === 'function') {\n    ${this._layoutFnName}();\n}\n`
-            : '';
-
         return `
 // --- JUX SOURCE LOADER ---
 var __juxSources = null;
@@ -400,14 +208,6 @@ function __juxFindSource(stack) {
             }
         }
     }
-    // Also check for layout
-    if (stack.indexOf('Layout') > -1) {
-        for (var file in __juxSources || {}) {
-            if (file.indexOf('layout') > -1) {
-                return { file: file, source: __juxSources[file] };
-            }
-        }
-    }
     return null;
 }
 
@@ -508,7 +308,7 @@ window.addEventListener('unhandledrejection', function(e) { __juxErrorOverlay.sh
 
 // --- JUX ROUTER ---
 const routes = {\n${routeMap}};
-${layoutInit}
+
 async function navigate(path) {
     const view = routes[path];
     if (!view) {
@@ -555,9 +355,6 @@ navigate(location.pathname);
         const { views, dataModules, sharedModules } = this.scanFiles();
         console.log(`📁 Found ${views.length} views, ${sharedModules.length} shared, ${dataModules.length} data`);
 
-        // Copy source assets (themes, layouts, assets)
-        this.copySourceAssets();
-
         // Copy data/shared modules to dist
         const juxDistDir = path.join(this.distDir, 'jux');
         fs.mkdirSync(juxDistDir, { recursive: true });
@@ -602,7 +399,6 @@ navigate(location.pathname);
             return { success: false, errors: [{ message: err.message }], warnings: [] };
         }
 
-        // Generate HTML with layout container sibling to app
         const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -612,9 +408,7 @@ navigate(location.pathname);
     <script type="module" src="./bundle.js"></script>
 </head>
 <body>
-     <div id="jux-layout">
-        <div id="app"></div>
-     </div>
+    <div id="app"></div>
 </body>
 </html>`;
         fs.writeFileSync(path.join(this.distDir, 'index.html'), html);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",
@@ -19,14 +19,25 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "bin",
-    "lib",
-    "machinery",
     "index.js",
     "index.d.ts",
+    "bin",
+    "create/*.jux",
+    "lib/**/*.js",
+    "lib/**/*.d.ts",
+    "machinery/build3.js",
+    "machinery/compiler3.js",
+    "machinery/config.js",
+    "machinery/serve.js",
+    "machinery/watcher.js",
+    "types",
     "juxconfig.example.js",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "!lib/**/*.test.js",
+    "!lib/**/*.spec.js",
+    "!lib/previews/**",
+    "!**/*.map"
   ],
   "bin": {
     "jux": "./bin/cli.js"
@@ -46,6 +57,7 @@
   },
   "dependencies": {
     "acorn": "^8.15.0",
+    "astray": "^1.1.1",
     "axios": "^1.6.0",
     "chart.js": "^4.5.1",
     "esbuild": "^0.19.0",
@@ -54,10 +66,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 {
-    content?: string;
-    type?: 'info' | 'success' | 'warning' | 'error';
-    dismissible?: boolean;
-    icon?: string;
-    style?: string;
-    class?: string;
-}
-
-type AlertState = {
-    content: 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, {
-            content: options.content ?? '',
-            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()
-
-    content(value: string): this {
-        this.state.content = 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 { content, 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 contentEl = document.createElement('div');
-        contentEl.className = 'jux-alert-content';
-        contentEl.textContent = content;
-        alert.appendChild(contentEl);
-
-        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 === 'content') {
-                const transform = toComponent || ((v: any) => String(v));
-
-                stateObj.subscribe((val: any) => {
-                    const transformed = transform(val);
-                    contentEl.textContent = transformed;
-                    this.state.content = 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);
-}