juxscript 1.0.59 → 1.0.60

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();
@@ -302,7 +304,7 @@ async function buildProject(isServe = false, wsPort = 3001) {
     // ✅ Build summary with timing breakdown
     console.log(`📊 Build Summary:`);
     console.log(`   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
-    console.log(`   Documentation:     ${docsTime.toFixed(0)}ms`);
+    // 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`);
@@ -350,10 +352,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 +403,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 +431,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/container.ts

@@ -1,64 +1,45 @@
 import { BaseComponent } from './base/BaseComponent.js';
 
-// Event definitions
+// Event definitions - Container is a layout wrapper that can be clicked
 const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = [] as const;
-
-// Deprecation warning constant
-const DEPRECATION_WARNING = (feature: string) =>
-  `[JUX Deprecation Warning] Container.${feature} will be removed in v1.0.30+ (January 30, 2026). Please use CSS or the .style() method instead. See: https://juxscript.com/docs/migration`;
-
-// Track which warnings we've already shown (to avoid spam)
-const _shownWarnings = new Set<string>();
-
-function warnOnce(feature: string): void {
-  if (!_shownWarnings.has(feature)) {
-    console.warn(DEPRECATION_WARNING(feature));
-    _shownWarnings.add(feature);
-  }
-}
+const CALLBACK_EVENTS = ['click'] as const;
 
+/**
+ * Container options
+ */
 export interface ContainerOptions {
-  direction?: 'row' | 'column'; // should deprecate.
-  gap?: number | string; // should deprecate.
-  wrap?: boolean; // should deprecate.
-  align?: 'start' | 'center' | 'end' | 'stretch';   // should deprecate.
-  justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'; // should deprecate.
-  padding?: string; // should deprecate.
-  style?: string; // should deprecate. -> inherited from BaseComponent
-  class?: string; // should deprecate. -> inherited from BaseComponent
+  class?: string;
+  style?: string;
+  direction?: 'row' | 'column';
+  gap?: string | number;
+  align?: 'start' | 'center' | 'end' | 'stretch';
+  justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
 }
 
+/**
+ * Container state
+ */
 type ContainerState = {
-  direction: string; // should deprecate.
-  gap: number | string; // should deprecate.
-  wrap: boolean; // should deprecate.
-  align: string; // should deprecate.
-  justify: string; // should deprecate.
-  padding: string; // should deprecate.
-  style: string; // should deprecate. -> inherited from BaseComponent
-  class: string; // should deprecate. -> inherited from BaseComponent
+  class: string;
+  style: string;
+  direction?: 'row' | 'column';
+  gap?: string | number;
+  align?: string;
+  justify?: string;
 };
 
+/**
+ * Container component - a simple div container for grouping elements
+ */
 export class Container extends BaseComponent<ContainerState> {
   constructor(id: string, options: ContainerOptions = {}) {
-    // Warn for deprecated options
-    if (options.direction !== undefined) warnOnce('direction (option)');
-    if (options.gap !== undefined) warnOnce('gap (option)');
-    if (options.wrap !== undefined) warnOnce('wrap (option)');
-    if (options.align !== undefined) warnOnce('align (option)');
-    if (options.justify !== undefined) warnOnce('justify (option)');
-    if (options.padding !== undefined) warnOnce('padding (option)');
-
     super(id, {
-      direction: options.direction ?? 'column',// should deprecate.
-      gap: options.gap ?? 0, //should deprecate.
-      wrap: options.wrap ?? false, //should deprecate.
-      align: options.align ?? 'stretch', //should deprecate.
-      justify: options.justify ?? 'start', //should deprecate.
-      padding: options.padding ?? '0', //should deprecate.
-      style: options.style ?? '', //should deprecate. -> inherited from BaseComponent
-      class: options.class ?? '' //should deprecate. -> inherited from BaseComponent
+      class: options.class ?? '',
+      style: options.style ?? '',
+      direction: options.direction,
+      gap: options.gap,
+      align: options.align,
+      justify: options.justify
     });
   }
 
@@ -70,113 +51,90 @@ export class Container extends BaseComponent<ContainerState> {
     return CALLBACK_EVENTS;
   }
 
-  /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
-   * ═════════════════════════════════════════════════════════════════ */
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
 
   // ✅ Inherited from BaseComponent:
   // - style(), class()
+  // - bind(), sync(), renderTo()
   // - addClass(), removeClass(), toggleClass()
   // - visible(), show(), hide()
   // - attr(), attrs(), removeAttr()
   // - disabled(), enable(), disable()
-  // - bind(), sync(), renderTo()
 
   direction(value: 'row' | 'column'): this {
-    warnOnce('direction()');
     this.state.direction = value;
     return this;
   }
 
-  gap(value: number | string): this {
-    warnOnce('gap()');
+  gap(value: string | number): this {
     this.state.gap = value;
     return this;
   }
 
-  wrap(value: boolean): this {
-    warnOnce('wrap()');
-    this.state.wrap = value;
-    return this;
-  }
-
   align(value: 'start' | 'center' | 'end' | 'stretch'): this {
-    warnOnce('align()');
     this.state.align = value;
     return this;
   }
 
   justify(value: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'): this {
-    warnOnce('justify()');
     this.state.justify = value;
     return this;
   }
 
-  padding(value: string): this {
-    warnOnce('padding()');
-    this.state.padding = value;
-    return this;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * RENDER
-   * ═════════════════════════════════════════════════════════════════ */
+  /* -------------------------
+   * Render
+   * ------------------------- */
 
   render(targetId?: string): this {
     const container = this._setupContainer(targetId);
 
-    const { direction, gap, wrap, align, justify, padding, style, class: className } = this.state;
-
-    const wrapper = document.createElement('div');
-    wrapper.className = 'jux-container';
-    wrapper.id = this._id;
-    if (className) wrapper.className += ` ${className}`;
-
-    this._wireStandardEvents(wrapper);
-
-    // Wire sync bindings
-    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-      const transform = toComponent || ((v: any) => v);
-
-      stateObj.subscribe((val: any) => {
-        const transformed = transform(val);
-
-        if (property === 'direction') {
-          warnOnce('direction (sync)');
-          this.state.direction = String(transformed);
-          wrapper.style.flexDirection = this.state.direction;
-        } else if (property === 'gap') {
-          warnOnce('gap (sync)');
-          this.state.gap = transformed;
-          const gapVal = typeof transformed === 'number' ? `${transformed}px` : transformed;
-          wrapper.style.gap = gapVal;
-        } else if (property === 'wrap') {
-          warnOnce('wrap (sync)');
-          this.state.wrap = Boolean(transformed);
-          wrapper.style.flexWrap = this.state.wrap ? 'wrap' : 'nowrap';
-        } else if (property === 'align') {
-          warnOnce('align (sync)');
-          this.state.align = String(transformed);
-          wrapper.style.alignItems = this.state.align;
-        } else if (property === 'justify') {
-          warnOnce('justify (sync)');
-          this.state.justify = String(transformed);
-          wrapper.style.justifyContent = this.state.justify;
-        } else if (property === 'padding') {
-          warnOnce('padding (sync)');
-          this.state.padding = String(transformed);
-          wrapper.style.padding = this.state.padding;
-        }
-
-      });
+    const { class: className, style, direction, gap, align, justify } = this.state;
 
-    });
+    const div = document.createElement('div');
+    div.id = this._id;
+
+    // Always include jux-container class, append custom classes
+    div.className = className ? `jux-container ${className}` : 'jux-container';
+
+    // Only apply flex styles if any flex properties are set
+    const usesFlexbox = direction || gap !== undefined || align || justify;
+
+    let computedStyle = style;
+
+    if (usesFlexbox) {
+      const flexStyles: string[] = ['display: flex', 'width: auto'];
+
+      if (direction) flexStyles.push(`flex-direction: ${direction}`);
+
+      if (gap !== undefined) {
+        const gapValue = typeof gap === 'number' ? `${gap}px` : gap;
+        flexStyles.push(`gap: ${gapValue}`);
+      }
+      // Only set align-items if explicitly specified
+      if (align) flexStyles.push(`align-items: ${align}`);
+      // Only set justify-content if explicitly specified
+      if (justify) flexStyles.push(`justify-content: ${justify}`);
+
+      computedStyle = `${flexStyles.join('; ')}; ${style}`.trim();
+    }
+
+    if (computedStyle) {
+      div.setAttribute('style', computedStyle);
+    }
+
+    this._wireStandardEvents(div);
+
+    container.appendChild(div);
 
-    container.appendChild(wrapper);
     return this;
   }
 }
 
+/**
+ * Factory helper
+ */
 export function container(id: string, options: ContainerOptions = {}): Container {
   return new Container(id, options);
 }

package/lib/components/docs-data.json

@@ -578,7 +578,7 @@
     {
       "name": "Container",
       "category": "UI Components",
-      "description": "Container component",
+      "description": "Container options",
       "constructor": "jux.container(id: string, options: ContainerOptions = {})",
       "fluentMethods": [
         {
@@ -593,12 +593,6 @@
           "returns": "this",
           "description": "Set gap"
         },
-        {
-          "name": "wrap",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set wrap"
-        },
         {
           "name": "align",
           "params": "(value)",
@@ -611,12 +605,6 @@
           "returns": "this",
           "description": "Set justify"
         },
-        {
-          "name": "padding",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set padding"
-        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -1278,111 +1266,6 @@
       ],
       "example": "jux.input('id').render()"
     },
-    {
-      "name": "Kpicard",
-      "category": "UI Components",
-      "description": "KPI card options",
-      "constructor": "jux.kpicard(id: string, options: KPICardOptions = {})",
-      "fluentMethods": [
-        {
-          "name": "title",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set title"
-        },
-        {
-          "name": "value",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set value"
-        },
-        {
-          "name": "delta",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set delta"
-        },
-        {
-          "name": "prefix",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set prefix"
-        },
-        {
-          "name": "suffix",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set suffix"
-        },
-        {
-          "name": "width",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set width"
-        },
-        {
-          "name": "height",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set height"
-        },
-        {
-          "name": "theme",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set theme"
-        },
-        {
-          "name": "styleMode",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set styleMode"
-        },
-        {
-          "name": "animate",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set animate"
-        },
-        {
-          "name": "animationDuration",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set animationDuration"
-        },
-        {
-          "name": "borderRadius",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set borderRadius"
-        },
-        {
-          "name": "showAccentBar",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showAccentBar"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
-        {
-          "name": "render",
-          "params": "(container)",
-          "returns": "this",
-          "description": "Set render"
-        }
-      ],
-      "example": "jux.kpicard('users-kpi')"
-    },
     {
       "name": "Loading",
       "category": "UI Components",
@@ -2071,5 +1954,5 @@
     }
   ],
   "version": "1.0.0",
-  "lastUpdated": "2026-01-29T04:55:18.239Z"
+  "lastUpdated": "2026-01-29T15:56:48.374Z"
 }