wu-framework 1.1.18 → 1.2.0

package/README.md

@@ -9,10 +9,10 @@
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/wu-framework"><img src="https://img.shields.io/npm/v/wu-framework.svg?color=8b5cf6&label=npm" alt="npm version" /></a>
-  <a href="https://github.com/LuisPadre25/wu-framework/actions"><img src="https://img.shields.io/github/actions/workflow/status/LuisPadre25/wu-framework/ci.yml?label=tests&color=10b981" alt="tests" /></a>
-  <img src="https://img.shields.io/badge/tests-650%20passed-10b981" alt="650 tests" />
-  <img src="https://img.shields.io/badge/dependencies-0-8b5cf6" alt="zero deps" />
+  <a href="https://www.npmjs.com/package/wu-framework"><img src="https://img.shields.io/npm/v/wu-framework.svg?color=6366f1&label=npm" alt="npm version" /></a>
+  <a href="https://github.com/LuisPadre25/wu-framework/actions"><img src="https://img.shields.io/github/actions/workflow/status/LuisPadre25/wu-framework/ci.yml?label=tests&color=14b8a6" alt="tests" /></a>
+  <img src="https://img.shields.io/badge/tests-650%20passed-14b8a6" alt="650 tests" />
+  <img src="https://img.shields.io/badge/dependencies-0-6366f1" alt="zero deps" />
   <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License" /></a>
 </p>
 
@@ -25,7 +25,7 @@
 
 ---
 
-Run **React, Vue, Angular, Svelte, Solid, Preact, Lit, and Vanilla JS** micro-apps side by side in the same page. Each app lives in its own Shadow DOM with full CSS isolation. Apps communicate through a shared event bus and store — no tight coupling, no iframes.
+Run **React, Vue, Angular, Svelte, Solid, Preact, Lit, Qwik, Alpine.js, Stencil, HTMX, Stimulus, and Vanilla JS** micro-apps side by side in the same page. Each app lives in its own Shadow DOM with full CSS isolation. Apps communicate through a shared event bus and store — no tight coupling, no iframes.
 
 Add AI to any app with one line. Connect your own LLM (OpenAI, Anthropic, Ollama) and your app gains context-aware tool calling, autonomous agents, and cross-app orchestration. **WebMCP ready** for Chrome 146+.
 
@@ -68,7 +68,7 @@ await wu.ai.send('Add product SKU-42 to the cart');
 
 | | **Wu Framework** | **single-spa** | **Module Federation** | **iframes** |
 |---|:---:|:---:|:---:|:---:|
-| Framework adapters | **8** | 4 | 1* | Any |
+| Framework adapters | **13** | 4 | 1* | Any |
 | Shadow DOM isolation | Yes | No | No | Yes (heavy) |
 | Shared event bus | Built-in | Manual | Manual | postMessage |
 | Shared store | Built-in | Manual | Manual | No |
@@ -87,7 +87,7 @@ await wu.ai.send('Add product SKU-42 to the cart');
 
 ### Core
 
-- **8 Framework Adapters** — React, Vue, Angular, Svelte, Solid, Preact, Lit, Vanilla
+- **13 Framework Adapters** — React, Vue, Angular, Svelte, Solid, Preact, Lit, Qwik, Alpine.js, Stencil, HTMX, Stimulus, Vanilla
 - **Shadow DOM Isolation** — CSS and DOM fully sandboxed per app
 - **3 Sandbox Strategies** — Shadow DOM, Proxy, iframe — choose per app
 - **3 CSS Isolation Modes** — `shared`, `isolated`, `fully-isolated` per app
@@ -138,6 +138,26 @@ wuAngular.registerStandalone('settings', AppComponent, { createApplication, crea
 import { wuSvelte } from 'wu-framework/adapters/svelte';
 wuSvelte.registerSvelte5('dashboard', App);
 
+// Qwik
+import { wuQwik } from 'wu-framework/adapters/qwik';
+wuQwik.register('widget', QwikApp);
+
+// Alpine.js
+import { wuAlpine } from 'wu-framework/adapters/alpine';
+wuAlpine.register('search', initFn);
+
+// Stencil (Web Components)
+import { wuStencil } from 'wu-framework/adapters/stencil';
+wuStencil.register('badge', 'my-badge');
+
+// HTMX
+import { wuHtmx } from 'wu-framework/adapters/htmx';
+wuHtmx.register('feed', { template: '<div hx-get="/api/feed">...</div>' });
+
+// Stimulus
+import { wuStimulus } from 'wu-framework/adapters/stimulus';
+wuStimulus.register('form', { controllers: { hello: HelloController }, template: '...' });
+
 // Same pattern for Solid, Preact, Lit, Vanilla
 ```
 
@@ -324,7 +344,7 @@ QA sets a cookie → only **their browser** sees the override. Everyone else see
 | Source files | 79 |
 | Lines of code | 23,442 |
 | Test cases | **650** |
-| Framework adapters | 8 |
+| Framework adapters | 13 |
 | AI modules | 12 |
 | Core modules | 23 |
 | Runtime dependencies | **0** |
@@ -429,12 +449,41 @@ Something is coming. It learned from every LLM call you ever made. It doesn't ne
 
 ---
 
+## Wu CLI
+
+The official CLI for wu-framework. One binary, one port, all your micro-apps.
+
+```bash
+npm install -g @wu-framework/cli
+
+wu create my-project    # Interactive scaffolding (13 frameworks)
+cd my-project
+wu dev                  # Native Zig dev server on one port
+wu build                # Production build (parallel Vite)
+wu serve                # Serve production build
+```
+
+Features:
+- Native SIMD HTTP server written in Zig (16 bytes/cycle parsing)
+- Three-tier compilation: Native Zig JSX (0-2ms) -> Compiler Daemon (10-50ms) -> Node fallback
+- Two-level cache with 73-138x speedup on warm restart
+- Theme-aware production shell with dark/light toggle
+- 13 framework app templates with CSS variable theming
+
+See [@wu-framework/cli](https://github.com/LuisPadre25/wu-cli) for full documentation.
+
+---
+
 ## Contributing
 
 Contributions welcome. Please open an issue first to discuss what you'd like to change.
 
 ## License
 
-[MIT](./LICENSE) — Free for personal and commercial use.
+[MIT](./LICENSE) -- Free for personal and commercial use.
 
 See [LICENSE-COMMERCIAL.md](./LICENSE-COMMERCIAL.md) for optional enterprise support and consulting.
+
+---
+
+*2026 Wu Framework*

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wu-framework",
-  "version": "1.1.18",
-  "description": "Universal Microfrontends Framework - 8 frameworks, zero config, Shadow DOM isolation",
+  "version": "1.2.0",
+  "description": "Universal Microfrontends Framework - 13 frameworks, zero config, Shadow DOM isolation",
   "main": "dist/wu-framework.cjs.js",
   "module": "src/index.js",
   "browser": "dist/wu-framework.umd.js",
@@ -149,18 +149,21 @@
   },
   "peerDependencies": {
     "@angular/core": ">=14.0.0",
+    "@builder.io/qwik": ">=1.0.0",
+    "@hotwired/stimulus": ">=3.0.0",
+    "@stencil/core": ">=4.0.0",
+    "alpinejs": ">=3.0.0",
+    "htmx.org": ">=2.0.0",
     "lit": ">=2.0.0",
     "preact": ">=10.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "solid-js": ">=1.0.0",
     "svelte": ">=3.0.0",
-    "vue": ">=3.0.0",
-    "alpinejs": ">=3.0.0",
-    "@builder.io/qwik": ">=1.0.0",
-    "@stencil/core": ">=4.0.0",
-    "htmx.org": ">=2.0.0",
-    "@hotwired/stimulus": ">=3.0.0"
+    "vue": ">=3.0.0"
+  },
+  "overrides": {
+    "serialize-javascript": "^7.0.3"
   },
   "peerDependenciesMeta": {
     "react": {

package/src/adapters/qwik/index.js

@@ -1,214 +1,108 @@
 /**
  * WU-FRAMEWORK QWIK ADAPTER
  *
- * Integrates Qwik components into Wu Framework's microfrontend
- * orchestration. Qwik's resumability model -- where the framework
- * serializes state into HTML and lazily hydrates on interaction --
- * makes it a natural fit for microfrontend boundaries. The adapter
- * leverages dynamic import of @builder.io/qwik to keep the shell
- * bundle zero-cost until a Qwik island actually mounts.
+ * Integrates Qwik components (component$) into Wu Framework's
+ * microfrontend orchestration via @builder.io/qwik render API.
  *
- * @example
- * import { wuQwik } from 'wu-framework/adapters/qwik';
- * import { App } from './App';
+ * Shadow DOM compatibility:
+ * Qwik uses QRL-based event delegation — the qwikloader script
+ * attaches capture-phase listeners on `document` to intercept events
+ * and resolve QRL attributes (on:click, on:input, etc.) on elements.
  *
- * wuQwik.register('my-qwik-app', App);
+ * Inside Shadow DOM, event.target is retargeted to the shadow host,
+ * so qwikloader can't find QRL attributes on the actual elements.
+ * We fix this by wrapping qwikloader's document listeners with a
+ * Proxy that returns event.composedPath()[0] as the real target.
  *
- * @example
- * // With props and lifecycle hooks
- * wuQwik.register('dashboard', DashboardComponent, {
- *   props: { userId: 42 },
- *   onMount: (container) => console.log('Qwik island mounted'),
- *   onUnmount: (container) => console.log('Qwik island destroyed')
- * });
+ * See: https://github.com/QwikDev/qwik-evolution/issues/283
  */
 
-// Adapter-scoped state
-const adapterState = {
-  apps: new Map()
-};
+let _patched = false;
 
 /**
- * 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 este 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 un componente Qwik como microfrontend
+ * Patches document.addEventListener so capture-phase handlers (used by
+ * qwikloader) receive the real event target from inside Shadow DOM via
+ * composedPath()[0], instead of the retargeted shadow host.
  *
- * @param {string} appName - Nombre unico del microfrontend
- * @param {Function} Component - Componente Qwik (creado con component$)
- * @param {Object} [options] - Opciones adicionales
- * @param {Object} [options.props={}] - Props a pasar al componente
- * @param {Function} [options.onMount] - Callback despues de montar
- * @param {Function} [options.onUnmount] - Callback antes de desmontar
- * @param {boolean} [options.standalone=true] - Permitir ejecucion standalone
- * @param {string} [options.standaloneContainer='#app'] - Selector para modo standalone
- * @returns {Promise<boolean>} true si el registro fue exitoso
+ * Only activates when there's actual Shadow DOM retargeting — events
+ * in the light DOM pass through with zero overhead (no Proxy created).
  */
-async function register(appName, Component, options = {}) {
-  const {
-    props = {},
-    onMount = null,
-    onUnmount = null,
-    standalone = true,
-    standaloneContainer = '#app'
-  } = options;
-
-  if (!Component) {
-    throw new Error(`[WuQwik] Component is required for ${appName}`);
-  }
-
-  // Mount function
-  const mountApp = (container) => {
-    if (!container) {
-      console.error(`[WuQwik] Mount failed for ${appName}: container is null`);
-      return;
-    }
-
-    // Prevent double-mount
-    if (adapterState.apps.has(appName)) {
-      console.warn(`[WuQwik] ${appName} already mounted, unmounting first`);
-      unmountApp();
-    }
-
-    try {
-      container.innerHTML = '';
-
-      // Dynamic import keeps Qwik out of the critical path
-      import('@builder.io/qwik').then(({ render, jsx }) => {
-        render(container, jsx(Component, props));
-
-        adapterState.apps.set(appName, {
-          container,
-          Component,
-          props
-        });
-
-        console.log(`[WuQwik] ${appName} mounted successfully`);
-
-        if (onMount) {
-          onMount(container);
+function patchDocumentListenersForShadowDOM() {
+  if (_patched) return;
+  _patched = true;
+
+  const origAdd = document.addEventListener;
+
+  document.addEventListener = function (type, handler, options) {
+    const isCapture = options === true || (options && options.capture);
+
+    if (isCapture && typeof handler === 'function') {
+      const wrapped = function (event) {
+        const path = event.composedPath();
+        // Only proxy when Shadow DOM retargeting occurred
+        if (path.length && path[0] !== event.target && path[0] instanceof Element) {
+          const realTarget = path[0];
+          const proxy = new Proxy(event, {
+            get(obj, prop) {
+              if (prop === 'target') return realTarget;
+              const val = Reflect.get(obj, prop);
+              return typeof val === 'function' ? val.bind(obj) : val;
+            }
+          });
+          return handler.call(this, proxy);
         }
-      }).catch((err) => {
-        console.error(`[WuQwik] Failed to import @builder.io/qwik for ${appName}:`, err);
-        container.innerHTML = `<div style="color:#721c24;padding:1rem;">Failed to load Qwik runtime</div>`;
-      });
-    } catch (error) {
-      console.error(`[WuQwik] Mount error for ${appName}:`, error);
-      throw error;
+        return handler.call(this, event);
+      };
+      return origAdd.call(this, type, wrapped, options);
     }
+
+    return origAdd.call(this, type, handler, options);
   };
+}
 
-  // Unmount function
-  const unmountApp = (container) => {
-    const appData = adapterState.apps.get(appName);
+export const wuQwik = {
+  async register(appName, Component, options = {}) {
+    const wu = window.wu || window.parent?.wu;
+    if (!wu) return;
 
-    if (appData) {
-      try {
-        if (onUnmount) {
-          onUnmount(appData.container);
-        }
+    const qwik = await import('@builder.io/qwik');
 
-        appData.container.innerHTML = '';
-        adapterState.apps.delete(appName);
+    // Patch document listeners BEFORE injecting qwikloader so its
+    // capture-phase handlers are wrapped with Shadow DOM awareness.
+    // Must stay active permanently — qwikloader registers event types
+    // lazily as new on: attributes appear in the DOM.
+    patchDocumentListenersForShadowDOM();
 
-        console.log(`[WuQwik] ${appName} unmounted successfully`);
-      } catch (error) {
-        console.error(`[WuQwik] Unmount error for ${appName}:`, error);
+    // Inject qwikloader once per document (event delegation for QRLs)
+    if (!document.__wu_qwikloader) {
+      document.__wu_qwikloader = true;
+      try {
+        const { QWIK_LOADER } = await import('@builder.io/qwik/loader');
+        const s = document.createElement('script');
+        s.textContent = QWIK_LOADER;
+        document.head.appendChild(s);
+      } catch (e) {
+        console.warn('[WuQwik] qwikloader not available:', e.message);
       }
     }
 
-    if (container) {
-      container.innerHTML = '';
-    }
-  };
-
-  // Register with Wu Framework or fall back to standalone
-  try {
-    const wu = await waitForWu(3000);
-
     wu.define(appName, {
-      mount: mountApp,
-      unmount: unmountApp
-    });
-
-    console.log(`[WuQwik] ${appName} registered with Wu Framework`);
-    return true;
-
-  } catch (error) {
-    console.warn(`[WuQwik] Wu Framework not available for ${appName}`);
-
-    if (standalone) {
-      const containerElement = document.querySelector(standaloneContainer);
-
-      if (containerElement) {
-        console.log(`[WuQwik] Running ${appName} in standalone mode`);
-        mountApp(containerElement);
-        return true;
+      async mount(container) {
+        container.innerHTML = '';
+        try {
+          const vnode = qwik.jsx(Component, options.props || {});
+          await qwik.render(container, vnode);
+        } catch (e) {
+          console.error('[WuQwik] render error:', e);
+          container.innerHTML = '<pre style="color:#f66;padding:1rem">' + e.message + '</pre>';
+        }
+      },
+      unmount(container) {
+        container.innerHTML = '';
       }
-    }
-
-    return false;
+    });
   }
-}
-
-// Public API
-export const wuQwik = {
-  register,
-  getWuInstance,
-  waitForWu
 };
 
-export { register, getWuInstance, waitForWu };
+export const { register } = wuQwik;
 export default wuQwik;