juxscript 1.0.3 → 1.0.4

package/lib/components/req.ts

@@ -0,0 +1,300 @@
+/**
+ * Request information and utilities
+ * Provides access to URL, query params, path, referrer, etc.
+ */
+
+export interface RequestInfo {
+    url: string;
+    path: string;
+    query: Record<string, string>;
+    params: Record<string, string>;
+    hash: string;
+    referrer: string;
+    method: string;
+    headers: Record<string, string>;
+}
+
+export class Req {
+    private static _instance: Req | null = null;
+    private _info: RequestInfo;
+
+    private constructor() {
+        this._info = this._parseRequest();
+    }
+
+    /**
+     * Singleton instance
+     */
+    static get instance(): Req {
+        if (!Req._instance) {
+            Req._instance = new Req();
+        }
+        return Req._instance;
+    }
+
+    /**
+     * Parse current request information
+     */
+    private _parseRequest(): RequestInfo {
+        const url = new URL(window.location.href);
+
+        // Parse query string
+        const query: Record<string, string> = {};
+        url.searchParams.forEach((value, key) => {
+            query[key] = value;
+        });
+
+        // Parse path segments as params (basic routing)
+        const pathSegments = url.pathname.split('/').filter(s => s);
+        const params: Record<string, string> = {};
+        pathSegments.forEach((segment, index) => {
+            params[`${index}`] = segment;
+        });
+
+        return {
+            url: url.href,
+            path: url.pathname,
+            query,
+            params,
+            hash: url.hash.slice(1), // Remove leading #
+            referrer: document.referrer,
+            method: 'GET', // Browser requests are always GET initially
+            headers: {
+                'user-agent': navigator.userAgent,
+                'accept-language': navigator.language
+            }
+        };
+    }
+
+    /**
+     * Get full URL
+     */
+    get url(): string {
+        return this._info.url;
+    }
+
+    /**
+     * Get current path (e.g., "/examples/sample/dashboards")
+     */
+    get path(): string {
+        return this._info.path;
+    }
+
+    /**
+     * Get query string parameters
+     */
+    get query(): Record<string, string> {
+        return { ...this._info.query };
+    }
+
+    /**
+     * Get path parameters
+     */
+    get params(): Record<string, string> {
+        return { ...this._info.params };
+    }
+
+    /**
+     * Get URL hash (without #)
+     */
+    get hash(): string {
+        return this._info.hash;
+    }
+
+    /**
+     * Get referrer URL
+     */
+    get referrer(): string {
+        return this._info.referrer;
+    }
+
+    /**
+     * Get request method (always GET for browser)
+     */
+    get method(): string {
+        return this._info.method;
+    }
+
+    /**
+     * Get request headers
+     */
+    get headers(): Record<string, string> {
+        return { ...this._info.headers };
+    }
+
+    /**
+     * Check if current path matches a pattern
+     * @param pattern - Path pattern (supports wildcards)
+     * 
+     * Examples:
+     *   req.matches('/examples/sample/*')
+     *   req.matches('/examples/sample/dashboards')
+     *   req.matches('/examples/*\/dashboards')
+     */
+    matches(pattern: string): boolean {
+        const regexPattern = pattern
+            .replace(/\*/g, '.*')
+            .replace(/\//g, '\\/');
+        const regex = new RegExp(`^${regexPattern}$`);
+        return regex.test(this.path);
+    }
+
+    /**
+     * Check if current path starts with prefix
+     */
+    startsWith(prefix: string): boolean {
+        return this.path.startsWith(prefix);
+    }
+
+    /**
+     * Check if current path ends with suffix
+     */
+    endsWith(suffix: string): boolean {
+        return this.path.endsWith(suffix);
+    }
+
+    /**
+     * Get query parameter value
+     */
+    getQuery(key: string, defaultValue?: string): string | undefined {
+        return this.query[key] ?? defaultValue;
+    }
+
+    /**
+     * Get path parameter value
+     */
+    getParam(key: string, defaultValue?: string): string | undefined {
+        return this.params[key] ?? defaultValue;
+    }
+
+    /**
+     * Check if query parameter exists
+     */
+    hasQuery(key: string): boolean {
+        return key in this.query;
+    }
+
+    /**
+     * Get all query parameters as URLSearchParams
+     */
+    getSearchParams(): URLSearchParams {
+        return new URLSearchParams(this.query);
+    }
+
+    /**
+     * Refresh request info (call after navigation)
+     */
+    refresh(): void {
+        this._info = this._parseRequest();
+    }
+
+    /**
+     * Set active state on nav items based on current path
+     * @param items - Nav items to update
+     * @returns Updated nav items with active state set
+     */
+    setActiveNavItems(items: Array<{ href: string; active?: boolean }>): Array<{ href: string; active: boolean }> {
+        return items.map(item => ({
+            ...item,
+            active: this.isActiveNavItem(item.href)
+        }));
+    }
+
+    /**
+     * Check if a nav item should be active based on current path
+     * @param href - The nav item's href
+     */
+    isActiveNavItem(href: string): boolean {
+        // Exact match
+        if (href === this.path) {
+            return true;
+        }
+
+        // Starts with match (for parent routes)
+        // e.g., "/examples/sample" matches "/examples/sample/dashboards"
+        if (href !== '/' && this.path.startsWith(href)) {
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Get breadcrumbs from current path
+     * @returns Array of breadcrumb objects with label and href
+     */
+    getBreadcrumbs(): Array<{ label: string; href: string }> {
+        const segments = this.path.split('/').filter(s => s);
+        const breadcrumbs: Array<{ label: string; href: string }> = [
+            { label: 'Home', href: '/' }
+        ];
+
+        let currentPath = '';
+        segments.forEach(segment => {
+            currentPath += `/${segment}`;
+            breadcrumbs.push({
+                label: this._formatBreadcrumbLabel(segment),
+                href: currentPath
+            });
+        });
+
+        return breadcrumbs;
+    }
+
+    /**
+     * Format segment into readable breadcrumb label
+     */
+    private _formatBreadcrumbLabel(segment: string): string {
+        return segment
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+
+    /**
+     * Check if this is the home/root path
+     */
+    get isHome(): boolean {
+        return this.path === '/' || this.path === '';
+    }
+
+    /**
+     * Get current domain
+     */
+    get domain(): string {
+        return window.location.hostname;
+    }
+
+    /**
+     * Get current port
+     */
+    get port(): string {
+        return window.location.port;
+    }
+
+    /**
+     * Get current protocol
+     */
+    get protocol(): string {
+        return window.location.protocol.replace(':', '');
+    }
+
+    /**
+     * Check if HTTPS
+     */
+    get isSecure(): boolean {
+        return this.protocol === 'https';
+    }
+}
+
+/**
+ * Global request instance
+ */
+export const req = Req.instance;
+
+/**
+ * Factory function (returns singleton)
+ */
+export function request(): Req {
+    return Req.instance;
+}

package/lib/components/script.ts

@@ -1,32 +1,20 @@
 import { ErrorHandler } from './error-handler.js';
 
 /**
- * Script - Inject JavaScript into the document
+ * Script - Inject inline JavaScript into the document
+ * For external scripts, use Import component instead
  * Auto-renders when created or modified
  */
 export class Script {
   private _content: string = '';
-  private _src: string = '';
-  private _isSrc: boolean = false;
-  private _async: boolean = false;
-  private _defer: boolean = false;
   private _type: string = '';
   private _element: HTMLScriptElement | null = null;
 
-  constructor(contentOrSrc: string = '') {
-    // Detect if it's a URL or inline script
-    if (contentOrSrc.trim().startsWith('http') || 
-        contentOrSrc.endsWith('.js') || 
-        contentOrSrc.includes('/')) {
-      this._src = contentOrSrc;
-      this._isSrc = true;
-    } else {
-      this._content = contentOrSrc;
-      this._isSrc = false;
-    }
-    
-    // Auto-render if content/src provided
-    if (contentOrSrc) {
+  constructor(content: string = '') {
+    this._content = content;
+
+    // Auto-render if content provided
+    if (content) {
       this.render();
     }
   }
@@ -36,52 +24,30 @@ export class Script {
    */
   content(js: string): this {
     this._content = js;
-    this._isSrc = false;
-    this._src = '';
     this.render();
     return this;
   }
 
   /**
-   * Set external script URL
-   */
-  src(url: string): this {
-    this._src = url;
-    this._isSrc = true;
-    this._content = '';
-    this.render();
-    return this;
-  }
-
-  /**
-   * Enable async loading (for external scripts)
-   */
-  async(value: boolean = true): this {
-    this._async = value;
-    this.render();
-    return this;
-  }
-
-  /**
-   * Enable defer loading (for external scripts)
+   * Set script type (e.g., 'module', 'text/javascript')
    */
-  defer(value: boolean = true): this {
-    this._defer = value;
+  type(value: string): this {
+    this._type = value;
     this.render();
     return this;
   }
 
   /**
-   * Set script type (e.g., 'module', 'text/javascript')
+   * Set as module script
    */
-  type(value: string): this {
-    this._type = value;
+  module(): this {
+    this._type = 'module';
     this.render();
     return this;
   }
 
   /**
-   * Render the script element
+   * Render the inline script element
    */
   render(): this {
     if (typeof document === 'undefined') {
@@ -93,34 +59,16 @@ export class Script {
       this.remove();
 
       const script = document.createElement('script');
+      script.textContent = this._content;
 
-      if (this._isSrc) {
-        script.src = this._src;
-        
-        // Add error handler for failed loads
-        script.onerror = () => {
-          ErrorHandler.captureError({
-            component: 'Script',
-            method: 'render',
-            message: `Failed to load script: ${this._src}`,
-            timestamp: new Date(),
-            context: { src: this._src, type: 'external', error: 'load_failed' }
-          });
-        };
-        
-        script.onload = () => {
-          console.log(`✓ Script loaded: ${this._src}`);
-        };
-      } else {
-        script.textContent = this._content;
+      if (this._type) {
+        script.type = this._type;
       }
 
-      if (this._async) script.async = true;
-      if (this._defer) script.defer = true;
-      if (this._type) script.type = this._type;
-
       document.head.appendChild(script);
       this._element = script;
+
+      console.log('✓ Inline script rendered');
     } catch (error: any) {
       ErrorHandler.captureError({
         component: 'Script',
@@ -128,9 +76,8 @@ export class Script {
         message: error.message,
         stack: error.stack,
         timestamp: new Date(),
-        context: { 
-          isSrc: this._isSrc, 
-          src: this._src,
+        context: {
+          type: this._type || 'inline',
           error: 'runtime_exception'
         }
       });
@@ -149,4 +96,16 @@ export class Script {
     }
     return this;
   }
+}
+
+/**
+ * Factory function
+ * 
+ * Usage:
+ *   jux.script('console.log("Hello")');
+ *   jux.script().content('alert("Hi")');
+ *   jux.script('export const x = 1;').module();
+ */
+export function script(content: string = ''): Script {
+  return new Script(content);
 }

package/lib/components/select.ts

@@ -0,0 +1,247 @@
+import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
+
+/**
+ * Select option
+ */
+export interface SelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+
+/**
+ * Select component options
+ */
+export interface SelectOptions {
+    options?: SelectOption[];
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    name?: string;
+    onChange?: (value: string) => void;
+    style?: string;
+    class?: string;
+}
+
+/**
+ * Select component state
+ */
+type SelectState = {
+    options: SelectOption[];
+    value: string;
+    placeholder: string;
+    disabled: boolean;
+    name: string;
+    style: string;
+    class: string;
+};
+
+/**
+ * Select component - Dropdown select
+ * 
+ * Usage:
+ *   jux.select('country', {
+ *     placeholder: 'Select country',
+ *     options: [
+ *       { label: 'USA', value: 'us' },
+ *       { label: 'Canada', value: 'ca' }
+ *     ],
+ *     onChange: (val) => console.log(val)
+ *   }).render('#form');
+ * 
+ *   // Two-way binding
+ *   const countryState = state('us');
+ *   jux.select('country').bind(countryState).render('#form');
+ */
+export class Select {
+    state: SelectState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+    private _onChange?: (value: string) => void;
+    private _boundState?: State<string>;
+
+    constructor(id: string, options: SelectOptions = {}) {
+        this._id = id;
+        this.id = id;
+        this._onChange = options.onChange;
+
+        this.state = {
+            options: options.options ?? [],
+            value: options.value ?? '',
+            placeholder: options.placeholder ?? 'Select...',
+            disabled: options.disabled ?? false,
+            name: options.name ?? id,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    options(value: SelectOption[]): this {
+        this.state.options = value;
+        return this;
+    }
+
+    addOption(option: SelectOption): this {
+        this.state.options = [...this.state.options, option];
+        return this;
+    }
+
+    value(value: string): this {
+        this.state.value = value;
+        this._updateElement();
+        return this;
+    }
+
+    placeholder(value: string): this {
+        this.state.placeholder = value;
+        return this;
+    }
+
+    disabled(value: boolean): this {
+        this.state.disabled = value;
+        this._updateElement();
+        return this;
+    }
+
+    name(value: string): this {
+        this.state.name = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    onChange(handler: (value: string) => void): this {
+        this._onChange = handler;
+        return this;
+    }
+
+    /**
+     * Two-way binding to state
+     */
+    bind(stateObj: State<string>): this {
+        this._boundState = stateObj;
+
+        // Update select when state changes
+        stateObj.subscribe((val) => {
+            this.state.value = val;
+            this._updateElement();
+        });
+
+        // Update state when select changes
+        this.onChange((value) => stateObj.set(value));
+
+        return this;
+    }
+
+    /* -------------------------
+     * Helpers
+     * ------------------------- */
+
+    private _updateElement(): void {
+        const select = document.getElementById(`${this._id}-select`) as HTMLSelectElement;
+        if (select) {
+            select.value = this.state.value;
+            select.disabled = this.state.disabled;
+        }
+    }
+
+    getValue(): string {
+        return this.state.value;
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`Select: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { options, value, placeholder, disabled, name, style, class: className } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-select';
+        wrapper.id = this._id;
+
+        if (className) {
+            wrapper.className += ` ${className}`;
+        }
+
+        if (style) {
+            wrapper.setAttribute('style', style);
+        }
+
+        const select = document.createElement('select');
+        select.className = 'jux-select-element';
+        select.id = `${this._id}-select`;
+        select.name = name;
+        select.disabled = disabled;
+
+        // Placeholder option
+        if (placeholder) {
+            const placeholderOpt = document.createElement('option');
+            placeholderOpt.value = '';
+            placeholderOpt.textContent = placeholder;
+            placeholderOpt.disabled = true;
+            placeholderOpt.selected = value === '';
+            select.appendChild(placeholderOpt);
+        }
+
+        // Options
+        options.forEach(opt => {
+            const option = document.createElement('option');
+            option.value = opt.value;
+            option.textContent = opt.label;
+            option.disabled = opt.disabled ?? false;
+            option.selected = opt.value === value;
+            select.appendChild(option);
+        });
+
+        select.addEventListener('change', (e) => {
+            const target = e.target as HTMLSelectElement;
+            this.state.value = target.value;
+            if (this._onChange) {
+                this._onChange(target.value);
+            }
+        });
+
+        wrapper.appendChild(select);
+        container.appendChild(wrapper);
+        return this;
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('Select.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+export function select(id: string, options: SelectOptions = {}): Select {
+    return new Select(id, options);
+}