wu-framework 1.1.15 → 1.1.17

package/src/adapters/vanilla/index.js

@@ -1,785 +1,785 @@
-/**
- * 🚀 WU-FRAMEWORK VANILLA JS ADAPTER
- *
- * El adapter más simple - Para JavaScript puro sin frameworks.
- * Ideal para microfrontends ligeros o legacy code.
- *
- * @example
- * // Microfrontend (main.js)
- * import { wuVanilla } from 'wu-framework/adapters/vanilla';
- *
- * wuVanilla.register('my-app', {
- *   render: (container) => {
- *     container.innerHTML = '<h1>Hello World</h1>';
- *   }
- * });
- *
- * @example
- * // Con clase
- * class MyApp {
- *   constructor(container) {
- *     this.container = container;
- *   }
- *   render() {
- *     this.container.innerHTML = '<h1>My App</h1>';
- *   }
- *   destroy() {
- *     this.container.innerHTML = '';
- *   }
- * }
- *
- * wuVanilla.registerClass('my-app', MyApp);
- */
-
-// Estado global del adapter
-const adapterState = {
-  apps: new Map(),
-  instances: new Map()
-};
-
-/**
- * Obtiene la instancia de Wu Framework
- */
-function getWuInstance() {
-  if (typeof window === 'undefined') return null;
-
-  return window.wu
-    || window.parent?.wu
-    || window.top?.wu
-    || null;
-}
-
-/**
- * Espera a que Wu Framework esté disponible
- */
-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);
-    }
-  });
-}
-
-/**
- * Registra una app Vanilla JS como microfrontend
- *
- * @param {string} appName - Nombre único del microfrontend
- * @param {Object} config - Configuración de la app
- * @param {Function} config.render - Función para renderizar (recibe container)
- * @param {Function} [config.destroy] - Función para limpiar (recibe container)
- * @param {Function} [config.init] - Función de inicialización (recibe container)
- * @param {Object} [config.state] - Estado inicial
- * @param {Object} options - Opciones adicionales
- *
- * @example
- * wuVanilla.register('counter', {
- *   state: { count: 0 },
- *   init: (container) => {
- *     console.log('Initializing...');
- *   },
- *   render: (container, state) => {
- *     container.innerHTML = `
- *       <div>
- *         <h1>Count: ${state.count}</h1>
- *         <button id="increment">+</button>
- *       </div>
- *     `;
- *     container.querySelector('#increment').onclick = () => {
- *       state.count++;
- *       // Re-render
- *     };
- *   },
- *   destroy: (container) => {
- *     container.innerHTML = '';
- *   }
- * });
- */
-async function register(appName, config, options = {}) {
-  const {
-    render,
-    destroy = null,
-    init = null,
-    state = {}
-  } = config;
-
-  const {
-    onMount = null,
-    onUnmount = null,
-    standalone = true,
-    standaloneContainer = '#app'
-  } = options;
-
-  if (!render || typeof render !== 'function') {
-    throw new Error(`[WuVanilla] render function is required for ${appName}`);
-  }
-
-  // Estado local de la app
-  let appState = { ...state };
-
-  // Función de mount
-  const mountApp = (container) => {
-    if (!container) {
-      console.error(`[WuVanilla] Mount failed for ${appName}: container is null`);
-      return;
-    }
-
-    // Evitar doble mount
-    if (adapterState.apps.has(appName)) {
-      console.warn(`[WuVanilla] ${appName} already mounted, unmounting first`);
-      unmountApp();
-    }
-
-    try {
-      // Limpiar container
-      container.innerHTML = '';
-
-      // Ejecutar init si existe
-      if (init && typeof init === 'function') {
-        init(container, appState);
-      }
-
-      // Renderizar
-      render(container, appState);
-
-      // Guardar referencia
-      adapterState.apps.set(appName, {
-        container,
-        config,
-        state: appState
-      });
-
-      console.log(`[WuVanilla] ✅ ${appName} mounted successfully`);
-
-      if (onMount) {
-        onMount(container, appState);
-      }
-    } catch (error) {
-      console.error(`[WuVanilla] Mount error for ${appName}:`, error);
-      throw error;
-    }
-  };
-
-  // Función de unmount
-  const unmountApp = (container) => {
-    const appData = adapterState.apps.get(appName);
-
-    if (appData) {
-      try {
-        if (onUnmount) {
-          onUnmount(appData.container, appData.state);
-        }
-
-        // Ejecutar destroy si existe
-        if (destroy && typeof destroy === 'function') {
-          destroy(appData.container, appData.state);
-        } else {
-          // Cleanup por defecto
-          appData.container.innerHTML = '';
-        }
-
-        adapterState.apps.delete(appName);
-
-        console.log(`[WuVanilla] ✅ ${appName} unmounted successfully`);
-      } catch (error) {
-        console.error(`[WuVanilla] Unmount error for ${appName}:`, error);
-      }
-    }
-
-    if (container) {
-      container.innerHTML = '';
-    }
-  };
-
-  // Intentar registrar con Wu Framework
-  try {
-    const wu = await waitForWu(3000);
-
-    wu.define(appName, {
-      mount: mountApp,
-      unmount: unmountApp
-    });
-
-    console.log(`[WuVanilla] ✅ ${appName} registered with Wu Framework`);
-    return true;
-
-  } catch (error) {
-    console.warn(`[WuVanilla] Wu Framework not available for ${appName}`);
-
-    if (standalone) {
-      const containerElement = document.querySelector(standaloneContainer);
-
-      if (containerElement) {
-        console.log(`[WuVanilla] Running ${appName} in standalone mode`);
-        mountApp(containerElement);
-        return true;
-      }
-    }
-
-    return false;
-  }
-}
-
-/**
- * Registra una clase como microfrontend
- *
- * @param {string} appName - Nombre único del microfrontend
- * @param {Function} AppClass - Clase con constructor(container) y métodos render/destroy
- * @param {Object} options - Opciones adicionales
- *
- * @example
- * class TodoApp {
- *   constructor(container) {
- *     this.container = container;
- *     this.todos = [];
- *   }
- *
- *   render() {
- *     this.container.innerHTML = `
- *       <ul>${this.todos.map(t => `<li>${t}</li>`).join('')}</ul>
- *     `;
- *   }
- *
- *   addTodo(text) {
- *     this.todos.push(text);
- *     this.render();
- *   }
- *
- *   destroy() {
- *     this.container.innerHTML = '';
- *     this.todos = [];
- *   }
- * }
- *
- * wuVanilla.registerClass('todo-app', TodoApp);
- */
-async function registerClass(appName, AppClass, options = {}) {
-  const {
-    constructorArgs = [],
-    onMount = null,
-    onUnmount = null,
-    standalone = true,
-    standaloneContainer = '#app'
-  } = options;
-
-  // Función de mount
-  const mountApp = (container) => {
-    if (!container) {
-      console.error(`[WuVanilla] Mount failed for ${appName}: container is null`);
-      return;
-    }
-
-    // Evitar doble mount
-    if (adapterState.instances.has(appName)) {
-      console.warn(`[WuVanilla] ${appName} already mounted, unmounting first`);
-      unmountApp();
-    }
-
-    try {
-      container.innerHTML = '';
-
-      // Crear instancia de la clase
-      const instance = new AppClass(container, ...constructorArgs);
-
-      // Llamar render si existe
-      if (instance.render && typeof instance.render === 'function') {
-        instance.render();
-      }
-
-      // Guardar instancia
-      adapterState.instances.set(appName, {
-        instance,
-        container
-      });
-
-      console.log(`[WuVanilla] ✅ ${appName} (class) mounted successfully`);
-
-      if (onMount) {
-        onMount(container, instance);
-      }
-    } catch (error) {
-      console.error(`[WuVanilla] Mount error for ${appName}:`, error);
-      throw error;
-    }
-  };
-
-  // Función de unmount
-  const unmountApp = (container) => {
-    const appData = adapterState.instances.get(appName);
-
-    if (appData) {
-      try {
-        if (onUnmount) {
-          onUnmount(appData.container, appData.instance);
-        }
-
-        // Llamar destroy si existe
-        if (appData.instance.destroy && typeof appData.instance.destroy === 'function') {
-          appData.instance.destroy();
-        } else {
-          appData.container.innerHTML = '';
-        }
-
-        adapterState.instances.delete(appName);
-
-        console.log(`[WuVanilla] ✅ ${appName} (class) unmounted successfully`);
-      } catch (error) {
-        console.error(`[WuVanilla] Unmount error for ${appName}:`, error);
-      }
-    }
-
-    if (container) {
-      container.innerHTML = '';
-    }
-  };
-
-  // Intentar registrar con Wu Framework
-  try {
-    const wu = await waitForWu(3000);
-
-    wu.define(appName, {
-      mount: mountApp,
-      unmount: unmountApp
-    });
-
-    console.log(`[WuVanilla] ✅ ${appName} (class) registered with Wu Framework`);
-    return true;
-
-  } catch (error) {
-    console.warn(`[WuVanilla] Wu Framework not available for ${appName}`);
-
-    if (standalone) {
-      const containerElement = document.querySelector(standaloneContainer);
-
-      if (containerElement) {
-        console.log(`[WuVanilla] Running ${appName} in standalone mode`);
-        mountApp(containerElement);
-        return true;
-      }
-    }
-
-    return false;
-  }
-}
-
-/**
- * Registra un template HTML como microfrontend
- *
- * @param {string} appName - Nombre único del microfrontend
- * @param {string|Function} template - HTML string o función que retorna HTML
- * @param {Object} options - Opciones adicionales
- *
- * @example
- * // Template estático
- * wuVanilla.registerTemplate('header', '<header><h1>My Header</h1></header>');
- *
- * // Template dinámico
- * wuVanilla.registerTemplate('greeting', (data) => `<h1>Hello ${data.name}!</h1>`, {
- *   data: { name: 'World' }
- * });
- */
-async function registerTemplate(appName, template, options = {}) {
-  const {
-    data = {},
-    scripts = [],
-    styles = [],
-    onMount = null,
-    onUnmount = null,
-    standalone = true,
-    standaloneContainer = '#app'
-  } = options;
-
-  const mountApp = (container) => {
-    if (!container) {
-      console.error(`[WuVanilla] Mount failed for ${appName}: container is null`);
-      return;
-    }
-
-    try {
-      container.innerHTML = '';
-
-      // Inyectar estilos
-      if (styles.length > 0) {
-        const styleEl = document.createElement('style');
-        styleEl.textContent = styles.join('\n');
-        styleEl.setAttribute('data-wu-app', appName);
-        container.appendChild(styleEl);
-      }
-
-      // Crear wrapper
-      const wrapper = document.createElement('div');
-      wrapper.setAttribute('data-wu-template', appName);
-
-      // Renderizar template
-      if (typeof template === 'function') {
-        wrapper.innerHTML = template(data);
-      } else {
-        wrapper.innerHTML = template;
-      }
-
-      container.appendChild(wrapper);
-
-      // Ejecutar scripts
-      scripts.forEach(scriptFn => {
-        if (typeof scriptFn === 'function') {
-          scriptFn(container, data);
-        }
-      });
-
-      adapterState.apps.set(appName, { container, template, data });
-
-      console.log(`[WuVanilla] ✅ ${appName} (template) mounted successfully`);
-
-      if (onMount) {
-        onMount(container, data);
-      }
-    } catch (error) {
-      console.error(`[WuVanilla] Mount error for ${appName}:`, error);
-      throw error;
-    }
-  };
-
-  const unmountApp = (container) => {
-    const appData = adapterState.apps.get(appName);
-
-    if (appData) {
-      if (onUnmount) {
-        onUnmount(appData.container, appData.data);
-      }
-
-      appData.container.innerHTML = '';
-      adapterState.apps.delete(appName);
-
-      console.log(`[WuVanilla] ✅ ${appName} (template) unmounted successfully`);
-    }
-
-    if (container) {
-      container.innerHTML = '';
-    }
-  };
-
-  try {
-    const wu = await waitForWu(3000);
-
-    wu.define(appName, {
-      mount: mountApp,
-      unmount: unmountApp
-    });
-
-    console.log(`[WuVanilla] ✅ ${appName} (template) registered with Wu Framework`);
-    return true;
-
-  } catch (error) {
-    console.warn(`[WuVanilla] Wu Framework not available for ${appName}`);
-
-    if (standalone) {
-      const containerElement = document.querySelector(standaloneContainer);
-      if (containerElement) {
-        console.log(`[WuVanilla] Running ${appName} in standalone mode`);
-        mountApp(containerElement);
-        return true;
-      }
-    }
-
-    return false;
-  }
-}
-
-/**
- * Helper para crear un componente reactivo simple
- *
- * @param {Object} config - Configuración del componente
- * @returns {Object} Componente con métodos de estado
- *
- * @example
- * const Counter = wuVanilla.createComponent({
- *   state: { count: 0 },
- *   template: (state) => `
- *     <div>
- *       <h1>Count: ${state.count}</h1>
- *       <button data-action="increment">+</button>
- *       <button data-action="decrement">-</button>
- *     </div>
- *   `,
- *   actions: {
- *     increment: (state) => ({ count: state.count + 1 }),
- *     decrement: (state) => ({ count: state.count - 1 })
- *   }
- * });
- *
- * wuVanilla.register('counter', Counter);
- */
-function createComponent(config) {
-  const { state: initialState = {}, template, actions = {}, onInit, onDestroy } = config;
-
-  let currentState = { ...initialState };
-  let container = null;
-  let mounted = false;
-
-  const setState = (newState) => {
-    currentState = { ...currentState, ...newState };
-    if (mounted && container) {
-      render(container, currentState);
-    }
-  };
-
-  const render = (cont, state) => {
-    const html = template(state);
-
-    // Preservar focus si es posible
-    const activeId = document.activeElement?.id;
-
-    cont.innerHTML = html;
-
-    // Restaurar focus
-    if (activeId) {
-      const el = cont.querySelector(`#${activeId}`);
-      if (el) el.focus();
-    }
-
-    // Bind actions
-    cont.querySelectorAll('[data-action]').forEach(el => {
-      const actionName = el.getAttribute('data-action');
-      if (actions[actionName]) {
-        el.addEventListener('click', () => {
-          const result = actions[actionName](currentState, el);
-          if (result) {
-            setState(result);
-          }
-        });
-      }
-    });
-  };
-
-  return {
-    state: currentState,
-
-    init: (cont) => {
-      container = cont;
-      if (onInit) onInit(cont, currentState);
-    },
-
-    render: (cont, state) => {
-      container = cont;
-      currentState = state || currentState;
-      mounted = true;
-      render(cont, currentState);
-    },
-
-    destroy: (cont) => {
-      if (onDestroy) onDestroy(cont, currentState);
-      mounted = false;
-      container = null;
-      cont.innerHTML = '';
-    },
-
-    // Exponer setState para uso externo
-    setState,
-    getState: () => currentState
-  };
-}
-
-/**
- * Helper para usar eventos de Wu Framework
- */
-function useWuEvents() {
-  const subscriptions = [];
-
-  return {
-    emit: (event, data, options) => {
-      const wu = getWuInstance();
-      if (wu?.eventBus) {
-        wu.eventBus.emit(event, data, options);
-      }
-    },
-
-    on: (event, callback) => {
-      const wu = getWuInstance();
-      if (wu?.eventBus) {
-        const unsubscribe = wu.eventBus.on(event, callback);
-        subscriptions.push(unsubscribe);
-        return unsubscribe;
-      }
-      return () => {};
-    },
-
-    once: (event, callback) => {
-      const wu = getWuInstance();
-      if (wu?.eventBus) {
-        return wu.eventBus.once(event, callback);
-      }
-      return () => {};
-    },
-
-    off: (event, callback) => {
-      const wu = getWuInstance();
-      if (wu?.eventBus) {
-        wu.eventBus.off(event, callback);
-      }
-    },
-
-    cleanup: () => {
-      subscriptions.forEach(unsub => unsub());
-      subscriptions.length = 0;
-    }
-  };
-}
-
-/**
- * Helper para usar el Store de Wu Framework
- */
-function useWuStore(namespace = '') {
-  return {
-    get: (path = '') => {
-      const wu = getWuInstance();
-      if (wu?.store) {
-        const fullPath = namespace ? (path ? `${namespace}.${path}` : namespace) : path;
-        return wu.store.get(fullPath);
-      }
-      return null;
-    },
-
-    set: (path, value) => {
-      const wu = getWuInstance();
-      if (wu?.store) {
-        const fullPath = namespace ? `${namespace}.${path}` : path;
-        wu.store.set(fullPath, value);
-      }
-    },
-
-    onChange: (pattern, callback) => {
-      const wu = getWuInstance();
-      if (wu?.store) {
-        const fullPattern = namespace ? `${namespace}.${pattern}` : pattern;
-        return wu.store.on(fullPattern, callback);
-      }
-      return () => {};
-    }
-  };
-}
-
-/**
- * Crea un WuSlot en JavaScript puro
- */
-function createWuSlot(target, props) {
-  const { name, url, fallbackText = null, onLoad = null, onError = null } = props;
-
-  const container = document.createElement('div');
-  container.className = 'wu-slot';
-  container.style.cssText = 'min-height: 100px; position: relative;';
-  container.setAttribute('data-wu-app', name);
-  container.setAttribute('data-wu-url', url);
-
-  // Loading state
-  container.innerHTML = `
-    <div style="display: flex; align-items: center; justify-content: center; padding: 2rem; color: #666;">
-      ${fallbackText || `Loading ${name}...`}
-    </div>
-  `;
-
-  target.appendChild(container);
-
-  let appInstance = null;
-
-  const mount = async () => {
-    try {
-      const wu = getWuInstance();
-      if (!wu) throw new Error('Wu Framework not initialized');
-
-      const containerId = `wu-slot-${name}-${Date.now()}`;
-      const innerContainer = document.createElement('div');
-      innerContainer.id = containerId;
-      innerContainer.style.cssText = 'width: 100%; height: 100%;';
-
-      container.innerHTML = '';
-      container.appendChild(innerContainer);
-
-      const app = wu.app(name, {
-        url,
-        container: `#${containerId}`,
-        autoInit: true
-      });
-
-      appInstance = app;
-      await app.mount();
-
-      if (onLoad) onLoad({ name, url });
-
-    } catch (err) {
-      container.innerHTML = `
-        <div style="padding: 1rem; border: 1px solid #f5c6cb; border-radius: 4px; background: #f8d7da; color: #721c24;">
-          <strong>Error loading ${name}</strong>
-          <p style="margin: 0.5rem 0 0 0;">${err.message}</p>
-        </div>
-      `;
-      if (onError) onError(err);
-    }
-  };
-
-  const destroy = async () => {
-    if (appInstance) {
-      try {
-        await appInstance.unmount();
-      } catch (e) {}
-      appInstance = null;
-    }
-    container.remove();
-  };
-
-  mount();
-
-  return { container, destroy };
-}
-
-// ============================================
-// AI INTEGRATION
-// ============================================
-export { useWuAI } from './ai.js';
-import { useWuAI } from './ai.js';
-
-// API pública del adapter
-export const wuVanilla = {
-  register,
-  registerClass,
-  registerTemplate,
-  createComponent,
-  createWuSlot,
-  useWuEvents,
-  useWuStore,
-  useWuAI,
-  getWuInstance,
-  waitForWu
-};
-
-export default wuVanilla;
+/**
+ * 🚀 WU-FRAMEWORK VANILLA JS ADAPTER
+ *
+ * El adapter más simple - Para JavaScript puro sin frameworks.
+ * Ideal para microfrontends ligeros o legacy code.
+ *
+ * @example
+ * // Microfrontend (main.js)
+ * import { wuVanilla } from 'wu-framework/adapters/vanilla';
+ *
+ * wuVanilla.register('my-app', {
+ *   render: (container) => {
+ *     container.innerHTML = '<h1>Hello World</h1>';
+ *   }
+ * });
+ *
+ * @example
+ * // Con clase
+ * class MyApp {
+ *   constructor(container) {
+ *     this.container = container;
+ *   }
+ *   render() {
+ *     this.container.innerHTML = '<h1>My App</h1>';
+ *   }
+ *   destroy() {
+ *     this.container.innerHTML = '';
+ *   }
+ * }
+ *
+ * wuVanilla.registerClass('my-app', MyApp);
+ */
+
+// Estado global del adapter
+const adapterState = {
+  apps: new Map(),
+  instances: new Map()
+};
+
+/**
+ * Obtiene la instancia de Wu Framework
+ */
+function getWuInstance() {
+  if (typeof window === 'undefined') return null;
+
+  return window.wu
+    || window.parent?.wu
+    || window.top?.wu
+    || null;
+}
+
+/**
+ * Espera a que Wu Framework esté disponible
+ */
+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);
+    }
+  });
+}
+
+/**
+ * Registra una app Vanilla JS como microfrontend
+ *
+ * @param {string} appName - Nombre único del microfrontend
+ * @param {Object} config - Configuración de la app
+ * @param {Function} config.render - Función para renderizar (recibe container)
+ * @param {Function} [config.destroy] - Función para limpiar (recibe container)
+ * @param {Function} [config.init] - Función de inicialización (recibe container)
+ * @param {Object} [config.state] - Estado inicial
+ * @param {Object} options - Opciones adicionales
+ *
+ * @example
+ * wuVanilla.register('counter', {
+ *   state: { count: 0 },
+ *   init: (container) => {
+ *     console.log('Initializing...');
+ *   },
+ *   render: (container, state) => {
+ *     container.innerHTML = `
+ *       <div>
+ *         <h1>Count: ${state.count}</h1>
+ *         <button id="increment">+</button>
+ *       </div>
+ *     `;
+ *     container.querySelector('#increment').onclick = () => {
+ *       state.count++;
+ *       // Re-render
+ *     };
+ *   },
+ *   destroy: (container) => {
+ *     container.innerHTML = '';
+ *   }
+ * });
+ */
+async function register(appName, config, options = {}) {
+  const {
+    render,
+    destroy = null,
+    init = null,
+    state = {}
+  } = config;
+
+  const {
+    onMount = null,
+    onUnmount = null,
+    standalone = true,
+    standaloneContainer = '#app'
+  } = options;
+
+  if (!render || typeof render !== 'function') {
+    throw new Error(`[WuVanilla] render function is required for ${appName}`);
+  }
+
+  // Estado local de la app
+  const appState = { ...state };
+
+  // Función de mount
+  const mountApp = (container) => {
+    if (!container) {
+      console.error(`[WuVanilla] Mount failed for ${appName}: container is null`);
+      return;
+    }
+
+    // Evitar doble mount
+    if (adapterState.apps.has(appName)) {
+      console.warn(`[WuVanilla] ${appName} already mounted, unmounting first`);
+      unmountApp();
+    }
+
+    try {
+      // Limpiar container
+      container.innerHTML = '';
+
+      // Ejecutar init si existe
+      if (init && typeof init === 'function') {
+        init(container, appState);
+      }
+
+      // Renderizar
+      render(container, appState);
+
+      // Guardar referencia
+      adapterState.apps.set(appName, {
+        container,
+        config,
+        state: appState
+      });
+
+      console.log(`[WuVanilla] ✅ ${appName} mounted successfully`);
+
+      if (onMount) {
+        onMount(container, appState);
+      }
+    } catch (error) {
+      console.error(`[WuVanilla] Mount error for ${appName}:`, error);
+      throw error;
+    }
+  };
+
+  // Función de unmount
+  const unmountApp = (container) => {
+    const appData = adapterState.apps.get(appName);
+
+    if (appData) {
+      try {
+        if (onUnmount) {
+          onUnmount(appData.container, appData.state);
+        }
+
+        // Ejecutar destroy si existe
+        if (destroy && typeof destroy === 'function') {
+          destroy(appData.container, appData.state);
+        } else {
+          // Cleanup por defecto
+          appData.container.innerHTML = '';
+        }
+
+        adapterState.apps.delete(appName);
+
+        console.log(`[WuVanilla] ✅ ${appName} unmounted successfully`);
+      } catch (error) {
+        console.error(`[WuVanilla] Unmount error for ${appName}:`, error);
+      }
+    }
+
+    if (container) {
+      container.innerHTML = '';
+    }
+  };
+
+  // Intentar registrar con Wu Framework
+  try {
+    const wu = await waitForWu(3000);
+
+    wu.define(appName, {
+      mount: mountApp,
+      unmount: unmountApp
+    });
+
+    console.log(`[WuVanilla] ✅ ${appName} registered with Wu Framework`);
+    return true;
+
+  } catch (error) {
+    console.warn(`[WuVanilla] Wu Framework not available for ${appName}`);
+
+    if (standalone) {
+      const containerElement = document.querySelector(standaloneContainer);
+
+      if (containerElement) {
+        console.log(`[WuVanilla] Running ${appName} in standalone mode`);
+        mountApp(containerElement);
+        return true;
+      }
+    }
+
+    return false;
+  }
+}
+
+/**
+ * Registra una clase como microfrontend
+ *
+ * @param {string} appName - Nombre único del microfrontend
+ * @param {Function} AppClass - Clase con constructor(container) y métodos render/destroy
+ * @param {Object} options - Opciones adicionales
+ *
+ * @example
+ * class TodoApp {
+ *   constructor(container) {
+ *     this.container = container;
+ *     this.todos = [];
+ *   }
+ *
+ *   render() {
+ *     this.container.innerHTML = `
+ *       <ul>${this.todos.map(t => `<li>${t}</li>`).join('')}</ul>
+ *     `;
+ *   }
+ *
+ *   addTodo(text) {
+ *     this.todos.push(text);
+ *     this.render();
+ *   }
+ *
+ *   destroy() {
+ *     this.container.innerHTML = '';
+ *     this.todos = [];
+ *   }
+ * }
+ *
+ * wuVanilla.registerClass('todo-app', TodoApp);
+ */
+async function registerClass(appName, AppClass, options = {}) {
+  const {
+    constructorArgs = [],
+    onMount = null,
+    onUnmount = null,
+    standalone = true,
+    standaloneContainer = '#app'
+  } = options;
+
+  // Función de mount
+  const mountApp = (container) => {
+    if (!container) {
+      console.error(`[WuVanilla] Mount failed for ${appName}: container is null`);
+      return;
+    }
+
+    // Evitar doble mount
+    if (adapterState.instances.has(appName)) {
+      console.warn(`[WuVanilla] ${appName} already mounted, unmounting first`);
+      unmountApp();
+    }
+
+    try {
+      container.innerHTML = '';
+
+      // Crear instancia de la clase
+      const instance = new AppClass(container, ...constructorArgs);
+
+      // Llamar render si existe
+      if (instance.render && typeof instance.render === 'function') {
+        instance.render();
+      }
+
+      // Guardar instancia
+      adapterState.instances.set(appName, {
+        instance,
+        container
+      });
+
+      console.log(`[WuVanilla] ✅ ${appName} (class) mounted successfully`);
+
+      if (onMount) {
+        onMount(container, instance);
+      }
+    } catch (error) {
+      console.error(`[WuVanilla] Mount error for ${appName}:`, error);
+      throw error;
+    }
+  };
+
+  // Función de unmount
+  const unmountApp = (container) => {
+    const appData = adapterState.instances.get(appName);
+
+    if (appData) {
+      try {
+        if (onUnmount) {
+          onUnmount(appData.container, appData.instance);
+        }
+
+        // Llamar destroy si existe
+        if (appData.instance.destroy && typeof appData.instance.destroy === 'function') {
+          appData.instance.destroy();
+        } else {
+          appData.container.innerHTML = '';
+        }
+
+        adapterState.instances.delete(appName);
+
+        console.log(`[WuVanilla] ✅ ${appName} (class) unmounted successfully`);
+      } catch (error) {
+        console.error(`[WuVanilla] Unmount error for ${appName}:`, error);
+      }
+    }
+
+    if (container) {
+      container.innerHTML = '';
+    }
+  };
+
+  // Intentar registrar con Wu Framework
+  try {
+    const wu = await waitForWu(3000);
+
+    wu.define(appName, {
+      mount: mountApp,
+      unmount: unmountApp
+    });
+
+    console.log(`[WuVanilla] ✅ ${appName} (class) registered with Wu Framework`);
+    return true;
+
+  } catch (error) {
+    console.warn(`[WuVanilla] Wu Framework not available for ${appName}`);
+
+    if (standalone) {
+      const containerElement = document.querySelector(standaloneContainer);
+
+      if (containerElement) {
+        console.log(`[WuVanilla] Running ${appName} in standalone mode`);
+        mountApp(containerElement);
+        return true;
+      }
+    }
+
+    return false;
+  }
+}
+
+/**
+ * Registra un template HTML como microfrontend
+ *
+ * @param {string} appName - Nombre único del microfrontend
+ * @param {string|Function} template - HTML string o función que retorna HTML
+ * @param {Object} options - Opciones adicionales
+ *
+ * @example
+ * // Template estático
+ * wuVanilla.registerTemplate('header', '<header><h1>My Header</h1></header>');
+ *
+ * // Template dinámico
+ * wuVanilla.registerTemplate('greeting', (data) => `<h1>Hello ${data.name}!</h1>`, {
+ *   data: { name: 'World' }
+ * });
+ */
+async function registerTemplate(appName, template, options = {}) {
+  const {
+    data = {},
+    scripts = [],
+    styles = [],
+    onMount = null,
+    onUnmount = null,
+    standalone = true,
+    standaloneContainer = '#app'
+  } = options;
+
+  const mountApp = (container) => {
+    if (!container) {
+      console.error(`[WuVanilla] Mount failed for ${appName}: container is null`);
+      return;
+    }
+
+    try {
+      container.innerHTML = '';
+
+      // Inyectar estilos
+      if (styles.length > 0) {
+        const styleEl = document.createElement('style');
+        styleEl.textContent = styles.join('\n');
+        styleEl.setAttribute('data-wu-app', appName);
+        container.appendChild(styleEl);
+      }
+
+      // Crear wrapper
+      const wrapper = document.createElement('div');
+      wrapper.setAttribute('data-wu-template', appName);
+
+      // Renderizar template
+      if (typeof template === 'function') {
+        wrapper.innerHTML = template(data);
+      } else {
+        wrapper.innerHTML = template;
+      }
+
+      container.appendChild(wrapper);
+
+      // Ejecutar scripts
+      scripts.forEach(scriptFn => {
+        if (typeof scriptFn === 'function') {
+          scriptFn(container, data);
+        }
+      });
+
+      adapterState.apps.set(appName, { container, template, data });
+
+      console.log(`[WuVanilla] ✅ ${appName} (template) mounted successfully`);
+
+      if (onMount) {
+        onMount(container, data);
+      }
+    } catch (error) {
+      console.error(`[WuVanilla] Mount error for ${appName}:`, error);
+      throw error;
+    }
+  };
+
+  const unmountApp = (container) => {
+    const appData = adapterState.apps.get(appName);
+
+    if (appData) {
+      if (onUnmount) {
+        onUnmount(appData.container, appData.data);
+      }
+
+      appData.container.innerHTML = '';
+      adapterState.apps.delete(appName);
+
+      console.log(`[WuVanilla] ✅ ${appName} (template) unmounted successfully`);
+    }
+
+    if (container) {
+      container.innerHTML = '';
+    }
+  };
+
+  try {
+    const wu = await waitForWu(3000);
+
+    wu.define(appName, {
+      mount: mountApp,
+      unmount: unmountApp
+    });
+
+    console.log(`[WuVanilla] ✅ ${appName} (template) registered with Wu Framework`);
+    return true;
+
+  } catch (error) {
+    console.warn(`[WuVanilla] Wu Framework not available for ${appName}`);
+
+    if (standalone) {
+      const containerElement = document.querySelector(standaloneContainer);
+      if (containerElement) {
+        console.log(`[WuVanilla] Running ${appName} in standalone mode`);
+        mountApp(containerElement);
+        return true;
+      }
+    }
+
+    return false;
+  }
+}
+
+/**
+ * Helper para crear un componente reactivo simple
+ *
+ * @param {Object} config - Configuración del componente
+ * @returns {Object} Componente con métodos de estado
+ *
+ * @example
+ * const Counter = wuVanilla.createComponent({
+ *   state: { count: 0 },
+ *   template: (state) => `
+ *     <div>
+ *       <h1>Count: ${state.count}</h1>
+ *       <button data-action="increment">+</button>
+ *       <button data-action="decrement">-</button>
+ *     </div>
+ *   `,
+ *   actions: {
+ *     increment: (state) => ({ count: state.count + 1 }),
+ *     decrement: (state) => ({ count: state.count - 1 })
+ *   }
+ * });
+ *
+ * wuVanilla.register('counter', Counter);
+ */
+function createComponent(config) {
+  const { state: initialState = {}, template, actions = {}, onInit, onDestroy } = config;
+
+  let currentState = { ...initialState };
+  let container = null;
+  let mounted = false;
+
+  const setState = (newState) => {
+    currentState = { ...currentState, ...newState };
+    if (mounted && container) {
+      render(container, currentState);
+    }
+  };
+
+  const render = (cont, state) => {
+    const html = template(state);
+
+    // Preservar focus si es posible
+    const activeId = document.activeElement?.id;
+
+    cont.innerHTML = html;
+
+    // Restaurar focus
+    if (activeId) {
+      const el = cont.querySelector(`#${activeId}`);
+      if (el) el.focus();
+    }
+
+    // Bind actions
+    cont.querySelectorAll('[data-action]').forEach(el => {
+      const actionName = el.getAttribute('data-action');
+      if (actions[actionName]) {
+        el.addEventListener('click', () => {
+          const result = actions[actionName](currentState, el);
+          if (result) {
+            setState(result);
+          }
+        });
+      }
+    });
+  };
+
+  return {
+    state: currentState,
+
+    init: (cont) => {
+      container = cont;
+      if (onInit) onInit(cont, currentState);
+    },
+
+    render: (cont, state) => {
+      container = cont;
+      currentState = state || currentState;
+      mounted = true;
+      render(cont, currentState);
+    },
+
+    destroy: (cont) => {
+      if (onDestroy) onDestroy(cont, currentState);
+      mounted = false;
+      container = null;
+      cont.innerHTML = '';
+    },
+
+    // Exponer setState para uso externo
+    setState,
+    getState: () => currentState
+  };
+}
+
+/**
+ * Helper para usar eventos de Wu Framework
+ */
+function useWuEvents() {
+  const subscriptions = [];
+
+  return {
+    emit: (event, data, options) => {
+      const wu = getWuInstance();
+      if (wu?.eventBus) {
+        wu.eventBus.emit(event, data, options);
+      }
+    },
+
+    on: (event, callback) => {
+      const wu = getWuInstance();
+      if (wu?.eventBus) {
+        const unsubscribe = wu.eventBus.on(event, callback);
+        subscriptions.push(unsubscribe);
+        return unsubscribe;
+      }
+      return () => {};
+    },
+
+    once: (event, callback) => {
+      const wu = getWuInstance();
+      if (wu?.eventBus) {
+        return wu.eventBus.once(event, callback);
+      }
+      return () => {};
+    },
+
+    off: (event, callback) => {
+      const wu = getWuInstance();
+      if (wu?.eventBus) {
+        wu.eventBus.off(event, callback);
+      }
+    },
+
+    cleanup: () => {
+      subscriptions.forEach(unsub => unsub());
+      subscriptions.length = 0;
+    }
+  };
+}
+
+/**
+ * Helper para usar el Store de Wu Framework
+ */
+function useWuStore(namespace = '') {
+  return {
+    get: (path = '') => {
+      const wu = getWuInstance();
+      if (wu?.store) {
+        const fullPath = namespace ? (path ? `${namespace}.${path}` : namespace) : path;
+        return wu.store.get(fullPath);
+      }
+      return null;
+    },
+
+    set: (path, value) => {
+      const wu = getWuInstance();
+      if (wu?.store) {
+        const fullPath = namespace ? `${namespace}.${path}` : path;
+        wu.store.set(fullPath, value);
+      }
+    },
+
+    onChange: (pattern, callback) => {
+      const wu = getWuInstance();
+      if (wu?.store) {
+        const fullPattern = namespace ? `${namespace}.${pattern}` : pattern;
+        return wu.store.on(fullPattern, callback);
+      }
+      return () => {};
+    }
+  };
+}
+
+/**
+ * Crea un WuSlot en JavaScript puro
+ */
+function createWuSlot(target, props) {
+  const { name, url, fallbackText = null, onLoad = null, onError = null } = props;
+
+  const container = document.createElement('div');
+  container.className = 'wu-slot';
+  container.style.cssText = 'min-height: 100px; position: relative;';
+  container.setAttribute('data-wu-app', name);
+  container.setAttribute('data-wu-url', url);
+
+  // Loading state
+  container.innerHTML = `
+    <div style="display: flex; align-items: center; justify-content: center; padding: 2rem; color: #666;">
+      ${fallbackText || `Loading ${name}...`}
+    </div>
+  `;
+
+  target.appendChild(container);
+
+  let appInstance = null;
+
+  const mount = async () => {
+    try {
+      const wu = getWuInstance();
+      if (!wu) throw new Error('Wu Framework not initialized');
+
+      const containerId = `wu-slot-${name}-${Date.now()}`;
+      const innerContainer = document.createElement('div');
+      innerContainer.id = containerId;
+      innerContainer.style.cssText = 'width: 100%; height: 100%;';
+
+      container.innerHTML = '';
+      container.appendChild(innerContainer);
+
+      const app = wu.app(name, {
+        url,
+        container: `#${containerId}`,
+        autoInit: true
+      });
+
+      appInstance = app;
+      await app.mount();
+
+      if (onLoad) onLoad({ name, url });
+
+    } catch (err) {
+      container.innerHTML = `
+        <div style="padding: 1rem; border: 1px solid #f5c6cb; border-radius: 4px; background: #f8d7da; color: #721c24;">
+          <strong>Error loading ${name}</strong>
+          <p style="margin: 0.5rem 0 0 0;">${err.message}</p>
+        </div>
+      `;
+      if (onError) onError(err);
+    }
+  };
+
+  const destroy = async () => {
+    if (appInstance) {
+      try {
+        await appInstance.unmount();
+      } catch (e) {}
+      appInstance = null;
+    }
+    container.remove();
+  };
+
+  mount();
+
+  return { container, destroy };
+}
+
+// ============================================
+// AI INTEGRATION
+// ============================================
+export { useWuAI } from './ai.js';
+import { useWuAI } from './ai.js';
+
+// API pública del adapter
+export const wuVanilla = {
+  register,
+  registerClass,
+  registerTemplate,
+  createComponent,
+  createWuSlot,
+  useWuEvents,
+  useWuStore,
+  useWuAI,
+  getWuInstance,
+  waitForWu
+};
+
+export default wuVanilla;