create-nativecore 0.1.1 → 0.2.0

package/template/src/core/http.ts

@@ -0,0 +1,173 @@
+/**
+ * HTTP Client
+ * Enhanced wrapper around fetch with interceptors, retries, and better error handling
+ */
+import errorHandler from './errorHandler.js';
+
+// Types
+export interface HttpConfig extends RequestInit {
+    headers?: Record<string, string>;
+    params?: Record<string, string>;
+    data?: any;
+}
+
+export type RequestInterceptor = (config: HttpConfig) => HttpConfig | Promise<HttpConfig>;
+export type ResponseInterceptor = (response: Response) => Response | Promise<Response>;
+
+class HttpClient {
+    private baseURL: string = '';
+    private defaultHeaders: Record<string, string> = {
+        'Content-Type': 'application/json',
+    };
+    private timeout: number = 30000;
+    private requestInterceptors: RequestInterceptor[] = [];
+    private responseInterceptors: ResponseInterceptor[] = [];
+    
+    /**
+     * Set base URL
+     */
+    setBaseURL(url: string): this {
+        this.baseURL = url;
+        return this;
+    }
+    
+    /**
+     * Set timeout
+     */
+    setTimeout(ms: number): this {
+        this.timeout = ms;
+        return this;
+    }
+    
+    /**
+     * Add request interceptor
+     */
+    addRequestInterceptor(interceptor: RequestInterceptor): this {
+        this.requestInterceptors.push(interceptor);
+        return this;
+    }
+    
+    /**
+     * Add response interceptor
+     */
+    addResponseInterceptor(interceptor: ResponseInterceptor): this {
+        this.responseInterceptors.push(interceptor);
+        return this;
+    }
+    
+    /**
+     * Make HTTP request
+     */
+    async request<T = any>(endpoint: string, options: HttpConfig = {}): Promise<T> {
+        const url = this.buildURL(endpoint);
+        
+        let config: HttpConfig = {
+            ...options,
+            headers: {
+                ...this.defaultHeaders,
+                ...options.headers,
+            },
+        };
+        
+        // Apply request interceptors
+        for (const interceptor of this.requestInterceptors) {
+            config = await interceptor(config);
+        }
+        
+        try {
+            const response = await this.fetchWithTimeout(url, config, this.timeout);
+            
+            // Apply response interceptors
+            let processedResponse = response;
+            for (const interceptor of this.responseInterceptors) {
+                processedResponse = await interceptor(processedResponse);
+            }
+            
+            const data = await processedResponse.json();
+            
+            if (!processedResponse.ok) {
+                throw new Error(data.message || `HTTP ${processedResponse.status}`);
+            }
+            
+            return data;
+            
+        } catch (error) {
+            errorHandler.handleError(error as Error, { endpoint, method: config.method });
+            throw error;
+        }
+    }
+    
+    /**
+     * GET request
+     */
+    async get<T = any>(endpoint: string, config: HttpConfig = {}): Promise<T> {
+        return this.request<T>(endpoint, { ...config, method: 'GET' });
+    }
+    
+    /**
+     * POST request
+     */
+    async post<T = any>(endpoint: string, data?: any, config: HttpConfig = {}): Promise<T> {
+        return this.request<T>(endpoint, {
+            ...config,
+            method: 'POST',
+            body: JSON.stringify(data),
+        });
+    }
+    
+    /**
+     * PUT request
+     */
+    async put<T = any>(endpoint: string, data?: any, config: HttpConfig = {}): Promise<T> {
+        return this.request<T>(endpoint, {
+            ...config,
+            method: 'PUT',
+            body: JSON.stringify(data),
+        });
+    }
+    
+    /**
+     * DELETE request
+     */
+    async delete<T = any>(endpoint: string, config: HttpConfig = {}): Promise<T> {
+        return this.request<T>(endpoint, { ...config, method: 'DELETE' });
+    }
+    
+    /**
+     * PATCH request
+     */
+    async patch<T = any>(endpoint: string, data?: any, config: HttpConfig = {}): Promise<T> {
+        return this.request<T>(endpoint, {
+            ...config,
+            method: 'PATCH',
+            body: JSON.stringify(data),
+        });
+    }
+    
+    /**
+     * Build full URL
+     */
+    private buildURL(endpoint: string): string {
+        if (endpoint.startsWith('http')) return endpoint;
+        return `${this.baseURL}${endpoint}`;
+    }
+    
+    /**
+     * Fetch with timeout
+     */
+    private fetchWithTimeout(url: string, config: HttpConfig, timeout: number): Promise<Response> {
+        return new Promise((resolve, reject) => {
+            const timer = setTimeout(() => {
+                reject(new Error(`Request timeout after ${timeout}ms`));
+            }, timeout);
+            
+            fetch(url, config as RequestInit)
+                .then(resolve)
+                .catch(reject)
+                .finally(() => clearTimeout(timer));
+        });
+    }
+}
+
+const http = new HttpClient();
+export default http;

package/template/src/core/lazyComponents.ts

@@ -0,0 +1,90 @@
+/**
+ * Component Lazy Loading Registry
+ */
+import { bustCache } from '../utils/cacheBuster.js';
+
+class ComponentRegistry {
+    private components = new Map<string, string>();
+    private loaded = new Set<string>();
+    private observer: MutationObserver | null = null;
+    
+    register(tagName: string, modulePath: string): void {
+        this.components.set(tagName, modulePath);
+    }
+    
+    async loadComponent(tagName: string): Promise<void> {
+        // Check if already loaded or if component is already defined
+        if (this.loaded.has(tagName) || customElements.get(tagName)) {
+            this.loaded.add(tagName); // Mark as loaded even if prefetched
+            return;
+        }
+        
+        const modulePath = this.components.get(tagName);
+        if (!modulePath) {
+            console.warn(`Component ${tagName} not registered`);
+            return;
+        }
+        
+        try {
+            const absolutePath = modulePath.startsWith('./') 
+                ? `/dist/components/${modulePath.slice(2)}`
+                : modulePath;
+            
+            const finalPath = bustCache(absolutePath);
+            await import(finalPath);
+            this.loaded.add(tagName);
+        } catch (error) {
+            console.error(`Failed to load component ${tagName}:`, error);
+        }
+    }
+    
+    async scanAndLoad(root: HTMLElement | Document = document.body): Promise<void> {
+        const promises: Promise<void>[] = [];
+        
+        for (const tagName of this.components.keys()) {
+            if (!this.loaded.has(tagName)) {
+                const elements = root.querySelectorAll(tagName);
+                if (elements.length > 0) {
+                    promises.push(this.loadComponent(tagName));
+                }
+            }
+        }
+        
+        await Promise.all(promises);
+    }
+    
+    startObserving(): void {
+        if (this.observer) return;
+        
+        this.observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach(node => {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            this.scanAndLoad(node as HTMLElement);
+                        }
+                    });
+                }
+            }
+        });
+        
+        this.observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+    }
+    
+    stopObserving(): void {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+}
+
+export const componentRegistry = new ComponentRegistry();
+
+export async function initLazyComponents(): Promise<void> {
+    await componentRegistry.scanAndLoad();
+    componentRegistry.startObserving();
+}