juxscript 1.0.131 → 1.1.0

package/README.md

@@ -1,35 +1,4 @@
-# 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**
+# The web needs a higher level of abstraction: Meet **JUX**
 
 
 ```diff

package/bin/cli.js

@@ -42,9 +42,10 @@ async function createProject(projectName) {
     // Fallback: create minimal starter
     const juxDir = path.join(targetDir, 'jux');
     fs.mkdirSync(juxDir, { recursive: true });
+    // Updated to use jux namespace and renderTo
     fs.writeFileSync(
       path.join(juxDir, 'index.jux'),
-      `import { Element } from 'juxscript';\n\nElement('welcome', { tagName: 'h1' })\n    .text('Welcome to JUX!')\n    .render('app');\n`
+      `import { jux } from 'juxscript';\n\njux.element('h1', { id: 'welcome' })\n    .text('Welcome to JUX!')\n    .renderTo('app');\n`
     );
     console.log('   ✓ Created starter file');
   }
@@ -120,9 +121,10 @@ function initProject() {
     copyDirRecursive(templateDir, juxDir);
     console.log('   ✓ Copied template files to ./jux');
   } else {
+    // Updated to use jux namespace and renderTo
     fs.writeFileSync(
       path.join(juxDir, 'index.jux'),
-      `import { Element } from 'juxscript';\n\nElement('welcome', { tagName: 'h1' })\n    .text('Welcome to JUX!')\n    .render('app');\n`
+      `import { jux } from 'juxscript';\n\njux.element('h1', { id: 'welcome' })\n    .text('Welcome to JUX!')\n    .renderTo('app');\n`
     );
     console.log('   ✓ Created starter file');
   }

package/index.d.ts

@@ -0,0 +1,200 @@
+import { alert } from './lib/components/alert.js';
+import { app } from './lib/components/app.js';
+import { badge } from './lib/components/badge.js';
+import { button } from './lib/components/button.js';
+import { card } from './lib/components/card.js';
+import { chart } from './lib/components/chart.js';
+import { checkbox } from './lib/components/checkbox.js';
+import { code } from './lib/components/code.js';
+import { container } from './lib/components/container.js';
+import { data } from './lib/components/data.js';
+import { datepicker } from './lib/components/datepicker.js';
+import { dialog } from './lib/components/dialog.js';
+import { divider } from './lib/components/divider.js';
+import { dropdown } from './lib/components/dropdown.js';
+import { element } from './lib/components/element.js';
+import { fileupload } from './lib/components/fileupload.js';
+import { grid } from './lib/components/grid.js';
+import { guard } from './lib/components/guard.js';
+import { heading } from './lib/components/heading.js';
+import { getOrCreateContainer } from './lib/components/helpers.js';
+import { hero } from './lib/components/hero.js';
+import { icon } from './lib/components/icon.js';
+import { include } from './lib/components/include.js';
+import { input } from './lib/components/input.js';
+import { list } from './lib/components/list.js';
+import { loading } from './lib/components/loading.js';
+import { menu } from './lib/components/menu.js';
+import { modal } from './lib/components/modal.js';
+import { nav } from './lib/components/nav.js';
+import { paragraph } from './lib/components/paragraph.js';
+import { progress } from './lib/components/progress.js';
+import { radio } from './lib/components/radio.js';
+import { script } from './lib/components/script.js';
+import { select } from './lib/components/select.js';
+import { sidebar } from './lib/components/sidebar.js';
+import { style } from './lib/components/style.js';
+import { switchComponent } from './lib/components/switch.js';
+import { table } from './lib/components/table.js';
+import { tabs } from './lib/components/tabs.js';
+import { themeToggle } from './lib/components/theme-toggle.js';
+import { tooltip } from './lib/components/tooltip.js';
+import { view } from './lib/components/view.js';
+import { write } from './lib/components/write.js';
+import { renderIcon, renderEmoji } from './lib/components/icons.js';
+export declare const jux: {
+    alert: typeof alert;
+    app: typeof app;
+    badge: typeof badge;
+    button: typeof button;
+    card: typeof card;
+    chart: typeof chart;
+    checkbox: typeof checkbox;
+    code: typeof code;
+    container: typeof container;
+    data: typeof data;
+    datepicker: typeof datepicker;
+    dialog: typeof dialog;
+    divider: typeof divider;
+    dropdown: typeof dropdown;
+    element: typeof element;
+    fileupload: typeof fileupload;
+    grid: typeof grid;
+    guard: typeof guard;
+    heading: typeof heading;
+    hero: typeof hero;
+    icon: typeof icon;
+    include: typeof include;
+    input: typeof input;
+    list: typeof list;
+    loading: typeof loading;
+    menu: typeof menu;
+    modal: typeof modal;
+    nav: typeof nav;
+    paragraph: typeof paragraph;
+    progress: typeof progress;
+    radio: typeof radio;
+    req: import("./lib/components/req.js").Req;
+    script: typeof script;
+    select: typeof select;
+    sidebar: typeof sidebar;
+    style: typeof style;
+    switch: typeof switchComponent;
+    table: typeof table;
+    tabs: typeof tabs;
+    themeToggle: typeof themeToggle;
+    tooltip: typeof tooltip;
+    view: typeof view;
+    write: typeof write;
+    fetch: typeof import("./lib/utils/fetch.js").juxFetch & {
+        all: typeof import("./lib/utils/fetch.js").fetchAll;
+        get: <T = any>(url: string, options?: Omit<import("./lib/utils/fetch.js").FetchOptions, "method">) => {
+            url: string;
+            options: import("./lib/utils/fetch.js").FetchOptions;
+            method(value: string): /*elided*/ any;
+            body(value: any): /*elided*/ any;
+            params(value: Record<string, any>): /*elided*/ any;
+            headers(value: Record<string, string>): /*elided*/ any;
+            header(key: string, value: string): /*elided*/ any;
+            timeout(value: number): /*elided*/ any;
+            credentials(value: RequestCredentials): /*elided*/ any;
+            log(value: import("./lib/utils/fetch.js").LogLevel): /*elided*/ any;
+            parseResponse(value: boolean): /*elided*/ any;
+            onUnauthorized(callback: () => void): /*elided*/ any;
+            onError(callback: (error: import("./lib/utils/fetch.js").FetchError) => void): /*elided*/ any;
+            send(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+            fetch(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: (value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>, onrejected?: (reason: any) => TResult2 | PromiseLike<TResult2>): Promise<TResult1 | TResult2>;
+            catch<TResult = never>(onrejected?: (reason: any) => TResult | PromiseLike<TResult>): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
+            finally(onfinally?: (() => void) | null): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+        };
+        post: <T = any>(url: string, body?: any, options?: Omit<import("./lib/utils/fetch.js").FetchOptions, "method" | "body">) => {
+            url: string;
+            options: import("./lib/utils/fetch.js").FetchOptions;
+            method(value: string): /*elided*/ any;
+            body(value: any): /*elided*/ any;
+            params(value: Record<string, any>): /*elided*/ any;
+            headers(value: Record<string, string>): /*elided*/ any;
+            header(key: string, value: string): /*elided*/ any;
+            timeout(value: number): /*elided*/ any;
+            credentials(value: RequestCredentials): /*elided*/ any;
+            log(value: import("./lib/utils/fetch.js").LogLevel): /*elided*/ any;
+            parseResponse(value: boolean): /*elided*/ any;
+            onUnauthorized(callback: () => void): /*elided*/ any;
+            onError(callback: (error: import("./lib/utils/fetch.js").FetchError) => void): /*elided*/ any;
+            send(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+            fetch(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: (value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>, onrejected?: (reason: any) => TResult2 | PromiseLike<TResult2>): Promise<TResult1 | TResult2>;
+            catch<TResult = never>(onrejected?: (reason: any) => TResult | PromiseLike<TResult>): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
+            finally(onfinally?: (() => void) | null): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+        };
+        put: <T = any>(url: string, body?: any, options?: Omit<import("./lib/utils/fetch.js").FetchOptions, "method" | "body">) => {
+            url: string;
+            options: import("./lib/utils/fetch.js").FetchOptions;
+            method(value: string): /*elided*/ any;
+            body(value: any): /*elided*/ any;
+            params(value: Record<string, any>): /*elided*/ any;
+            headers(value: Record<string, string>): /*elided*/ any;
+            header(key: string, value: string): /*elided*/ any;
+            timeout(value: number): /*elided*/ any;
+            credentials(value: RequestCredentials): /*elided*/ any;
+            log(value: import("./lib/utils/fetch.js").LogLevel): /*elided*/ any;
+            parseResponse(value: boolean): /*elided*/ any;
+            onUnauthorized(callback: () => void): /*elided*/ any;
+            onError(callback: (error: import("./lib/utils/fetch.js").FetchError) => void): /*elided*/ any;
+            send(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+            fetch(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: (value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>, onrejected?: (reason: any) => TResult2 | PromiseLike<TResult2>): Promise<TResult1 | TResult2>;
+            catch<TResult = never>(onrejected?: (reason: any) => TResult | PromiseLike<TResult>): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
+            finally(onfinally?: (() => void) | null): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+        };
+        patch: <T = any>(url: string, body?: any, options?: Omit<import("./lib/utils/fetch.js").FetchOptions, "method" | "body">) => {
+            url: string;
+            options: import("./lib/utils/fetch.js").FetchOptions;
+            method(value: string): /*elided*/ any;
+            body(value: any): /*elided*/ any;
+            params(value: Record<string, any>): /*elided*/ any;
+            headers(value: Record<string, string>): /*elided*/ any;
+            header(key: string, value: string): /*elided*/ any;
+            timeout(value: number): /*elided*/ any;
+            credentials(value: RequestCredentials): /*elided*/ any;
+            log(value: import("./lib/utils/fetch.js").LogLevel): /*elided*/ any;
+            parseResponse(value: boolean): /*elided*/ any;
+            onUnauthorized(callback: () => void): /*elided*/ any;
+            onError(callback: (error: import("./lib/utils/fetch.js").FetchError) => void): /*elided*/ any;
+            send(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+            fetch(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: (value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>, onrejected?: (reason: any) => TResult2 | PromiseLike<TResult2>): Promise<TResult1 | TResult2>;
+            catch<TResult = never>(onrejected?: (reason: any) => TResult | PromiseLike<TResult>): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
+            finally(onfinally?: (() => void) | null): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+        };
+        delete: <T = any>(url: string, options?: Omit<import("./lib/utils/fetch.js").FetchOptions, "method">) => {
+            url: string;
+            options: import("./lib/utils/fetch.js").FetchOptions;
+            method(value: string): /*elided*/ any;
+            body(value: any): /*elided*/ any;
+            params(value: Record<string, any>): /*elided*/ any;
+            headers(value: Record<string, string>): /*elided*/ any;
+            header(key: string, value: string): /*elided*/ any;
+            timeout(value: number): /*elided*/ any;
+            credentials(value: RequestCredentials): /*elided*/ any;
+            log(value: import("./lib/utils/fetch.js").LogLevel): /*elided*/ any;
+            parseResponse(value: boolean): /*elided*/ any;
+            onUnauthorized(callback: () => void): /*elided*/ any;
+            onError(callback: (error: import("./lib/utils/fetch.js").FetchError) => void): /*elided*/ any;
+            send(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+            fetch(): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+            then<TResult1 = import("./lib/utils/fetch.js").FetchResult<T>, TResult2 = never>(onfulfilled?: (value: import("./lib/utils/fetch.js").FetchResult<T>) => TResult1 | PromiseLike<TResult1>, onrejected?: (reason: any) => TResult2 | PromiseLike<TResult2>): Promise<TResult1 | TResult2>;
+            catch<TResult = never>(onrejected?: (reason: any) => TResult | PromiseLike<TResult>): Promise<import("./lib/utils/fetch.js").FetchResult<T> | TResult>;
+            finally(onfinally?: (() => void) | null): Promise<import("./lib/utils/fetch.js").FetchResult<T>>;
+        };
+        config: typeof import("./lib/utils/fetch.js").configureFetch;
+        setupConfig: typeof import("./lib/utils/fetch.js").setupConfig;
+        getServiceUrl: typeof import("./lib/utils/fetch.js").getServiceUrl;
+        serviceClient: typeof import("./lib/utils/fetch.js").serviceClient;
+    };
+    renderIcon: typeof renderIcon;
+    renderEmoji: typeof renderEmoji;
+    getOrCreateContainer: typeof getOrCreateContainer;
+};
+//# sourceMappingURL=index.d.ts.map

package/index.js

@@ -1,22 +1,96 @@
-/**
- * JUX - JavaScript UX Authorship Platform
- * 
- * Main entry point for the juxscript package.
- * Re-exports all public components and utilities.
- */
-
-// Core Components
-export { Element } from './lib/componentsv2/element/Element.js';
-export { Grid } from './lib/componentsv2/grid/Grid.js';
-export { Input } from './lib/componentsv2/input/Input.js';
-export { List } from './lib/componentsv2/list/List.js';
-
-// Base Classes (for extension)
-// Note: BaseState is a TypeScript interface, not exported at runtime
-export { BaseEngine } from './lib/componentsv2/base/BaseEngine.js';
-export { BaseSkin } from './lib/componentsv2/base/BaseSkin.js';
-export { State } from './lib/componentsv2/base/State.js';
-export { Neighborhood } from './lib/componentsv2/base/Neighborhood.js';
-
-// Utilities
-export { validateOptions } from './lib/componentsv2/base/OptionsContract.js';
+import { alert } from './lib/components/alert.js';
+import { app } from './lib/components/app.js';
+import { badge } from './lib/components/badge.js';
+import { button } from './lib/components/button.js';
+import { card } from './lib/components/card.js';
+import { chart } from './lib/components/chart.js';
+import { checkbox } from './lib/components/checkbox.js';
+import { code } from './lib/components/code.js';
+import { container } from './lib/components/container.js';
+import { data } from './lib/components/data.js';
+import { datepicker } from './lib/components/datepicker.js';
+import { dialog } from './lib/components/dialog.js';
+import { divider } from './lib/components/divider.js';
+import { dropdown } from './lib/components/dropdown.js';
+import { element } from './lib/components/element.js';
+import { fileupload } from './lib/components/fileupload.js';
+import { grid } from './lib/components/grid.js';
+import { guard } from './lib/components/guard.js';
+import { heading } from './lib/components/heading.js';
+import { getOrCreateContainer } from './lib/components/helpers.js';
+import { hero } from './lib/components/hero.js';
+import { icon } from './lib/components/icon.js';
+import { include } from './lib/components/include.js';
+import { input } from './lib/components/input.js';
+import { list } from './lib/components/list.js';
+import { loading } from './lib/components/loading.js';
+import { menu } from './lib/components/menu.js';
+import { modal } from './lib/components/modal.js';
+import { nav } from './lib/components/nav.js';
+import { paragraph } from './lib/components/paragraph.js';
+import { progress } from './lib/components/progress.js';
+import { radio } from './lib/components/radio.js';
+import { req } from './lib/components/req.js';
+import { script } from './lib/components/script.js';
+import { select } from './lib/components/select.js';
+import { sidebar } from './lib/components/sidebar.js';
+import { style } from './lib/components/style.js';
+import { switchComponent } from './lib/components/switch.js';
+import { table } from './lib/components/table.js';
+import { tabs } from './lib/components/tabs.js';
+import { themeToggle } from './lib/components/theme-toggle.js';
+import { tooltip } from './lib/components/tooltip.js';
+import { view } from './lib/components/view.js';
+import { write } from './lib/components/write.js';
+import { fetchAPI } from './lib/utils/fetch.js';
+import { renderIcon, renderEmoji } from './lib/components/icons.js';
+export const jux = {
+    alert,
+    app,
+    badge,
+    button,
+    card,
+    chart,
+    checkbox,
+    code,
+    container,
+    data,
+    datepicker,
+    dialog,
+    divider,
+    dropdown,
+    element,
+    fileupload,
+    grid,
+    guard,
+    heading,
+    hero,
+    icon,
+    include,
+    input,
+    list,
+    loading,
+    menu,
+    modal,
+    nav,
+    paragraph,
+    progress,
+    radio,
+    req,
+    script,
+    select,
+    sidebar,
+    style,
+    switch: switchComponent,
+    table,
+    tabs,
+    themeToggle,
+    tooltip,
+    view,
+    write,
+    // Utilities
+    fetch: fetchAPI,
+    renderIcon,
+    renderEmoji,
+    getOrCreateContainer
+};

package/juxconfig.example.js

@@ -1,76 +1,71 @@
 /**
- * JUX PROJECT CONFIGURATION
- * This file defines the environment, routing, and behavior of your JUX application.
+ * JUX Configuration File
+ * 
+ * This file is optional. JUX works out-of-the-box with sensible defaults.
+ * Customize only if you need to change default behavior.
+ * 
+ * Copy this file to your project root as 'juxconfig.js' to customize.
  */
 
-export const config = {
+// Route overrides
+export const routeOverrides = {
+    // 'about': '/about-us',
+}
 
-    // Project Folder Structure declaration
-    directories: {
-        source: './jux',          // Where your .jux files live
-        distribution: './.jux-dist', // Where build artifacts go
-        themes: './themes',       // CSS theme files
-        layouts: './themes/layouts',      // JUX Layout wrapper files
-        assets: './themes/assets'        // Static images/fonts
-    },
+export default {
+    // Application settings
+    appName: 'My JUX App',
+    autoRoutes: true,
+    // Directories
+    sourceDir: 'jux',
+    distDir: '.jux-dist',
 
-    // Application Defaults
-    defaults: {
-        httpPort: 3000,
-        wsPort: 3001,
-        autoRoute: true,          // If true, filesystem mirroring is enabled (/user/profile.jux -> /user/profile)
-        layout: 'base.jux',           // Default layout file (e.g. layouts/main.jux)
-        theme: 'base.css'            // Default theme file (e.g. themes/light.css)
+    // 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',
+        monday: 'http://api.rxtrail.monday.com/api/'
     },
 
-    // Routing & Grouping
-    // Map specific URLs to .jux files, or group them to apply shared settings.
-    pages: {
-        // 1. Direct Mapping: Simple Key-Value Pair
-        '/': '/index.jux',
-
-        // 2. Public Group: Shared settings for public pages
-        docs: {
-            prefix: '/docs',           // URL Prefix
-            layout: "base_docs.jux", // Shared Layout
-            theme: "base.css",         // Shared Theme
-
-            // Explicit Route Map
-            routes: {
-                '/login': '/experiments/login.jux' // Results in /login/
-            }
-        },
+    // Dev server ports
+    ports: {
+        http: 3000,
+        ws: 3001
+    },
 
-        // 3. Private Group: Authenticated section
-        private: {
-            prefix: '/dashboard',
-            layout: 'dashboard_layout.jux',
-            theme: 'dashboard.css',
+    // Fetch configuration
+    fetchTimeout: 30000,  // milliseconds
+    fetchLog: false,      // true, false, or 'errors' for error-only logging
 
-            routes: {
-                '/': '/experiments/index.jux',                 // -> /dashboard/
-                '/listsdemo': '/experiments/list_v2_demo.jux' // -> /dashboard/lists_demo
-            }
-        },
+    // Build options
+    build: {
+        minify: false,
+        sourcemap: true
     },
 
-    // Lifecycle Hooks
-    hooks: {
-        // Functions to run before the compiler starts.
-        // Useful for code generation, data fetching, or verifying env vars.
-        precompile: [
-            // roadmap 2026: async () => { console.log('Pre-compile hook'); }
-        ],
-
-        // Functions to run after the build completes but before the server starts.
-        // Useful for post-processing assets, sitemap generation, etc.
-        postcompile: [
-            // roadmap 2026
-        ],
+    // 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');
+        // },
 
-        // Custom deployment logic
-        deploy: [
-            // roadmap 2026
-        ]
-    }
+        // Example: Initialize authentication
+        // async function initAuth() {
+        //   console.log('🔐 Initializing auth...');
+        // },
+    ]
 };
+