wu-framework 1.1.15 → 1.1.17

package/src/adapters/preact.d.ts

@@ -1,3 +1,3 @@
-// Re-export from folder structure — backward compatibility
-export * from './preact/index';
-export { default } from './preact/index';
+// Re-export from folder structure — backward compatibility
+export * from './preact/index';
+export { default } from './preact/index';

package/src/adapters/preact.js

@@ -1,3 +1,3 @@
-// Re-export from folder structure — backward compatibility
-export * from './preact/index.js';
-export { default } from './preact/index.js';
+// Re-export from folder structure — backward compatibility
+export * from './preact/index.js';
+export { default } from './preact/index.js';

package/src/adapters/react/index.js

@@ -265,7 +265,7 @@ async function register(appName, Component, options = {}) {
  * <WuSlot name="my-app" url="http://localhost:3001" />
  */
 function createWuSlot(React) {
-  const { useState, useEffect, useRef, useCallback } = React;
+  const { useState, useEffect, useRef } = React;
 
   return function WuSlot({
     name,
@@ -280,57 +280,48 @@ function createWuSlot(React) {
     style = {},
     ...props
   }) {
-    const containerRef = useRef(null);
-    const appInstanceRef = useRef(null);
+    const actualAppName = appName || name;
+
+    // ID estable derivado del nombre: el div ya tiene este id desde el primer render.
+    // wu.mount(name, '#id') lo encuentra sin necesidad de innerHTML ni appendChild.
+    const containerId = `wu-slot-${actualAppName}`;
+    const mountedRef = useRef(false);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
 
-    const actualAppName = appName || name;
-
     useEffect(() => {
       let cancelled = false;
-      const containerId = `wu-slot-${actualAppName}-${Math.random().toString(36).slice(2, 8)}`;
 
-      // Delay de 50ms para compatibilidad con React 18/19 StrictMode.
-      // En StrictMode el primer efecto se cancela inmediatamente (cancelled = true,
-      // clearTimeout) y solo el segundo efecto monta; evita doble-mount y
-      // "[Wu] App not mounted" en primera carga.
+      // Delay 50ms + flag cancelled: patrón StrictMode-safe.
+      // En StrictMode React monta → desmonta → monta; el primer ciclo cancela
+      // el timeout antes de ejecutarse; solo el segundo ciclo monta el MF.
       const timer = setTimeout(async () => {
-        if (cancelled || !containerRef.current) return;
+        if (cancelled) return;
 
         try {
           setLoading(true);
           setError(null);
 
           const wu = getWuInstance();
-          if (!wu) {
-            throw new Error('Wu Framework not initialized');
-          }
+          if (!wu) throw new Error('Wu Framework not initialized');
 
-          // Crear container interno
-          const innerContainer = document.createElement('div');
-          innerContainer.id = containerId;
-          innerContainer.style.width = '100%';
-          innerContainer.style.height = '100%';
-          containerRef.current.innerHTML = '';
-          containerRef.current.appendChild(innerContainer);
-
-          // Montar usando wu.mount() (wu.init() ya se llamó en el shell)
+          // El div#containerId ya está en el DOM (renderizado abajo).
+          // wu.mount lo usa como target; no tocamos su DOM desde JS imperativo.
           await wu.mount(actualAppName, `#${containerId}`);
 
           if (!cancelled) {
-            appInstanceRef.current = actualAppName;
+            mountedRef.current = true;
             setLoading(false);
 
+            const container = document.getElementById(containerId);
             if (onLoad) onLoad({ name: actualAppName, url });
-            if (onMount) onMount({ name: actualAppName, container: innerContainer });
+            if (onMount) onMount({ name: actualAppName, container });
           }
         } catch (err) {
           if (!cancelled) {
             console.error(`[WuSlot] Error loading ${actualAppName}:`, err);
             setError(err.message || 'Failed to load microfrontend');
             setLoading(false);
-
             if (onError) onError(err);
           }
         }
@@ -340,19 +331,16 @@ function createWuSlot(React) {
         cancelled = true;
         clearTimeout(timer);
 
-        if (appInstanceRef.current) {
+        if (mountedRef.current) {
           if (onUnmount) onUnmount({ name: actualAppName });
-
           const wu = getWuInstance();
-          if (wu) {
-            wu.unmount(actualAppName).catch(() => {});
-          }
-          appInstanceRef.current = null;
+          if (wu) wu.unmount(actualAppName).catch(() => {});
+          mountedRef.current = false;
         }
       };
     }, [actualAppName, url, onLoad, onError, onMount, onUnmount]);
 
-    // Render de error
+    // Estado de error
     if (error) {
       return React.createElement('div', {
         className: `wu-slot wu-slot-error ${className}`,
@@ -371,27 +359,33 @@ function createWuSlot(React) {
       ]);
     }
 
-    // Render principal
-    return React.createElement('div', {
-      ref: containerRef,
-      className: `wu-slot ${loading ? 'wu-slot-loading' : 'wu-slot-loaded'} ${className}`,
-      style: {
-        minHeight: '100px',
-        position: 'relative',
-        ...style
-      },
-      'data-wu-app': actualAppName,
-      'data-wu-url': url,
-      ...props
-    }, loading && (fallback || React.createElement('div', {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '2rem',
-        color: '#666'
-      }
-    }, `Loading ${name}...`)));
+    // Render principal: Fragment con fallback y div de montaje como HERMANOS.
+    //
+    // REGLA CRÍTICA: el div#containerId NO debe tener hijos React.
+    // wu.mount inyecta el MF (otro createRoot) dentro de ese div. Si React también
+    // administra hijos ahí, al desmontar el fallback llama removeChild sobre nodos
+    // que el MF ya reemplazó → "The node to be removed is not a child of this node".
+    //
+    // Solución: fallback y mount-target como hermanos en un Fragment pasados como
+    // argumentos separados a createElement (NO como array; el array rompe la
+    // reconciliación). React solo gestiona el fallback; el interior del mount-target
+    // lo controla exclusivamente el MF.
+    const defaultFallback = React.createElement('div', {
+      style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2rem', color: '#666' }
+    }, `Loading ${name}...`);
+
+    return React.createElement(React.Fragment, null,
+      loading
+        ? React.createElement('div', { className: `wu-slot-fallback ${className}` }, fallback || defaultFallback)
+        : null,
+      React.createElement('div', Object.assign({
+        id: containerId,
+        className: `wu-slot ${loading ? 'wu-slot-loading' : 'wu-slot-loaded'}`,
+        'data-wu-app': actualAppName,
+        'data-wu-url': url,
+        style: Object.assign({ width: '100%', minHeight: loading ? 0 : '200px' }, style)
+      }, props))
+    );
   };
 }
 

package/src/adapters/react.d.ts

@@ -1,3 +1,3 @@
-// Re-export from folder structure — backward compatibility
-export * from './react/index';
-export { default } from './react/index';
+// Re-export from folder structure — backward compatibility
+export * from './react/index';
+export { default } from './react/index';

package/src/adapters/react.js

@@ -1,3 +1,3 @@
-// Re-export from folder structure — backward compatibility
-export * from './react/index.js';
-export { default } from './react/index.js';
+// Re-export from folder structure — backward compatibility
+export * from './react/index.js';
+export { default } from './react/index.js';

package/src/adapters/shared.js

@@ -1,64 +1,64 @@
-/**
- * WU-FRAMEWORK ADAPTERS — Shared Utilities
- *
- * Common functions used across all framework adapters.
- * Extracted to avoid duplication.
- */
-
-/**
- * Get the Wu Framework instance from window or parent frames.
- * @returns {object|null}
- */
-export function getWuInstance() {
-  if (typeof window === 'undefined') return null;
-
-  return window.wu
-    || window.parent?.wu
-    || window.top?.wu
-    || null;
-}
-
-/**
- * Wait for Wu Framework to become available.
- * @param {number} timeout - Timeout in ms (default 5000)
- * @returns {Promise<object>}
- */
-export function waitForWu(timeout = 5000) {
-  return new Promise((resolve, reject) => {
-    const wu = getWuInstance();
-    if (wu) {
-      resolve(wu);
-      return;
-    }
-
-    const startTime = Date.now();
-
-    const handleWuReady = () => {
-      cleanup();
-      resolve(getWuInstance());
-    };
-
-    window.addEventListener('wu:ready', handleWuReady);
-    window.addEventListener('wu:app:ready', handleWuReady);
-
-    const checkInterval = setInterval(() => {
-      const wu = getWuInstance();
-      if (wu) {
-        cleanup();
-        resolve(wu);
-        return;
-      }
-
-      if (Date.now() - startTime > timeout) {
-        cleanup();
-        reject(new Error(`Wu Framework not found after ${timeout}ms`));
-      }
-    }, 200);
-
-    function cleanup() {
-      clearInterval(checkInterval);
-      window.removeEventListener('wu:ready', handleWuReady);
-      window.removeEventListener('wu:app:ready', handleWuReady);
-    }
-  });
-}
+/**
+ * WU-FRAMEWORK ADAPTERS — Shared Utilities
+ *
+ * Common functions used across all framework adapters.
+ * Extracted to avoid duplication.
+ */
+
+/**
+ * Get the Wu Framework instance from window or parent frames.
+ * @returns {object|null}
+ */
+export function getWuInstance() {
+  if (typeof window === 'undefined') return null;
+
+  return window.wu
+    || window.parent?.wu
+    || window.top?.wu
+    || null;
+}
+
+/**
+ * Wait for Wu Framework to become available.
+ * @param {number} timeout - Timeout in ms (default 5000)
+ * @returns {Promise<object>}
+ */
+export function waitForWu(timeout = 5000) {
+  return new Promise((resolve, reject) => {
+    const wu = getWuInstance();
+    if (wu) {
+      resolve(wu);
+      return;
+    }
+
+    const startTime = Date.now();
+
+    const handleWuReady = () => {
+      cleanup();
+      resolve(getWuInstance());
+    };
+
+    window.addEventListener('wu:ready', handleWuReady);
+    window.addEventListener('wu:app:ready', handleWuReady);
+
+    const checkInterval = setInterval(() => {
+      const wu = getWuInstance();
+      if (wu) {
+        cleanup();
+        resolve(wu);
+        return;
+      }
+
+      if (Date.now() - startTime > timeout) {
+        cleanup();
+        reject(new Error(`Wu Framework not found after ${timeout}ms`));
+      }
+    }, 200);
+
+    function cleanup() {
+      clearInterval(checkInterval);
+      window.removeEventListener('wu:ready', handleWuReady);
+      window.removeEventListener('wu:app:ready', handleWuReady);
+    }
+  });
+}

package/src/adapters/solid/ai.js

@@ -1,32 +1,32 @@
-/**
- * WU-FRAMEWORK SOLID AI INTEGRATION
- */
-function getWuInstance() {
-  if (typeof window === 'undefined') return null;
-  return window.wu || window.parent?.wu || window.top?.wu || null;
-}
-
-export function createUseWuAI() {
-  return function useWuAI(options = {}) {
-    const { namespace = 'default' } = options;
-    const state = { messages: [], isStreaming: false, error: null };
-    return {
-      messages: () => state.messages,
-      isStreaming: () => state.isStreaming,
-      error: () => state.error,
-      async send(text) {
-        if (!text?.trim()) return;
-        const wu = getWuInstance();
-        if (!wu?.ai) { state.error = 'Wu AI not available'; return; }
-        state.messages = [...state.messages, { id: `user-${Date.now()}`, role: 'user', content: text, timestamp: Date.now() }];
-        state.isStreaming = true; state.error = null;
-        try {
-          const res = await wu.ai.send(text, { namespace });
-          state.messages = [...state.messages, { id: `assistant-${Date.now()}`, role: 'assistant', content: res.content, timestamp: Date.now() }];
-        } catch (err) { state.error = err.message; }
-        state.isStreaming = false;
-      },
-      clear() { state.messages = []; state.error = null; },
-    };
-  };
-}
+/**
+ * WU-FRAMEWORK SOLID AI INTEGRATION
+ */
+function getWuInstance() {
+  if (typeof window === 'undefined') return null;
+  return window.wu || window.parent?.wu || window.top?.wu || null;
+}
+
+export function createUseWuAI() {
+  return function useWuAI(options = {}) {
+    const { namespace = 'default' } = options;
+    const state = { messages: [], isStreaming: false, error: null };
+    return {
+      messages: () => state.messages,
+      isStreaming: () => state.isStreaming,
+      error: () => state.error,
+      async send(text) {
+        if (!text?.trim()) return;
+        const wu = getWuInstance();
+        if (!wu?.ai) { state.error = 'Wu AI not available'; return; }
+        state.messages = [...state.messages, { id: `user-${Date.now()}`, role: 'user', content: text, timestamp: Date.now() }];
+        state.isStreaming = true; state.error = null;
+        try {
+          const res = await wu.ai.send(text, { namespace });
+          state.messages = [...state.messages, { id: `assistant-${Date.now()}`, role: 'assistant', content: res.content, timestamp: Date.now() }];
+        } catch (err) { state.error = err.message; }
+        state.isStreaming = false;
+      },
+      clear() { state.messages = []; state.error = null; },
+    };
+  };
+}

package/src/adapters/solid/index.d.ts

@@ -1,101 +1,101 @@
-/**
- * 🚀 WU-FRAMEWORK SOLID.JS ADAPTER - TypeScript Declarations
- */
-
-import type { WuCore } from '../core/wu-core';
-
-// Solid types (generics to avoid hard dependency)
-type Component<P = {}> = (props: P) => any;
-type Accessor<T> = () => T;
-type Setter<T> = (value: T | ((prev: T) => T)) => T;
-
-/**
- * Opciones de registro Solid
- */
-export interface SolidRegisterOptions {
-  /** Props iniciales */
-  props?: Record<string, any>;
-  /** Callback después de montar */
-  onMount?: (container: HTMLElement) => void;
-  /** Callback antes de desmontar */
-  onUnmount?: (container: HTMLElement) => void;
-  /** Permitir ejecución standalone */
-  standalone?: boolean;
-  /** Selector para modo standalone */
-  standaloneContainer?: string;
-}
-
-/**
- * Props del componente WuSlot
- */
-export interface WuSlotProps {
-  name: string;
-  url: string;
-  appName?: string;
-  fallback?: string;
-  onLoad?: (data: { name: string; url: string }) => void;
-  onError?: (error: Error) => void;
-  class?: string;
-  style?: Record<string, string | number>;
-}
-
-/**
- * Resultado de createWuStore
- */
-export type WuStoreResult<T = any> = [
-  Accessor<T>,
-  (path: string, value: any) => void
-];
-
-/**
- * Helper de eventos Wu para Solid
- */
-export interface UseWuEventsResult {
-  emit: (event: string, data?: any, options?: any) => void;
-  on: (event: string, callback: (data: any) => void) => () => void;
-  once: (event: string, callback: (data: any) => void) => () => void;
-  off: (event: string, callback: (data: any) => void) => void;
-}
-
-/**
- * Contexto de Wu
- */
-export interface WuContextResult {
-  WuProvider: Component<{ children?: any }>;
-  useWu: () => WuCore | null;
-  WuContext: any;
-}
-
-export function register(
-  appName: string,
-  Component: Component,
-  options?: SolidRegisterOptions
-): Promise<boolean>;
-
-export function createWuSlot(): Component<WuSlotProps>;
-
-export function createWuStore<T = any>(namespace?: string): WuStoreResult<T>;
-
-export function createWuEvent<T = any>(eventPattern: string): Accessor<T | null>;
-
-export function useWuEvents(): UseWuEventsResult;
-
-export function createWuContext(): WuContextResult;
-
-export function getWuInstance(): WuCore | null;
-
-export function waitForWu(timeout?: number): Promise<WuCore>;
-
-export interface WuSolidAdapter {
-  register: typeof register;
-  createWuSlot: typeof createWuSlot;
-  createWuStore: typeof createWuStore;
-  createWuEvent: typeof createWuEvent;
-  useWuEvents: typeof useWuEvents;
-  createWuContext: typeof createWuContext;
-  getWuInstance: typeof getWuInstance;
-  waitForWu: typeof waitForWu;
-}
-
-export const wuSolid: WuSolidAdapter;
-export default wuSolid;
+/**
+ * 🚀 WU-FRAMEWORK SOLID.JS ADAPTER - TypeScript Declarations
+ */
+
+import type { WuCore } from '../core/wu-core';
+
+// Solid types (generics to avoid hard dependency)
+type Component<P = {}> = (props: P) => any;
+type Accessor<T> = () => T;
+type Setter<T> = (value: T | ((prev: T) => T)) => T;
+
+/**
+ * Opciones de registro Solid
+ */
+export interface SolidRegisterOptions {
+  /** Props iniciales */
+  props?: Record<string, any>;
+  /** Callback después de montar */
+  onMount?: (container: HTMLElement) => void;
+  /** Callback antes de desmontar */
+  onUnmount?: (container: HTMLElement) => void;
+  /** Permitir ejecución standalone */
+  standalone?: boolean;
+  /** Selector para modo standalone */
+  standaloneContainer?: string;
+}
+
+/**
+ * Props del componente WuSlot
+ */
+export interface WuSlotProps {
+  name: string;
+  url: string;
+  appName?: string;
+  fallback?: string;
+  onLoad?: (data: { name: string; url: string }) => void;
+  onError?: (error: Error) => void;
+  class?: string;
+  style?: Record<string, string | number>;
+}
+
+/**
+ * Resultado de createWuStore
+ */
+export type WuStoreResult<T = any> = [
+  Accessor<T>,
+  (path: string, value: any) => void
+];
+
+/**
+ * Helper de eventos Wu para Solid
+ */
+export interface UseWuEventsResult {
+  emit: (event: string, data?: any, options?: any) => void;
+  on: (event: string, callback: (data: any) => void) => () => void;
+  once: (event: string, callback: (data: any) => void) => () => void;
+  off: (event: string, callback: (data: any) => void) => void;
+}
+
+/**
+ * Contexto de Wu
+ */
+export interface WuContextResult {
+  WuProvider: Component<{ children?: any }>;
+  useWu: () => WuCore | null;
+  WuContext: any;
+}
+
+export function register(
+  appName: string,
+  Component: Component,
+  options?: SolidRegisterOptions
+): Promise<boolean>;
+
+export function createWuSlot(): Component<WuSlotProps>;
+
+export function createWuStore<T = any>(namespace?: string): WuStoreResult<T>;
+
+export function createWuEvent<T = any>(eventPattern: string): Accessor<T | null>;
+
+export function useWuEvents(): UseWuEventsResult;
+
+export function createWuContext(): WuContextResult;
+
+export function getWuInstance(): WuCore | null;
+
+export function waitForWu(timeout?: number): Promise<WuCore>;
+
+export interface WuSolidAdapter {
+  register: typeof register;
+  createWuSlot: typeof createWuSlot;
+  createWuStore: typeof createWuStore;
+  createWuEvent: typeof createWuEvent;
+  useWuEvents: typeof useWuEvents;
+  createWuContext: typeof createWuContext;
+  getWuInstance: typeof getWuInstance;
+  waitForWu: typeof waitForWu;
+}
+
+export const wuSolid: WuSolidAdapter;
+export default wuSolid;