juxscript 1.0.132 → 1.1.2

package/lib/componentsv2/plugins/ServerSQLitePlugin.d.ts

@@ -1,25 +0,0 @@
-import { JuxServiceContract, BaseEngine } from '../base/BaseEngine.js';
-export interface ServerSQLiteConfig {
-    /** The Database Driver Instance (e.g. better-sqlite3) */
-    database: any;
-    /** Optional: SQL Query to fetch data automatically */
-    query?: string;
-    /**
-     * State Binding: The property key on the Engine's state to populate.
-     * e.g., 'items' for a ListEngine, or 'rows' for a GridEngine.
-     */
-    bindTo?: string;
-    /**
-     * Transformation Strategy:
-     * Converts a raw DB row into the shape expected by the Engine's state.
-     */
-    mapRow?: (row: any) => any;
-    /** If true, runs the query immediately on install */
-    autoLoad?: boolean;
-}
-/**
- * Server-Side SQLite Plugin
- * Decoupled Service that injects SQL capabilities and binds data to ANY Engine state.
- */
-export declare const ServerSQLitePlugin: (config: ServerSQLiteConfig) => JuxServiceContract<BaseEngine<any>>;
-//# sourceMappingURL=ServerSQLitePlugin.d.ts.map

package/lib/componentsv2/plugins/ServerSQLitePlugin.js

@@ -1,70 +0,0 @@
-/**
- * Server-Side SQLite Plugin
- * Decoupled Service that injects SQL capabilities and binds data to ANY Engine state.
- */
-export const ServerSQLitePlugin = (config) => ({
-    name: 'server-sqlite-driver',
-    version: '2.0.0',
-    targetEnv: 'server',
-    install: (engine) => {
-        // 1. Expose SQL Capability (Mixin)
-        // Adds a .query() method to the engine instance
-        Object.assign(engine, {
-            query: (sql, params = []) => {
-                if (!config.database || typeof config.database.prepare !== 'function') {
-                    throw new Error('Invalid Database Driver provided to ServerSQLitePlugin.');
-                }
-                const stmt = config.database.prepare(sql);
-                const rows = stmt.all(params);
-                // Emit audit event for queries
-                // @ts-ignore - access protected emit
-                if (typeof engine.emit === 'function')
-                    engine.emit('sql:query', { sql, rows: rows.length });
-                return rows;
-            }
-        });
-        // 2. Hydration Logic
-        const hydrate = () => {
-            if (!config.query)
-                return;
-            try {
-                // Use the newly injected capability
-                // @ts-ignore
-                const rows = engine.query(config.query);
-                if (config.bindTo) {
-                    const data = config.mapRow ? rows.map(config.mapRow) : rows;
-                    // Generic State Update (Decoupled from ListEngine)
-                    // @ts-ignore - access protected updateState
-                    if (typeof engine.updateState === 'function') {
-                        // @ts-ignore
-                        engine.updateState({ [config.bindTo]: data });
-                    }
-                    // Optional: Update loading state if the engine supports it
-                    // @ts-ignore
-                    if (typeof engine.loading === 'function')
-                        engine.loading(false);
-                    // Emit data event for loose coupling
-                    // @ts-ignore
-                    if (typeof engine.emit === 'function')
-                        engine.emit('plugin:data', { source: 'sqlite', count: data.length });
-                }
-            }
-            catch (err) {
-                console.error('[ServerSQLitePlugin] Hydration Error:', err.message);
-                // @ts-ignore
-                if (typeof engine.loading === 'function')
-                    engine.loading(false);
-            }
-        };
-        // 3. Auto-Start
-        if (config.autoLoad) {
-            // @ts-ignore
-            if (typeof engine.loading === 'function')
-                engine.loading(true);
-            hydrate();
-        }
-        // 4. Listen for Reload Signal
-        engine.on('db:reload', hydrate);
-    }
-});
-//# sourceMappingURL=ServerSQLitePlugin.js.map

package/lib/componentsv2/stubs/ComponentComposition.ts.stub

@@ -1,32 +0,0 @@
-import { [% ComponentName %]Engine, [% ComponentName %]Options } from './engine.js';
-import { [% ComponentName %]Skin } from './skin.js';
-
-export type [% ComponentName %]Component = [% ComponentName %]Engine & {
-    render: (targetId: string | HTMLElement) => [% ComponentName %]Component;
-    injectCSS: (id: string, cssContent: string) => void;
-};
-
-export function [% ComponentName %](id: string, options: [% ComponentName %]Options = {}): [% ComponentName %]Component {
-    const engine = new [% ComponentName %]Engine(id, options);
-
-    if (typeof window !== 'undefined') {
-        // @ts-ignore
-        window.juxEngines = window.juxEngines || {};
-        // @ts-ignore
-        window.juxEngines[id] = engine;
-    }
-
-    const skin = new [% ComponentName %]Skin(engine);
-
-    // @ts-ignore
-    engine.render = (targetId: string | HTMLElement) => {
-        const target = typeof targetId === 'string' ? document.getElementById(targetId) : targetId;
-        if (target) skin.renderSkin(target);
-        return engine as [% ComponentName %]Component;
-    };
-
-    // @ts-ignore
-    engine.injectCSS = (id, css) => skin.injectCSS(id, css);
-
-    return engine as [% ComponentName %]Component;
-}

package/lib/componentsv2/stubs/ComponentEngine.ts.stub

@@ -1,36 +0,0 @@
-import { BaseEngine, BaseState } from '../base/BaseEngine.js';
-
-export interface [% ComponentName %]State extends BaseState {
-    // TODO: Define your state properties
-    text: string;
-}
-
-export interface [% ComponentName %]Options {
-    // TODO: Define configuration options
-    text?: string;
-}
-
-export class [% ComponentName %]Engine extends BaseEngine<[% ComponentName %]State, [% ComponentName %]Options> {
-    constructor(id: string, options: [% ComponentName %]Options = {}) {
-        super(id, options);
-    }
-
-    protected prepareState(id: string, options: [% ComponentName %]Options): [% ComponentName %]State {
-        return {
-            id,
-            classes: ['jux-[% component-name %]'],
-            visible: true,
-            disabled: false,
-            loading: false,
-            attributes: {},
-            text: options.text || 'Hello World'
-        };
-    }
-
-    // Example Mutator
-    setText(value: string): this {
-        this.updateState({ text: value });
-        this.emit('textChange', { value });
-        return this;
-    }
-}

package/lib/componentsv2/stubs/ComponentSkin.ts.stub

@@ -1,35 +0,0 @@
-import { BaseSkin } from '../base/BaseSkin.js';
-import { [% ComponentName %]Engine, [% ComponentName %]State } from './engine.js';
-import structureCss from './structure.css';
-
-export class [% ComponentName %]Skin extends BaseSkin<[% ComponentName %]State, [% ComponentName %]Engine> {
-    constructor(engine: [% ComponentName %]Engine) {
-        super(engine);
-    }
-
-    /**
-     * Define the structural CSS for this component.
-     */
-    protected get structureCss(): string {
-        return structureCss;
-    }
-
-    protected bindEvents(root: HTMLElement): void {
-        // TODO: Bind DOM events to Engine methods
-        root.addEventListener('click', () => {
-            console.log('[% ComponentName %] clicked');
-        });
-    }
-
-    protected updateSkin(state: [% ComponentName %]State): void {
-        if (!this.root) return;
-        this.applySkinAttributes(this.root, state);
-        
-        // TODO: Render state to DOM
-        this.root.textContent = state.text;
-    }
-
-    protected createRoot(): HTMLElement {
-        return document.createElement('div');
-    }
-}

package/lib/componentsv2/stubs/ComponentStructure.css.d.ts.stub

@@ -1,2 +0,0 @@
-declare const styles: string;
-export default styles;

package/lib/componentsv2/stubs/ComponentStructure.css.stub

@@ -1,13 +0,0 @@
-.jux-[% component-name %] {
-    display: block;
-    padding: var(--space-md);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-sm);
-    background-color: var(--color-surface-base);
-    color: var(--color-text-primary);
-    transition: all var(--transition-fast);
-}
-
-.jux-[% component-name %]:hover {
-    background-color: var(--color-surface-hover);
-}

package/lib/utils/fetch.d.ts

@@ -1,176 +0,0 @@
-/**
- * Jux Fetch Utility
- *
- * A lightweight fetch wrapper with sensible defaults, error handling, and method chaining.
- * Includes configuration helpers for juxconfig.js integration.
- *
- * Usage:
- *   // Configure once (optional)
- *   jux.fetch.config({
- *     baseUrl: 'https://api.example.com',
- *     credentials: 'include',
- *     timeout: 10000,
- *     log: 'errors',
- *     onUnauthorized: () => window.location.href = '/login'
- *   });
- *
- *   // Simple GET
- *   const { data, error } = await jux.fetch('/users').send();
- *
- *   // Method chaining
- *   const { data, error } = await jux.fetch('/users')
- *     .method('POST')
- *     .body({ name: 'John' })
- *     .params({ limit: 10 })
- *     .timeout(5000)
- *     .log(true)
- *     .send();
- *
- *   // With juxconfig services
- *   const { data } = await jux.fetch('/users')
- *     .baseUrl(jux.fetch.getServiceUrl('database'))
- *     .send();
- *
- *   // Service client helper
- *   const db = jux.fetch.serviceClient('database');
- *   const { data } = await db.fetch('/users').send();
- */
-export type LogLevel = boolean | 'errors';
-export interface FetchConfig {
-    baseUrl?: string;
-    credentials?: RequestCredentials;
-    headers?: Record<string, string>;
-    timeout?: number;
-    log?: LogLevel;
-    onUnauthorized?: () => void;
-    onError?: (error: FetchError) => void;
-}
-export interface FetchOptions extends Omit<RequestInit, 'body'> {
-    params?: Record<string, any>;
-    body?: any;
-    timeout?: number;
-    log?: LogLevel;
-    onUnauthorized?: () => void;
-    onError?: (error: FetchError) => void;
-    parseResponse?: boolean;
-}
-export interface FetchError {
-    message: string;
-    status?: number;
-    statusText?: string;
-    data?: any;
-}
-export interface FetchResult<T = any> {
-    data: T | null;
-    error: FetchError | null;
-    status: number;
-    response: Response;
-}
-/**
- * Configure global fetch defaults
- */
-export declare function configureFetch(config: FetchConfig): void;
-/**
- * FetchBuilder class for method chaining
- */
-declare class FetchBuilder<T = any> {
-    url: string;
-    options: FetchOptions;
-    constructor(url: string, options?: FetchOptions);
-    method(value: string): this;
-    body(value: any): this;
-    params(value: Record<string, any>): this;
-    headers(value: Record<string, string>): this;
-    header(key: string, value: string): this;
-    timeout(value: number): this;
-    credentials(value: RequestCredentials): this;
-    log(value: LogLevel): this;
-    parseResponse(value: boolean): this;
-    onUnauthorized(callback: () => void): this;
-    onError(callback: (error: FetchError) => void): this;
-    /**
-     * Execute the fetch request
-     */
-    send(): Promise<FetchResult<T>>;
-    /**
-     * Alias for send()
-     */
-    fetch(): Promise<FetchResult<T>>;
-    /**
-     * Make the builder thenable (Promise-like) so it can be awaited directly
-     * This allows: await jux.fetch('/users') without needing .send()
-     */
-    then<TResult1 = FetchResult<T>, TResult2 = never>(onfulfilled?: ((value: FetchResult<T>) => TResult1 | PromiseLike<TResult1>) | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null): Promise<TResult1 | TResult2>;
-    /**
-     * Make the builder catchable for Promise.catch()
-     */
-    catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null): Promise<FetchResult<T> | TResult>;
-    /**
-     * Make the builder finally-able for Promise.finally()
-     */
-    finally(onfinally?: (() => void) | null): Promise<FetchResult<T>>;
-}
-/**
- * Create a fetch builder
- */
-export declare function juxFetch<T = any>(url: string, options?: FetchOptions): FetchBuilder<T>;
-/**
- * Convenience methods for common HTTP verbs
- */
-export declare const fetchHelpers: {
-    get: <T = any>(url: string, options?: Omit<FetchOptions, "method">) => FetchBuilder<T>;
-    post: <T = any>(url: string, body?: any, options?: Omit<FetchOptions, "method" | "body">) => FetchBuilder<T>;
-    put: <T = any>(url: string, body?: any, options?: Omit<FetchOptions, "method" | "body">) => FetchBuilder<T>;
-    patch: <T = any>(url: string, body?: any, options?: Omit<FetchOptions, "method" | "body">) => FetchBuilder<T>;
-    delete: <T = any>(url: string, options?: Omit<FetchOptions, "method">) => FetchBuilder<T>;
-};
-/**
- * Fetch multiple URLs in parallel
- */
-export declare function fetchAll<T = any>(urls: string[], options?: FetchOptions): Promise<FetchResult<T>[]>;
-/**
- * Get a service URL from window.juxConfig
- */
-export declare function getServiceUrl(serviceName: string): string | null;
-/**
- * Create a fetch instance preconfigured for a specific service
- *
- * Usage:
- *   const api = jux.fetch.serviceClient('database');
- *   const { data } = await api.fetch('/users').send();
- */
-export declare function serviceClient(serviceName: string): {
-    fetch: (url: string, options?: any) => FetchBuilder<any>;
-    baseUrl: string | null;
-};
-/**
- * Setup fetch from juxconfig
- * Call this in your bootstrap function
- *
- * Usage:
- *   export default {
- *     bootstrap: [
- *       async function initFetch() {
- *         await jux.fetch.setupConfig();
- *       }
- *     ]
- *   };
- */
-export declare function setupConfig(): Promise<{
-    services: any;
-    getServiceUrl: typeof getServiceUrl;
-} | undefined>;
-export declare const fetchAPI: typeof juxFetch & {
-    all: typeof fetchAll;
-    get: <T = any>(url: string, options?: Omit<FetchOptions, "method">) => FetchBuilder<T>;
-    post: <T = any>(url: string, body?: any, options?: Omit<FetchOptions, "method" | "body">) => FetchBuilder<T>;
-    put: <T = any>(url: string, body?: any, options?: Omit<FetchOptions, "method" | "body">) => FetchBuilder<T>;
-    patch: <T = any>(url: string, body?: any, options?: Omit<FetchOptions, "method" | "body">) => FetchBuilder<T>;
-    delete: <T = any>(url: string, options?: Omit<FetchOptions, "method">) => FetchBuilder<T>;
-    config: typeof configureFetch;
-    setupConfig: typeof setupConfig;
-    getServiceUrl: typeof getServiceUrl;
-    serviceClient: typeof serviceClient;
-};
-export {};
-//# sourceMappingURL=fetch.d.ts.map

package/machinery/serve.js

@@ -1,255 +0,0 @@
-import express from 'express';
-import path from 'path';
-import fs from 'fs';
-import http from 'http';
-import { fileURLToPath } from 'url';
-import { WebSocketServer } from 'ws';
-import { createWatcher } from './watcher.js';
-import { JuxCompiler } from './compiler3.js';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// ═══════════════════════════════════════════════════════════════
-// CONFIGURATION
-// ═══════════════════════════════════════════════════════════════
-const args = process.argv.slice(2);
-const HOT_RELOAD = args.includes('--hot') || args.includes('-h') || args.includes('--watch');
-
-// Extract port from args (e.g., --port=3000 or -p 3000)
-function getArgValue(flag, shortFlag, defaultValue) {
-    for (let i = 0; i < args.length; i++) {
-        if (args[i].startsWith(`${flag}=`)) return args[i].split('=')[1];
-        if (args[i].startsWith(`${shortFlag}=`)) return args[i].split('=')[1];
-        if ((args[i] === flag || args[i] === shortFlag) && args[i + 1]) return args[i + 1];
-    }
-    return defaultValue;
-}
-
-const PORT = parseInt(getArgValue('--port', '-p', process.env.PORT || '3000'));
-const WS_PORT = parseInt(getArgValue('--ws-port', '-w', process.env.WS_PORT || String(PORT + 1)));
-
-// Resolve paths relative to CWD (user's project)
-const PROJECT_ROOT = process.cwd();
-const DIST_DIR = path.resolve(PROJECT_ROOT, '.jux-dist');
-const SRC_DIR = path.resolve(PROJECT_ROOT, 'jux');
-
-const app = express();
-let lastBuildResult = { success: true, errors: [] };
-
-// Check if dist directory exists - if not, try to build first
-if (!fs.existsSync(DIST_DIR) || !fs.existsSync(path.join(DIST_DIR, 'index.html'))) {
-    console.log('⚠️  Dist directory not found. Running initial build...');
-
-    const compiler = new JuxCompiler({
-        srcDir: SRC_DIR,
-        distDir: DIST_DIR
-    });
-
-    try {
-        const result = await compiler.build();
-        lastBuildResult = result;
-
-        if (!result.success) {
-            console.log('\n❌ Initial build failed. Starting server to show error overlay.\n');
-        }
-    } catch (err) {
-        console.error('❌ Initial build failed:', err.message);
-        lastBuildResult = { success: false, errors: [{ message: err.message }] };
-    }
-}
-
-if (!fs.existsSync(DIST_DIR)) {
-    fs.mkdirSync(DIST_DIR, { recursive: true });
-}
-
-app.use((req, res, next) => {
-    res.setHeader('Cache-Control', 'no-store');
-    next();
-});
-
-app.use((req, res, next) => {
-    if (req.path.endsWith('.js')) {
-        res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
-    }
-    next();
-});
-
-app.get('/favicon.ico', (req, res) => res.status(204).end());
-app.get('/favicon.png', (req, res) => res.status(204).end());
-
-app.get('/__jux_sources.json', (req, res) => {
-    const snapshotPath = path.join(DIST_DIR, '__jux_sources.json');
-    if (fs.existsSync(snapshotPath)) {
-        res.setHeader('Content-Type', 'application/json');
-        res.sendFile(snapshotPath);
-    } else {
-        res.json({});
-    }
-});
-
-const hotReloadScript = `
-<script>
-(function() {
-    var ws = new WebSocket('ws://localhost:${WS_PORT}');
-    ws.onopen = function() { console.log('🔥 Hot reload connected'); };
-    ws.onmessage = function(e) {
-        var data = JSON.parse(e.data);
-        if (data.type === 'reload') location.reload();
-        else if (data.type === 'build-error') console.error('❌ Build error:', data.errors);
-    };
-    ws.onclose = function() { setTimeout(function() { location.reload(); }, 2000); };
-})();
-</script>
-`;
-
-function getErrorPageHtml(errors) {
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>JUX Build Error</title>
-    <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { font-family: monospace; background: #1a1a2e; color: #eee; min-height: 100vh; padding: 40px; }
-        .container { max-width: 800px; margin: 0 auto; }
-        h1 { color: #ff6b6b; margin-bottom: 8px; }
-        .subtitle { color: #888; margin-bottom: 30px; }
-        .error-card { background: #16213e; padding: 16px 20px; border-radius: 8px; margin-bottom: 12px; border-left: 4px solid #ff6b6b; }
-        .error-header { color: #ff6b6b; font-weight: bold; margin-bottom: 8px; }
-        .error-code { background: #0f0f23; padding: 12px; border-radius: 4px; font-size: 13px; color: #888; }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h1>🛑 Build Failed</h1>
-        <p class="subtitle">Fix the errors below and save to rebuild.</p>
-        ${errors.map(err => `
-            <div class="error-card">
-                <div class="error-header">${err.view ? `[${err.view}] ` : ''}${err.message}</div>
-                ${err.code ? `<pre class="error-code">${err.code}</pre>` : ''}
-            </div>
-        `).join('')}
-    </div>
-    ${HOT_RELOAD ? `<script>
-        var ws = new WebSocket('ws://localhost:${WS_PORT}');
-        ws.onmessage = function(e) { if (JSON.parse(e.data).type === 'reload') location.reload(); };
-    </script>` : ''}
-</body>
-</html>`;
-}
-
-if (HOT_RELOAD) {
-    app.get(['/', '/index.html'], (req, res) => {
-        const indexPath = path.join(DIST_DIR, 'index.html');
-
-        if (!fs.existsSync(indexPath) || !lastBuildResult.success) {
-            return res.send(getErrorPageHtml(lastBuildResult.errors));
-        }
-
-        let html = fs.readFileSync(indexPath, 'utf8');
-        html = html.replace('</body>', hotReloadScript + '</body>');
-        res.setHeader('Content-Type', 'text/html');
-        res.send(html);
-    });
-}
-
-app.use(express.static(DIST_DIR));
-
-app.get('*', (req, res) => {
-    if (path.extname(req.path) && req.path !== '/') {
-        return res.status(404).send('Not found');
-    }
-
-    const indexPath = path.join(DIST_DIR, 'index.html');
-
-    if (!fs.existsSync(indexPath) || !lastBuildResult.success) {
-        return res.send(getErrorPageHtml(lastBuildResult.errors));
-    }
-
-    if (HOT_RELOAD) {
-        let html = fs.readFileSync(indexPath, 'utf8');
-        html = html.replace('</body>', hotReloadScript + '</body>');
-        res.setHeader('Content-Type', 'text/html');
-        res.send(html);
-    } else {
-        res.sendFile(indexPath);
-    }
-});
-
-const server = http.createServer(app);
-let wss = null;
-let watcher = null;
-
-if (HOT_RELOAD) {
-    wss = new WebSocketServer({ port: WS_PORT });
-    const clients = new Set();
-
-    wss.on('connection', (ws) => {
-        clients.add(ws);
-        ws.on('close', () => clients.delete(ws));
-    });
-
-    const broadcast = (message) => {
-        const data = JSON.stringify(message);
-        clients.forEach(client => {
-            if (client.readyState === 1) client.send(data);
-        });
-    };
-
-    const compiler = new JuxCompiler({
-        srcDir: SRC_DIR,
-        distDir: DIST_DIR
-    });
-
-    watcher = createWatcher(SRC_DIR, {
-        onChange: async (changedFiles) => {
-            console.log('🔄 Rebuilding...');
-
-            try {
-                const result = await compiler.build();
-                lastBuildResult = result;
-
-                if (!result.success) {
-                    console.error('❌ Rebuild failed');
-                    broadcast({ type: 'build-error', errors: result.errors });
-                    return;
-                }
-
-                console.log('✅ Rebuild complete');
-                broadcast({ type: 'reload', files: changedFiles });
-            } catch (err) {
-                console.error('❌ Rebuild failed:', err.message);
-                lastBuildResult = { success: false, errors: [{ message: err.message }] };
-                broadcast({ type: 'build-error', errors: [{ message: err.message }] });
-            }
-        },
-        onReady: () => {
-            console.log(`👀 Watching: ${SRC_DIR}`);
-        }
-    });
-}
-
-server.listen(PORT, () => {
-    console.log(`\n🚀 JUX Server running at http://localhost:${PORT}`);
-    if (HOT_RELOAD) {
-        console.log(`🔥 Hot reload: ws://localhost:${WS_PORT}`);
-    }
-    if (!lastBuildResult.success) {
-        console.log(`⚠️  Build has errors - fix them and save\n`);
-    }
-});
-
-const shutdown = () => {
-    console.log('\n👋 Shutting down...');
-    if (watcher) watcher.close();
-    if (wss) {
-        wss.clients.forEach(client => client.terminate());
-        wss.close();
-    }
-    server.close(() => process.exit(0));
-    setTimeout(() => process.exit(0), 2000);
-};
-
-process.on('SIGINT', shutdown);
-process.on('SIGTERM', shutdown);

package/types/css.d.ts

@@ -1,10 +0,0 @@
-/**
- * CSS Module Type Declaration
- * 
- * This single declaration handles ALL .css imports in the project.
- * No need for individual .d.ts files next to each CSS file.
- */
-declare module '*.css' {
-    const content: string;
-    export default content;
-}