wu-framework 1.1.17 → 1.1.19

package/integrations/astro/types.d.ts

@@ -1,53 +1,53 @@
-import type { AstroIntegration } from 'astro';
-
-/** Configuration for a single wu micro-app. */
-export interface WuAppConfig {
-  /** Unique name used to reference this micro-app. */
-  name: string;
-  /** URL or path from which the micro-app is loaded. */
-  url: string;
-  /** Loading strategy. Defaults to the framework default. */
-  strategy?: 'eager' | 'lazy' | 'manual';
-}
-
-/** Options accepted by the wu Astro integration. */
-export interface WuIntegrationOptions {
-  /** Micro-apps to auto-register via wu.init(). */
-  apps?: WuAppConfig[];
-  /** Global sandbox isolation mode. */
-  sandbox?: 'module' | 'strict' | 'eval';
-  /** CDN URL for the wu-framework UMD bundle. When omitted the local package is used. */
-  cdn?: string;
-  /** Enable debug logging. */
-  debug?: boolean;
-}
-
-/**
- * Astro integration factory for wu-framework.
- *
- * @example
- * import wu from '@wu-framework/astro';
- * export default defineConfig({ integrations: [wu({ apps: [...] })] });
- */
-export default function wuIntegration(
-  options?: WuIntegrationOptions
-): AstroIntegration;
-
-/** Props for the WuShell.astro layout component. */
-export interface WuShellProps {
-  apps: WuAppConfig[];
-  sandbox?: 'module' | 'strict' | 'eval';
-  debug?: boolean;
-}
-
-/** Props for the WuApp.astro mount component. */
-export interface WuAppProps {
-  /** Name of the registered wu micro-app. */
-  name: string;
-  /** Defer mounting until the element is visible (IntersectionObserver). */
-  lazy?: boolean;
-  /** CSS class(es) for the container div. */
-  class?: string;
-  /** Inline styles for the container div. */
-  style?: string;
-}
+import type { AstroIntegration } from 'astro';
+
+/** Configuration for a single wu micro-app. */
+export interface WuAppConfig {
+  /** Unique name used to reference this micro-app. */
+  name: string;
+  /** URL or path from which the micro-app is loaded. */
+  url: string;
+  /** Loading strategy. Defaults to the framework default. */
+  strategy?: 'eager' | 'lazy' | 'manual';
+}
+
+/** Options accepted by the wu Astro integration. */
+export interface WuIntegrationOptions {
+  /** Micro-apps to auto-register via wu.init(). */
+  apps?: WuAppConfig[];
+  /** Global sandbox isolation mode. */
+  sandbox?: 'module' | 'strict' | 'eval';
+  /** CDN URL for the wu-framework UMD bundle. When omitted the local package is used. */
+  cdn?: string;
+  /** Enable debug logging. */
+  debug?: boolean;
+}
+
+/**
+ * Astro integration factory for wu-framework.
+ *
+ * @example
+ * import wu from '@wu-framework/astro';
+ * export default defineConfig({ integrations: [wu({ apps: [...] })] });
+ */
+export default function wuIntegration(
+  options?: WuIntegrationOptions
+): AstroIntegration;
+
+/** Props for the WuShell.astro layout component. */
+export interface WuShellProps {
+  apps: WuAppConfig[];
+  sandbox?: 'module' | 'strict' | 'eval';
+  debug?: boolean;
+}
+
+/** Props for the WuApp.astro mount component. */
+export interface WuAppProps {
+  /** Name of the registered wu micro-app. */
+  name: string;
+  /** Defer mounting until the element is visible (IntersectionObserver). */
+  lazy?: boolean;
+  /** CSS class(es) for the container div. */
+  class?: string;
+  /** Inline styles for the container div. */
+  style?: string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wu-framework",
-  "version": "1.1.17",
-  "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",
@@ -22,6 +22,11 @@
     "./adapters/solid": "./src/adapters/solid/index.js",
     "./adapters/lit": "./src/adapters/lit/index.js",
     "./adapters/vanilla": "./src/adapters/vanilla/index.js",
+    "./adapters/alpine": "./src/adapters/alpine/index.js",
+    "./adapters/qwik": "./src/adapters/qwik/index.js",
+    "./adapters/stencil": "./src/adapters/stencil/index.js",
+    "./adapters/htmx": "./src/adapters/htmx/index.js",
+    "./adapters/stimulus": "./src/adapters/stimulus/index.js",
     "./integrations/astro": "./integrations/astro/index.js",
     "./integrations/astro/WuApp.astro": "./integrations/astro/WuApp.astro",
     "./integrations/astro/WuShell.astro": "./integrations/astro/WuShell.astro"
@@ -112,6 +117,21 @@
       ],
       "adapters/vanilla": [
         "src/adapters/vanilla/index.d.ts"
+      ],
+      "adapters/alpine": [
+        "src/adapters/alpine/index.d.ts"
+      ],
+      "adapters/qwik": [
+        "src/adapters/qwik/index.d.ts"
+      ],
+      "adapters/stencil": [
+        "src/adapters/stencil/index.d.ts"
+      ],
+      "adapters/htmx": [
+        "src/adapters/htmx/index.d.ts"
+      ],
+      "adapters/stimulus": [
+        "src/adapters/stimulus/index.d.ts"
       ]
     }
   },
@@ -129,6 +149,11 @@
   },
   "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",
@@ -137,6 +162,9 @@
     "svelte": ">=3.0.0",
     "vue": ">=3.0.0"
   },
+  "overrides": {
+    "serialize-javascript": "^7.0.3"
+  },
   "peerDependenciesMeta": {
     "react": {
       "optional": true
@@ -161,6 +189,21 @@
     },
     "lit": {
       "optional": true
+    },
+    "alpinejs": {
+      "optional": true
+    },
+    "@builder.io/qwik": {
+      "optional": true
+    },
+    "@stencil/core": {
+      "optional": true
+    },
+    "htmx.org": {
+      "optional": true
+    },
+    "@hotwired/stimulus": {
+      "optional": true
     }
   }
 }

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

@@ -0,0 +1,60 @@
+/**
+ * WU-FRAMEWORK ALPINE.JS ADAPTER - TypeScript Declarations
+ */
+
+import type { WuCore } from '../../core/wu-core';
+
+/**
+ * Alpine.js app configuration
+ */
+export interface AlpineAppConfig {
+  /** HTML template string containing Alpine directives (x-data, x-bind, etc.) */
+  template: string;
+  /** Function that returns the Alpine data object */
+  data?: () => Record<string, any>;
+}
+
+/**
+ * Alpine.js adapter registration options
+ */
+export interface AlpineRegisterOptions {
+  /** 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 an Alpine.js app as a Wu microfrontend
+ */
+export function register(
+  appName: string,
+  appConfig: AlpineAppConfig,
+  options?: AlpineRegisterOptions
+): 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>;
+
+/**
+ * Alpine.js adapter interface
+ */
+export interface WuAlpineAdapter {
+  register: typeof register;
+  getWuInstance: typeof getWuInstance;
+  waitForWu: typeof waitForWu;
+}
+
+export const wuAlpine: WuAlpineAdapter;
+export default wuAlpine;

package/src/adapters/alpine/index.js

@@ -0,0 +1,231 @@
+/**
+ * WU-FRAMEWORK ALPINE.JS ADAPTER
+ *
+ * Bridges Alpine.js reactive components into Wu Framework's
+ * microfrontend orchestration layer. Alpine's declarative
+ * x-data / x-bind paradigm maps naturally to a template + data
+ * registration model.
+ *
+ * @example
+ * import { wuAlpine } from 'wu-framework/adapters/alpine';
+ *
+ * wuAlpine.register('my-app', {
+ *   template: '<div x-data="app"><span x-text="message"></span></div>',
+ *   data: () => ({ message: 'Hello from Alpine' })
+ * });
+ *
+ * @example
+ * // With lifecycle hooks
+ * wuAlpine.register('counter', {
+ *   template: `
+ *     <div x-data="app">
+ *       <span x-text="count"></span>
+ *       <button @click="count++">+</button>
+ *     </div>
+ *   `,
+ *   data: () => ({ count: 0 })
+ * }, {
+ *   onMount: (container) => console.log('Mounted'),
+ *   onUnmount: (container) => console.log('Unmounted')
+ * });
+ */
+
+// 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 Alpine.js como microfrontend
+ *
+ * @param {string} appName - Nombre unico del microfrontend
+ * @param {Object} appConfig - Configuracion de la app Alpine
+ * @param {string} appConfig.template - HTML string con directivas Alpine (x-data, x-bind, etc.)
+ * @param {Function} appConfig.data - Funcion que retorna el objeto de datos Alpine
+ * @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, appConfig, options = {}) {
+  const { template, data } = appConfig;
+
+  const {
+    onMount = null,
+    onUnmount = null,
+    standalone = true,
+    standaloneContainer = '#app'
+  } = options;
+
+  if (!template || typeof template !== 'string') {
+    throw new Error(`[WuAlpine] template (HTML string) is required for ${appName}`);
+  }
+
+  // Mount function
+  const mountApp = (container) => {
+    if (!container) {
+      console.error(`[WuAlpine] Mount failed for ${appName}: container is null`);
+      return;
+    }
+
+    // Prevent double-mount
+    if (adapterState.apps.has(appName)) {
+      console.warn(`[WuAlpine] ${appName} already mounted, unmounting first`);
+      unmountApp();
+    }
+
+    try {
+      container.innerHTML = '';
+
+      // Inject template HTML
+      container.innerHTML = template;
+
+      // Initialize Alpine on this subtree
+      const Alpine = window.Alpine;
+      if (Alpine) {
+        if (data && typeof data === 'function') {
+          Alpine.data('app', data);
+        }
+        Alpine.initTree(container);
+      } else {
+        console.warn(`[WuAlpine] window.Alpine not found - template inserted but not initialized`);
+      }
+
+      adapterState.apps.set(appName, { container, config: appConfig });
+
+      console.log(`[WuAlpine] ${appName} mounted successfully`);
+
+      if (onMount) {
+        onMount(container);
+      }
+    } catch (error) {
+      console.error(`[WuAlpine] 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);
+        }
+
+        // Tear down Alpine reactivity on this subtree
+        const Alpine = window.Alpine;
+        if (Alpine && typeof Alpine.destroyTree === 'function') {
+          Alpine.destroyTree(appData.container);
+        }
+
+        appData.container.innerHTML = '';
+        adapterState.apps.delete(appName);
+
+        console.log(`[WuAlpine] ${appName} unmounted successfully`);
+      } catch (error) {
+        console.error(`[WuAlpine] 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(`[WuAlpine] ${appName} registered with Wu Framework`);
+    return true;
+
+  } catch (error) {
+    console.warn(`[WuAlpine] Wu Framework not available for ${appName}`);
+
+    if (standalone) {
+      const containerElement = document.querySelector(standaloneContainer);
+
+      if (containerElement) {
+        console.log(`[WuAlpine] Running ${appName} in standalone mode`);
+        mountApp(containerElement);
+        return true;
+      }
+    }
+
+    return false;
+  }
+}
+
+// Public API
+export const wuAlpine = {
+  register,
+  getWuInstance,
+  waitForWu
+};
+
+export { register, getWuInstance, waitForWu };
+export default wuAlpine;

package/src/adapters/alpine.d.ts

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

package/src/adapters/alpine.js

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

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

@@ -0,0 +1,60 @@
+/**
+ * WU-FRAMEWORK HTMX ADAPTER - TypeScript Declarations
+ */
+
+import type { WuCore } from '../../core/wu-core';
+
+/**
+ * HTMX app configuration
+ */
+export interface HtmxAppConfig {
+  /** HTML template string containing hx-* attributes */
+  template: string;
+  /** Base URL for HTMX endpoints (rewrites relative paths in hx-get, hx-post, etc.) */
+  baseUrl?: string;
+}
+
+/**
+ * HTMX adapter registration options
+ */
+export interface HtmxRegisterOptions {
+  /** 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 an HTMX app as a Wu microfrontend
+ */
+export function register(
+  appName: string,
+  config: HtmxAppConfig,
+  options?: HtmxRegisterOptions
+): 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>;
+
+/**
+ * HTMX adapter interface
+ */
+export interface WuHtmxAdapter {
+  register: typeof register;
+  getWuInstance: typeof getWuInstance;
+  waitForWu: typeof waitForWu;
+}
+
+export const wuHtmx: WuHtmxAdapter;
+export default wuHtmx;