juxscript 1.1.349 → 1.1.352

package/dist/lib/utils/fetch.js

@@ -0,0 +1,427 @@
+/**
+ * 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();
+ */
+// Global configuration
+let globalConfig = {
+    credentials: 'same-origin',
+    headers: {
+        'Content-Type': 'application/json'
+    },
+    timeout: 30000,
+    log: false
+};
+/**
+ * Configure global fetch defaults
+ */
+export function configureFetch(config) {
+    globalConfig = {
+        ...globalConfig,
+        ...config,
+        headers: {
+            ...globalConfig.headers,
+            ...config.headers
+        }
+    };
+}
+/**
+ * Build URL with query parameters
+ */
+function buildUrl(url, params) {
+    if (!params || Object.keys(params).length === 0) {
+        return url;
+    }
+    const searchParams = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+            searchParams.append(key, String(value));
+        }
+    });
+    const queryString = searchParams.toString();
+    if (!queryString)
+        return url;
+    return url.includes('?')
+        ? `${url}&${queryString}`
+        : `${url}?${queryString}`;
+}
+/**
+ * Main fetch function
+ */
+async function executeFetch(url, options = {}) {
+    const { params, body, timeout = globalConfig.timeout, log = globalConfig.log, onUnauthorized = globalConfig.onUnauthorized, onError = globalConfig.onError, parseResponse = true, headers = {}, ...fetchOptions } = options;
+    // Build full URL
+    let fullUrl = url;
+    // Add base URL if configured and URL is relative
+    if (globalConfig.baseUrl && !url.startsWith('http://') && !url.startsWith('https://')) {
+        fullUrl = `${globalConfig.baseUrl}${url.startsWith('/') ? url : `/${url}`}`;
+    }
+    // Add query params
+    fullUrl = buildUrl(fullUrl, params);
+    // Merge headers
+    const mergedHeaders = {
+        ...globalConfig.headers,
+        ...headers
+    };
+    // Prepare request init
+    const requestInit = {
+        ...fetchOptions,
+        headers: mergedHeaders,
+        credentials: options.credentials ?? globalConfig.credentials
+    };
+    // Stringify body if it's an object
+    if (body !== undefined) {
+        if (body instanceof FormData) {
+            requestInit.body = body;
+            // Remove Content-Type header for FormData (browser sets it with boundary)
+            delete requestInit.headers['Content-Type'];
+        }
+        else if (typeof body === 'object') {
+            requestInit.body = JSON.stringify(body);
+        }
+        else {
+            requestInit.body = body;
+        }
+    }
+    // Log request
+    if (log === true) {
+        console.log(`[JUX Fetch] ${requestInit.method || 'GET'} ${fullUrl}`, {
+            headers: requestInit.headers,
+            body: requestInit.body,
+            params
+        });
+    }
+    // Setup timeout
+    const controller = new AbortController();
+    const timeoutId = timeout ? setTimeout(() => controller.abort(), timeout) : null;
+    if (!requestInit.signal) {
+        requestInit.signal = controller.signal;
+    }
+    try {
+        const response = await fetch(fullUrl, requestInit);
+        if (timeoutId)
+            clearTimeout(timeoutId);
+        // Handle unauthorized
+        if (response.status === 401 || response.status === 403) {
+            if (onUnauthorized) {
+                onUnauthorized();
+            }
+        }
+        // Parse response
+        let data = null;
+        let errorData = null;
+        if (parseResponse) {
+            const contentType = response.headers.get('content-type');
+            if (contentType?.includes('application/json')) {
+                try {
+                    const json = await response.json();
+                    if (response.ok) {
+                        data = json;
+                    }
+                    else {
+                        errorData = json;
+                    }
+                }
+                catch (e) {
+                    // JSON parse error
+                }
+            }
+            else if (response.ok) {
+                // Non-JSON response, try to get text
+                try {
+                    data = (await response.text());
+                }
+                catch (e) {
+                    // Ignore text parse errors
+                }
+            }
+        }
+        // Check if request was successful
+        if (!response.ok) {
+            const error = {
+                message: errorData?.message || errorData?.error || response.statusText || 'Request failed',
+                status: response.status,
+                statusText: response.statusText,
+                data: errorData
+            };
+            // Log error
+            if (log === true || log === 'errors') {
+                console.error(`[JUX Fetch Error] ${requestInit.method || 'GET'} ${fullUrl}`, error);
+            }
+            if (onError) {
+                onError(error);
+            }
+            return {
+                data: null,
+                error,
+                status: response.status,
+                response
+            };
+        }
+        // Log success
+        if (log === true) {
+            console.log(`[JUX Fetch Success] ${requestInit.method || 'GET'} ${fullUrl}`, {
+                status: response.status,
+                data
+            });
+        }
+        return {
+            data,
+            error: null,
+            status: response.status,
+            response
+        };
+    }
+    catch (err) {
+        if (timeoutId)
+            clearTimeout(timeoutId);
+        const error = {
+            message: err.name === 'AbortError'
+                ? 'Request timeout'
+                : err.message || 'Network error',
+            status: 0
+        };
+        // Log error
+        if (log === true || log === 'errors') {
+            console.error(`[JUX Fetch Error] ${requestInit.method || 'GET'} ${fullUrl}`, error);
+        }
+        if (onError) {
+            onError(error);
+        }
+        return {
+            data: null,
+            error,
+            status: 0,
+            response: null
+        };
+    }
+}
+/**
+ * FetchBuilder class for method chaining
+ */
+class FetchBuilder {
+    constructor(url, options = {}) {
+        this.options = {};
+        this.url = url;
+        this.options = options;
+    }
+    method(value) {
+        this.options.method = value;
+        return this;
+    }
+    body(value) {
+        this.options.body = value;
+        return this;
+    }
+    params(value) {
+        this.options.params = value;
+        return this;
+    }
+    headers(value) {
+        this.options.headers = { ...this.options.headers, ...value };
+        return this;
+    }
+    header(key, value) {
+        this.options.headers = { ...this.options.headers, [key]: value };
+        return this;
+    }
+    timeout(value) {
+        this.options.timeout = value;
+        return this;
+    }
+    credentials(value) {
+        this.options.credentials = value;
+        return this;
+    }
+    log(value) {
+        this.options.log = value;
+        return this;
+    }
+    parseResponse(value) {
+        this.options.parseResponse = value;
+        return this;
+    }
+    onUnauthorized(callback) {
+        this.options.onUnauthorized = callback;
+        return this;
+    }
+    onError(callback) {
+        this.options.onError = callback;
+        return this;
+    }
+    /**
+     * Execute the fetch request
+     */
+    send() {
+        return executeFetch(this.url, this.options);
+    }
+    /**
+     * Alias for send()
+     */
+    fetch() {
+        return this.send();
+    }
+    /**
+     * Make the builder thenable (Promise-like) so it can be awaited directly
+     * This allows: await jux.fetch('/users') without needing .send()
+     */
+    then(onfulfilled, onrejected) {
+        return this.send().then(onfulfilled, onrejected);
+    }
+    /**
+     * Make the builder catchable for Promise.catch()
+     */
+    catch(onrejected) {
+        return this.send().catch(onrejected);
+    }
+    /**
+     * Make the builder finally-able for Promise.finally()
+     */
+    finally(onfinally) {
+        return this.send().finally(onfinally);
+    }
+}
+/**
+ * Create a fetch builder
+ */
+export function juxFetch(url, options = {}) {
+    return new FetchBuilder(url, options);
+}
+/**
+ * Convenience methods for common HTTP verbs
+ */
+export const fetchHelpers = {
+    get: (url, options) => new FetchBuilder(url, { ...options, method: 'GET' }),
+    post: (url, body, options) => new FetchBuilder(url, { ...options, method: 'POST', body }),
+    put: (url, body, options) => new FetchBuilder(url, { ...options, method: 'PUT', body }),
+    patch: (url, body, options) => new FetchBuilder(url, { ...options, method: 'PATCH', body }),
+    delete: (url, options) => new FetchBuilder(url, { ...options, method: 'DELETE' })
+};
+/**
+ * Fetch multiple URLs in parallel
+ */
+export async function fetchAll(urls, options) {
+    return Promise.all(urls.map(url => executeFetch(url, options)));
+}
+/**
+ * Get a service URL from window.juxConfig
+ */
+export function getServiceUrl(serviceName) {
+    if (typeof window === 'undefined')
+        return null;
+    const juxConfig = window.juxConfig;
+    if (!juxConfig?.services)
+        return null;
+    return juxConfig.services[serviceName] || 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 function serviceClient(serviceName) {
+    const baseUrl = getServiceUrl(serviceName);
+    if (!baseUrl) {
+        console.warn(`[JUX Fetch] Service '${serviceName}' not found in juxConfig.services`);
+    }
+    return {
+        fetch: (url, options) => {
+            return juxFetch(url, {
+                ...options,
+                baseUrl: baseUrl || undefined
+            });
+        },
+        baseUrl
+    };
+}
+/**
+ * Setup fetch from juxconfig
+ * Call this in your bootstrap function
+ *
+ * Usage:
+ *   export default {
+ *     bootstrap: [
+ *       async function initFetch() {
+ *         await jux.fetch.setupConfig();
+ *       }
+ *     ]
+ *   };
+ */
+export async function setupConfig() {
+    if (typeof window === 'undefined') {
+        console.warn('[JUX Fetch] setupConfig() called outside browser environment');
+        return;
+    }
+    const juxConfig = window.juxConfig;
+    if (!juxConfig) {
+        console.warn('[JUX Fetch] No juxConfig found on window. Make sure your juxconfig.js is loaded.');
+        return;
+    }
+    const services = juxConfig.services || {};
+    if (Object.keys(services).length === 0) {
+        console.log('[JUX Fetch] No services configured in juxConfig');
+        return;
+    }
+    // Configure fetch with common defaults
+    const fetchConfig = {
+        timeout: juxConfig.fetchTimeout || 30000,
+        log: juxConfig.fetchLog || false,
+        credentials: 'include'
+    };
+    // Add service-specific handlers
+    if (services.auth) {
+        fetchConfig.onUnauthorized = () => {
+            console.warn('[JUX Fetch] Unauthorized - consider redirecting to login');
+        };
+    }
+    configureFetch(fetchConfig);
+    // Log configured services
+    console.log('[JUX Fetch] Configured with services:', Object.keys(services));
+    return {
+        services,
+        getServiceUrl
+    };
+}
+// Export combined API
+export const fetchAPI = Object.assign(juxFetch, {
+    config: configureFetch,
+    setupConfig,
+    getServiceUrl,
+    serviceClient,
+    ...fetchHelpers,
+    all: fetchAll
+});

package/dist/lib/utils/formatId.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Convert a component ID to a human-readable label
+ *
+ * Examples:
+ *   'btn-1' → 'Btn 1'
+ *   'btn1' → 'Btn1'
+ *   'btn-primary-1' → 'Btn Primary 1'
+ *   'user-email-input' → 'User Email Input'
+ *   'firstName' → 'First Name'
+ *   'first_name' → 'First Name'
+ *
+ * @param id - Component ID (kebab-case, snake_case, or camelCase)
+ * @returns Human-readable label with proper capitalization
+ */
+export declare function formatIdAsLabel(id: string): string;
+//# sourceMappingURL=formatId.d.ts.map

package/dist/lib/utils/formatId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatId.d.ts","sourceRoot":"","sources":["../../../lib/utils/formatId.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAalD"}

package/dist/lib/utils/formatId.js

@@ -0,0 +1,27 @@
+/**
+ * Convert a component ID to a human-readable label
+ *
+ * Examples:
+ *   'btn-1' → 'Btn 1'
+ *   'btn1' → 'Btn1'
+ *   'btn-primary-1' → 'Btn Primary 1'
+ *   'user-email-input' → 'User Email Input'
+ *   'firstName' → 'First Name'
+ *   'first_name' → 'First Name'
+ *
+ * @param id - Component ID (kebab-case, snake_case, or camelCase)
+ * @returns Human-readable label with proper capitalization
+ */
+export function formatIdAsLabel(id) {
+    if (!id)
+        return '';
+    // Split by common delimiters: hyphens, underscores, or camelCase boundaries
+    const words = id
+        .replace(/([a-z])([A-Z])/g, '$1 $2') // camelCase → separate words
+        .split(/[-_\s]+/) // Split by hyphens, underscores, spaces
+        .filter(word => word.length > 0);
+    // Capitalize first letter of each word
+    return words
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+}

package/dist/lib/utils/idgen.d.ts

@@ -0,0 +1,2 @@
+export default function generateId(prefix?: string, length?: number): string;
+//# sourceMappingURL=idgen.d.ts.map

package/dist/lib/utils/idgen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"idgen.d.ts","sourceRoot":"","sources":["../../../lib/utils/idgen.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,MAAM,GAAE,MAAc,EAAE,MAAM,GAAE,MAAU,GAAG,MAAM,CAGrF"}

package/dist/lib/utils/idgen.js

@@ -0,0 +1,4 @@
+export default function generateId(prefix = 'jux', length = 9) {
+    const randomPart = Math.random().toString(36).substr(2, length); // Generate a random string
+    return `${prefix}-${randomPart}`;
+}

package/dist/lib/utils/niceName.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Convert a kebab-case or snake_case ID into a human-readable label.
+ *
+ * Examples:
+ *   'my-button'       → 'My Button'
+ *   'nav-home'        → 'Nav Home'
+ *   'user_name'       → 'User Name'
+ *   'firstName'       → 'First Name'
+ *   'save-and-close'  → 'Save And Close'
+ *   'already Nice'    → 'Already Nice'
+ */
+export declare function niceName(id: string): string;
+export default niceName;
+//# sourceMappingURL=niceName.d.ts.map

package/dist/lib/utils/niceName.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"niceName.d.ts","sourceRoot":"","sources":["../../../lib/utils/niceName.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAS3C;AAED,eAAe,QAAQ,CAAC"}

package/dist/lib/utils/niceName.js

@@ -0,0 +1,22 @@
+/**
+ * Convert a kebab-case or snake_case ID into a human-readable label.
+ *
+ * Examples:
+ *   'my-button'       → 'My Button'
+ *   'nav-home'        → 'Nav Home'
+ *   'user_name'       → 'User Name'
+ *   'firstName'       → 'First Name'
+ *   'save-and-close'  → 'Save And Close'
+ *   'already Nice'    → 'Already Nice'
+ */
+export function niceName(id) {
+    return id
+        // Insert space before camelCase capitals: 'firstName' → 'first Name'
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        // Replace dashes, underscores, dots with spaces
+        .replace(/[-_.]+/g, ' ')
+        // Uppercase first letter of each word
+        .replace(/\b\w/g, c => c.toUpperCase())
+        .trim();
+}
+export default niceName;

package/machinery/compiler4.js

@@ -26,29 +26,88 @@ export class JuxCompiler {
     findJuxscriptPath() {
         if (this._juxscriptPath) return this._juxscriptPath;
 
-
-
         const projectRoot = process.cwd();
 
+        // 1. User's project node_modules (standard npm install)
         const userPath = path.resolve(projectRoot, 'node_modules/juxscript/dist/lib/index.js');
         if (fs.existsSync(userPath)) {
+            console.log(`📦 Using: ${userPath}`);
             this._juxscriptPath = userPath;
             return userPath;
         }
 
+        // 2. User's project node_modules — flat dist
+        const userPathFlat = path.resolve(projectRoot, 'node_modules/juxscript/dist/index.js');
+        if (fs.existsSync(userPathFlat)) {
+            console.log(`📦 Using: ${userPathFlat}`);
+            this._juxscriptPath = userPathFlat;
+            return userPathFlat;
+        }
+
+        // 3. Dev mode — built from parent package
         const packageRoot = path.resolve(__dirname, '..');
         const devPath = path.resolve(packageRoot, 'dist', 'lib', 'index.js');
         if (fs.existsSync(devPath)) {
+            console.log(`📦 Using (dev): ${devPath}`);
             this._juxscriptPath = devPath;
             return devPath;
         }
 
+        // 4. Dev mode — flat dist
+        const devPathFlat = path.resolve(packageRoot, 'dist', 'index.js');
+        if (fs.existsSync(devPathFlat)) {
+            console.log(`📦 Using (dev flat): ${devPathFlat}`);
+            this._juxscriptPath = devPathFlat;
+            return devPathFlat;
+        }
+
+        // 5. Monorepo sibling
         const monoPath = path.resolve(projectRoot, '../jux/dist/lib/index.js');
         if (fs.existsSync(monoPath)) {
+            console.log(`📦 Using (mono): ${monoPath}`);
             this._juxscriptPath = monoPath;
             return monoPath;
         }
 
+        // 6. Try require.resolve as last resort
+        try {
+            const resolved = require.resolve('juxscript');
+            if (fs.existsSync(resolved)) {
+                console.log(`📦 Using (resolved): ${resolved}`);
+                this._juxscriptPath = resolved;
+                return resolved;
+            }
+        } catch (_) { }
+
+        // Debug: show what was checked
+        console.error('❌ Searched for juxscript at:');
+        console.error(`   ${userPath}`);
+        console.error(`   ${userPathFlat}`);
+        console.error(`   ${devPath}`);
+        console.error(`   ${devPathFlat}`);
+        console.error(`   ${monoPath}`);
+
+        // Check if node_modules/juxscript exists at all
+        const juxscriptDir = path.resolve(projectRoot, 'node_modules/juxscript');
+        if (fs.existsSync(juxscriptDir)) {
+            console.error(`\n📁 node_modules/juxscript exists. Contents:`);
+            try {
+                const pkg = JSON.parse(fs.readFileSync(path.join(juxscriptDir, 'package.json'), 'utf8'));
+                console.error(`   main: ${pkg.main}`);
+                console.error(`   types: ${pkg.types}`);
+                if (pkg.exports) console.error(`   exports: ${JSON.stringify(pkg.exports)}`);
+            } catch (_) { }
+            const distDir = path.join(juxscriptDir, 'dist');
+            if (fs.existsSync(distDir)) {
+                const files = fs.readdirSync(distDir, { recursive: true });
+                console.error(`   dist/ files: ${files.slice(0, 20).join(', ')}${files.length > 20 ? '...' : ''}`);
+            } else {
+                console.error(`   ⚠️  dist/ directory missing — lib may not be built`);
+            }
+        } else {
+            console.error(`\n⚠️  node_modules/juxscript does not exist — run: npm install juxscript`);
+        }
+
         return null;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.349",
+  "version": "1.1.352",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",