wu-framework 1.1.17 → 1.1.19

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

@@ -0,0 +1,54 @@
+/**
+ * WU-FRAMEWORK STENCIL ADAPTER - TypeScript Declarations
+ */
+
+import type { WuCore } from '../../core/wu-core';
+
+/**
+ * Stencil adapter registration options
+ */
+export interface StencilRegisterOptions {
+  /** Properties to set on the custom element (rich data: objects, arrays, functions) */
+  props?: Record<string, any>;
+  /** HTML attributes to set on the custom element (string values) */
+  attributes?: Record<string, string>;
+  /** 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 Stencil-compiled Web Component as a Wu microfrontend
+ */
+export function register(
+  appName: string,
+  tagName: string,
+  options?: StencilRegisterOptions
+): 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>;
+
+/**
+ * Stencil adapter interface
+ */
+export interface WuStencilAdapter {
+  register: typeof register;
+  getWuInstance: typeof getWuInstance;
+  waitForWu: typeof waitForWu;
+}
+
+export const wuStencil: WuStencilAdapter;
+export default wuStencil;

package/src/adapters/stencil/index.js

@@ -0,0 +1,228 @@
+/**
+ * WU-FRAMEWORK STENCIL ADAPTER
+ *
+ * Integrates Stencil-compiled Web Components into Wu Framework.
+ * Stencil outputs standards-compliant Custom Elements, so this
+ * adapter's job is thin by design: create the element, append it,
+ * and let the browser's native lifecycle (connectedCallback /
+ * disconnectedCallback) do the heavy lifting. The adapter adds
+ * Wu's orchestration layer on top -- coordinated mount/unmount
+ * across the microfrontend graph, standalone fallback, and
+ * property forwarding.
+ *
+ * @example
+ * import { wuStencil } from 'wu-framework/adapters/stencil';
+ *
+ * wuStencil.register('my-component', 'my-stencil-component');
+ *
+ * @example
+ * // With properties
+ * wuStencil.register('user-profile', 'user-profile-card', {
+ *   props: { userId: 42, theme: 'dark' },
+ *   onMount: (container) => console.log('Stencil component connected')
+ * });
+ */
+
+// 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 Web Component compilado con Stencil como microfrontend
+ *
+ * @param {string} appName - Nombre unico del microfrontend
+ * @param {string} tagName - Tag del Custom Element generado por Stencil
+ * @param {Object} [options] - Opciones adicionales
+ * @param {Object} [options.props={}] - Propiedades a setear en el elemento
+ * @param {Object} [options.attributes={}] - Atributos HTML a setear en el elemento
+ * @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, tagName, options = {}) {
+  const {
+    props = {},
+    attributes = {},
+    onMount = null,
+    onUnmount = null,
+    standalone = true,
+    standaloneContainer = '#app'
+  } = options;
+
+  if (!tagName || typeof tagName !== 'string') {
+    throw new Error(`[WuStencil] tagName (custom element tag) is required for ${appName}`);
+  }
+
+  // Mount function
+  const mountApp = (container) => {
+    if (!container) {
+      console.error(`[WuStencil] Mount failed for ${appName}: container is null`);
+      return;
+    }
+
+    // Prevent double-mount
+    if (adapterState.apps.has(appName)) {
+      console.warn(`[WuStencil] ${appName} already mounted, unmounting first`);
+      unmountApp();
+    }
+
+    try {
+      container.innerHTML = '';
+
+      // Create the Stencil web component element
+      const element = document.createElement(tagName);
+
+      // Forward properties (rich data: objects, arrays, functions)
+      for (const [key, value] of Object.entries(props)) {
+        element[key] = value;
+      }
+
+      // Set HTML attributes (strings only)
+      for (const [key, value] of Object.entries(attributes)) {
+        element.setAttribute(key, String(value));
+      }
+
+      container.appendChild(element);
+
+      adapterState.apps.set(appName, {
+        container,
+        element,
+        tagName
+      });
+
+      console.log(`[WuStencil] ${appName} (<${tagName}>) mounted successfully`);
+
+      if (onMount) {
+        onMount(container);
+      }
+    } catch (error) {
+      console.error(`[WuStencil] Mount error for ${appName}:`, error);
+      throw error;
+    }
+  };
+
+  // Unmount function -- Stencil components clean up via disconnectedCallback
+  const unmountApp = (container) => {
+    const appData = adapterState.apps.get(appName);
+
+    if (appData) {
+      try {
+        if (onUnmount) {
+          onUnmount(appData.container);
+        }
+
+        // Removing the element triggers Stencil's disconnectedCallback
+        if (appData.element && appData.element.parentNode) {
+          appData.element.remove();
+        }
+
+        appData.container.innerHTML = '';
+        adapterState.apps.delete(appName);
+
+        console.log(`[WuStencil] ${appName} (<${tagName}>) unmounted successfully`);
+      } catch (error) {
+        console.error(`[WuStencil] 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(`[WuStencil] ${appName} registered with Wu Framework`);
+    return true;
+
+  } catch (error) {
+    console.warn(`[WuStencil] Wu Framework not available for ${appName}`);
+
+    if (standalone) {
+      const containerElement = document.querySelector(standaloneContainer);
+
+      if (containerElement) {
+        console.log(`[WuStencil] Running ${appName} in standalone mode`);
+        mountApp(containerElement);
+        return true;
+      }
+    }
+
+    return false;
+  }
+}
+
+// Public API
+export const wuStencil = {
+  register,
+  getWuInstance,
+  waitForWu
+};
+
+export { register, getWuInstance, waitForWu };
+export default wuStencil;

package/src/adapters/stencil.d.ts

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

package/src/adapters/stencil.js

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

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

@@ -0,0 +1,60 @@
+/**
+ * WU-FRAMEWORK STIMULUS ADAPTER - TypeScript Declarations
+ */
+
+import type { WuCore } from '../../core/wu-core';
+
+/**
+ * Stimulus app configuration
+ */
+export interface StimulusAppConfig {
+  /** Map of controller name to Controller class */
+  controllers: Record<string, any>;
+  /** HTML template string containing data-controller and data-action attributes */
+  template: string;
+}
+
+/**
+ * Stimulus adapter registration options
+ */
+export interface StimulusRegisterOptions {
+  /** 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 Stimulus app as a Wu microfrontend
+ */
+export function register(
+  appName: string,
+  config: StimulusAppConfig,
+  options?: StimulusRegisterOptions
+): 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>;
+
+/**
+ * Stimulus adapter interface
+ */
+export interface WuStimulusAdapter {
+  register: typeof register;
+  getWuInstance: typeof getWuInstance;
+  waitForWu: typeof waitForWu;
+}
+
+export const wuStimulus: WuStimulusAdapter;
+export default wuStimulus;

package/src/adapters/stimulus/index.js

@@ -0,0 +1,255 @@
+/**
+ * WU-FRAMEWORK STIMULUS ADAPTER
+ *
+ * Integrates Hotwire Stimulus controllers into Wu Framework's
+ * microfrontend orchestration. Stimulus is the "modest JavaScript
+ * framework" -- it enhances server-rendered HTML with controllers
+ * that respond to DOM mutations via data-controller attributes.
+ *
+ * This adapter creates a scoped Stimulus Application instance per
+ * microfrontend, registers the provided controllers, injects the
+ * HTML template, and tears everything down cleanly on unmount.
+ *
+ * @example
+ * import { wuStimulus } from 'wu-framework/adapters/stimulus';
+ * import { Controller } from '@hotwired/stimulus';
+ *
+ * class GreetingController extends Controller {
+ *   static targets = ['output'];
+ *   greet() { this.outputTarget.textContent = 'Hello!'; }
+ * }
+ *
+ * wuStimulus.register('greeting-app', {
+ *   controllers: { greeting: GreetingController },
+ *   template: `
+ *     <div data-controller="greeting">
+ *       <button data-action="click->greeting#greet">Greet</button>
+ *       <span data-greeting-target="output"></span>
+ *     </div>
+ *   `
+ * });
+ *
+ * @example
+ * // Multiple controllers
+ * wuStimulus.register('dashboard', {
+ *   controllers: {
+ *     tabs: TabsController,
+ *     chart: ChartController,
+ *     filter: FilterController
+ *   },
+ *   template: dashboardHTML
+ * }, {
+ *   onMount: (container) => console.log('Stimulus controllers 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 Stimulus como microfrontend
+ *
+ * @param {string} appName - Nombre unico del microfrontend
+ * @param {Object} config - Configuracion de la app Stimulus
+ * @param {Object} config.controllers - Map de nombre -> Controller class
+ * @param {string} config.template - HTML string con data-controller / data-action attributes
+ * @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 { controllers = {}, template } = config;
+
+  const {
+    onMount = null,
+    onUnmount = null,
+    standalone = true,
+    standaloneContainer = '#app'
+  } = options;
+
+  if (!template || typeof template !== 'string') {
+    throw new Error(`[WuStimulus] template (HTML string) is required for ${appName}`);
+  }
+
+  if (!controllers || typeof controllers !== 'object' || Object.keys(controllers).length === 0) {
+    throw new Error(`[WuStimulus] controllers (object of name -> Controller class) is required for ${appName}`);
+  }
+
+  // Mount function
+  const mountApp = (container) => {
+    if (!container) {
+      console.error(`[WuStimulus] Mount failed for ${appName}: container is null`);
+      return;
+    }
+
+    // Prevent double-mount
+    if (adapterState.apps.has(appName)) {
+      console.warn(`[WuStimulus] ${appName} already mounted, unmounting first`);
+      unmountApp();
+    }
+
+    try {
+      container.innerHTML = '';
+
+      // Dynamic import keeps Stimulus out of the critical path
+      import('@hotwired/stimulus').then(({ Application }) => {
+        // Create a scoped Stimulus Application for this microfrontend
+        const application = Application.start(container);
+
+        // Register all controllers
+        for (const [name, ControllerClass] of Object.entries(controllers)) {
+          application.register(name, ControllerClass);
+        }
+
+        // Inject template -- Stimulus will auto-connect controllers
+        // via MutationObserver watching data-controller attributes
+        container.innerHTML = template;
+
+        adapterState.apps.set(appName, {
+          container,
+          config,
+          application
+        });
+
+        console.log(`[WuStimulus] ${appName} mounted successfully (${Object.keys(controllers).length} controllers)`);
+
+        if (onMount) {
+          onMount(container);
+        }
+      }).catch((err) => {
+        console.error(`[WuStimulus] Failed to import @hotwired/stimulus for ${appName}:`, err);
+        container.innerHTML = `<div style="color:#721c24;padding:1rem;">Failed to load Stimulus runtime</div>`;
+      });
+    } catch (error) {
+      console.error(`[WuStimulus] 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);
+        }
+
+        // Stop the scoped Stimulus Application
+        if (appData.application && typeof appData.application.stop === 'function') {
+          appData.application.stop();
+        }
+
+        appData.container.innerHTML = '';
+        adapterState.apps.delete(appName);
+
+        console.log(`[WuStimulus] ${appName} unmounted successfully`);
+      } catch (error) {
+        console.error(`[WuStimulus] 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(`[WuStimulus] ${appName} registered with Wu Framework`);
+    return true;
+
+  } catch (error) {
+    console.warn(`[WuStimulus] Wu Framework not available for ${appName}`);
+
+    if (standalone) {
+      const containerElement = document.querySelector(standaloneContainer);
+
+      if (containerElement) {
+        console.log(`[WuStimulus] Running ${appName} in standalone mode`);
+        mountApp(containerElement);
+        return true;
+      }
+    }
+
+    return false;
+  }
+}
+
+// Public API
+export const wuStimulus = {
+  register,
+  getWuInstance,
+  waitForWu
+};
+
+export { register, getWuInstance, waitForWu };
+export default wuStimulus;

package/src/adapters/stimulus.d.ts

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

package/src/adapters/stimulus.js

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

package/src/adapters/vue/index.js

@@ -190,6 +190,14 @@ async function register(appName, RootComponent, options = {}) {
         setup(app);
       }
 
+      // Error handlers for debugging
+      app.config.errorHandler = (err, instance, info) => {
+        console.error(`[WuVue] ${appName} error in ${info}:`, err);
+      };
+      app.config.warnHandler = (msg, instance, trace) => {
+        console.warn(`[WuVue] ${appName} warn:`, msg);
+      };
+
       // Proveer información del contexto Wu
       app.provide('wuAppName', appName);
       app.provide('wuInstance', getWuInstance());