juxscript 1.0.60 → 1.0.62

package/README.md

@@ -1,4 +1,35 @@
-# The web needs a higher level of abstraction: Meet **JUX**
+# JUX - JavaScript UX Authorship Platform
+
+> Say goodbye to markup `</</>>>`. Build reactive UIs with pure JavaScript.
+
+## 🚀 Quick Start
+
+### Option 1: Create New Project (Recommended)
+
+```bash
+npx jux create my-app
+cd my-app
+npm run dev
+```
+
+### Option 2: Add to Existing Project
+
+```bash
+# Install juxscript first
+npm install juxscript
+
+# Then initialize
+npx jux init
+
+# Start dev server
+npx jux serve
+```
+
+## Why Install First?
+
+JUX uses `esbuild`, `express`, and other tools that must be installed before the CLI can run. When you run `npm install juxscript`, these dependencies are automatically installed.
+
+## The web needs a higher level of abstraction: Meet **JUX**
 
 
 ```diff

package/bin/cli.js

@@ -264,47 +264,24 @@ async function buildProject(isServe = false, wsPort = 3001) {
 
     // ✅ Bundle and get the generated filename
     const bundleStartTime = performance.now();
-    const mainJsFilename = await bundleJuxFilesToRouter(PATHS.juxSource, PATHS.frontendDist, {
+    const bundleResult = await bundleJuxFilesToRouter(PATHS.juxSource, PATHS.frontendDist, {
       routePrefix: ''
     });
     const bundleTime = performance.now() - bundleStartTime;
 
-    // Generate routes for index.html
-    const routes = projectJuxFiles.map(juxFile => {
-      const relativePath = path.relative(PATHS.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
     const indexStartTime = performance.now();
-    generateIndexHtml(PATHS.frontendDist, routes, mainJsFilename);
+    generateIndexHtml(PATHS.frontendDist, bundleResult);
     const indexTime = performance.now() - indexStartTime;
 
     const totalBuildTime = performance.now() - buildStartTime;
 
-    console.log(`\n✅ Bundled ${projectJuxFiles.length} page(s) → ${PATHS.frontendDist}/${mainJsFilename}\n`);
+    // ✅ FIX: Use bundleResult.mainJsFilename instead of bare mainJsFilename
+    console.log(`\n✅ Bundled ${projectJuxFiles.length} page(s) → ${PATHS.frontendDist}/${bundleResult.mainJsFilename}\n`);
 
     // ✅ Build summary with timing breakdown
     console.log(`📊 Build Summary:`);
     console.log(`   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
-    // console.log(`   Documentation:     ${docsTime.toFixed(0)}ms`);
     console.log(`   Library copy:      ${libTime.toFixed(0)}ms`);
     console.log(`   Presets copy:      ${presetsTime.toFixed(0)}ms`);
     console.log(`   Assets copy:       ${assetsTime.toFixed(0)}ms`);
@@ -322,7 +299,8 @@ async function buildProject(isServe = false, wsPort = 3001) {
       console.log(`   FastAPI:  app.mount("/", StaticFiles(directory="jux-dist"), name="static")`);
       console.log('');
       console.log('📍 Available routes:');
-      routes.forEach(r => {
+      // ✅ FIX: Use bundleResult.routes instead of local routes variable
+      bundleResult.routes.forEach(r => {
         console.log(`   ${r.path}`);
       });
       console.log('');

package/lib/components/chart.ts

@@ -0,0 +1,231 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { Chart, ChartConfiguration, ChartType, ChartOptions, ChartData } from 'chart.js/auto';
+
+// filepath: /Users/timkerr/newprojects2025/compile-sqljs/packages/jux/lib/components/chart.ts
+
+export interface ChartState {
+    type: ChartType;
+    data: ChartData;
+    options: ChartOptions;
+    style?: string;
+    class?: string;
+    visible?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+}
+
+/**
+ * Chart component using Chart.js
+ * Provides fluent API for creating and configuring charts
+ */
+export class ChartComponent extends BaseComponent<ChartState> {
+    private static readonly TRIGGER_EVENTS: readonly string[] = [];
+    private static readonly CALLBACK_EVENTS: readonly string[] = ['render', 'update', 'destroy'];
+    private chartInstance: Chart | null = null;
+
+    constructor(id: string, type: ChartType = 'bar', options?: Partial<ChartState>) {
+        super(id, {
+            type,
+            data: { datasets: [] },
+            options: {},
+            ...options
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return ChartComponent.TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return ChartComponent.CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * CHART TYPE
+     * ═════════════════════════════════════════════════════════════════ */
+
+    type(value: ChartType): this {
+        this.state.type = value;
+        if (this.chartInstance) {
+            // Destroy and recreate chart with new type
+            const canvas = this.chartInstance.canvas;
+            this.chartInstance.destroy();
+            const config: ChartConfiguration = {
+                type: this.state.type,
+                data: this.state.data,
+                options: this.state.options
+            };
+            this.chartInstance = new Chart(canvas, config);
+        }
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * DATA CONFIGURATION
+     * ═════════════════════════════════════════════════════════════════ */
+
+    data(value: ChartData): this {
+        this.state.data = value;
+        if (this.chartInstance) {
+            this.chartInstance.data = value;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    labels(value: string[]): this {
+        this.state.data.labels = value;
+        if (this.chartInstance) {
+            this.chartInstance.data.labels = value;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    datasets(value: any[]): this {
+        this.state.data.datasets = value;
+        if (this.chartInstance) {
+            this.chartInstance.data.datasets = value;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    addDataset(dataset: any): this {
+        this.state.data.datasets.push(dataset);
+        if (this.chartInstance) {
+            this.chartInstance.data.datasets.push(dataset);
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * OPTIONS CONFIGURATION
+     * ═════════════════════════════════════════════════════════════════ */
+
+    options(value: ChartOptions): this {
+        this.state.options = { ...this.state.options, ...value };
+        if (this.chartInstance) {
+            this.chartInstance.options = this.state.options;
+            this.chartInstance.update();
+        }
+        return this;
+    }
+
+    responsive(value: boolean = true): this {
+        return this.options({ responsive: value });
+    }
+
+    maintainAspectRatio(value: boolean = true): this {
+        return this.options({ maintainAspectRatio: value });
+    }
+
+    title(text: string, display: boolean = true): this {
+        return this.options({
+            plugins: {
+                ...this.state.options.plugins,
+                title: { display, text }
+            }
+        });
+    }
+
+    legend(display: boolean = true, position: 'top' | 'bottom' | 'left' | 'right' = 'top'): this {
+        return this.options({
+            plugins: {
+                ...this.state.options.plugins,
+                legend: { display, position }
+            }
+        });
+    }
+
+    tooltip(enabled: boolean = true): this {
+        return this.options({
+            plugins: {
+                ...this.state.options.plugins,
+                tooltip: { enabled }
+            }
+        });
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * CHART OPERATIONS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    update(mode?: 'resize' | 'reset' | 'none' | 'hide' | 'show' | 'default'): this {
+        if (this.chartInstance) {
+            this.chartInstance.update(mode);
+            this._triggerCallback('update', this.chartInstance);
+        }
+        return this;
+    }
+
+    reset(): this {
+        if (this.chartInstance) {
+            this.chartInstance.reset();
+        }
+        return this;
+    }
+
+    destroy(): this {
+        if (this.chartInstance) {
+            this.chartInstance.destroy();
+            this.chartInstance = null;
+            this._triggerCallback('destroy');
+        }
+        return this;
+    }
+
+    getChart(): Chart | null {
+        return this.chartInstance;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        // Destroy existing chart
+        if (this.chartInstance) {
+            this.chartInstance.destroy();
+        }
+
+        // Clear container and create canvas
+        container.innerHTML = '';
+        const canvas = document.createElement('canvas');
+        canvas.id = `${this._id}-canvas`;
+
+        // Apply styles and classes
+        if (this.state.style) container.setAttribute('style', this.state.style);
+        if (this.state.class) container.className = this.state.class;
+        if (this.state.visible === false) container.style.display = 'none';
+
+        container.appendChild(canvas);
+
+        // Create Chart.js instance
+        const config: ChartConfiguration = {
+            type: this.state.type,
+            data: this.state.data,
+            options: this.state.options
+        };
+
+        this.chartInstance = new Chart(canvas, config);
+
+        // Wire events and syncs
+        this._wireStandardEvents(container);
+        this._wireAllSyncs();
+
+        this._triggerCallback('render', this.chartInstance);
+
+        return this;
+    }
+}
+
+/**
+ * Factory function for creating chart components
+ */
+export function chart(id: string, type: ChartType = 'bar', options?: Partial<ChartState>): ChartComponent {
+    return new ChartComponent(id, type, options);
+}

package/machinery/ast.js

@@ -0,0 +1,347 @@
+import fs from 'fs';
+import path from 'path';
+import * as acorn from 'acorn';
+import { simple } from 'acorn-walk';
+import { glob } from 'glob';
+import { loadAndStripTypes, isTypeScript } from './ts-shim.js';
+
+const vendors = new Set();
+const processedFiles = new Set();
+const rels = new Map();
+const allFiles = new Set();
+const cssFiles = new Set();
+const assetFiles = new Set();
+
+// ✅ Define asset extensions to track
+const ASSET_EXTENSIONS = [
+    '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.bmp', '.ico',
+    '.mp4', '.mov', '.avi', '.webm', '.ogv',
+    '.mp3', '.wav', '.ogg', '.m4a',
+    '.woff', '.woff2', '.ttf', '.otf', '.eot',
+    '.json', '.xml', '.csv', '.txt',
+    '.pdf', '.doc', '.docx', '.zip'
+];
+
+function countAllSourceFiles(directories) {
+    const allFiles = new Set();
+
+    for (const dir of directories) {
+        const dirPath = path.resolve(dir);
+        if (!fs.existsSync(dirPath)) {
+            console.warn(`⚠️  Directory not found: ${dirPath}`);
+            continue;
+        }
+
+        const files = findSourceFiles(dirPath);
+        files.forEach(f => allFiles.add(f));
+    }
+
+    return allFiles;
+}
+
+function findSourceFiles(dir, fileList = []) {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+
+        if (entry.isDirectory()) {
+            if (!entry.name.startsWith('.') && entry.name !== 'node_modules') {
+                findSourceFiles(fullPath, fileList);
+            }
+        } else if (entry.isFile() && (entry.name.endsWith('.jux') || entry.name.endsWith('.js') || entry.name.endsWith('.ts'))) {
+            fileList.push(fullPath);
+        }
+    }
+
+    return fileList;
+}
+
+const getAllCode = (srcDir) => {
+    const pattern = path.join(srcDir, '**/*.{js,jux,ts}');
+    const files = glob.sync(pattern);
+    const codeMap = {};
+
+    files.forEach(filePath => {
+        const rawCode = fs.readFileSync(filePath, 'utf-8');
+        const code = loadAndStripTypes(filePath, rawCode);
+        codeMap[filePath] = code;
+    });
+
+    return codeMap;
+};
+
+const findAllRels = (code, sourceFile) => {
+    try {
+        const ast = acorn.parse(code, {
+            ecmaVersion: 'latest',
+            sourceType: 'module'
+        });
+
+        simple(ast, {
+            ImportDeclaration(node) {
+                const { value } = node.source;
+                if (/^[./]/.test(value)) {
+                    if (!rels.has(sourceFile)) {
+                        rels.set(sourceFile, new Set());
+                    }
+                    rels.get(sourceFile).add(value);
+                }
+            },
+            CallExpression(node) {
+                if (node.callee.type === 'MemberExpression' &&
+                    node.callee.object.name === 'jux' &&
+                    node.callee.property.name === 'include' &&
+                    node.arguments.length > 0 &&
+                    node.arguments[0].type === 'Literal') {
+
+                    const includePath = node.arguments[0].value;
+
+                    if (!rels.has(sourceFile)) {
+                        rels.set(sourceFile, new Set());
+                    }
+                    rels.get(sourceFile).add(includePath);
+                }
+            },
+            Literal(node) {
+                if (typeof node.value === 'string') {
+                    const val = node.value;
+
+                    if (/^[./]/.test(val)) {
+                        const ext = path.extname(val).toLowerCase();
+
+                        if (ASSET_EXTENSIONS.includes(ext)) {
+                            if (!rels.has(sourceFile)) {
+                                rels.set(sourceFile, new Set());
+                            }
+                            rels.get(sourceFile).add(val);
+                        }
+                    }
+                }
+            }
+        });
+    } catch (err) {
+        // Silent fail
+    }
+};
+
+const findVendors = (code) => {
+    try {
+        const ast = acorn.parse(code, {
+            ecmaVersion: 'latest',
+            sourceType: 'module'
+        });
+
+        simple(ast, {
+            ImportDeclaration(node) {
+                const { value } = node.source;
+                if (!/^[./]/.test(value)) {
+                    vendors.add(value);
+                }
+            }
+        });
+    } catch (err) {
+        // Silent fail
+    }
+};
+
+function processCodeDirs(directories) {
+    const allCodeMaps = {};
+    for (const dir of directories) {
+        const codeMap = getAllCode(dir);
+        Object.assign(allCodeMaps, codeMap);
+    }
+
+    Object.keys(allCodeMaps).forEach(filePath => {
+        allFiles.add(path.resolve(filePath));
+    });
+
+    for (const filePath in allCodeMaps) {
+        if (!processedFiles.has(filePath)) {
+            const code = allCodeMaps[filePath];
+            findVendors(code);
+            findAllRels(code, filePath);
+            processedFiles.add(filePath);
+        }
+    }
+
+    resolveAllRelativeImports();
+}
+
+function resolveAllRelativeImports() {
+    const visited = new Set();
+    const toProcess = Array.from(rels.keys());
+
+    while (toProcess.length > 0) {
+        const currentFile = toProcess.shift();
+
+        if (visited.has(currentFile)) continue;
+        visited.add(currentFile);
+
+        allFiles.add(currentFile);
+
+        const imports = rels.get(currentFile);
+        if (!imports) continue;
+
+        const sourceDir = path.dirname(currentFile);
+
+        imports.forEach(relImport => {
+            const basePath = path.resolve(sourceDir, relImport);
+
+            const ext = path.extname(relImport).toLowerCase();
+
+            if (ext === '.css') {
+                if (fs.existsSync(basePath)) {
+                    const absolutePath = path.resolve(basePath);
+                    allFiles.add(absolutePath);
+                    cssFiles.add(absolutePath);
+                }
+                return;
+            }
+
+            if (ASSET_EXTENSIONS.includes(ext)) {
+                if (fs.existsSync(basePath)) {
+                    const absolutePath = path.resolve(basePath);
+                    allFiles.add(absolutePath);
+                    assetFiles.add(absolutePath);
+                }
+                return;
+            }
+
+            const extensions = ['', '.js', '.jux', '.ts'];
+
+            for (const extSuffix of extensions) {
+                const fullPath = basePath + extSuffix;
+
+                if (fs.existsSync(fullPath)) {
+                    const absolutePath = path.resolve(fullPath);
+                    allFiles.add(absolutePath);
+
+                    if (!visited.has(fullPath) && !processedFiles.has(fullPath)) {
+                        try {
+                            const content = fs.readFileSync(fullPath, 'utf-8');
+                            const code = loadAndStripTypes(fullPath, content);
+
+                            findVendors(code);
+                            findAllRels(code, fullPath);
+                            processedFiles.add(fullPath);
+
+                            if (rels.has(fullPath)) {
+                                toProcess.push(fullPath);
+                            }
+                        } catch (err) {
+                            // Silent fail
+                        }
+                    }
+
+                    break;
+                }
+            }
+        });
+    }
+}
+
+// ✅ LEGACY EXPORTS (for backward compatibility)
+export const analyzeVendors = (files) => {
+    vendors.clear();
+    for (const filePath in files) {
+        if (filePath.endsWith('.js') || filePath.endsWith('.jux') || filePath.endsWith('.ts')) {
+            const rawCode = files[filePath];
+            const code = loadAndStripTypes(filePath, rawCode);
+            findVendors(code);
+        }
+    }
+    return Array.from(vendors);
+}
+
+export const clearVendors = () => {
+    vendors.clear();
+}
+
+export const getVendors = () => {
+    return Array.from(vendors);
+}
+
+// ✅ NEW: Main analysis function that returns everything
+export function analyzeProject(directories = ['./jux', './lib']) {
+    // Clear previous state
+    vendors.clear();
+    processedFiles.clear();
+    rels.clear();
+    allFiles.clear();
+    cssFiles.clear();
+    assetFiles.clear();
+
+    // Run analysis
+    processCodeDirs(directories);
+
+    // Return comprehensive analysis results
+    return {
+        vendors: Array.from(vendors),
+        allFiles: Array.from(allFiles),
+        cssFiles: Array.from(cssFiles),
+        assetFiles: Array.from(assetFiles),
+        relativeImports: rels,
+
+        // Categorized files
+        juxFiles: Array.from(allFiles).filter(f => f.endsWith('.jux')),
+        jsFiles: Array.from(allFiles).filter(f => f.endsWith('.js')),
+        tsFiles: Array.from(allFiles).filter(f => f.endsWith('.ts')),
+
+        // Asset breakdown
+        assets: {
+            images: Array.from(assetFiles).filter(f => {
+                const ext = path.extname(f).toLowerCase();
+                return ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.bmp', '.ico'].includes(ext);
+            }),
+            videos: Array.from(assetFiles).filter(f => {
+                const ext = path.extname(f).toLowerCase();
+                return ['.mp4', '.mov', '.avi', '.webm', '.ogv'].includes(ext);
+            }),
+            audio: Array.from(assetFiles).filter(f => {
+                const ext = path.extname(f).toLowerCase();
+                return ['.mp3', '.wav', '.ogg', '.m4a'].includes(ext);
+            }),
+            fonts: Array.from(assetFiles).filter(f => {
+                const ext = path.extname(f).toLowerCase();
+                return ['.woff', '.woff2', '.ttf', '.otf', '.eot'].includes(ext);
+            }),
+            data: Array.from(assetFiles).filter(f => {
+                const ext = path.extname(f).toLowerCase();
+                return ['.json', '.xml', '.csv', '.txt'].includes(ext);
+            })
+        },
+
+        // Summary stats
+        stats: {
+            totalFiles: allFiles.size,
+            totalVendors: vendors.size,
+            totalCSS: cssFiles.size,
+            totalAssets: assetFiles.size,
+            filesWithImports: rels.size
+        }
+    };
+}
+
+// ✅ Export constants
+export { ASSET_EXTENSIONS };
+
+export default {
+    analyzeProject,
+    analyzeVendors,
+    clearVendors,
+    getVendors,
+    ASSET_EXTENSIONS
+};
+
+function main() {
+    const analysis = analyzeProject(['./jux', './lib']);
+
+    console.log('External vendors:', analysis.vendors);
+    console.log('Total files:', analysis.stats.totalFiles);
+}
+
+// Only run main if executed directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+    main();
+}