wu-framework 1.1.6 → 1.1.8

package/src/adapters/preact.js

@@ -1,665 +1,3 @@
-/**
- * 🚀 WU-FRAMEWORK PREACT ADAPTER
- *
- * Simplifica la integración de Preact con Wu Framework.
- * Compatible con Preact 10+ y preact/compat para proyectos React migrados.
- *
- * @example
- * // Microfrontend (main.jsx)
- * import { wuPreact } from 'wu-framework/adapters/preact';
- * import App from './App';
- *
- * wuPreact.register('my-app', App);
- *
- * @example
- * // Shell (cargar microfrontend)
- * import { createWuSlot } from 'wu-framework/adapters/preact';
- * import { h } from 'preact';
- *
- * const WuSlot = createWuSlot(h);
- * <WuSlot name="my-app" url="http://localhost:3001" />
- */
-
-// Estado global del adapter
-const adapterState = {
-  apps: new Map(),
-  preact: null,
-  render: null,
-  h: null,
-  initialized: false
-};
-
-/**
- * Detecta y obtiene Preact del contexto global o lo importa
- */
-async function ensurePreact() {
-  if (adapterState.initialized) return true;
-
-  try {
-    // Intentar obtener de window
-    if (typeof window !== 'undefined' && window.preact) {
-      adapterState.preact = window.preact;
-      adapterState.render = window.preact.render;
-      adapterState.h = window.preact.h;
-      adapterState.initialized = true;
-      return true;
-    }
-
-    // Intentar import dinámico
-    const preact = await import('preact');
-    adapterState.preact = preact;
-    adapterState.render = preact.render;
-    adapterState.h = preact.h;
-    adapterState.initialized = true;
-    return true;
-
-  } catch (error) {
-    console.error('[WuPreact] Failed to load Preact:', error);
-    return 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 esté 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 Preact como microfrontend
- *
- * @param {string} appName - Nombre único del microfrontend
- * @param {Function} Component - Componente Preact principal
- * @param {Object} options - Opciones adicionales
- * @param {Object} options.props - Props iniciales para el componente
- * @param {Function} options.onMount - Callback después de montar
- * @param {Function} options.onUnmount - Callback antes de desmontar
- * @param {boolean} options.standalone - Permitir ejecución standalone (default: true)
- * @param {string} options.standaloneContainer - Selector para modo standalone (default: '#app')
- *
- * @example
- * // Básico
- * wuPreact.register('my-app', App);
- *
- * @example
- * // Con props
- * wuPreact.register('my-app', App, {
- *   props: { apiUrl: 'https://api.example.com' },
- *   onMount: (container) => console.log('Mounted!')
- * });
- */
-async function register(appName, Component, options = {}) {
-  const {
-    props = {},
-    onMount = null,
-    onUnmount = null,
-    standalone = true,
-    standaloneContainer = '#app'
-  } = options;
-
-  // Asegurar que Preact está disponible
-  const hasPreact = await ensurePreact();
-  if (!hasPreact) {
-    console.error(`[WuPreact] Cannot register ${appName}: Preact not available`);
-    return false;
-  }
-
-  const { render, h } = adapterState;
-
-  // Función de mount interna
-  const mountApp = (container) => {
-    if (!container) {
-      console.error(`[WuPreact] Mount failed for ${appName}: container is null`);
-      return;
-    }
-
-    // Evitar doble mount
-    if (adapterState.apps.has(appName)) {
-      console.warn(`[WuPreact] ${appName} already mounted, unmounting first`);
-      unmountApp();
-    }
-
-    try {
-      // Limpiar container
-      container.innerHTML = '';
-
-      // Renderizar componente
-      render(
-        h(Component, {
-          ...props,
-          wuAppName: appName,
-          wuInstance: getWuInstance()
-        }),
-        container
-      );
-
-      // Guardar referencia
-      adapterState.apps.set(appName, { container, Component });
-
-      console.log(`[WuPreact] ✅ ${appName} mounted successfully`);
-
-      if (onMount) {
-        onMount(container);
-      }
-    } catch (error) {
-      console.error(`[WuPreact] Mount error for ${appName}:`, error);
-      throw error;
-    }
-  };
-
-  // Función de unmount interna
-  const unmountApp = (container) => {
-    const appData = adapterState.apps.get(appName);
-
-    if (appData) {
-      try {
-        if (onUnmount) {
-          onUnmount(appData.container);
-        }
-
-        // Unmount en Preact: renderizar null
-        render(null, appData.container);
-
-        adapterState.apps.delete(appName);
-
-        console.log(`[WuPreact] ✅ ${appName} unmounted successfully`);
-      } catch (error) {
-        console.error(`[WuPreact] Unmount error for ${appName}:`, error);
-      }
-    }
-
-    if (container) {
-      container.innerHTML = '';
-    }
-  };
-
-  // Intentar registrar con Wu Framework
-  try {
-    const wu = await waitForWu(3000);
-
-    wu.define(appName, {
-      mount: mountApp,
-      unmount: unmountApp
-    });
-
-    console.log(`[WuPreact] ✅ ${appName} registered with Wu Framework`);
-    return true;
-
-  } catch (error) {
-    console.warn(`[WuPreact] Wu Framework not available for ${appName}`);
-
-    if (standalone) {
-      const containerElement = document.querySelector(standaloneContainer);
-
-      if (containerElement) {
-        console.log(`[WuPreact] Running ${appName} in standalone mode`);
-        mountApp(containerElement);
-        return true;
-      }
-    }
-
-    return false;
-  }
-}
-
-/**
- * Registra usando preact/compat (para proyectos migrados de React)
- *
- * @example
- * import { wuPreact } from 'wu-framework/adapters/preact';
- * import App from './App'; // Componente React-like
- *
- * wuPreact.registerCompat('my-app', App);
- */
-async function registerCompat(appName, Component, options = {}) {
-  const {
-    props = {},
-    onMount = null,
-    onUnmount = null,
-    standalone = true,
-    standaloneContainer = '#app'
-  } = options;
-
-  let render, h;
-
-  try {
-    // Intentar cargar preact/compat
-    const compat = await import('preact/compat');
-    render = compat.render;
-    h = compat.createElement;
-  } catch (e) {
-    console.error('[WuPreact] preact/compat not available');
-    // Fallback a registro normal
-    return register(appName, Component, options);
-  }
-
-  const mountApp = (container) => {
-    if (!container) return;
-
-    if (adapterState.apps.has(appName)) {
-      unmountApp();
-    }
-
-    try {
-      container.innerHTML = '';
-
-      render(
-        h(Component, {
-          ...props,
-          wuAppName: appName,
-          wuInstance: getWuInstance()
-        }),
-        container
-      );
-
-      adapterState.apps.set(appName, { container, Component, isCompat: true });
-
-      console.log(`[WuPreact] ✅ ${appName} (compat) mounted successfully`);
-
-      if (onMount) onMount(container);
-    } catch (error) {
-      console.error(`[WuPreact] Mount error for ${appName}:`, error);
-      throw error;
-    }
-  };
-
-  const unmountApp = (container) => {
-    const appData = adapterState.apps.get(appName);
-
-    if (appData) {
-      try {
-        if (onUnmount) onUnmount(appData.container);
-        render(null, appData.container);
-        adapterState.apps.delete(appName);
-        console.log(`[WuPreact] ✅ ${appName} (compat) unmounted successfully`);
-      } catch (error) {
-        console.error(`[WuPreact] Unmount error for ${appName}:`, error);
-      }
-    }
-
-    if (container) container.innerHTML = '';
-  };
-
-  try {
-    const wu = await waitForWu(3000);
-    wu.define(appName, { mount: mountApp, unmount: unmountApp });
-    console.log(`[WuPreact] ✅ ${appName} (compat) registered with Wu Framework`);
-    return true;
-  } catch (error) {
-    if (standalone) {
-      const containerElement = document.querySelector(standaloneContainer);
-      if (containerElement) {
-        mountApp(containerElement);
-        return true;
-      }
-    }
-    return false;
-  }
-}
-
-/**
- * Crea un componente WuSlot para Preact
- *
- * @param {Function} h - Función h de Preact
- * @returns {Function} Componente WuSlot
- *
- * @example
- * import { h } from 'preact';
- * import { createWuSlot } from 'wu-framework/adapters/preact';
- *
- * const WuSlot = createWuSlot(h);
- *
- * function Shell() {
- *   return (
- *     <div>
- *       <WuSlot name="header" url="http://localhost:3001" />
- *     </div>
- *   );
- * }
- */
-function createWuSlot(h) {
-  // Importar hooks de Preact
-  let useState, useEffect, useRef, useCallback;
-
-  try {
-    const hooks = require('preact/hooks');
-    useState = hooks.useState;
-    useEffect = hooks.useEffect;
-    useRef = hooks.useRef;
-    useCallback = hooks.useCallback;
-  } catch (e) {
-    // Si no hay hooks, crear versión sin hooks
-    return function WuSlotBasic(props) {
-      const { name, url } = props;
-      return h('div', {
-        class: 'wu-slot',
-        'data-wu-app': name,
-        'data-wu-url': url,
-        style: 'min-height: 100px;',
-        ref: (el) => {
-          if (el && !el._mounted) {
-            el._mounted = true;
-            mountSlot(el, name, url);
-          }
-        }
-      }, `Loading ${name}...`);
-    };
-  }
-
-  return function WuSlot(props) {
-    const {
-      name,
-      url,
-      appName = null,
-      fallback = null,
-      onLoad = null,
-      onError = null,
-      className = '',
-      style = {}
-    } = props;
-
-    const containerRef = useRef(null);
-    const appInstanceRef = useRef(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-
-    const actualAppName = appName || name;
-
-    const mountMicrofrontend = useCallback(async () => {
-      if (!containerRef.current) return;
-
-      try {
-        setLoading(true);
-        setError(null);
-
-        const wu = getWuInstance();
-        if (!wu) throw new Error('Wu Framework not initialized');
-
-        const containerId = `wu-slot-${actualAppName}-${Date.now()}`;
-        const innerContainer = document.createElement('div');
-        innerContainer.id = containerId;
-        innerContainer.style.cssText = 'width: 100%; height: 100%;';
-
-        containerRef.current.innerHTML = '';
-        containerRef.current.appendChild(innerContainer);
-
-        const app = wu.app(actualAppName, {
-          url,
-          container: `#${containerId}`,
-          autoInit: true
-        });
-
-        appInstanceRef.current = app;
-        await app.mount();
-
-        setLoading(false);
-        if (onLoad) onLoad({ name: actualAppName, url });
-
-      } catch (err) {
-        console.error(`[WuSlot] Error loading ${actualAppName}:`, err);
-        setError(err.message || 'Failed to load microfrontend');
-        setLoading(false);
-        if (onError) onError(err);
-      }
-    }, [actualAppName, url, onLoad, onError]);
-
-    useEffect(() => {
-      mountMicrofrontend();
-
-      return () => {
-        if (appInstanceRef.current) {
-          appInstanceRef.current.unmount().catch(console.warn);
-          appInstanceRef.current = null;
-        }
-      };
-    }, [mountMicrofrontend]);
-
-    if (error) {
-      return h('div', {
-        class: `wu-slot wu-slot-error ${className}`,
-        style: {
-          padding: '1rem',
-          border: '1px solid #f5c6cb',
-          borderRadius: '4px',
-          backgroundColor: '#f8d7da',
-          color: '#721c24',
-          ...style
-        }
-      }, [
-        h('strong', null, `Error loading ${name}`),
-        h('p', { style: { margin: '0.5rem 0 0 0' } }, error)
-      ]);
-    }
-
-    return h('div', {
-      ref: containerRef,
-      class: `wu-slot ${loading ? 'wu-slot-loading' : 'wu-slot-loaded'} ${className}`,
-      style: {
-        minHeight: '100px',
-        position: 'relative',
-        ...style
-      },
-      'data-wu-app': actualAppName,
-      'data-wu-url': url
-    }, loading && (fallback || h('div', {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '2rem',
-        color: '#666'
-      }
-    }, `Loading ${name}...`)));
-  };
-}
-
-/**
- * Hook para usar el EventBus de Wu Framework en Preact
- *
- * @example
- * import { createUseWuEvents } from 'wu-framework/adapters/preact';
- * import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
- *
- * const useWuEvents = createUseWuEvents({ useCallback, useEffect, useRef });
- *
- * function MyComponent() {
- *   const { emit, on } = useWuEvents();
- *
- *   useEffect(() => {
- *     return on('user:login', (data) => console.log(data));
- *   }, [on]);
- * }
- */
-function createUseWuEvents(hooks) {
-  const { useCallback, useEffect, useRef } = hooks;
-
-  return function useWuEvents() {
-    const subscriptionsRef = useRef([]);
-
-    const emit = useCallback((event, data, options) => {
-      const wu = getWuInstance();
-      if (wu?.eventBus) {
-        wu.eventBus.emit(event, data, options);
-      }
-    }, []);
-
-    const on = useCallback((event, callback) => {
-      const wu = getWuInstance();
-      if (wu?.eventBus) {
-        const unsubscribe = wu.eventBus.on(event, callback);
-        subscriptionsRef.current.push(unsubscribe);
-        return unsubscribe;
-      }
-      return () => {};
-    }, []);
-
-    const once = useCallback((event, callback) => {
-      const wu = getWuInstance();
-      if (wu?.eventBus) {
-        return wu.eventBus.once(event, callback);
-      }
-      return () => {};
-    }, []);
-
-    useEffect(() => {
-      return () => {
-        subscriptionsRef.current.forEach(unsub => unsub());
-        subscriptionsRef.current = [];
-      };
-    }, []);
-
-    return { emit, on, once };
-  };
-}
-
-/**
- * Hook para usar el Store de Wu Framework en Preact
- *
- * @example
- * const useWuStore = createUseWuStore({ useState, useCallback, useEffect });
- *
- * function MyComponent() {
- *   const { state, setState, getState } = useWuStore('user');
- *   // ...
- * }
- */
-function createUseWuStore(hooks) {
-  const { useState, useCallback, useEffect } = hooks;
-
-  return function useWuStore(namespace = '') {
-    const [state, setLocalState] = useState(() => {
-      const wu = getWuInstance();
-      return wu?.store?.get(namespace) || null;
-    });
-
-    const setState = useCallback((path, value) => {
-      const wu = getWuInstance();
-      if (wu?.store) {
-        const fullPath = namespace ? `${namespace}.${path}` : path;
-        wu.store.set(fullPath, value);
-      }
-    }, [namespace]);
-
-    const getState = useCallback((path = '') => {
-      const wu = getWuInstance();
-      if (wu?.store) {
-        const fullPath = namespace ? (path ? `${namespace}.${path}` : namespace) : path;
-        return wu.store.get(fullPath);
-      }
-      return null;
-    }, [namespace]);
-
-    useEffect(() => {
-      const wu = getWuInstance();
-      if (!wu?.store) return;
-
-      const pattern = namespace ? `${namespace}.*` : '*';
-      const unsubscribe = wu.store.on(pattern, () => {
-        setLocalState(wu.store.get(namespace));
-      });
-
-      return unsubscribe;
-    }, [namespace]);
-
-    return { state, setState, getState };
-  };
-}
-
-// Helper interno para montar slot sin hooks
-async function mountSlot(container, name, url) {
-  try {
-    const wu = getWuInstance();
-    if (!wu) return;
-
-    const containerId = `wu-slot-${name}-${Date.now()}`;
-    const innerContainer = document.createElement('div');
-    innerContainer.id = containerId;
-    innerContainer.style.cssText = 'width: 100%; height: 100%;';
-
-    container.innerHTML = '';
-    container.appendChild(innerContainer);
-
-    const app = wu.app(name, {
-      url,
-      container: `#${containerId}`,
-      autoInit: true
-    });
-
-    await app.mount();
-  } catch (err) {
-    container.innerHTML = `<div style="color: red;">Error: ${err.message}</div>`;
-  }
-}
-
-// API pública del adapter
-export const wuPreact = {
-  register,
-  registerCompat,
-  createWuSlot,
-  createUseWuEvents,
-  createUseWuStore,
-  getWuInstance,
-  waitForWu
-};
-
-// Named exports
-export {
-  register,
-  registerCompat,
-  createWuSlot,
-  createUseWuEvents,
-  createUseWuStore,
-  getWuInstance,
-  waitForWu
-};
-
-export default wuPreact;
+// Re-export from folder structure — backward compatibility
+export * from './preact/index.js';
+export { default } from './preact/index.js';