wu-framework 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Wu Framework Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,559 @@
+# 🚀 Wu Framework
+
+**Universal Microfrontends Made Simple**
+
+Wu Framework es la librería de microfrontends más simple y poderosa del mercado. **Framework agnostic, zero config, Shadow DOM nativo**.
+
+## ✨ ¿Por qué Wu Framework?
+
+| Característica | Module Federation | qiankun | **Wu Framework** |
+|---|---|---|---|
+| **Setup** | Webpack config complejo | Configuración manual | **Zero config** |
+| **Framework Support** | React-first | Multi framework | **Cualquier framework** |
+| **Bundler Required** | Solo Webpack 5 | Agnóstico pero complejo | **Ninguno** |
+| **CSS Isolation** | Básico | CSS hacks | **Shadow DOM nativo** |
+| **Runtime Config** | ❌ | Limitado | **✅ Completamente dinámico** |
+| **API Complexity** | Alta | Media | **Súper simple** |
+
+## 🎯 Instalación
+
+```bash
+npm install wu-framework
+```
+
+**¡Y ya está!** Sin webpack config, sin plugins, sin configuración.
+
+## 🔥 Uso Básico
+
+### Container App (Host)
+
+```js
+import { wu } from 'wu-framework';
+
+// Inicializar con apps
+wu.init({
+  apps: [
+    { name: 'header', url: 'http://localhost:3001' },
+    { name: 'sidebar', url: 'http://localhost:3002' },
+    { name: 'content', url: 'http://localhost:3003' }
+  ]
+});
+
+// Montar en el DOM
+wu.mount('header', '#header-container');
+wu.mount('sidebar', '#sidebar-container');
+wu.mount('content', '#content-container');
+```
+
+### Micro App (Cualquier Framework)
+
+```js
+import { wu } from 'wu-framework';
+
+// React
+wu.define('header', {
+  mount: (container) => {
+    ReactDOM.render(<HeaderApp />, container);
+  },
+  unmount: (container) => {
+    ReactDOM.unmountComponentAtNode(container);
+  }
+});
+
+// Vue
+wu.define('sidebar', {
+  mount: (container) => {
+    createApp(SidebarApp).mount(container);
+  },
+  unmount: (container) => {
+    // Vue cleanup
+  }
+});
+
+// Vanilla JS
+wu.define('content', {
+  mount: (container) => {
+    container.innerHTML = `
+      <h1>Content App</h1>
+      <p>Pure vanilla JavaScript!</p>
+    `;
+  },
+  unmount: (container) => {
+    container.innerHTML = '';
+  }
+});
+```
+
+## 📋 Wu Manifest (wu.json)
+
+Cada micro-app puede tener un archivo `wu.json` para configuración:
+
+```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"]
+  }
+}
+```
+
+### Component Sharing
+
+```js
+// Exportar componentes
+wu.define('shared', {
+  mount: (container) => {
+    // App shared con componentes reutilizables
+  }
+});
+
+// Usar componentes compartidos
+const Button = await wu.use('shared.Button');
+const Theme = await wu.use('shared.Theme');
+```
+
+## 🏗️ Arquitectura
+
+Wu Framework usa **Shadow DOM nativo** para verdadero aislamiento:
+
+```
+┌─────────────────────────────────────┐
+│           Host Application          │
+├─────────────────────────────────────┤
+│  ┌─────────────┐  ┌─────────────┐   │
+│  │ #shadow-root│  │ #shadow-root│   │
+│  │  ┌─────────┐│  │  ┌─────────┐│   │
+│  │  │Header   ││  │  │Sidebar  ││   │
+│  │  │(React)  ││  │  │(Vue)    ││   │
+│  │  └─────────┘│  │  └─────────┘│   │
+│  └─────────────┘  └─────────────┘   │
+└─────────────────────────────────────┘
+```
+
+### 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
+
+## 🎨 Ejemplos de Frameworks
+
+### React + TypeScript
+
+```tsx
+// header-app/src/index.tsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { wu } from 'wu-framework';
+
+const HeaderApp: React.FC = () => (
+  <header className="app-header">
+    <h1>Header App (React)</h1>
+  </header>
+);
+
+wu.define('header', {
+  mount: (container: HTMLElement) => {
+    ReactDOM.render(<HeaderApp />, container);
+  },
+  unmount: (container: HTMLElement) => {
+    ReactDOM.unmountComponentAtNode(container);
+  }
+});
+```
+
+### Vue 3 + Composition API
+
+```vue
+<!-- sidebar-app/src/App.vue -->
+<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>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref([
+  { id: 1, name: 'Home' },
+  { id: 2, name: 'About' },
+  { id: 3, name: 'Contact' }
+]);
+</script>
+```
+
+```js
+// sidebar-app/src/index.js
+import { createApp } from 'vue';
+import { wu } from 'wu-framework';
+import App from './App.vue';
+
+let app;
+
+wu.define('sidebar', {
+  mount: (container) => {
+    app = createApp(App);
+    app.mount(container);
+  },
+  unmount: (container) => {
+    if (app) {
+      app.unmount();
+      app = null;
+    }
+  }
+});
+```
+
+### Angular
+
+```typescript
+// content-app/src/main.ts
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { wu } from 'wu-framework';
+import { AppModule } from './app/app.module';
+
+let platformRef: any;
+
+wu.define('content', {
+  mount: async (container: HTMLElement) => {
+    // Crear elemento para Angular
+    const appElement = document.createElement('app-root');
+    container.appendChild(appElement);
+
+    // Bootstrap Angular
+    platformRef = await platformBrowserDynamic().bootstrapModule(AppModule);
+  },
+  unmount: (container: HTMLElement) => {
+    if (platformRef) {
+      platformRef.destroy();
+      platformRef = null;
+    }
+    container.innerHTML = '';
+  }
+});
+```
+
+### Svelte
+
+```js
+// footer-app/src/index.js
+import { wu } from 'wu-framework';
+import App from './App.svelte';
+
+let app;
+
+wu.define('footer', {
+  mount: (container) => {
+    app = new App({
+      target: container,
+      props: {
+        name: 'Footer App'
+      }
+    });
+  },
+  unmount: (container) => {
+    if (app) {
+      app.$destroy();
+      app = null;
+    }
+  }
+});
+```
+
+## 🛠️ API Reference
+
+### Core API
+
+```js
+import { wu } from 'wu-framework';
+
+// Inicializar framework
+await wu.init({ apps: [...] });
+
+// Montar app
+await wu.mount('appName', '#container');
+
+// Desmontar app
+await wu.unmount('appName');
+
+// Definir lifecycle
+wu.define('appName', { mount, unmount });
+
+// Usar componente compartido
+const Component = await wu.use('app.Component');
+
+// Obtener información
+const info = wu.getAppInfo('appName');
+const stats = wu.getStats();
+
+// Limpiar framework
+await wu.destroy();
+```
+
+### Utils API
+
+```js
+import { init, mount, define, use } from 'wu-framework';
+
+// 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');
+```
+
+### Development API
+
+```js
+import { dev } from 'wu-framework';
+
+// Debugging
+dev.enableDebug();
+dev.inspect();
+
+// Hot reload (desarrollo)
+await dev.reload('appName');
+```
+
+## 🔧 Configuración Avanzada
+
+### Presets
+
+```js
+import { wu, presets } from 'wu-framework';
+
+// Desarrollo
+await wu.init(presets.development([
+  { name: 'header', port: 3001 },
+  { name: 'sidebar', port: 3002 }
+]));
+
+// Producción
+await wu.init(presets.production([
+  { name: 'header', url: 'https://header.myapp.com' },
+  { name: 'sidebar', url: 'https://sidebar.myapp.com' }
+]));
+```
+
+### Eventos
+
+```js
+import { events } from 'wu-framework';
+
+// Escuchar eventos del ciclo de vida
+events.onAppMounted((event) => {
+  console.log('App mounted:', event.detail.appName);
+});
+
+events.onAppError((event) => {
+  console.error('App error:', event.detail);
+});
+```
+
+## 🌟 Ventajas Competitivas
+
+### vs Module Federation
+
+- ✅ **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
+
+### vs qiankun
+
+- ✅ **Shadow DOM nativo** - No hacks CSS
+- ✅ **Mejor DX** - DevTools integration
+- ✅ **Sandbox más ligero** - Menos overhead
+- ✅ **Component sharing** - Sistema declarativo
+
+### vs single-spa
+
+- ✅ **Zero config** - Sin setup complejo
+- ✅ **Shadow DOM** - Aislamiento real
+- ✅ **Manifest system** - Configuración declarativa
+- ✅ **API moderna** - ES modules nativo
+
+## 📦 Bundler Support
+
+Wu Framework funciona con **cualquier bundler** o sin bundler:
+
+### Vite
+
+```js
+// vite.config.js
+export default {
+  // Wu Framework funciona out-of-the-box con Vite
+  // No necesita configuración especial
+}
+```
+
+### Webpack
+
+```js
+// webpack.config.js
+module.exports = {
+  // Wu Framework funciona con cualquier versión de Webpack
+  // Sin plugins especiales requeridos
+}
+```
+
+### Sin Bundler (ES Modules)
+
+```html
+<!-- Funciona directamente en el browser -->
+<script type="module">
+  import { wu } from './node_modules/wu-framework/src/index.js';
+
+  wu.init({
+    apps: [{ name: 'app', url: './my-app' }]
+  });
+</script>
+```
+
+## 🚀 Getting Started
+
+### 1. Crear Container App
+
+```bash
+mkdir my-container-app
+cd my-container-app
+npm init -y
+npm install wu-framework
+```
+
+```js
+// index.js
+import { wu } from 'wu-framework';
+
+wu.init({
+  apps: [
+    { name: 'header', url: 'http://localhost:3001' },
+    { name: 'content', url: 'http://localhost:3002' }
+  ]
+});
+
+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>
+
+  <script type="module" src="index.js"></script>
+</body>
+</html>
+```
+
+### 2. Crear Micro App
+
+```bash
+mkdir header-app
+cd header-app
+npm init -y
+npm install wu-framework react react-dom
+```
+
+```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>
+);
+
+wu.define('header', {
+  mount: (container) => {
+    ReactDOM.render(<HeaderApp />, container);
+  },
+  unmount: (container) => {
+    ReactDOM.unmountComponentAtNode(container);
+  }
+});
+```
+
+```json
+// wu.json
+{
+  "name": "header-app",
+  "entry": "index.js",
+  "wu": {
+    "exports": {
+      "HeaderComponent": "./components/Header"
+    },
+    "imports": [],
+    "routes": ["/header"]
+  }
+}
+```
+
+### 3. Servir Apps
+
+```bash
+# Terminal 1 - Container
+cd my-container-app
+npx serve -p 3000
+
+# Terminal 2 - Header App
+cd header-app
+npx serve -p 3001
+
+# Abrir http://localhost:3000
+```
+
+## 🤝 Contributing
+
+Wu Framework es open source. ¡Contribuciones bienvenidas!
+
+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
+
+## 📄 License
+
+MIT License - ver [LICENSE](LICENSE) para detalles.
+
+## 🙏 Acknowledgments
+
+- Inspirado por qiankun, single-spa, y Module Federation
+- Construido con amor para la comunidad de microfrontends
+- Gracias a todos los contributors
+
+---
+
+**🚀 Wu Framework - Universal Microfrontends Made Simple**
+
+*Framework agnostic • Zero config • Shadow DOM • Runtime loading*

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "wu-framework",
+  "version": "1.0.0",
+  "description": "🚀 Universal Microfrontends Framework - Framework agnostic, zero config, Shadow DOM isolation",
+  "main": "src/index.js",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.js",
+    "./core": "./src/core/wu-core.js",
+    "./loader": "./src/core/wu-loader.js",
+    "./sandbox": "./src/core/wu-sandbox.js",
+    "./manifest": "./src/core/wu-manifest.js"
+  },
+  "scripts": {
+    "dev": "node examples/dev-server.js",
+    "build": "echo 'No build step needed - ES modules ready'",
+    "test": "echo 'Tests coming soon'",
+    "lint": "echo 'Linting coming soon'",
+    "start": "npm run dev"
+  },
+  "keywords": [
+    "microfrontends",
+    "micro-frontends",
+    "framework-agnostic",
+    "react",
+    "vue",
+    "angular",
+    "svelte",
+    "shadow-dom",
+    "universal",
+    "zero-config",
+    "runtime-loading",
+    "component-sharing",
+    "web-components"
+  ],
+  "author": "Wu Framework Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wu-framework/wu-framework.git"
+  },
+  "bugs": {
+    "url": "https://github.com/wu-framework/wu-framework/issues"
+  },
+  "homepage": "https://wu-framework.dev",
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "browserslist": [
+    "defaults",
+    "not IE 11",
+    "supports es6-module"
+  ],
+  "files": [
+    "src/",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {},
+  "devDependencies": {},
+  "peerDependencies": {},
+  "optionalDependencies": {},
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/wu-framework"
+  },
+  "wu": {
+    "framework": true,
+    "version": "1.0.0",
+    "features": [
+      "universal-microfrontends",
+      "shadow-dom-isolation",
+      "zero-configuration",
+      "framework-agnostic",
+      "runtime-loading",
+      "component-sharing"
+    ],
+    "compatibility": {
+      "frameworks": ["react", "vue", "angular", "svelte", "vanilla"],
+      "bundlers": ["vite", "webpack", "rollup", "parcel", "esbuild"],
+      "browsers": ["chrome", "firefox", "safari", "edge"]
+    }
+  }
+}