wu-framework 1.1.3 → 1.1.5

package/scripts/rollup-plugin-hex.js

@@ -0,0 +1,143 @@
+/**
+ * 🔐 ROLLUP PLUGIN: HEX ENCODER
+ *
+ * Convierte el código JavaScript a formato hexadecimal
+ * para máxima ofuscación y protección del código fuente.
+ *
+ * El código resultante se decodifica y ejecuta en runtime.
+ */
+
+/**
+ * Convierte string a hexadecimal
+ * @param {string} str - String a convertir
+ * @returns {string} String en hexadecimal
+ */
+function stringToHex(str) {
+  let hex = '';
+  for (let i = 0; i < str.length; i++) {
+    const charCode = str.charCodeAt(i);
+    hex += charCode.toString(16).padStart(2, '0');
+  }
+  return hex;
+}
+
+/**
+ * Genera el loader que decodifica y ejecuta el código hex
+ * @param {string} hexCode - Código en hexadecimal
+ * @param {boolean} isModule - Si es módulo ES
+ * @returns {string} Código JavaScript con loader
+ */
+function generateLoader(hexCode, isModule = true) {
+  // Loader minificado que decodifica hex y ejecuta
+  const loader = `
+(function(){
+  var h="${hexCode}";
+  var d=function(x){
+    for(var s="",i=0;i<x.length;i+=2)
+      s+=String.fromCharCode(parseInt(x.substr(i,2),16));
+    return s;
+  };
+  var c=d(h);
+  ${isModule ?
+    'var b=new Blob([c],{type:"text/javascript"});var u=URL.createObjectURL(b);import(u).then(function(m){URL.revokeObjectURL(u);Object.assign(window.__wu_exports__=window.__wu_exports__||{},m);});' :
+    'var s=document.createElement("script");s.text=c;document.head.appendChild(s);'
+  }
+})();
+`.trim().replace(/\s+/g, ' ');
+
+  return loader;
+}
+
+/**
+ * Genera loader asíncrono para módulos ES
+ * @param {string} hexCode - Código hexadecimal
+ * @returns {string} Código con loader async
+ */
+function generateAsyncLoader(hexCode) {
+  return `/*!
+ * Wu Framework - Hex Encoded Build
+ * Decode and execute at runtime
+ */
+const __wu_hex__="${hexCode}";
+const __wu_decode__=(h)=>{let s="";for(let i=0;i<h.length;i+=2)s+=String.fromCharCode(parseInt(h.substr(i,2),16));return s;};
+const __wu_code__=__wu_decode__(__wu_hex__);
+const __wu_blob__=new Blob([__wu_code__],{type:"text/javascript"});
+const __wu_url__=URL.createObjectURL(__wu_blob__);
+const __wu_module__=await import(__wu_url__);
+URL.revokeObjectURL(__wu_url__);
+export const WuCore=__wu_module__.WuCore;
+export const WuLoader=__wu_module__.WuLoader;
+export const WuSandbox=__wu_module__.WuSandbox;
+export const WuManifest=__wu_module__.WuManifest;
+export const WuEventBus=__wu_module__.WuEventBus;
+export const WuStore=__wu_module__.WuStore;
+export const WuCache=__wu_module__.WuCache;
+export const WuPlugin=__wu_module__.WuPlugin;
+export const WuHooks=__wu_module__.WuHooks;
+export const WuPerformance=__wu_module__.WuPerformance;
+export const adapters=__wu_module__.adapters;
+export default __wu_module__.default||__wu_module__.WuCore;
+`;
+}
+
+/**
+ * Plugin de Rollup para codificación hexadecimal
+ * @param {Object} options - Opciones del plugin
+ * @returns {Object} Plugin de Rollup
+ */
+export default function hexEncoder(options = {}) {
+  const {
+    encodeStrings = true,
+    encodeIdentifiers = true,
+    addLoader = true,
+    asyncLoader = true,
+    chunkSize = 0 // 0 = sin chunks, >0 = dividir en chunks
+  } = options;
+
+  return {
+    name: 'hex-encoder',
+
+    renderChunk(code, chunk, outputOptions) {
+      console.log(`[HexEncoder] Processing chunk: ${chunk.fileName}`);
+
+      // Convertir código a hexadecimal
+      const hexCode = stringToHex(code);
+
+      console.log(`[HexEncoder] Original size: ${code.length} bytes`);
+      console.log(`[HexEncoder] Hex size: ${hexCode.length} bytes`);
+
+      if (!addLoader) {
+        // Solo devolver el hex sin loader
+        return {
+          code: `// Wu Framework - Hex Encoded\n// Decode with: hexToString("${hexCode}")\nexport default "${hexCode}";`,
+          map: null
+        };
+      }
+
+      // Generar código con loader
+      let finalCode;
+
+      if (asyncLoader) {
+        finalCode = generateAsyncLoader(hexCode);
+      } else {
+        finalCode = generateLoader(hexCode, outputOptions.format === 'es');
+      }
+
+      console.log(`[HexEncoder] Final size: ${finalCode.length} bytes`);
+
+      return {
+        code: finalCode,
+        map: null
+      };
+    },
+
+    generateBundle(outputOptions, bundle) {
+      console.log(`[HexEncoder] Build complete!`);
+      console.log(`[HexEncoder] Output format: ${outputOptions.format}`);
+      console.log(`[HexEncoder] Files generated: ${Object.keys(bundle).join(', ')}`);
+    }
+  };
+}
+
+// Exportar utilidades para uso standalone
+export { stringToHex, generateLoader, generateAsyncLoader };

package/src/adapters/angular.js

@@ -387,6 +387,175 @@ async function registerStandalone(appName, RootComponent, options = {}) {
   }
 }
 
+/**
+ * Registra un componente Angular Elements (Web Component) como microfrontend
+ *
+ * @param {string} appName - Nombre único del microfrontend
+ * @param {Type<any>} Component - Componente Angular standalone
+ * @param {Object} options - Opciones adicionales
+ * @param {string} options.elementTag - Tag del custom element (default: basado en appName)
+ * @param {ApplicationConfig} options.appConfig - Configuración de la aplicación Angular
+ * @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: '#root')
+ *
+ * @example
+ * // Angular Elements (Web Components)
+ * import { App } from './app/app';
+ * import { appConfig } from './app/app.config';
+ *
+ * wuAngular.registerElement('mfe-angular', App, {
+ *   elementTag: 'mfe-angular-content',
+ *   appConfig
+ * });
+ */
+async function registerElement(appName, Component, options = {}) {
+  const {
+    elementTag = `${appName}-element`,
+    appConfig = {},
+    onMount = null,
+    onUnmount = null,
+    standalone = true,
+    standaloneContainer = '#root'
+  } = options;
+
+  let customElementRegistered = false;
+
+  // Función para inicializar Angular Elements
+  const initializeElement = async () => {
+    if (customElementRegistered) return true;
+
+    try {
+      // Import dinámico de Angular
+      const [{ createApplication }, { createCustomElement }] = await Promise.all([
+        import('@angular/platform-browser'),
+        import('@angular/elements')
+      ]);
+
+      // Crear aplicación Angular
+      const app = await createApplication(appConfig);
+
+      // Crear y registrar el custom element
+      const CustomElement = createCustomElement(Component, { injector: app.injector });
+
+      if (!customElements.get(elementTag)) {
+        customElements.define(elementTag, CustomElement);
+        console.log(`[WuAngular] ✅ Custom element registered: ${elementTag}`);
+      }
+
+      customElementRegistered = true;
+
+      // Guardar referencia
+      adapterState.apps.set(`${appName}:element`, {
+        app,
+        elementTag,
+        CustomElement
+      });
+
+      return true;
+    } catch (error) {
+      console.error(`[WuAngular] Failed to initialize Angular Element:`, error);
+      throw error;
+    }
+  };
+
+  // Función de mount
+  const mountApp = async (container) => {
+    if (!container) {
+      console.error(`[WuAngular] Mount failed for ${appName}: container is null`);
+      return;
+    }
+
+    try {
+      // Asegurar que el elemento está registrado
+      await initializeElement();
+
+      // Crear el elemento custom
+      const element = document.createElement(elementTag);
+      element.setAttribute('data-wu-angular-element', appName);
+
+      // Limpiar y agregar al container
+      container.innerHTML = '';
+      container.appendChild(element);
+
+      // Guardar referencia del mount
+      adapterState.apps.set(appName, {
+        element,
+        container,
+        elementTag
+      });
+
+      console.log(`[WuAngular] ✅ ${appName} (element) mounted successfully`);
+
+      if (onMount) {
+        onMount(container, element);
+      }
+
+      return element;
+    } catch (error) {
+      console.error(`[WuAngular] Mount error for ${appName}:`, error);
+      throw error;
+    }
+  };
+
+  // Función de unmount
+  const unmountApp = async (container) => {
+    const instance = adapterState.apps.get(appName);
+
+    if (instance) {
+      try {
+        if (onUnmount) {
+          onUnmount(instance.container, instance.element);
+        }
+
+        // Remover elemento del DOM
+        if (instance.element && instance.element.parentNode) {
+          instance.element.remove();
+        }
+
+        adapterState.apps.delete(appName);
+
+        console.log(`[WuAngular] ✅ ${appName} (element) unmounted successfully`);
+      } catch (error) {
+        console.error(`[WuAngular] 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(`[WuAngular] ✅ ${appName} (element) registered with Wu Framework`);
+    return true;
+
+  } catch (error) {
+    console.warn(`[WuAngular] Wu Framework not available for ${appName}`);
+
+    if (standalone) {
+      const containerElement = document.querySelector(standaloneContainer);
+
+      if (containerElement) {
+        console.log(`[WuAngular] Running ${appName} in standalone mode`);
+        await mountApp(containerElement);
+        return true;
+      }
+    }
+
+    return false;
+  }
+}
+
 /**
  * Servicio Injectable para usar Wu Framework en Angular
  *
@@ -621,6 +790,7 @@ function getWuSlotModuleConfig() {
 export const wuAngular = {
   register,
   registerStandalone,
+  registerElement,
   createWuService,
   createWuSlotComponent,
   getWuSlotModuleConfig,
@@ -632,6 +802,7 @@ export const wuAngular = {
 export {
   register,
   registerStandalone,
+  registerElement,
   createWuService,
   createWuSlotComponent,
   getWuSlotModuleConfig,

package/src/adapters/vue.js

@@ -169,6 +169,17 @@ async function register(appName, RootComponent, options = {}) {
     }
 
     try {
+      // Detectar si el container está dentro de un Shadow DOM
+      let shadowRoot = null;
+      let element = container;
+      while (element && element !== document.body) {
+        if (element.getRootNode && element.getRootNode() instanceof ShadowRoot) {
+          shadowRoot = element.getRootNode();
+          break;
+        }
+        element = element.parentElement || element.host;
+      }
+
       // Crear la aplicación Vue
       const app = createApp(RootComponent, props);
 
@@ -184,6 +195,36 @@ async function register(appName, RootComponent, options = {}) {
       // Montar
       app.mount(container);
 
+      // Si está en Shadow DOM, copiar estilos de Vue al Shadow DOM
+      if (shadowRoot) {
+        // Esperar un poco para que Vue inyecte los estilos en el head
+        setTimeout(() => {
+          const vueStyles = document.querySelectorAll('style[data-vite-dev-id*="/' + appName + '/"], style[data-vite-dev-id*="\\' + appName + '\\"]');
+          vueStyles.forEach(style => {
+            // Verificar que no esté ya en el Shadow DOM
+            const viteId = style.getAttribute('data-vite-dev-id');
+            if (viteId && !shadowRoot.querySelector(`style[data-vite-dev-id="${viteId}"]`)) {
+              const clonedStyle = style.cloneNode(true);
+              shadowRoot.insertBefore(clonedStyle, shadowRoot.firstChild);
+              console.log(`[WuVue] ✅ Injected style into Shadow DOM: ${viteId}`);
+            }
+          });
+
+          // También copiar estilos que contengan rutas del app en el viteId
+          const allStyles = document.querySelectorAll('style[data-vite-dev-id]');
+          allStyles.forEach(style => {
+            const viteId = style.getAttribute('data-vite-dev-id');
+            if (viteId && (viteId.includes(`/${appName}/`) || viteId.includes(`\\${appName}\\`))) {
+              if (!shadowRoot.querySelector(`style[data-vite-dev-id="${viteId}"]`)) {
+                const clonedStyle = style.cloneNode(true);
+                shadowRoot.insertBefore(clonedStyle, shadowRoot.firstChild);
+                console.log(`[WuVue] ✅ Injected app style into Shadow DOM: ${viteId}`);
+              }
+            }
+          });
+        }, 100);
+      }
+
       // Guardar referencia
       adapterState.apps.set(appName, { app, container });
 

package/src/core/wu-core.js

@@ -587,25 +587,12 @@ export class WuCore {
       // 🏊 Acquire sandbox from pool (if configured)
       const poolSandbox = this.sandboxPool.acquire(appName);
 
-      // 🎨 Configure style mode from manifest before creating sandbox
-      const manifest = app.manifest;
-      console.log(`[Wu] 🔍 DEBUG: Manifest for ${appName}:`, JSON.stringify(manifest, null, 2));
-
-      // Default to 'isolated' if no styleMode specified
-      const styleMode = manifest?.styleMode || 'isolated';
-      if (this.sandbox.styleBridge) {
-        // Pass app URL so StyleBridge can identify MFE's own styles
-        this.sandbox.styleBridge.setAppStyleMode(appName, styleMode, app.url);
-        console.log(`[Wu] 🎨 Style mode for ${appName}: ${styleMode}`);
-
-        // 📁 If folder is specified in manifest, register it for style detection
-        // This is needed when folder name differs from app name (e.g., folder="container", name="content")
-        const folderName = manifest?.folder || appName;
-        this.sandbox.styleBridge.setAppFolder(appName, `/${folderName}/`);
-      }
-
-      // 🛡️ Quantum sandbox creation
-      const sandbox = this.sandbox.create(appName, container);
+      // 🛡️ Quantum sandbox creation - pasar manifest con styleMode y URL de la app
+      const sandbox = this.sandbox.create(appName, container, {
+        manifest: app.manifest,
+        styleMode: app.manifest?.styleMode,
+        appUrl: app.url // Pasar URL de la app para filtrar estilos de apps fully-isolated
+      });
 
       // 🪝 Execute afterLoad hooks
       await this.hooks.execute('afterLoad', { appName, containerSelector, sandbox });
@@ -620,14 +607,6 @@ export class WuCore {
         if (!lifecycle) {
           throw new Error(`App ${appName} did not register with wu.define()`);
         }
-
-        // 🎨 RE-INJECT STYLES: After remote module loads, Vite may have injected new styles
-        // We need to re-scan and inject any new styles into the Shadow DOM
-        if (sandbox.shadowRoot && this.sandbox.styleBridge) {
-          console.log(`[Wu] 🎨 Re-injecting styles after module load for ${appName}...`);
-          // Pass app URL so StyleBridge can identify MFE's own styles
-          await this.sandbox.styleBridge.injectStylesIntoShadow(sandbox.shadowRoot, appName, app.url);
-        }
       }
 
       // 🪝 Execute beforeMount hooks
@@ -1029,12 +1008,15 @@ export class WuCore {
       const content = await response.text();
 
       // 🚫 DETECT HTML FALLBACK: Check if server returned HTML instead of JS
+      // Only check if content STARTS with HTML markers (trimmed), not if it contains them anywhere
+      // This avoids false positives for Angular/React bundles that contain template strings
+      const trimmedContent = content.trim().toLowerCase();
       const isHtmlFallback =
-        content.includes('<!doctype') ||
-        content.includes('<html') ||
-        content.includes('<head>') ||
-        content.includes('<body>') ||
-        (content.includes('<') && content.includes('>') && content.length > 200);
+        trimmedContent.startsWith('<!doctype') ||
+        trimmedContent.startsWith('<html') ||
+        trimmedContent.startsWith('<head') ||
+        trimmedContent.startsWith('<body') ||
+        trimmedContent.startsWith('<!-');
 
       if (isHtmlFallback) {
         console.log(`[Wu] ❌ Path validation failed - Server returned HTML fallback page: ${url}`);

package/src/core/wu-manifest.js

@@ -43,19 +43,14 @@ export class WuManifest {
   defineSchema() {
     this.schemas.set('wu.json', {
       required: ['name', 'entry'],
-      optional: ['wu', 'styleMode'],
+      optional: ['wu'],
       wu: {
         optional: ['exports', 'imports', 'routes', 'permissions'],
         exports: 'object',
         imports: 'array',
         routes: 'array',
         permissions: 'array'
-      },
-      // 🎨 styleMode: 'isolated' | 'shared' | 'auto'
-      // - isolated: No comparte estilos del padre (default, máximo aislamiento)
-      // - shared: Comparte todos los estilos del padre
-      // - auto: Solo comparte estilos de librerías específicas (element-plus, etc.)
-      styleMode: 'string'
+      }
     });
   }
 
@@ -317,11 +312,7 @@ export class WuManifest {
   normalize(manifest) {
     const normalized = {
       name: manifest.name.trim(),
-      // 📁 folder: carpeta física del MFE (si difiere del name)
-      folder: manifest.folder?.trim() || manifest.name.trim(),
       entry: this.normalizeEntry(manifest.entry),
-      // 🎨 styleMode: 'isolated' (default) | 'shared' | 'auto'
-      styleMode: this.normalizeStyleMode(manifest.styleMode),
       wu: {
         exports: manifest.wu?.exports || {},
         imports: manifest.wu?.imports || [],
@@ -330,6 +321,17 @@ export class WuManifest {
       }
     };
 
+    // Preservar campos opcionales del manifest (styleMode, version, folder, etc.)
+    if (manifest.styleMode) {
+      normalized.styleMode = manifest.styleMode;
+    }
+    if (manifest.version) {
+      normalized.version = manifest.version;
+    }
+    if (manifest.folder) {
+      normalized.folder = manifest.folder;
+    }
+
     // Normalizar exports
     if (normalized.wu.exports) {
       const normalizedExports = {};
@@ -351,26 +353,6 @@ export class WuManifest {
     return normalized;
   }
 
-  /**
-   * 🎨 Normalizar styleMode
-   * @param {string} styleMode - Modo de estilos
-   * @returns {'isolated' | 'fully-isolated' | 'shared' | 'auto'} styleMode normalizado
-   *
-   * Modos disponibles:
-   * - 'isolated': MFE solo tiene sus propios estilos (CSS variables SÍ se heredan)
-   * - 'fully-isolated': Aislamiento TOTAL - resetea CSS variables del padre (ÚNICO en wu-framework!)
-   * - 'shared': Comparte todos los estilos del padre
-   * - 'auto': Comparte solo librerías específicas (element-plus, etc.)
-   */
-  normalizeStyleMode(styleMode) {
-    const validModes = ['isolated', 'fully-isolated', 'shared', 'auto'];
-    if (styleMode && validModes.includes(styleMode)) {
-      return styleMode;
-    }
-    // Default: isolated (máximo aislamiento sin romper CSS variables)
-    return 'isolated';
-  }
-
   /**
    * Normalizar entry path
    * @param {string} entry - Entry path