wu-framework 1.0.6 → 1.1.1

package/README.md

@@ -9,11 +9,13 @@ Wu Framework es la librería de microfrontends más simple y poderosa del mercad
 | Característica | Module Federation | qiankun | **Wu Framework** |
 |---|---|---|---|
 | **Setup** | Webpack config complejo | Configuración manual | **Zero config** |
-| **Framework Support** | React-first | Multi framework | **Cualquier framework** |
+| **Framework Support** | React-first | Multi framework | **8 frameworks nativos** |
 | **Bundler Required** | Solo Webpack 5 | Agnóstico pero complejo | **Ninguno** |
 | **CSS Isolation** | Básico | CSS hacks | **Shadow DOM nativo** |
+| **JS Isolation** | ❌ | Proxy básico | **Proxy Sandbox completo** |
 | **Runtime Config** | ❌ | Limitado | **✅ Completamente dinámico** |
-| **API Complexity** | Alta | Media | **Súper simple** |
+| **Self-Healing** | ❌ | ❌ | **✅ Auto-recovery** |
+| **API Complexity** | Alta | Media | **1 línea de código** |
 
 ## 🎯 Instalación
 
@@ -23,15 +25,91 @@ npm install wu-framework
 
 **¡Y ya está!** Sin webpack config, sin plugins, sin configuración.
 
-## 🔥 Uso Básico
+---
+
+## 🎨 Frameworks Soportados
+
+Wu Framework incluye **adapters nativos** para los frameworks más populares:
+
+| Framework | Adapter | Registro |
+|-----------|---------|----------|
+| ⚛️ React | `wuReact` | `wuReact.register('app', App)` |
+| 💚 Vue | `wuVue` | `wuVue.register('app', App)` |
+| 🅰️ Angular | `wuAngular` | `wuAngular.register('app', AppModule)` |
+| 🧡 Svelte | `wuSvelte` | `wuSvelte.register('app', App)` |
+| ⚡ Preact | `wuPreact` | `wuPreact.register('app', App)` |
+| 💎 Solid.js | `wuSolid` | `wuSolid.register('app', App)` |
+| 🔥 Lit | `wuLit` | `wuLit.register('app', MyElement)` |
+| 📦 Vanilla JS | `wuVanilla` | `wuVanilla.register('app', config)` |
+
+---
+
+## 🔥 Quick Start
+
+### 1. Micro App: Crear `wu.json`
+
+Cada microfrontend necesita un archivo `wu.json` en su raíz:
+
+```json
+{
+  "name": "header",
+  "entry": "index.js",
+  "wu": {
+    "exports": {
+      "NavBar": "components/NavBar.js",
+      "UserMenu": "components/UserMenu.js"
+    },
+    "imports": [],
+    "routes": ["/", "/home"],
+    "permissions": ["events", "store"]
+  }
+}
+```
+
+| Campo | Descripción |
+|-------|-------------|
+| `name` | Nombre único del microfrontend |
+| `entry` | Archivo JS principal (default: `index.js`) |
+| `wu.exports` | Componentes que expone a otros microfrontends |
+| `wu.imports` | Componentes que importa de otros microfrontends |
+| `wu.routes` | Rutas que maneja este microfrontend |
+| `wu.permissions` | Permisos requeridos (`events`, `store`, `dom`) |
+
+### 2. Micro App: Registrar con Adapter (1 línea)
+
+**React:**
+```tsx
+import { wuReact } from 'wu-framework/adapters/react';
+import App from './App';
+
+wuReact.register('header', App);
+```
+
+**Vue:**
+```ts
+import { wuVue } from 'wu-framework/adapters/vue';
+import App from './App.vue';
 
-### Container App (Host)
+wuVue.register('sidebar', App);
+```
 
+**Angular:**
+```ts
+import { wuAngular } from 'wu-framework/adapters/angular';
+import { AppModule } from './app/app.module';
+
+wuAngular.register('content', AppModule);
+```
+
+**¡Eso es todo!** El adapter se encarga de todo: detección de contexto, modo standalone, cleanup automático.
+
+### 3. Shell (Host Application)
+
+**Desarrollo:**
 ```js
 import { wu } from 'wu-framework';
 
-// Inicializar con apps
-wu.init({
+await wu.init({
   apps: [
     { name: 'header', url: 'http://localhost:3001' },
     { name: 'sidebar', url: 'http://localhost:3002' },
@@ -39,521 +117,1033 @@ wu.init({
   ]
 });
 
-// Montar en el DOM
-wu.mount('header', '#header-container');
-wu.mount('sidebar', '#sidebar-container');
-wu.mount('content', '#content-container');
+await wu.mount('header', '#header-container');
+await wu.mount('sidebar', '#sidebar-container');
+await wu.mount('content', '#content-container');
 ```
 
-### Micro App (Cualquier Framework)
-
+**Producción:**
 ```js
 import { wu } from 'wu-framework';
 
-// React
-wu.define('header', {
-  mount: (container) => {
-    ReactDOM.render(<HeaderApp />, container);
-  },
-  unmount: (container) => {
-    ReactDOM.unmountComponentAtNode(container);
-  }
+await wu.init({
+  apps: [
+    { name: 'header', url: 'https://cdn.mycompany.com/mfe/header' },
+    { name: 'sidebar', url: 'https://cdn.mycompany.com/mfe/sidebar' },
+    { name: 'content', url: 'https://cdn.mycompany.com/mfe/content' }
+  ]
 });
 
-// Vue
-wu.define('sidebar', {
-  mount: (container) => {
-    createApp(SidebarApp).mount(container);
-  },
-  unmount: (container) => {
-    // Vue cleanup
-  }
-});
+await wu.mount('header', '#header-container');
+await wu.mount('sidebar', '#sidebar-container');
+await wu.mount('content', '#content-container');
+```
 
-// Vanilla JS
-wu.define('content', {
-  mount: (container) => {
-    container.innerHTML = `
-      <h1>Content App</h1>
-      <p>Pure vanilla JavaScript!</p>
-    `;
-  },
-  unmount: (container) => {
-    container.innerHTML = '';
-  }
+**Con configuración dinámica:**
+```js
+import { wu } from 'wu-framework';
+
+const isDev = process.env.NODE_ENV !== 'production';
+
+await wu.init({
+  apps: [
+    { name: 'header', url: isDev ? 'http://localhost:3001' : 'https://cdn.mycompany.com/mfe/header' },
+    { name: 'sidebar', url: isDev ? 'http://localhost:3002' : 'https://cdn.mycompany.com/mfe/sidebar' },
+    { name: 'content', url: isDev ? 'http://localhost:3003' : 'https://cdn.mycompany.com/mfe/content' }
+  ]
 });
 ```
 
-## 📋 Wu Manifest (wu.json)
+### Estructura de Archivos (Microfrontend)
 
-Cada micro-app puede tener un archivo `wu.json` para configuración:
+```
+my-header-mfe/
+├── wu.json          # ← Manifest requerido
+├── index.js         # ← Entry point (registra con adapter)
+├── App.jsx          # ← Componente principal
+├── components/
+│   ├── NavBar.js
+│   └── UserMenu.js
+└── package.json
+```
 
-```json
-{
-  "name": "header-app",
-  "entry": "index.js",
-  "wu": {
-    "exports": {
-      "HeaderComponent": "./components/Header",
-      "useAuth": "./hooks/useAuth"
-    },
-    "imports": [
-      "shared.Button",
-      "shared.Theme"
-    ],
-    "routes": ["/header", "/nav"],
-    "permissions": ["localStorage", "eventBus"]
-  }
-}
+---
+
+## ⚛️ React Adapter
+
+### Registro Básico
+
+```tsx
+import { wuReact } from 'wu-framework/adapters/react';
+import App from './App';
+
+wuReact.register('my-app', App);
 ```
 
-### Component Sharing
+### Con Opciones
 
-```js
-// Exportar componentes
-wu.define('shared', {
-  mount: (container) => {
-    // App shared con componentes reutilizables
-  }
+```tsx
+wuReact.register('my-app', App, {
+  strictMode: true,           // Envolver en React.StrictMode
+  props: { theme: 'dark' },   // Props iniciales
+  standalone: true,           // Ejecutar independiente si Wu no está
+  standaloneContainer: '#root',
+  onMount: (container) => console.log('Mounted!'),
+  onUnmount: (container) => console.log('Unmounted!')
 });
-
-// Usar componentes compartidos
-const Button = await wu.use('shared.Button');
-const Theme = await wu.use('shared.Theme');
 ```
 
-## 🏗️ Arquitectura
+### Hooks para React
+
+```tsx
+import React from 'react';
+import { createUseWuEvents, createUseWuStore } from 'wu-framework/adapters/react';
+
+const useWuEvents = createUseWuEvents(React);
+const useWuStore = createUseWuStore(React);
 
-Wu Framework usa **Shadow DOM nativo** para verdadero aislamiento:
+function MyComponent() {
+  const { emit, on } = useWuEvents();
+  const { state, setState } = useWuStore('user');
 
+  useEffect(() => {
+    const unsub = on('cart:updated', (data) => {
+      console.log('Cart updated:', data);
+    });
+    return unsub;
+  }, [on]);
+
+  return (
+    <button onClick={() => emit('user:logout')}>
+      Logout {state?.name}
+    </button>
+  );
+}
 ```
-┌─────────────────────────────────────┐
-│           Host Application          │
-├─────────────────────────────────────┤
-│  ┌─────────────┐  ┌─────────────┐   │
-│  │ #shadow-root│  │ #shadow-root│   │
-│  │  ┌─────────┐│  │  ┌─────────┐│   │
-│  │  │Header   ││  │  │Sidebar  ││   │
-│  │  │(React)  ││  │  │(Vue)    ││   │
-│  │  └─────────┘│  │  └─────────┘│   │
-│  └─────────────┘  └─────────────┘   │
-└─────────────────────────────────────┘
+
+### Cargar Microfrontends en React (Shell)
+
+```tsx
+import React from 'react';
+import { createWuSlot } from 'wu-framework/adapters/react';
+
+const WuSlot = createWuSlot(React);
+
+// URLs pueden ser localhost (dev) o CDN (prod)
+const HEADER_URL = process.env.REACT_APP_HEADER_URL || 'http://localhost:3001';
+const CONTENT_URL = process.env.REACT_APP_CONTENT_URL || 'http://localhost:3002';
+
+function Shell() {
+  return (
+    <div>
+      <WuSlot
+        name="header"
+        url={HEADER_URL}
+        onLoad={() => console.log('Header loaded!')}
+        onError={(err) => console.error(err)}
+      />
+      <WuSlot name="content" url={CONTENT_URL} />
+    </div>
+  );
+}
 ```
 
-### Ventajas del Shadow DOM:
+---
 
-- ✅ **CSS completamente aislado** - No hay conflictos de estilos
-- ✅ **JavaScript scope aislado** - Variables globales separadas
-- ✅ **DOM encapsulado** - No hay interferencia entre apps
-- ✅ **Performance nativo** - Sin overhead de hacks CSS
-- ✅ **Debugging fácil** - Cada app en su propio DevTools tree
+## 💚 Vue Adapter
 
-## 🎨 Ejemplos de Frameworks
+### Registro Básico
 
-### React + TypeScript
+```ts
+import { wuVue } from 'wu-framework/adapters/vue';
+import App from './App.vue';
 
-```tsx
-// header-app/src/index.tsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { wu } from 'wu-framework';
+wuVue.register('my-app', App);
+```
 
-const HeaderApp: React.FC = () => (
-  <header className="app-header">
-    <h1>Header App (React)</h1>
-  </header>
-);
+### Con Plugins (Pinia, Router, etc.)
 
-wu.define('header', {
-  mount: (container: HTMLElement) => {
-    ReactDOM.render(<HeaderApp />, container);
-  },
-  unmount: (container: HTMLElement) => {
-    ReactDOM.unmountComponentAtNode(container);
+```ts
+import { wuVue } from 'wu-framework/adapters/vue';
+import { createPinia } from 'pinia';
+import router from './router';
+import App from './App.vue';
+
+wuVue.register('my-app', App, {
+  setup: (app) => {
+    app.use(createPinia());
+    app.use(router);
   }
 });
 ```
 
-### Vue 3 + Composition API
+### Composables para Vue
 
 ```vue
-<!-- sidebar-app/src/App.vue -->
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useWuEvents, useWuStore } from 'wu-framework/adapters/vue';
+
+const { emit, on, cleanup } = useWuEvents();
+const { state, setState } = useWuStore('cart');
+
+onMounted(() => {
+  on('user:login', (data) => console.log('Login:', data));
+});
+
+onUnmounted(() => cleanup());
+</script>
+
 <template>
-  <aside class="app-sidebar">
-    <h2>Sidebar App (Vue)</h2>
-    <nav>
-      <ul>
-        <li v-for="item in items" :key="item.id">
-          {{ item.name }}
-        </li>
-      </ul>
-    </nav>
-  </aside>
+  <div>
+    <p>Items: {{ state?.items?.length }}</p>
+    <button @click="emit('cart:clear')">Clear Cart</button>
+  </div>
 </template>
+```
+
+### Cargar Microfrontends en Vue (Shell)
 
+```vue
 <script setup>
-import { ref } from 'vue';
+import { WuSlot } from 'wu-framework/adapters/vue';
 
-const items = ref([
-  { id: 1, name: 'Home' },
-  { id: 2, name: 'About' },
-  { id: 3, name: 'Contact' }
-]);
+// URLs: localhost en dev, CDN en prod
+const headerUrl = import.meta.env.VITE_HEADER_URL || 'http://localhost:3001';
+const sidebarUrl = import.meta.env.VITE_SIDEBAR_URL || 'http://localhost:3002';
 </script>
+
+<template>
+  <div>
+    <WuSlot
+      name="header"
+      :url="headerUrl"
+      @load="onLoad"
+      @error="onError"
+    />
+    <WuSlot name="sidebar" :url="sidebarUrl" />
+  </div>
+</template>
 ```
 
-```js
-// sidebar-app/src/index.js
-import { createApp } from 'vue';
-import { wu } from 'wu-framework';
-import App from './App.vue';
+### Plugin Global
 
-let app;
+```ts
+import { createApp } from 'vue';
+import { wuVuePlugin } from 'wu-framework/adapters/vue';
 
-wu.define('sidebar', {
-  mount: (container) => {
-    app = createApp(App);
-    app.mount(container);
-  },
-  unmount: (container) => {
-    if (app) {
-      app.unmount();
-      app = null;
-    }
-  }
-});
+const app = createApp(App);
+app.use(wuVuePlugin); // Registra <WuSlot> globalmente
 ```
 
-### Angular
+---
 
-```typescript
-// content-app/src/main.ts
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { wu } from 'wu-framework';
+## 🅰️ Angular Adapter
+
+### Registro con NgModule
+
+```ts
+import { wuAngular } from 'wu-framework/adapters/angular';
 import { AppModule } from './app/app.module';
 
-let platformRef: any;
+wuAngular.register('my-app', AppModule);
+```
 
-wu.define('content', {
-  mount: async (container: HTMLElement) => {
-    // Crear elemento para Angular
-    const appElement = document.createElement('app-root');
-    container.appendChild(appElement);
+### Registro con Standalone Components (Angular 14+)
 
-    // Bootstrap Angular
-    platformRef = await platformBrowserDynamic().bootstrapModule(AppModule);
-  },
-  unmount: (container: HTMLElement) => {
-    if (platformRef) {
-      platformRef.destroy();
-      platformRef = null;
-    }
-    container.innerHTML = '';
-  }
+```ts
+import { wuAngular } from 'wu-framework/adapters/angular';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+wuAngular.registerStandalone('my-app', AppComponent, {
+  appConfig
 });
 ```
 
-### Svelte
+### Servicio para Componentes
 
-```js
-// footer-app/src/index.js
-import { wu } from 'wu-framework';
-import App from './App.svelte';
+```ts
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { createWuService } from 'wu-framework/adapters/angular';
 
-let app;
+@Component({
+  selector: 'app-root',
+  template: `<button (click)="sendEvent()">Send Event</button>`
+})
+export class AppComponent implements OnInit, OnDestroy {
+  private wuService = createWuService();
 
-wu.define('footer', {
-  mount: (container) => {
-    app = new App({
-      target: container,
-      props: {
-        name: 'Footer App'
-      }
+  ngOnInit() {
+    this.wuService.on('user:login', (data) => {
+      console.log('User logged in:', data);
     });
-  },
-  unmount: (container) => {
-    if (app) {
-      app.$destroy();
-      app = null;
-    }
   }
-});
+
+  sendEvent() {
+    this.wuService.emit('app:ready', { timestamp: Date.now() });
+  }
+
+  ngOnDestroy() {
+    this.wuService.destroy();
+  }
+}
 ```
 
-## 🛠️ API Reference
+---
+
+## 🧡 Svelte Adapter
 
-### Core API
+### Registro Básico
 
 ```js
-import { wu } from 'wu-framework';
+import { wuSvelte } from 'wu-framework/adapters/svelte';
+import App from './App.svelte';
 
-// Inicializar framework
-await wu.init({ apps: [...] });
+wuSvelte.register('my-app', App);
+```
 
-// Montar app
-await wu.mount('appName', '#container');
+### Svelte 5 (con runes)
 
-// Desmontar app
-await wu.unmount('appName');
+```js
+import { wuSvelte } from 'wu-framework/adapters/svelte';
+import App from './App.svelte';
 
-// Definir lifecycle
-wu.define('appName', { mount, unmount });
+wuSvelte.registerSvelte5('my-app', App);
+```
 
-// Usar componente compartido
-const Component = await wu.use('app.Component');
+### Stores Reactivos
 
-// Obtener información
-const info = wu.getAppInfo('appName');
-const stats = wu.getStats();
+```svelte
+<script>
+  import { createWuStore, useWuEvents } from 'wu-framework/adapters/svelte';
+  import { onDestroy } from 'svelte';
 
-// Limpiar framework
-await wu.destroy();
+  // Store reactivo (compatible con $store)
+  const userStore = createWuStore('user');
+
+  // Eventos
+  const { emit, on, cleanup } = useWuEvents();
+
+  on('cart:updated', (data) => {
+    console.log('Cart updated:', data);
+  });
+
+  onDestroy(cleanup);
+</script>
+
+<p>Hello, {$userStore?.name}</p>
+<button on:click={() => emit('user:logout')}>Logout</button>
 ```
 
-### Utils API
+---
 
-```js
-import { init, mount, define, use } from 'wu-framework';
+## ⚡ Preact Adapter
+
+### Registro Básico
 
-// API de conveniencia
-await init([{ name: 'app', url: 'http://localhost:3000' }]);
-await mount('app', '#container');
-define('app', { mount, unmount });
-const Component = await use('shared.Button');
+```jsx
+import { wuPreact } from 'wu-framework/adapters/preact';
+import App from './App';
+
+wuPreact.register('my-app', App);
+```
+
+### Compatible con React (preact/compat)
+
+```jsx
+import { wuPreact } from 'wu-framework/adapters/preact';
+import App from './App'; // Componente estilo React
+
+wuPreact.registerCompat('my-app', App);
 ```
 
-### Development API
+### Hooks
+
+```jsx
+import { h } from 'preact';
+import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
+import { createUseWuEvents, createUseWuStore } from 'wu-framework/adapters/preact';
+
+const useWuEvents = createUseWuEvents({ useCallback, useEffect, useRef });
+const useWuStore = createUseWuStore({ useState, useCallback, useEffect });
+
+function MyComponent() {
+  const { emit, on } = useWuEvents();
+  const { state } = useWuStore('user');
+
+  return <div>Hello {state?.name}</div>;
+}
+```
+
+---
+
+## 💎 Solid.js Adapter
+
+### Registro Básico
+
+```jsx
+import { wuSolid } from 'wu-framework/adapters/solid';
+import App from './App';
+
+wuSolid.register('my-app', App);
+```
+
+### Stores Reactivos
+
+```jsx
+import { createWuStore, createWuEvent } from 'wu-framework/adapters/solid';
+
+function MyComponent() {
+  // Store reactivo
+  const [user, setUser] = createWuStore('user');
+
+  // Eventos reactivos
+  const lastEvent = createWuEvent('notification:*');
+
+  return (
+    <div>
+      <p>Hello, {user()?.name}</p>
+      <Show when={lastEvent()}>
+        <p>Last notification: {lastEvent()?.data}</p>
+      </Show>
+      <button onClick={() => setUser('name', 'John')}>
+        Set Name
+      </button>
+    </div>
+  );
+}
+```
+
+---
+
+## 🔥 Lit Adapter (Web Components)
+
+### Registro con LitElement
 
 ```js
-import { dev } from 'wu-framework';
+import { LitElement, html, css } from 'lit';
+import { wuLit } from 'wu-framework/adapters/lit';
 
-// Debugging
-dev.enableDebug();
-dev.inspect();
+class MyApp extends LitElement {
+  static styles = css`
+    :host { display: block; padding: 16px; }
+  `;
+
+  render() {
+    return html`<h1>Hello from Lit!</h1>`;
+  }
+}
 
-// Hot reload (desarrollo)
-await dev.reload('appName');
+wuLit.register('my-app', MyApp);
 ```
 
-## 🔧 Configuración Avanzada
+### Con WuMixin
+
+```js
+import { LitElement, html } from 'lit';
+import { WuMixin } from 'wu-framework/adapters/lit';
+
+class MyApp extends WuMixin(LitElement) {
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Usar eventos de Wu
+    this.wuOn('user:login', (data) => {
+      console.log('User logged in:', data);
+    });
+  }
+
+  handleClick() {
+    this.wuEmit('button:clicked', { id: 'my-button' });
+  }
 
-### Presets
+  render() {
+    return html`
+      <button @click=${this.handleClick}>Click me</button>
+    `;
+  }
+}
+
+wuLit.register('my-app', MyApp);
+```
+
+### Web Component Vanilla (sin Lit)
 
 ```js
-import { wu, presets } from 'wu-framework';
+import { wuLit } from 'wu-framework/adapters/lit';
 
-// Desarrollo
-await wu.init(presets.development([
-  { name: 'header', port: 3001 },
-  { name: 'sidebar', port: 3002 }
-]));
+class MyComponent extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = '<h1>Hello Web Component!</h1>';
+  }
+}
 
-// Producción
-await wu.init(presets.production([
-  { name: 'header', url: 'https://header.myapp.com' },
-  { name: 'sidebar', url: 'https://sidebar.myapp.com' }
-]));
+wuLit.registerWebComponent('my-component', MyComponent);
 ```
 
-### Eventos
+---
+
+## 📦 Vanilla JS Adapter
+
+### Registro con Objeto
 
 ```js
-import { events } from 'wu-framework';
+import { wuVanilla } from 'wu-framework/adapters/vanilla';
 
-// Escuchar eventos del ciclo de vida
-events.onAppMounted((event) => {
-  console.log('App mounted:', event.detail.appName);
-});
+wuVanilla.register('my-app', {
+  state: { count: 0 },
+
+  render: (container, state) => {
+    container.innerHTML = `
+      <div>
+        <h1>Count: ${state.count}</h1>
+        <button id="increment">+</button>
+      </div>
+    `;
+    container.querySelector('#increment').onclick = () => {
+      state.count++;
+      // Re-render manual
+    };
+  },
 
-events.onAppError((event) => {
-  console.error('App error:', event.detail);
+  destroy: (container) => {
+    container.innerHTML = '';
+  }
 });
 ```
 
-## 🌟 Ventajas Competitivas
+### Registro con Clase
+
+```js
+import { wuVanilla } from 'wu-framework/adapters/vanilla';
+
+class TodoApp {
+  constructor(container) {
+    this.container = container;
+    this.todos = [];
+  }
 
-### vs Module Federation
+  render() {
+    this.container.innerHTML = `
+      <ul>
+        ${this.todos.map(t => `<li>${t}</li>`).join('')}
+      </ul>
+      <input type="text" id="input" />
+      <button id="add">Add</button>
+    `;
 
-- ✅ **No requiere Webpack 5** - Funciona con cualquier bundler
-- ✅ **Runtime configuration** - No necesita build-time config
-- ✅ **Framework agnostic real** - No solo React
-- ✅ **API más simple** - Menos boilerplate
+    this.container.querySelector('#add').onclick = () => {
+      const input = this.container.querySelector('#input');
+      this.todos.push(input.value);
+      this.render();
+    };
+  }
 
-### vs qiankun
+  destroy() {
+    this.container.innerHTML = '';
+  }
+}
 
-- ✅ **Shadow DOM nativo** - No hacks CSS
-- ✅ **Mejor DX** - DevTools integration
-- ✅ **Sandbox más ligero** - Menos overhead
-- ✅ **Component sharing** - Sistema declarativo
+wuVanilla.registerClass('todo-app', TodoApp);
+```
 
-### vs single-spa
+### Registro con Template
 
-- ✅ **Zero config** - Sin setup complejo
-- ✅ **Shadow DOM** - Aislamiento real
-- ✅ **Manifest system** - Configuración declarativa
-- ✅ **API moderna** - ES modules nativo
+```js
+import { wuVanilla } from 'wu-framework/adapters/vanilla';
 
-## 📦 Bundler Support
+wuVanilla.registerTemplate('header', `
+  <header>
+    <h1>My Header</h1>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+    </nav>
+  </header>
+`);
 
-Wu Framework funciona con **cualquier bundler** o sin bundler:
+// Template dinámico
+wuVanilla.registerTemplate('greeting',
+  (data) => `<h1>Hello, ${data.name}!</h1>`,
+  { data: { name: 'World' } }
+);
+```
 
-### Vite
+### Componente Reactivo
 
 ```js
-// vite.config.js
-export default {
-  // Wu Framework funciona out-of-the-box con Vite
-  // No necesita configuración especial
-}
+import { wuVanilla } from 'wu-framework/adapters/vanilla';
+
+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);
 ```
 
-### Webpack
+---
+
+## 📡 Event Bus
+
+Sistema de eventos para comunicación entre microfrontends con soporte para wildcards y replay.
 
 ```js
-// webpack.config.js
-module.exports = {
-  // Wu Framework funciona con cualquier versión de Webpack
-  // Sin plugins especiales requeridos
-}
+import { emit, on, once, off, replayEvents } from 'wu-framework';
+
+// Emitir evento
+emit('user:login', { userId: 123, name: 'John' });
+
+// Suscribirse a evento
+const unsubscribe = on('user:login', (event) => {
+  console.log('User logged in:', event.data);
+});
+
+// Suscribirse con wildcards
+on('user:*', (event) => {
+  console.log('User event:', event.name, event.data);
+});
+
+// Suscribirse una sola vez
+once('app:ready', (event) => {
+  console.log('App is ready!');
+});
+
+// Desuscribirse
+off('user:login', callback);
+unsubscribe(); // También funciona
+
+// Replay eventos del historial
+replayEvents('user:*', (event) => {
+  console.log('Past event:', event);
+});
 ```
 
-### Sin Bundler (ES Modules)
+---
 
-```html
-<!-- Funciona directamente en el browser -->
-<script type="module">
-  import { wu } from './node_modules/wu-framework/src/index.js';
+## 🗄️ Store (State Management)
 
-  wu.init({
-    apps: [{ name: 'app', url: './my-app' }]
-  });
-</script>
+Store de alto rendimiento con pattern matching.
+
+```js
+import {
+  getState,
+  setState,
+  onStateChange,
+  batchState,
+  clearState,
+  getStoreMetrics
+} from 'wu-framework';
+
+// Establecer estado (dot notation)
+setState('user.name', 'John');
+setState('user.preferences.theme', 'dark');
+
+// Obtener estado
+const name = getState('user.name'); // 'John'
+const user = getState('user');      // { name: 'John', preferences: { theme: 'dark' } }
+
+// Suscribirse a cambios
+const unsubscribe = onStateChange('user.name', (value, path) => {
+  console.log(`${path} changed to:`, value);
+});
+
+// Suscribirse con wildcards
+onStateChange('user.*', (value, path) => {
+  console.log(`User property changed: ${path} =`, value);
+});
+
+// Batch updates (más eficiente)
+batchState({
+  'user.name': 'Jane',
+  'user.email': 'jane@example.com',
+  'settings.notifications': true
+});
+
+// Métricas de performance
+const metrics = getStoreMetrics();
 ```
 
-## 🚀 Getting Started
+---
 
-### 1. Crear Container App
+## 🔌 Sistema de Plugins
 
-```bash
-mkdir my-container-app
-cd my-container-app
-npm init -y
-npm install wu-framework
+```js
+import { usePlugin, createPlugin, uninstallPlugin } from 'wu-framework';
+
+const analyticsPlugin = createPlugin({
+  name: 'analytics',
+  permissions: ['events', 'store'],
+
+  install: (api, options) => {
+    api.on('app:mounted', (event) => {
+      trackEvent('mount', event.data.appName);
+    });
+  },
+
+  beforeMount: async (context) => {
+    console.log('Before mount:', context.appName);
+  },
+
+  afterMount: async (context) => {
+    console.log('Mounted in', context.mountTime, 'ms');
+  }
+});
+
+usePlugin(analyticsPlugin, { trackingId: 'UA-123456' });
 ```
 
+---
+
+## 🪝 Lifecycle Hooks
+
 ```js
-// index.js
-import { wu } from 'wu-framework';
+import { useHook, createGuardHook, createTimedHook } from 'wu-framework';
+
+// Hook básico
+useHook('beforeMount', async (context, next) => {
+  console.log('Before mounting:', context.appName);
+  await next();
+}, { name: 'my-hook', priority: 10 });
+
+// Guard hook (puede cancelar)
+const authGuard = createGuardHook(async (ctx) => {
+  return await isUserAuthenticated();
+});
+useHook('beforeMount', authGuard);
 
-wu.init({
+// Hook con timeout
+const timedHook = createTimedHook(async (ctx) => {
+  await slowOperation();
+}, 5000);
+```
+
+### Fases Disponibles
+
+| Fase | Descripción |
+|------|-------------|
+| `beforeInit` | Antes de inicializar framework |
+| `afterInit` | Después de inicializar |
+| `beforeLoad` | Antes de cargar una app |
+| `afterLoad` | Después de cargar |
+| `beforeMount` | Antes de montar |
+| `afterMount` | Después de montar |
+| `beforeUnmount` | Antes de desmontar |
+| `afterUnmount` | Después de desmontar |
+
+---
+
+## 🎯 Loading Strategies
+
+```js
+await wu.init({
   apps: [
-    { name: 'header', url: 'http://localhost:3001' },
-    { name: 'content', url: 'http://localhost:3002' }
+    { name: 'header', url: '/mfe/header', strategy: 'lazy' },      // Default - carga cuando se monta
+    { name: 'sidebar', url: '/mfe/sidebar', strategy: 'eager' },   // Precarga inmediata
+    { name: 'footer', url: '/mfe/footer', strategy: 'preload' },   // <link prefetch>
+    { name: 'analytics', url: '/mfe/analytics', strategy: 'idle' } // requestIdleCallback
   ]
 });
-
-wu.mount('header', '#header');
-wu.mount('content', '#content');
 ```
 
-```html
-<!-- index.html -->
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Wu Framework Container</title>
-</head>
-<body>
-  <div id="header"></div>
-  <div id="content"></div>
+| Estrategia | Descripción | Uso recomendado |
+|------------|-------------|-----------------|
+| `lazy` | Carga cuando se monta (default) | Contenido below-the-fold |
+| `eager` | Precarga inmediata | Componentes críticos |
+| `preload` | Usa `<link rel="prefetch">` | Navegación anticipada |
+| `idle` | Usa `requestIdleCallback` | Analytics, features secundarias |
+
+---
+
+## ⚡ Performance Monitoring
 
-  <script type="module" src="index.js"></script>
-</body>
-</html>
+```js
+import {
+  startMeasure,
+  endMeasure,
+  getPerformanceMetrics,
+  generatePerformanceReport
+} from 'wu-framework';
+
+// Medición personalizada
+startMeasure('data-fetch', 'my-app');
+await fetchData();
+const duration = endMeasure('data-fetch', 'my-app');
+
+// Reporte completo
+const report = generatePerformanceReport();
 ```
 
-### 2. Crear Micro App
+---
 
-```bash
-mkdir header-app
-cd header-app
-npm init -y
-npm install wu-framework react react-dom
+## 🛡️ Error Handling
+
+```js
+import { registerErrorHandler, configureErrorBoundary } from 'wu-framework';
+
+registerErrorHandler({
+  name: 'api-error',
+  canHandle: (error) => error.message.includes('API'),
+  handle: async (error, context) => {
+    if (context.retryCount < 3) {
+      return { recovered: true, action: 'retry' };
+    }
+    return { recovered: false, action: 'fallback' };
+  }
+});
+
+configureErrorBoundary({
+  maxRetries: 3,
+  retryDelay: 1000,
+  showErrorUI: true
+});
 ```
 
+---
+
+## 🎯 API Simplificada (wu.app)
+
 ```js
-// index.js
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { wu } from 'wu-framework';
 
-const HeaderApp = () => (
-  <header style={{ background: '#f0f0f0', padding: '1rem' }}>
-    <h1>My Header App</h1>
-  </header>
-);
+// URL puede ser localhost (dev) o CDN (prod)
+const header = wu.app('header', {
+  url: 'http://localhost:3001',  // o 'https://cdn.mycompany.com/mfe/header'
+  container: '#header-container'
+});
+
+await header.mount();
+console.log(header.isMounted); // true
+
+await header.unmount();
+await header.remount();
+await header.reload();  // Limpia cache
+
+const health = await header.verify();
+await header.destroy();
+```
+
+---
+
+## 🚀 Deployment
 
-wu.define('header', {
-  mount: (container) => {
-    ReactDOM.render(<HeaderApp />, container);
+### Estructura de Producción
+
+Cada microfrontend se despliega de forma independiente:
+
+```
+https://cdn.mycompany.com/
+├── mfe/
+│   ├── header/
+│   │   ├── wu.json        # Manifest
+│   │   ├── index.js       # Entry point
+│   │   └── assets/
+│   ├── sidebar/
+│   │   ├── wu.json
+│   │   ├── index.js
+│   │   └── assets/
+│   └── content/
+│       ├── wu.json
+│       ├── index.js
+│       └── assets/
+```
+
+### Configuración por Entorno
+
+```js
+// config.js
+const config = {
+  development: {
+    header: 'http://localhost:3001',
+    sidebar: 'http://localhost:3002',
+    content: 'http://localhost:3003'
   },
-  unmount: (container) => {
-    ReactDOM.unmountComponentAtNode(container);
+  staging: {
+    header: 'https://staging-cdn.mycompany.com/mfe/header',
+    sidebar: 'https://staging-cdn.mycompany.com/mfe/sidebar',
+    content: 'https://staging-cdn.mycompany.com/mfe/content'
+  },
+  production: {
+    header: 'https://cdn.mycompany.com/mfe/header',
+    sidebar: 'https://cdn.mycompany.com/mfe/sidebar',
+    content: 'https://cdn.mycompany.com/mfe/content'
   }
+};
+
+const env = process.env.NODE_ENV || 'development';
+const urls = config[env];
+
+await wu.init({
+  apps: [
+    { name: 'header', url: urls.header },
+    { name: 'sidebar', url: urls.sidebar },
+    { name: 'content', url: urls.content }
+  ]
 });
 ```
 
+### CORS Configuration
+
+Los microfrontends deben permitir CORS desde el shell:
+
+```nginx
+# nginx.conf para CDN
+location /mfe/ {
+    add_header Access-Control-Allow-Origin *;
+    add_header Access-Control-Allow-Methods "GET, OPTIONS";
+    add_header Access-Control-Allow-Headers "Content-Type";
+}
+```
+
+### Versionado
+
 ```json
-// wu.json
+// wu.json con versión
 {
-  "name": "header-app",
-  "entry": "index.js",
-  "wu": {
-    "exports": {
-      "HeaderComponent": "./components/Header"
-    },
-    "imports": [],
-    "routes": ["/header"]
-  }
+  "name": "header",
+  "version": "1.2.0",
+  "entry": "index.js"
 }
 ```
 
-### 3. Servir Apps
+```js
+// Shell con versiones específicas
+await wu.init({
+  apps: [
+    { name: 'header', url: 'https://cdn.mycompany.com/mfe/header/v1.2.0' },
+    { name: 'sidebar', url: 'https://cdn.mycompany.com/mfe/sidebar/v2.0.0' }
+  ]
+});
+```
 
-```bash
-# Terminal 1 - Container
-cd my-container-app
-npx serve -p 3000
+---
 
-# Terminal 2 - Header App
-cd header-app
-npx serve -p 3001
+## 🏗️ Arquitectura
 
-# Abrir http://localhost:3000
+```
+┌─────────────────────────────────────────────────────────────┐
+│                     HOST APPLICATION                         │
+├─────────────────────────────────────────────────────────────┤
+│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────┐  │
+│  │  #shadow-root   │  │  #shadow-root   │  │ #shadow-root│  │
+│  │  ┌───────────┐  │  │  ┌───────────┐  │  │ ┌─────────┐ │  │
+│  │  │  Header   │  │  │  │  Sidebar  │  │  │ │ Content │ │  │
+│  │  │  (React)  │  │  │  │  (Vue)    │  │  │ │(Angular)│ │  │
+│  │  └───────────┘  │  │  └───────────┘  │  │ └─────────┘ │  │
+│  │  CSS Isolated   │  │  CSS Isolated   │  │ CSS Isolated│  │
+│  │  JS Sandboxed   │  │  JS Sandboxed   │  │ JS Sandboxed│  │
+│  └─────────────────┘  └─────────────────┘  └─────────────┘  │
+├─────────────────────────────────────────────────────────────┤
+│                      WU FRAMEWORK CORE                       │
+│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────────────┐  │
+│  │ EventBus │ │  Store   │ │ Plugins  │ │ Sandbox Pool   │  │
+│  └──────────┘ └──────────┘ └──────────┘ └────────────────┘  │
+└─────────────────────────────────────────────────────────────┘
 ```
 
-## 🤝 Contributing
+---
 
-Wu Framework es open source. ¡Contribuciones bienvenidas!
+## 📋 API Reference
 
-1. Fork el repositorio
-2. Crear feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit cambios (`git commit -m 'Add amazing feature'`)
-4. Push branch (`git push origin feature/amazing-feature`)
-5. Abrir Pull Request
+### Core
 
-## 📄 License
+```js
+import { wu, init, mount, unmount, destroy, getStats } from 'wu-framework';
+```
 
-MIT License - ver [LICENSE](LICENSE) para detalles.
+### Event Bus
 
-## 🙏 Acknowledgments
+```js
+import { emit, on, once, off, replayEvents, getEventBusStats } from 'wu-framework';
+```
+
+### Store
+
+```js
+import { getState, setState, onStateChange, batchState, clearState } from 'wu-framework';
+```
 
-- Inspirado por qiankun, single-spa, y Module Federation
-- Construido con amor para la comunidad de microfrontends
-- Gracias a todos los contributors
+### Plugins & Hooks
+
+```js
+import { usePlugin, createPlugin, useHook, removeHook } from 'wu-framework';
+```
+
+### Performance & Errors
+
+```js
+import { startMeasure, endMeasure, generatePerformanceReport } from 'wu-framework';
+import { registerErrorHandler, configureErrorBoundary } from 'wu-framework';
+```
+
+### Adapters
+
+```js
+import { wuReact } from 'wu-framework/adapters/react';
+import { wuVue } from 'wu-framework/adapters/vue';
+import { wuAngular } from 'wu-framework/adapters/angular';
+import { wuSvelte } from 'wu-framework/adapters/svelte';
+import { wuPreact } from 'wu-framework/adapters/preact';
+import { wuSolid } from 'wu-framework/adapters/solid';
+import { wuLit } from 'wu-framework/adapters/lit';
+import { wuVanilla } from 'wu-framework/adapters/vanilla';
+```
+
+### Utilities
+
+```js
+import { presets, dev, events } from 'wu-framework';
+
+// Presets
+await wu.init(presets.development([{ name: 'app', port: 3001 }]));
+await wu.init(presets.production([{ name: 'app', url: 'https://...' }]));
+
+// Dev tools
+dev.enableDebug();
+dev.inspect();
+await dev.reload('app');
+
+// Silenciar logs
+wu.silence();
+wu.verbose();
+```
+
+---
+
+## 🤝 Contributing
+
+¡Las contribuciones son bienvenidas!
+
+1. **Fork** el repositorio
+2. **Crear** branch (`git checkout -b feature/amazing-feature`)
+3. **Commit** tus cambios (`git commit -m 'Add amazing feature'`)
+4. **Push** al branch (`git push origin feature/amazing-feature`)
+5. **Abrir** un Pull Request
 
 ---
 
-**🚀 Wu Framework - Universal Microfrontends Made Simple**
+## 📄 License
+
+MIT License - Copyright (c) 2025 Wu Framework Team
+
+---
 
-*Framework agnostic • Zero config • Shadow DOM • Runtime loading*
+<p align="center">
+  <b>🚀 Wu Framework - Universal Microfrontends Made Simple</b>
+  <br><br>
+  <i>Zero dependencies • 8 Frameworks • Shadow DOM • Proxy Sandbox • Self-Healing</i>
+</p>