nuclie 1.0.0

package/dist/runtime/error-overlay.js

@@ -0,0 +1,327 @@
+const styles = `
+:host {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
+  --bg-color: #18181b;
+  --text-color: #fafafa;
+  --red: #ef4444;
+  --dim-red: rgba(239, 68, 68, 0.1);
+  --yellow: #eab308;
+  --dim-yellow: rgba(234, 179, 8, 0.1);
+  --border: #27272a;
+  --code-bg: #09090b;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+:host(.light) {
+  --bg-color: #ffffff;
+  --text-color: #18181b;
+  --border: #e4e4e7;
+  --code-bg: #f4f4f5;
+}
+
+.overlay {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(4px);
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.container {
+  background: var(--bg-color);
+  color: var(--text-color);
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  max-width: 900px;
+  width: 100%;
+  margin: 0 auto;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+}
+
+.header {
+  background: var(--bg-color);
+  border-bottom: 1px solid var(--border);
+  padding: 0 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+  flex-shrink: 0;
+}
+
+.tabs {
+  display: flex;
+  height: 100%;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 1rem;
+  height: 100%;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  color: #71717a;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.tab:hover {
+  color: var(--text-color);
+  background: var(--dim-red);
+}
+
+.tab.active {
+  color: var(--text-color);
+  border-bottom-color: var(--red);
+}
+
+.tab.active.runtime {
+  border-bottom-color: var(--red);
+}
+
+.tab.active.build {
+  border-bottom-color: var(--yellow);
+}
+
+.badge {
+  padding: 0.125rem 0.375rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  background: var(--dim-red);
+  color: var(--red);
+}
+
+.actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-color);
+  padding: 0.375rem 0.75rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.btn:hover {
+  background: var(--border);
+}
+
+.content {
+  padding: 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.error-item {
+  margin-bottom: 2rem;
+  animation: fade-in 0.2s ease-out;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.message {
+  font-size: 1.125rem;
+  line-height: 1.6;
+  margin-bottom: 1rem;
+  white-space: pre-wrap;
+  font-weight: 500;
+}
+
+.file-link {
+  color: #a1a1aa;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 4px;
+  background: var(--code-bg);
+  width: fit-content;
+}
+
+.file-link:hover {
+  color: var(--text-color);
+  background: var(--border);
+}
+
+.code-frame {
+  background: var(--code-bg);
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border: 1px solid var(--border);
+  margin-top: 1rem;
+}
+
+.stack-trace {
+  margin-top: 1rem;
+  font-size: 0.875rem;
+  color: #71717a;
+}
+
+.stack-frame {
+  padding: 0.25rem 0;
+  cursor: pointer;
+}
+
+.stack-frame:hover {
+  color: var(--text-color);
+  text-decoration: underline;
+}
+`;
+export class ErrorOverlay extends HTMLElement {
+    constructor() {
+        super();
+        this._errors = [];
+        this._activeTab = 'build';
+        this.root = this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        this.render();
+        this.setupKeyboard();
+    }
+    setupKeyboard() {
+        window.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                this.dismiss();
+            }
+        });
+    }
+    set errors(errors) {
+        this._errors = errors;
+        // Auto-switch tab based on error type
+        if (errors.some(e => e.type === 'build')) {
+            this._activeTab = 'build';
+        }
+        else if (errors.some(e => e.type === 'runtime')) {
+            this._activeTab = 'runtime';
+        }
+        this.render();
+    }
+    dismiss() {
+        this.style.display = 'none';
+        this._errors = [];
+    }
+    openInEditor(file, line = 1, col = 1) {
+        fetch(`/__open-in-editor?file=${encodeURIComponent(file)}&line=${line}&column=${col}`)
+            .catch(e => console.error('Failed to open in editor:', e));
+    }
+    render() {
+        if (this._errors.length === 0) {
+            this.style.display = 'none';
+            return;
+        }
+        this.style.display = 'block';
+        const buildErrors = this._errors.filter(e => e.type === 'build');
+        const runtimeErrors = this._errors.filter(e => e.type === 'runtime');
+        const activeErrors = this._activeTab === 'build' ? buildErrors : runtimeErrors;
+        this.root.innerHTML = `
+      <style>${styles}</style>
+      <div class="overlay">
+        <div class="container">
+          <div class="header">
+            <div class="tabs">
+              ${buildErrors.length > 0 ? `
+                <div class="tab ${this._activeTab === 'build' ? 'active build' : ''}" onclick="this.getRootNode().host.switchTab('build')">
+                  Build Errors
+                  <span class="badge">${buildErrors.length}</span>
+                </div>
+              ` : ''}
+              ${runtimeErrors.length > 0 ? `
+                <div class="tab ${this._activeTab === 'runtime' ? 'active runtime' : ''}" onclick="this.getRootNode().host.switchTab('runtime')">
+                  Runtime Errors
+                  <span class="badge">${runtimeErrors.length}</span>
+                </div>
+              ` : ''}
+            </div>
+            <div class="actions">
+              <button class="btn" onclick="this.getRootNode().host.dismiss()">
+                Dismiss (Esc)
+              </button>
+            </div>
+          </div>
+          <div class="content">
+            ${activeErrors.map(error => this.renderError(error)).join('')}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    switchTab(tab) {
+        this._activeTab = tab;
+        this.render();
+    }
+    renderError(error) {
+        const file = error.location?.file || error.filename;
+        const line = error.location?.line || error.lineno;
+        const col = error.location?.column || error.colno;
+        const message = error.text || error.message || 'Unknown error';
+        return `
+      <div class="error-item">
+        <div class="message">${message}</div>
+        
+        ${file ? `
+          <div class="file-link" onclick="this.getRootNode().host.openInEditor('${file}', ${line}, ${col})">
+            <span>📄 ${file}:${line}:${col}</span>
+            <span style="margin-left: auto; font-size: 0.75rem; opacity: 0.7;">Click to open</span>
+          </div>
+        ` : ''}
+
+        ${error.frame ? `<pre class="code-frame">${error.frame}</pre>` : ''}
+        
+        ${error.stack ? `
+          <div class="stack-trace">
+            ${this.formatStack(error.stack)}
+          </div>
+        ` : ''}
+      </div>
+    `;
+    }
+    formatStack(stack) {
+        return stack.split('\n').map(line => {
+            // Basic parsing to make file paths clickable (simplified)
+            const match = line.match(/\((.*):(\d+):(\d+)\)/);
+            if (match) {
+                const [_, file, l, c] = match;
+                return `<div class="stack-frame" onclick="this.getRootNode().host.openInEditor('${file}', ${l}, ${c})">${line}</div>`;
+            }
+            return `<div>${line}</div>`;
+        }).join('');
+    }
+}
+// Expose methods to DOM
+ErrorOverlay.prototype.switchTab = ErrorOverlay.prototype.switchTab;
+ErrorOverlay.prototype.dismiss = ErrorOverlay.prototype.dismiss;
+ErrorOverlay.prototype.openInEditor = ErrorOverlay.prototype.openInEditor;
+customElements.define('nuclie-error-overlay', ErrorOverlay);

package/dist/runtime/federation-fallback.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Advanced Federation Fallback System
+ * Implements circuit breaker, retry logic, and graceful degradation
+ */
+export declare enum CircuitState {
+    CLOSED = "CLOSED",// Normal operation
+    OPEN = "OPEN",// Failing, reject requests
+    HALF_OPEN = "HALF_OPEN"
+}
+export interface CircuitBreakerConfig {
+    failureThreshold: number;
+    successThreshold: number;
+    timeout: number;
+    monitoringPeriod: number;
+}
+export interface RetryConfig {
+    maxAttempts: number;
+    initialDelay: number;
+    maxDelay: number;
+    backoffMultiplier: number;
+}
+export interface FallbackConfig {
+    component?: any;
+    strategy: 'cache' | 'component' | 'error' | 'skip';
+    cacheTTL?: number;
+}
+/**
+ * Advanced Fallback Manager
+ */
+export declare class FallbackManager {
+    private circuitBreakers;
+    private retryManagers;
+    private moduleCache;
+    private fallbackConfigs;
+    /**
+     * Register a fallback configuration for a remote
+     */
+    registerFallback(remoteName: string, config: FallbackConfig): void;
+    /**
+     * Get or create circuit breaker for a remote
+     */
+    private getCircuitBreaker;
+    /**
+     * Get or create retry manager for a remote
+     */
+    private getRetryManager;
+    /**
+     * Load module with advanced fallback strategies
+     */
+    loadWithFallback<T>(remoteName: string, loadFn: () => Promise<T>): Promise<T>;
+    /**
+     * Get circuit breaker status for monitoring
+     */
+    getStatus(remoteName: string): {
+        circuitState: CircuitState;
+        hasCachedModule: boolean;
+    };
+    /**
+     * Reset circuit breaker for a remote
+     */
+    reset(remoteName: string): void;
+    /**
+     * Clear all caches
+     */
+    clearCache(): void;
+}
+export declare const fallbackManager: FallbackManager;

package/dist/runtime/federation-fallback.js

@@ -0,0 +1,225 @@
+/**
+ * Advanced Federation Fallback System
+ * Implements circuit breaker, retry logic, and graceful degradation
+ */
+export var CircuitState;
+(function (CircuitState) {
+    CircuitState["CLOSED"] = "CLOSED";
+    CircuitState["OPEN"] = "OPEN";
+    CircuitState["HALF_OPEN"] = "HALF_OPEN"; // Testing if service recovered
+})(CircuitState || (CircuitState = {}));
+/**
+ * Circuit Breaker for remote services
+ */
+class CircuitBreaker {
+    constructor(config = {}) {
+        this.state = CircuitState.CLOSED;
+        this.failures = 0;
+        this.successes = 0;
+        this.lastFailureTime = 0;
+        this.nextAttemptTime = 0;
+        this.config = {
+            failureThreshold: config.failureThreshold || 5,
+            successThreshold: config.successThreshold || 2,
+            timeout: config.timeout || 60000, // 1 minute
+            monitoringPeriod: config.monitoringPeriod || 10000 // 10 seconds
+        };
+    }
+    async execute(fn) {
+        if (this.state === CircuitState.OPEN) {
+            if (Date.now() < this.nextAttemptTime) {
+                throw new Error('Circuit breaker is OPEN');
+            }
+            // Try to recover
+            this.state = CircuitState.HALF_OPEN;
+        }
+        try {
+            const result = await fn();
+            this.onSuccess();
+            return result;
+        }
+        catch (error) {
+            this.onFailure();
+            throw error;
+        }
+    }
+    onSuccess() {
+        this.failures = 0;
+        if (this.state === CircuitState.HALF_OPEN) {
+            this.successes++;
+            if (this.successes >= this.config.successThreshold) {
+                this.state = CircuitState.CLOSED;
+                this.successes = 0;
+            }
+        }
+    }
+    onFailure() {
+        this.lastFailureTime = Date.now();
+        this.failures++;
+        if (this.failures >= this.config.failureThreshold) {
+            this.state = CircuitState.OPEN;
+            this.nextAttemptTime = Date.now() + this.config.timeout;
+            this.successes = 0;
+        }
+    }
+    getState() {
+        return this.state;
+    }
+    reset() {
+        this.state = CircuitState.CLOSED;
+        this.failures = 0;
+        this.successes = 0;
+    }
+}
+/**
+ * Retry logic with exponential backoff
+ */
+class RetryManager {
+    constructor(config = {}) {
+        this.config = {
+            maxAttempts: config.maxAttempts || 3,
+            initialDelay: config.initialDelay || 1000,
+            maxDelay: config.maxDelay || 10000,
+            backoffMultiplier: config.backoffMultiplier || 2
+        };
+    }
+    async execute(fn) {
+        let lastError = null;
+        let delay = this.config.initialDelay;
+        for (let attempt = 1; attempt <= this.config.maxAttempts; attempt++) {
+            try {
+                return await fn();
+            }
+            catch (error) {
+                lastError = error;
+                if (attempt < this.config.maxAttempts) {
+                    console.warn(`[Retry] Attempt ${attempt} failed, retrying in ${delay}ms...`);
+                    await this.sleep(delay);
+                    delay = Math.min(delay * this.config.backoffMultiplier, this.config.maxDelay);
+                }
+            }
+        }
+        throw lastError || new Error('All retry attempts failed');
+    }
+    sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+}
+/**
+ * Advanced Fallback Manager
+ */
+export class FallbackManager {
+    constructor() {
+        this.circuitBreakers = new Map();
+        this.retryManagers = new Map();
+        this.moduleCache = new Map();
+        this.fallbackConfigs = new Map();
+    }
+    /**
+     * Register a fallback configuration for a remote
+     */
+    registerFallback(remoteName, config) {
+        this.fallbackConfigs.set(remoteName, config);
+    }
+    /**
+     * Get or create circuit breaker for a remote
+     */
+    getCircuitBreaker(remoteName) {
+        if (!this.circuitBreakers.has(remoteName)) {
+            this.circuitBreakers.set(remoteName, new CircuitBreaker());
+        }
+        return this.circuitBreakers.get(remoteName);
+    }
+    /**
+     * Get or create retry manager for a remote
+     */
+    getRetryManager(remoteName) {
+        if (!this.retryManagers.has(remoteName)) {
+            this.retryManagers.set(remoteName, new RetryManager());
+        }
+        return this.retryManagers.get(remoteName);
+    }
+    /**
+     * Load module with advanced fallback strategies
+     */
+    async loadWithFallback(remoteName, loadFn) {
+        const cacheKey = remoteName;
+        const fallbackConfig = this.fallbackConfigs.get(remoteName);
+        const circuitBreaker = this.getCircuitBreaker(remoteName);
+        const retryManager = this.getRetryManager(remoteName);
+        // Strategy 1: Try cache first (if configured)
+        if (fallbackConfig?.strategy === 'cache') {
+            const cached = this.moduleCache.get(cacheKey);
+            if (cached) {
+                const age = Date.now() - cached.timestamp;
+                const ttl = fallbackConfig.cacheTTL || 300000; // 5 minutes default
+                if (age < ttl) {
+                    console.log(`[Fallback] Using cached module for ${remoteName}`);
+                    return cached.module;
+                }
+            }
+        }
+        // Strategy 2: Try loading with circuit breaker + retry
+        try {
+            const module = await circuitBreaker.execute(async () => {
+                return await retryManager.execute(loadFn);
+            });
+            // Cache successful load
+            if (fallbackConfig?.strategy === 'cache') {
+                this.moduleCache.set(cacheKey, {
+                    module,
+                    timestamp: Date.now()
+                });
+            }
+            return module;
+        }
+        catch (error) {
+            console.error(`[Fallback] Failed to load ${remoteName}:`, error);
+            // Strategy 3: Use fallback component
+            if (fallbackConfig?.component) {
+                console.warn(`[Fallback] Using fallback component for ${remoteName}`);
+                return fallbackConfig.component;
+            }
+            // Strategy 4: Use stale cache (if available)
+            if (fallbackConfig?.strategy === 'cache') {
+                const cached = this.moduleCache.get(cacheKey);
+                if (cached) {
+                    console.warn(`[Fallback] Using stale cache for ${remoteName}`);
+                    return cached.module;
+                }
+            }
+            // Strategy 5: Skip (return null/empty)
+            if (fallbackConfig?.strategy === 'skip') {
+                console.warn(`[Fallback] Skipping ${remoteName}`);
+                return null;
+            }
+            // Strategy 6: Throw error (default)
+            throw error;
+        }
+    }
+    /**
+     * Get circuit breaker status for monitoring
+     */
+    getStatus(remoteName) {
+        const circuitBreaker = this.circuitBreakers.get(remoteName);
+        const cached = this.moduleCache.has(remoteName);
+        return {
+            circuitState: circuitBreaker?.getState() || CircuitState.CLOSED,
+            hasCachedModule: cached
+        };
+    }
+    /**
+     * Reset circuit breaker for a remote
+     */
+    reset(remoteName) {
+        this.circuitBreakers.get(remoteName)?.reset();
+    }
+    /**
+     * Clear all caches
+     */
+    clearCache() {
+        this.moduleCache.clear();
+    }
+}
+// Export singleton instance
+export const fallbackManager = new FallbackManager();

package/dist/runtime/federation.d.ts

@@ -0,0 +1,27 @@
+export interface RemoteConfig {
+    url: string;
+    format?: 'esm' | 'systemjs' | 'var';
+    fallback?: string;
+}
+export interface SharedScope {
+    [pkgName: string]: {
+        [version: string]: {
+            get: () => Promise<any>;
+            loaded?: boolean;
+            from: string;
+        };
+    };
+}
+declare global {
+    interface Window {
+        __NUCLIE_FEDERATION__: {
+            remotes: Record<string, RemoteConfig>;
+            shared: SharedScope;
+            initPromises: Record<string, Promise<any>>;
+        };
+    }
+}
+export declare function initFederation(remotes: Record<string, string>): Promise<void>;
+export declare function loadRemote(remoteName: string, exposedModule: string): Promise<any>;
+export declare function registerShared(name: string, version: string, factory: () => Promise<any>): void;
+export declare function loadShared(name: string, requiredVersion: string): Promise<any>;