juxscript 1.1.4 → 1.1.6

package/lib/utils/fetch.ts

@@ -0,0 +1,553 @@
+/**
+ * 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;
+}
+
+// Global configuration
+let globalConfig: FetchConfig = {
+    credentials: 'same-origin',
+    headers: {
+        'Content-Type': 'application/json'
+    },
+    timeout: 30000,
+    log: false
+};
+
+/**
+ * Configure global fetch defaults
+ */
+export function configureFetch(config: FetchConfig): void {
+    globalConfig = {
+        ...globalConfig,
+        ...config,
+        headers: {
+            ...globalConfig.headers,
+            ...config.headers
+        }
+    };
+}
+
+/**
+ * Build URL with query parameters
+ */
+function buildUrl(url: string, params?: Record<string, any>): string {
+    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<T = any>(
+    url: string,
+    options: FetchOptions = {}
+): Promise<FetchResult<T>> {
+    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: 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 as Record<string, string>)['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: T | null = null;
+        let errorData: any = 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()) as any;
+                } catch (e) {
+                    // Ignore text parse errors
+                }
+            }
+        }
+
+        // Check if request was successful
+        if (!response.ok) {
+            const error: FetchError = {
+                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: any) {
+        if (timeoutId) clearTimeout(timeoutId);
+
+        const error: FetchError = {
+            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 as any
+        };
+    }
+}
+
+/**
+ * FetchBuilder class for method chaining
+ */
+class FetchBuilder<T = any> {
+    public url: string;
+    public options: FetchOptions = {};
+
+    constructor(url: string, options: FetchOptions = {}) {
+        this.url = url;
+        this.options = options;
+    }
+
+    method(value: string): this {
+        this.options.method = value;
+        return this;
+    }
+
+    body(value: any): this {
+        this.options.body = value;
+        return this;
+    }
+
+    params(value: Record<string, any>): this {
+        this.options.params = value;
+        return this;
+    }
+
+    headers(value: Record<string, string>): this {
+        this.options.headers = { ...this.options.headers, ...value };
+        return this;
+    }
+
+    header(key: string, value: string): this {
+        this.options.headers = { ...this.options.headers, [key]: value };
+        return this;
+    }
+
+    timeout(value: number): this {
+        this.options.timeout = value;
+        return this;
+    }
+
+    credentials(value: RequestCredentials): this {
+        this.options.credentials = value;
+        return this;
+    }
+
+    log(value: LogLevel): this {
+        this.options.log = value;
+        return this;
+    }
+
+    parseResponse(value: boolean): this {
+        this.options.parseResponse = value;
+        return this;
+    }
+
+    onUnauthorized(callback: () => void): this {
+        this.options.onUnauthorized = callback;
+        return this;
+    }
+
+    onError(callback: (error: FetchError) => void): this {
+        this.options.onError = callback;
+        return this;
+    }
+
+    /**
+     * Execute the fetch request
+     */
+    send(): Promise<FetchResult<T>> {
+        return executeFetch<T>(this.url, this.options);
+    }
+
+    /**
+     * Alias for send()
+     */
+    fetch(): Promise<FetchResult<T>> {
+        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<TResult1 = FetchResult<T>, TResult2 = never>(
+        onfulfilled?: ((value: FetchResult<T>) => TResult1 | PromiseLike<TResult1>) | null,
+        onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null
+    ): Promise<TResult1 | TResult2> {
+        return this.send().then(onfulfilled, onrejected);
+    }
+
+    /**
+     * Make the builder catchable for Promise.catch()
+     */
+    catch<TResult = never>(
+        onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null
+    ): Promise<FetchResult<T> | TResult> {
+        return this.send().catch(onrejected);
+    }
+
+    /**
+     * Make the builder finally-able for Promise.finally()
+     */
+    finally(onfinally?: (() => void) | null): Promise<FetchResult<T>> {
+        return this.send().finally(onfinally);
+    }
+}
+
+/**
+ * Create a fetch builder
+ */
+export function juxFetch<T = any>(url: string, options: FetchOptions = {}): FetchBuilder<T> {
+    return new FetchBuilder<T>(url, options);
+}
+
+/**
+ * Convenience methods for common HTTP verbs
+ */
+export const fetchHelpers = {
+    get: <T = any>(url: string, options?: Omit<FetchOptions, 'method'>) =>
+        new FetchBuilder<T>(url, { ...options, method: 'GET' }),
+
+    post: <T = any>(url: string, body?: any, options?: Omit<FetchOptions, 'method' | 'body'>) =>
+        new FetchBuilder<T>(url, { ...options, method: 'POST', body }),
+
+    put: <T = any>(url: string, body?: any, options?: Omit<FetchOptions, 'method' | 'body'>) =>
+        new FetchBuilder<T>(url, { ...options, method: 'PUT', body }),
+
+    patch: <T = any>(url: string, body?: any, options?: Omit<FetchOptions, 'method' | 'body'>) =>
+        new FetchBuilder<T>(url, { ...options, method: 'PATCH', body }),
+
+    delete: <T = any>(url: string, options?: Omit<FetchOptions, 'method'>) =>
+        new FetchBuilder<T>(url, { ...options, method: 'DELETE' })
+};
+
+/**
+ * Fetch multiple URLs in parallel
+ */
+export async function fetchAll<T = any>(
+    urls: string[],
+    options?: FetchOptions
+): Promise<FetchResult<T>[]> {
+    return Promise.all(urls.map(url => executeFetch<T>(url, options)));
+}
+
+/**
+ * Get a service URL from window.juxConfig
+ */
+export function getServiceUrl(serviceName: string): string | null {
+    if (typeof window === 'undefined') return null;
+
+    const juxConfig = (window as any).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: string) {
+    const baseUrl = getServiceUrl(serviceName);
+
+    if (!baseUrl) {
+        console.warn(`[JUX Fetch] Service '${serviceName}' not found in juxConfig.services`);
+    }
+
+    return {
+        fetch: (url: string, options?: any) => {
+            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 as any).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: 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/machinery/compiler3.js

@@ -91,6 +91,84 @@ export class JuxCompiler {
         return name.replace(/[^a-zA-Z0-9]/g, '_');
     }
 
+    async loadJuxscriptExports() {
+        if (this._juxscriptExports) return this._juxscriptExports;
+
+        try {
+            const juxscriptPath = this.findJuxscriptPath();
+            if (juxscriptPath) {
+                const indexContent = fs.readFileSync(juxscriptPath, 'utf8');
+                const exports = new Set();
+
+                for (const match of indexContent.matchAll(/export\s*\{\s*([^}]+)\s*\}/g)) {
+                    match[1].split(',').forEach(exp => {
+                        const name = exp.trim().split(/\s+as\s+/)[0].trim();
+                        if (name) exports.add(name);
+                    });
+                }
+
+                this._juxscriptExports = [...exports];
+                if (this._juxscriptExports.length > 0) {
+                    console.log(`📦 juxscript exports: ${this._juxscriptExports.join(', ')}`);
+                }
+            }
+        } catch (err) {
+            this._juxscriptExports = [];
+        }
+
+        return this._juxscriptExports;
+    }
+
+    validateViewCode(viewName, code) {
+        const issues = [];
+
+        let ast;
+        try {
+            ast = acorn.parse(code, { ecmaVersion: 'latest', sourceType: 'module', locations: true });
+        } catch (parseError) {
+            issues.push({
+                type: 'error',
+                view: viewName,
+                line: parseError.loc?.line || 0,
+                message: `Syntax error: ${parseError.message}`,
+                code: ''
+            });
+            return issues;
+        }
+
+        const allImports = new Set();
+
+        walk(ast, {
+            ImportDeclaration(node) {
+                node.specifiers.forEach(spec => {
+                    allImports.add(spec.local.name);
+                });
+            }
+        });
+
+        // Default known facades/components if load fails
+        const knownComponents = this._juxscriptExports || ['element', 'input', 'buttonGroup'];
+
+        walk(ast, {
+            Identifier(node, parent) {
+                if (parent?.type === 'CallExpression' && parent.callee === node) {
+                    const name = node.name;
+                    if (!allImports.has(name) && knownComponents.includes(name)) {
+                        issues.push({
+                            type: 'warning',
+                            view: viewName,
+                            line: node.loc?.start?.line || 0,
+                            message: `"${name}" is used but not imported from juxscript`,
+                            code: ''
+                        });
+                    }
+                }
+            }
+        });
+
+        return issues;
+    }
+
     /**
      * Generate entry point without layout/theme logic
      */