wu-framework 1.1.16 → 1.1.18

package/src/adapters/htmx/index.js

@@ -0,0 +1,242 @@
+/**
+ * WU-FRAMEWORK HTMX ADAPTER
+ *
+ * Bridges HTMX's hypermedia-driven approach into Wu Framework's
+ * microfrontend graph. HTMX replaces JavaScript-heavy SPAs with
+ * HTML-over-the-wire -- the server returns HTML fragments and HTMX
+ * swaps them into the DOM. This adapter injects an HTML template
+ * containing hx-* attributes, then calls htmx.process() to activate
+ * the HTMX engine on that subtree.
+ *
+ * The inversion is elegant: instead of the client framework owning
+ * the render cycle, the server does. Wu merely provides the container
+ * and lifecycle boundaries.
+ *
+ * @example
+ * import { wuHtmx } from 'wu-framework/adapters/htmx';
+ *
+ * wuHtmx.register('search', {
+ *   template: `
+ *     <div>
+ *       <input type="text" name="q"
+ *              hx-get="/api/search"
+ *              hx-trigger="keyup changed delay:300ms"
+ *              hx-target="#results" />
+ *       <div id="results"></div>
+ *     </div>
+ *   `
+ * });
+ *
+ * @example
+ * // With base URL configuration for HTMX endpoints
+ * wuHtmx.register('feed', {
+ *   template: '<div hx-get="/api/feed" hx-trigger="load"></div>',
+ *   baseUrl: 'https://api.example.com'
+ * }, {
+ *   onMount: (container) => console.log('HTMX fragment active')
+ * });
+ */
+
+// 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 una app HTMX como microfrontend
+ *
+ * @param {string} appName - Nombre unico del microfrontend
+ * @param {Object} config - Configuracion de la app HTMX
+ * @param {string} config.template - HTML string con atributos hx-*
+ * @param {string} [config.baseUrl] - URL base para endpoints HTMX (se inyecta como hx-base)
+ * @param {Object} [options] - Opciones adicionales
+ * @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
+ */
+async function register(appName, config, options = {}) {
+  const { template, baseUrl = null } = config;
+
+  const {
+    onMount = null,
+    onUnmount = null,
+    standalone = true,
+    standaloneContainer = '#app'
+  } = options;
+
+  if (!template || typeof template !== 'string') {
+    throw new Error(`[WuHtmx] template (HTML string with hx-* attributes) is required for ${appName}`);
+  }
+
+  // Mount function
+  const mountApp = (container) => {
+    if (!container) {
+      console.error(`[WuHtmx] Mount failed for ${appName}: container is null`);
+      return;
+    }
+
+    // Prevent double-mount
+    if (adapterState.apps.has(appName)) {
+      console.warn(`[WuHtmx] ${appName} already mounted, unmounting first`);
+      unmountApp();
+    }
+
+    try {
+      container.innerHTML = '';
+
+      // Inject template
+      container.innerHTML = template;
+
+      // If baseUrl is provided, rewrite relative hx-get/hx-post/etc. paths
+      if (baseUrl) {
+        const hxAttributes = ['hx-get', 'hx-post', 'hx-put', 'hx-patch', 'hx-delete'];
+        hxAttributes.forEach((attr) => {
+          container.querySelectorAll(`[${attr}]`).forEach((el) => {
+            const val = el.getAttribute(attr);
+            if (val && val.startsWith('/')) {
+              el.setAttribute(attr, baseUrl + val);
+            }
+          });
+        });
+      }
+
+      // Activate HTMX on this subtree
+      if (window.htmx) {
+        window.htmx.process(container);
+      } else {
+        console.warn(`[WuHtmx] window.htmx not found - template inserted but hx-* attributes will not function`);
+      }
+
+      adapterState.apps.set(appName, { container, config });
+
+      console.log(`[WuHtmx] ${appName} mounted successfully`);
+
+      if (onMount) {
+        onMount(container);
+      }
+    } catch (error) {
+      console.error(`[WuHtmx] Mount error for ${appName}:`, error);
+      throw error;
+    }
+  };
+
+  // Unmount function
+  const unmountApp = (container) => {
+    const appData = adapterState.apps.get(appName);
+
+    if (appData) {
+      try {
+        if (onUnmount) {
+          onUnmount(appData.container);
+        }
+
+        // Clear all HTMX-managed event listeners by wiping the subtree
+        appData.container.innerHTML = '';
+        adapterState.apps.delete(appName);
+
+        console.log(`[WuHtmx] ${appName} unmounted successfully`);
+      } catch (error) {
+        console.error(`[WuHtmx] Unmount error for ${appName}:`, error);
+      }
+    }
+
+    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(`[WuHtmx] ${appName} registered with Wu Framework`);
+    return true;
+
+  } catch (error) {
+    console.warn(`[WuHtmx] Wu Framework not available for ${appName}`);
+
+    if (standalone) {
+      const containerElement = document.querySelector(standaloneContainer);
+
+      if (containerElement) {
+        console.log(`[WuHtmx] Running ${appName} in standalone mode`);
+        mountApp(containerElement);
+        return true;
+      }
+    }
+
+    return false;
+  }
+}
+
+// Public API
+export const wuHtmx = {
+  register,
+  getWuInstance,
+  waitForWu
+};
+
+export { register, getWuInstance, waitForWu };
+export default wuHtmx;

package/src/adapters/htmx.d.ts

@@ -0,0 +1,3 @@
+// Re-export from folder structure — backward compatibility
+export * from './htmx/index';
+export { default } from './htmx/index';

package/src/adapters/htmx.js

@@ -0,0 +1,3 @@
+// Re-export from folder structure — backward compatibility
+export * from './htmx/index.js';
+export { default } from './htmx/index.js';

package/src/adapters/index.js

@@ -2,7 +2,8 @@
  * 🚀 WU-FRAMEWORK ADAPTERS
  *
  * Adapters oficiales para integrar Wu Framework con frameworks populares.
- * Soporta: React, Vue, Angular, Svelte, Preact, Solid.js, Lit, Vanilla JS
+ * Soporta: React, Vue, Angular, Svelte, Preact, Solid.js, Lit, Vanilla JS,
+ *          Alpine.js, Qwik, Stencil, HTMX, Stimulus
  *
  * Cada adapter incluye integración AI (Paradigma C: IA como Director de Orquesta).
  *
@@ -16,12 +17,18 @@
  * import { wuSolid } from 'wu-framework/adapters/solid';
  * import { wuLit } from 'wu-framework/adapters/lit';
  * import { wuVanilla } from 'wu-framework/adapters/vanilla';
+ * import { wuAlpine } from 'wu-framework/adapters/alpine';
+ * import { wuQwik } from 'wu-framework/adapters/qwik';
+ * import { wuStencil } from 'wu-framework/adapters/stencil';
+ * import { wuHtmx } from 'wu-framework/adapters/htmx';
+ * import { wuStimulus } from 'wu-framework/adapters/stimulus';
  *
  * @example
  * // Importar todo
  * import {
  *   wuReact, wuVue, wuAngular, wuSvelte,
- *   wuPreact, wuSolid, wuLit, wuVanilla
+ *   wuPreact, wuSolid, wuLit, wuVanilla,
+ *   wuAlpine, wuQwik, wuStencil, wuHtmx, wuStimulus
  * } from 'wu-framework/adapters';
  */
 
@@ -134,6 +141,46 @@ export {
   useWuAI as useVanillaWuAI
 } from './vanilla/index.js';
 
+// ============================================
+// ALPINE.JS ADAPTER
+// ============================================
+export {
+  wuAlpine,
+  register as registerAlpine
+} from './alpine/index.js';
+
+// ============================================
+// QWIK ADAPTER
+// ============================================
+export {
+  wuQwik,
+  register as registerQwik
+} from './qwik/index.js';
+
+// ============================================
+// STENCIL ADAPTER
+// ============================================
+export {
+  wuStencil,
+  register as registerStencil
+} from './stencil/index.js';
+
+// ============================================
+// HTMX ADAPTER
+// ============================================
+export {
+  wuHtmx,
+  register as registerHtmx
+} from './htmx/index.js';
+
+// ============================================
+// STIMULUS ADAPTER
+// ============================================
+export {
+  wuStimulus,
+  register as registerStimulus
+} from './stimulus/index.js';
+
 // ============================================
 // SHARED UTILITIES
 // ============================================
@@ -150,6 +197,11 @@ import { wuPreact } from './preact/index.js';
 import { wuSolid } from './solid/index.js';
 import { wuLit } from './lit/index.js';
 import { wuVanilla } from './vanilla/index.js';
+import { wuAlpine } from './alpine/index.js';
+import { wuQwik } from './qwik/index.js';
+import { wuStencil } from './stencil/index.js';
+import { wuHtmx } from './htmx/index.js';
+import { wuStimulus } from './stimulus/index.js';
 
 /**
  * Objeto con todos los adapters disponibles
@@ -162,7 +214,12 @@ export const adapters = {
   preact: wuPreact,
   solid: wuSolid,
   lit: wuLit,
-  vanilla: wuVanilla
+  vanilla: wuVanilla,
+  alpine: wuAlpine,
+  qwik: wuQwik,
+  stencil: wuStencil,
+  htmx: wuHtmx,
+  stimulus: wuStimulus
 };
 
 export default adapters;

package/src/adapters/qwik/index.d.ts

@@ -0,0 +1,52 @@
+/**
+ * WU-FRAMEWORK QWIK ADAPTER - TypeScript Declarations
+ */
+
+import type { WuCore } from '../../core/wu-core';
+
+/**
+ * Qwik adapter registration options
+ */
+export interface QwikRegisterOptions {
+  /** Props to pass to the Qwik component */
+  props?: Record<string, any>;
+  /** Callback after mounting */
+  onMount?: (container: HTMLElement) => void;
+  /** Callback before unmounting */
+  onUnmount?: (container: HTMLElement) => void;
+  /** Allow standalone execution when Wu Framework is not available */
+  standalone?: boolean;
+  /** CSS selector for standalone mode container */
+  standaloneContainer?: string;
+}
+
+/**
+ * Register a Qwik component as a Wu microfrontend
+ */
+export function register(
+  appName: string,
+  Component: any,
+  options?: QwikRegisterOptions
+): Promise<boolean>;
+
+/**
+ * Get the current Wu Framework instance
+ */
+export function getWuInstance(): WuCore | null;
+
+/**
+ * Wait for Wu Framework to become available
+ */
+export function waitForWu(timeout?: number): Promise<WuCore>;
+
+/**
+ * Qwik adapter interface
+ */
+export interface WuQwikAdapter {
+  register: typeof register;
+  getWuInstance: typeof getWuInstance;
+  waitForWu: typeof waitForWu;
+}
+
+export const wuQwik: WuQwikAdapter;
+export default wuQwik;

package/src/adapters/qwik/index.js

@@ -0,0 +1,214 @@
+/**
+ * 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.
+ *
+ * @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
+ */
+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;
+    }
+  };
+
+  // Unmount function
+  const unmountApp = (container) => {
+    const appData = adapterState.apps.get(appName);
+
+    if (appData) {
+      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);
+      }
+    }
+
+    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;
+      }
+    }
+
+    return false;
+  }
+}
+
+// Public API
+export const wuQwik = {
+  register,
+  getWuInstance,
+  waitForWu
+};
+
+export { register, getWuInstance, waitForWu };
+export default wuQwik;

package/src/adapters/qwik.d.ts

@@ -0,0 +1,3 @@
+// Re-export from folder structure — backward compatibility
+export * from './qwik/index';
+export { default } from './qwik/index';

package/src/adapters/qwik.js

@@ -0,0 +1,3 @@
+// Re-export from folder structure — backward compatibility
+export * from './qwik/index.js';
+export { default } from './qwik/index.js';