wu-framework 1.1.0 → 1.1.1

package/README.md

@@ -46,26 +46,36 @@ Wu Framework incluye **adapters nativos** para los frameworks más populares:
 
 ## 🔥 Quick Start
 
-### 1. Shell (Host Application)
-
-```js
-import { wu } from 'wu-framework';
-
-// Inicializar y montar microfrontends
-await wu.init({
-  apps: [
-    { name: 'header', url: 'http://localhost:3001' },
-    { name: 'sidebar', url: 'http://localhost:3002' },
-    { name: 'content', url: 'http://localhost:3003' }
-  ]
-});
-
-await wu.mount('header', '#header-container');
-await wu.mount('sidebar', '#sidebar-container');
-await wu.mount('content', '#content-container');
+### 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"]
+  }
+}
 ```
 
-### 2. Micro App (1 línea de código)
+| 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
@@ -93,6 +103,70 @@ 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';
+
+await wu.init({
+  apps: [
+    { name: 'header', url: 'http://localhost:3001' },
+    { name: 'sidebar', url: 'http://localhost:3002' },
+    { name: 'content', url: 'http://localhost:3003' }
+  ]
+});
+
+await wu.mount('header', '#header-container');
+await wu.mount('sidebar', '#sidebar-container');
+await wu.mount('content', '#content-container');
+```
+
+**Producción:**
+```js
+import { wu } from 'wu-framework';
+
+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' }
+  ]
+});
+
+await wu.mount('header', '#header-container');
+await wu.mount('sidebar', '#sidebar-container');
+await wu.mount('content', '#content-container');
+```
+
+**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' }
+  ]
+});
+```
+
+### Estructura de Archivos (Microfrontend)
+
+```
+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
+```
+
 ---
 
 ## ⚛️ React Adapter
@@ -155,16 +229,20 @@ 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="http://localhost:3001"
+        url={HEADER_URL}
         onLoad={() => console.log('Header loaded!')}
         onError={(err) => console.error(err)}
       />
-      <WuSlot name="content" url="http://localhost:3002" />
+      <WuSlot name="content" url={CONTENT_URL} />
     </div>
   );
 }
@@ -229,17 +307,21 @@ onUnmounted(() => cleanup());
 ```vue
 <script setup>
 import { WuSlot } from 'wu-framework/adapters/vue';
+
+// 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="http://localhost:3001"
+      :url="headerUrl"
       @load="onLoad"
       @error="onError"
     />
-    <WuSlot name="sidebar" url="http://localhost:3002" />
+    <WuSlot name="sidebar" :url="sidebarUrl" />
   </div>
 </template>
 ```
@@ -770,14 +852,21 @@ const timedHook = createTimedHook(async (ctx) => {
 ```js
 await wu.init({
   apps: [
-    { name: 'header', url: '...', strategy: 'lazy' },     // Default
-    { name: 'sidebar', url: '...', strategy: 'eager' },   // Precarga
-    { name: 'footer', url: '...', strategy: 'preload' },  // <link prefetch>
-    { name: 'analytics', url: '...', strategy: 'idle' }   // requestIdleCallback
+    { 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
   ]
 });
 ```
 
+| 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
@@ -831,8 +920,9 @@ configureErrorBoundary({
 ```js
 import { wu } from 'wu-framework';
 
+// URL puede ser localhost (dev) o CDN (prod)
 const header = wu.app('header', {
-  url: 'http://localhost:3001',
+  url: 'http://localhost:3001',  // o 'https://cdn.mycompany.com/mfe/header'
   container: '#header-container'
 });
 
@@ -849,6 +939,99 @@ await header.destroy();
 
 ---
 
+## 🚀 Deployment
+
+### 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'
+  },
+  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 con versión
+{
+  "name": "header",
+  "version": "1.2.0",
+  "entry": "index.js"
+}
+```
+
+```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' }
+  ]
+});
+```
+
+---
+
 ## 🏗️ Arquitectura
 
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wu-framework",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "🚀 Universal Microfrontends Framework - 8 frameworks, zero config, Shadow DOM isolation",
   "main": "src/index.js",
   "type": "module",