juxscript 1.0.59 → 1.0.61

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

@@ -215,6 +215,7 @@ async function buildProject(isServe = false, wsPort = 3001) {
     fs.mkdirSync(PATHS.frontendDist, { recursive: true });
 
     // Step 1: Generate documentation
+    /*
     const docsStartTime = performance.now();
     let docsTime = 0; // ✅ Declare with default value
     console.log('📚 Generating documentation...');
@@ -226,6 +227,7 @@ async function buildProject(isServe = false, wsPort = 3001) {
       docsTime = performance.now() - docsStartTime; // ✅ Still calculate time even on error
       console.warn(`⚠️  Failed to generate docs (${docsTime.toFixed(0)}ms):`, error.message);
     }
+    */
 
     // Step 2: Copy jux lib to frontend dist
     const libStartTime = performance.now();
@@ -262,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`);
@@ -320,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('');
@@ -350,10 +330,10 @@ async function buildProject(isServe = false, wsPort = 3001) {
 
     // ✅ Copy presets/default/ directly to jux/ (no presets subfolder!)
     const defaultPresetSrc = path.join(PATHS.packageRoot, 'presets', 'default');
-    
+
     if (fs.existsSync(defaultPresetSrc)) {
       console.log('📦 Copying default preset boilerplate...');
-      
+
       const entries = fs.readdirSync(defaultPresetSrc, { withFileTypes: true });
       let copiedCount = 0;
 
@@ -401,7 +381,7 @@ jux.paragraph('counter')
     const pkgPath = path.join(PATHS.projectRoot, 'package.json');
     if (!fs.existsSync(pkgPath)) {
       const projectName = path.basename(PATHS.projectRoot).toLowerCase().replace(/[^a-z0-9-]/g, '-');
-      
+
       const pkgContent = {
         "name": projectName,
         "version": "0.1.0",
@@ -429,14 +409,14 @@ jux.paragraph('counter')
 
     // ✅ Copy juxconfig to root
     const configExampleSrc = path.join(PATHS.packageRoot, 'juxconfig.example.js');
-    
+
     if (fs.existsSync(configExampleSrc)) {
       const configDest = path.join(PATHS.projectRoot, 'juxconfig.js');
       if (!fs.existsSync(configDest)) {
         fs.copyFileSync(configExampleSrc, configDest);
         console.log('+ Created juxconfig.js');
       }
-      
+
       // ❌ REMOVE: Don't copy example - it's available in node_modules
       // const configExampleDest = path.join(PATHS.projectRoot, 'juxconfig.example.js');
       // if (!fs.existsSync(configExampleDest)) {

package/juxconfig.example.js

@@ -16,12 +16,21 @@ export default {
     // Application settings
     appName: 'My JUX App',
     autoRoutes: true,
-    
     // Directories
     sourceDir: 'jux',
     distDir: '.jux-dist',
 
-    // External services
+    // External services - used by jux.fetch and jux.fetch.serviceClient()
+    // Each service becomes available as a baseUrl for fetch requests
+    // 
+    // Usage in components:
+    //   const db = jux.fetch.serviceClient('database');
+    //   const { data } = await db.fetch('/users').send();
+    //   
+    //   // Or directly:
+    //   const { data } = await jux.fetch('/users')
+    //     .header('Authorization', 'Bearer token')
+    //     .send();
     services: {
         database: 'http://localhost:4000/api/db',
         auth: 'http://localhost:4000/api/auth',
@@ -34,6 +43,10 @@ export default {
         ws: 3001
     },
 
+    // Fetch configuration
+    fetchTimeout: 30000,  // milliseconds
+    fetchLog: false,      // true, false, or 'errors' for error-only logging
+
     // Build options
     build: {
         minify: false,
@@ -41,9 +54,18 @@ export default {
     },
 
     // Bootstrap functions (run on startup)
+    // Perfect place to initialize services and auth
     bootstrap: [
+        // Example: Setup fetch with service configuration
+        // async function initFetch() {
+        //   await jux.fetch.setupConfig();
+        //   console.log('✅ Fetch configured');
+        // },
+
+        // Example: Initialize authentication
         // async function initAuth() {
         //   console.log('🔐 Initializing auth...');
         // },
     ]
 };
+

package/lib/components/base/BaseComponent.ts

@@ -394,4 +394,24 @@ export abstract class BaseComponent<TState extends Record<string, any>> {
         }
         return this.render(`#${juxComponent._id}`);
     }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * PROPS ACCESSOR - Read-only access to component state
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * ✅ Read-only accessor for component state
+     * Provides clear separation between setters (fluent methods) and getters
+     * 
+     * @example
+     * const myCard = card('example')
+     *   .title('Hello')      // ✅ SETTER (fluent)
+     *   .content('World');   // ✅ SETTER (fluent)
+     * 
+     * console.log(myCard.props.title);    // ✅ GETTER: 'Hello'
+     * console.log(myCard.props.content);  // ✅ GETTER: 'World'
+     */
+    get props(): Readonly<TState> {
+        return this.state as Readonly<TState>;
+    }
 }

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);
+}