wu-framework 1.1.18 → 1.1.19

package/README.md

@@ -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** |

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.1.19",
+  "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,50 @@
 /**
  * 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';
- *
- * wuQwik.register('my-qwik-app', App);
- *
- * @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')
- * });
- */
-
-// Adapter-scoped state
-const adapterState = {
-  apps: 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 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
- *
- * @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
+ * Qwik uses QRL-based event delegation — onClick$, onInput$, etc.
+ * are NOT regular DOM listeners. The qwikloader script must be
+ * active in the document to intercept events and dispatch QRLs.
  */
-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);
-        }
-      }).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;
-    }
-  };
+export const wuQwik = {
+  async register(appName, Component, options = {}) {
+    const wu = window.wu || window.parent?.wu;
+    if (!wu) return;
 
-  // Unmount function
-  const unmountApp = (container) => {
-    const appData = adapterState.apps.get(appName);
+    const qwik = await import('@builder.io/qwik');
 
-    if (appData) {
+    // Inject qwikloader once per document (event delegation for QRLs)
+    if (!('__q_context__' in document)) {
       try {
-        if (onUnmount) {
-          onUnmount(appData.container);
-        }
-
-        appData.container.innerHTML = '';
-        adapterState.apps.delete(appName);
-
-        console.log(`[WuQwik] ${appName} unmounted successfully`);
-      } catch (error) {
-        console.error(`[WuQwik] Unmount error for ${appName}:`, error);
+        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;