wu-framework 1.0.6 → 1.1.1

package/src/adapters/vue.js

@@ -0,0 +1,570 @@
+/**
+ * 🚀 WU-FRAMEWORK VUE ADAPTER
+ *
+ * Simplifica la integración de Vue 3 con Wu Framework.
+ * Convierte componentes Vue en microfrontends con UNA línea de código.
+ *
+ * @example
+ * // Microfrontend (main.ts)
+ * import { wuVue } from 'wu-framework/adapters/vue';
+ * import App from './App.vue';
+ *
+ * wuVue.register('my-app', App);
+ *
+ * @example
+ * // Shell (cargar microfrontend)
+ * import { WuSlot } from 'wu-framework/adapters/vue';
+ *
+ * <WuSlot name="my-app" url="http://localhost:3001" />
+ */
+
+// Estado global del adapter
+const adapterState = {
+  apps: new Map(),
+  Vue: null,
+  createApp: null,
+  initialized: false
+};
+
+/**
+ * Detecta y obtiene Vue del contexto global o lo importa
+ */
+async function ensureVue() {
+  if (adapterState.initialized) return true;
+
+  try {
+    // Intentar obtener de window
+    if (typeof window !== 'undefined' && window.Vue) {
+      adapterState.Vue = window.Vue;
+      adapterState.createApp = window.Vue.createApp;
+      adapterState.initialized = true;
+      return true;
+    }
+
+    // Intentar import dinámico
+    const Vue = await import('vue');
+    adapterState.Vue = Vue;
+    adapterState.createApp = Vue.createApp;
+    adapterState.initialized = true;
+    return true;
+
+  } catch (error) {
+    console.error('[WuVue] Failed to load Vue:', 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 Vue como microfrontend
+ *
+ * @param {string} appName - Nombre único del microfrontend (debe coincidir con wu.json)
+ * @param {Object} RootComponent - Componente Vue principal (App.vue)
+ * @param {Object} options - Opciones adicionales
+ * @param {Function} options.setup - Función para configurar la app Vue (plugins, router, etc.)
+ * @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
+ * wuVue.register('my-app', App);
+ *
+ * @example
+ * // Con plugins (Pinia, Router, etc.)
+ * wuVue.register('my-app', App, {
+ *   setup: (app) => {
+ *     app.use(createPinia());
+ *     app.use(router);
+ *     app.component('MyGlobal', MyComponent);
+ *   }
+ * });
+ */
+async function register(appName, RootComponent, options = {}) {
+  const {
+    setup = null,
+    props = {},
+    onMount = null,
+    onUnmount = null,
+    standalone = true,
+    standaloneContainer = '#app'
+  } = options;
+
+  // Asegurar que Vue está disponible
+  const hasVue = await ensureVue();
+  if (!hasVue) {
+    console.error(`[WuVue] Cannot register ${appName}: Vue not available`);
+    return false;
+  }
+
+  const { createApp } = adapterState;
+
+  // Función de mount interna
+  const mountApp = (container) => {
+    if (!container) {
+      console.error(`[WuVue] Mount failed for ${appName}: container is null`);
+      return;
+    }
+
+    // Evitar doble mount
+    if (adapterState.apps.has(appName)) {
+      console.warn(`[WuVue] ${appName} already mounted, unmounting first`);
+      unmountApp();
+    }
+
+    try {
+      // Crear la aplicación Vue
+      const app = createApp(RootComponent, props);
+
+      // Ejecutar setup personalizado (plugins, router, etc.)
+      if (setup && typeof setup === 'function') {
+        setup(app);
+      }
+
+      // Proveer información del contexto Wu
+      app.provide('wuAppName', appName);
+      app.provide('wuInstance', getWuInstance());
+
+      // Montar
+      app.mount(container);
+
+      // Guardar referencia
+      adapterState.apps.set(appName, { app, container });
+
+      console.log(`[WuVue] ✅ ${appName} mounted successfully`);
+
+      if (onMount) {
+        onMount(container, app);
+      }
+    } catch (error) {
+      console.error(`[WuVue] Mount error for ${appName}:`, error);
+      throw error;
+    }
+  };
+
+  // Función de unmount interna
+  const unmountApp = (container) => {
+    const instance = adapterState.apps.get(appName);
+
+    if (instance) {
+      try {
+        if (onUnmount) {
+          onUnmount(instance.container, instance.app);
+        }
+
+        instance.app.unmount();
+        adapterState.apps.delete(appName);
+
+        console.log(`[WuVue] ✅ ${appName} unmounted successfully`);
+      } catch (error) {
+        console.error(`[WuVue] Unmount error for ${appName}:`, error);
+      }
+    }
+
+    // Limpiar container si se proporciona
+    if (container) {
+      container.innerHTML = '';
+    }
+  };
+
+  // Intentar registrar con Wu Framework
+  try {
+    const wu = await waitForWu(3000);
+
+    wu.define(appName, {
+      mount: mountApp,
+      unmount: unmountApp
+    });
+
+    console.log(`[WuVue] ✅ ${appName} registered with Wu Framework`);
+    return true;
+
+  } catch (error) {
+    console.warn(`[WuVue] Wu Framework not available for ${appName}`);
+
+    // Modo standalone si está habilitado
+    if (standalone) {
+      const containerElement = document.querySelector(standaloneContainer);
+
+      if (containerElement) {
+        console.log(`[WuVue] Running ${appName} in standalone mode`);
+        mountApp(containerElement);
+        return true;
+      } else {
+        console.warn(`[WuVue] Standalone container ${standaloneContainer} not found`);
+      }
+    }
+
+    return false;
+  }
+}
+
+/**
+ * Crea un componente Vue para cargar microfrontends (para el Shell)
+ *
+ * @example
+ * <script setup>
+ * import { WuSlot } from 'wu-framework/adapters/vue';
+ * </script>
+ *
+ * <template>
+ *   <WuSlot name="my-app" url="http://localhost:3001" />
+ * </template>
+ */
+const WuSlot = {
+  name: 'WuSlot',
+
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    appName: {
+      type: String,
+      default: null
+    },
+    fallbackText: {
+      type: String,
+      default: 'Loading...'
+    }
+  },
+
+  emits: ['load', 'error', 'mount', 'unmount'],
+
+  data() {
+    return {
+      loading: true,
+      error: null,
+      appInstance: null,
+      containerId: null
+    };
+  },
+
+  computed: {
+    actualAppName() {
+      return this.appName || this.name;
+    }
+  },
+
+  async mounted() {
+    await this.mountMicrofrontend();
+  },
+
+  beforeUnmount() {
+    this.unmountMicrofrontend();
+  },
+
+  methods: {
+    async mountMicrofrontend() {
+      try {
+        this.loading = true;
+        this.error = null;
+
+        const wu = getWuInstance();
+        if (!wu) {
+          throw new Error('Wu Framework not initialized');
+        }
+
+        // Crear container único
+        this.containerId = `wu-slot-${this.actualAppName}-${Date.now()}`;
+        const innerContainer = document.createElement('div');
+        innerContainer.id = this.containerId;
+        innerContainer.style.width = '100%';
+        innerContainer.style.height = '100%';
+
+        this.$refs.container.innerHTML = '';
+        this.$refs.container.appendChild(innerContainer);
+
+        // Crear y montar la app
+        const app = wu.app(this.actualAppName, {
+          url: this.url,
+          container: `#${this.containerId}`,
+          autoInit: true
+        });
+
+        this.appInstance = app;
+        await app.mount();
+
+        this.loading = false;
+        this.$emit('load', { name: this.actualAppName, url: this.url });
+        this.$emit('mount', { name: this.actualAppName, container: innerContainer });
+
+      } catch (err) {
+        console.error(`[WuSlot] Error loading ${this.actualAppName}:`, err);
+        this.error = err.message || 'Failed to load microfrontend';
+        this.loading = false;
+        this.$emit('error', err);
+      }
+    },
+
+    async unmountMicrofrontend() {
+      if (this.appInstance) {
+        this.$emit('unmount', { name: this.actualAppName });
+
+        try {
+          await this.appInstance.unmount();
+        } catch (err) {
+          console.warn(`[WuSlot] Error unmounting ${this.actualAppName}:`, err);
+        }
+
+        this.appInstance = null;
+      }
+    }
+  },
+
+  template: `
+    <div
+      ref="container"
+      class="wu-slot"
+      :class="{ 'wu-slot-loading': loading, 'wu-slot-error': error }"
+      :data-wu-app="actualAppName"
+      :data-wu-url="url"
+      style="min-height: 100px; position: relative;"
+    >
+      <div v-if="error" class="wu-slot-error-message" style="padding: 1rem; border: 1px solid #f5c6cb; border-radius: 4px; background: #f8d7da; color: #721c24;">
+        <strong>Error loading {{ name }}</strong>
+        <p style="margin: 0.5rem 0 0 0;">{{ error }}</p>
+      </div>
+      <div v-else-if="loading" class="wu-slot-loading-message" style="display: flex; align-items: center; justify-content: center; padding: 2rem; color: #666;">
+        {{ fallbackText || 'Loading ' + name + '...' }}
+      </div>
+    </div>
+  `
+};
+
+/**
+ * Composable para usar el EventBus de Wu Framework en Vue 3
+ *
+ * @example
+ * <script setup>
+ * import { useWuEvents } from 'wu-framework/adapters/vue';
+ *
+ * const { emit, on } = useWuEvents();
+ *
+ * onMounted(() => {
+ *   on('user:login', (data) => console.log(data));
+ * });
+ * </script>
+ */
+function useWuEvents() {
+  const subscriptions = [];
+
+  const emit = (event, data, options) => {
+    const wu = getWuInstance();
+    if (wu?.eventBus) {
+      wu.eventBus.emit(event, data, options);
+    } else {
+      console.warn('[useWuEvents] Wu Framework not available');
+    }
+  };
+
+  const on = (event, callback) => {
+    const wu = getWuInstance();
+    if (wu?.eventBus) {
+      const unsubscribe = wu.eventBus.on(event, callback);
+      subscriptions.push(unsubscribe);
+      return unsubscribe;
+    }
+    console.warn('[useWuEvents] Wu Framework not available');
+    return () => {};
+  };
+
+  const once = (event, callback) => {
+    const wu = getWuInstance();
+    if (wu?.eventBus) {
+      return wu.eventBus.once(event, callback);
+    }
+    console.warn('[useWuEvents] Wu Framework not available');
+    return () => {};
+  };
+
+  const off = (event, callback) => {
+    const wu = getWuInstance();
+    if (wu?.eventBus) {
+      wu.eventBus.off(event, callback);
+    }
+  };
+
+  // Cleanup - llamar en onUnmounted
+  const cleanup = () => {
+    subscriptions.forEach(unsub => unsub());
+    subscriptions.length = 0;
+  };
+
+  return { emit, on, once, off, cleanup };
+}
+
+/**
+ * Composable para usar el Store de Wu Framework en Vue 3
+ *
+ * @example
+ * <script setup>
+ * import { useWuStore } from 'wu-framework/adapters/vue';
+ *
+ * const { state, setState, getState } = useWuStore('user');
+ *
+ * // state es reactivo!
+ * console.log(state.value);
+ * </script>
+ */
+function useWuStore(namespace = '') {
+  // Importar ref y watch de Vue si están disponibles
+  const Vue = adapterState.Vue;
+  let state;
+  let unsubscribe = null;
+
+  // Crear estado reactivo si Vue está disponible
+  if (Vue?.ref) {
+    const wu = getWuInstance();
+    const initialValue = wu?.store?.get(namespace) || null;
+    state = Vue.ref(initialValue);
+
+    // Suscribirse a cambios
+    if (wu?.store) {
+      const pattern = namespace ? `${namespace}.*` : '*';
+      unsubscribe = wu.store.on(pattern, () => {
+        state.value = wu.store.get(namespace);
+      });
+    }
+  } else {
+    // Fallback sin reactividad
+    state = { value: null };
+  }
+
+  const setState = (path, value) => {
+    const wu = getWuInstance();
+    if (wu?.store) {
+      const fullPath = namespace ? `${namespace}.${path}` : path;
+      wu.store.set(fullPath, value);
+    }
+  };
+
+  const getState = (path = '') => {
+    const wu = getWuInstance();
+    if (wu?.store) {
+      const fullPath = namespace ? (path ? `${namespace}.${path}` : namespace) : path;
+      return wu.store.get(fullPath);
+    }
+    return null;
+  };
+
+  const cleanup = () => {
+    if (unsubscribe) {
+      unsubscribe();
+      unsubscribe = null;
+    }
+  };
+
+  return { state, setState, getState, cleanup };
+}
+
+/**
+ * Plugin de Vue para instalar Wu Framework globalmente
+ *
+ * @example
+ * import { createApp } from 'vue';
+ * import { wuVuePlugin } from 'wu-framework/adapters/vue';
+ *
+ * const app = createApp(App);
+ * app.use(wuVuePlugin);
+ */
+const wuVuePlugin = {
+  install(app, options = {}) {
+    // Registrar componente WuSlot globalmente
+    app.component('WuSlot', WuSlot);
+
+    // Proveer acceso global a Wu
+    app.provide('wu', getWuInstance());
+
+    // Agregar propiedades globales
+    app.config.globalProperties.$wu = getWuInstance();
+    app.config.globalProperties.$wuEvents = useWuEvents();
+    app.config.globalProperties.$wuStore = (ns) => useWuStore(ns);
+
+    console.log('[WuVue] Plugin installed');
+  }
+};
+
+// API pública del adapter
+export const wuVue = {
+  register,
+  WuSlot,
+  useWuEvents,
+  useWuStore,
+  wuVuePlugin,
+  getWuInstance,
+  waitForWu
+};
+
+// Named exports para conveniencia
+export {
+  register,
+  WuSlot,
+  useWuEvents,
+  useWuStore,
+  wuVuePlugin,
+  getWuInstance,
+  waitForWu
+};
+
+export default wuVue;