wu-framework 1.1.4 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wu-framework",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "🚀 Universal Microfrontends Framework - 8 frameworks, zero config, Shadow DOM isolation",
   "main": "src/index.js",
   "type": "module",
@@ -18,14 +18,30 @@
     "./adapters/preact": "./src/adapters/preact.js",
     "./adapters/solid": "./src/adapters/solid.js",
     "./adapters/lit": "./src/adapters/lit.js",
-    "./adapters/vanilla": "./src/adapters/vanilla.js"
+    "./adapters/vanilla": "./src/adapters/vanilla.js",
+    "./dist/dev": "./dist/wu-framework.dev.js",
+    "./dist/min": "./dist/wu-framework.min.js",
+    "./dist/obf": "./dist/wu-framework.obf.js",
+    "./dist/hex": "./dist/wu-framework.hex.js",
+    "./dist/umd": "./dist/wu-framework.umd.js",
+    "./dist/cjs": "./dist/wu-framework.cjs.js"
   },
   "scripts": {
     "dev": "node examples/dev-server.js",
-    "build": "echo 'No build step needed - ES modules ready'",
+    "start": "npm run dev",
+    "build": "node scripts/build.js all --clean",
+    "build:dev": "node scripts/build.js dev",
+    "build:prod": "node scripts/build.js prod",
+    "build:obf": "node scripts/build.js obfuscated",
+    "build:hex": "node scripts/build.js hex",
+    "build:umd": "node scripts/build.js umd",
+    "build:cjs": "node scripts/build.js cjs",
+    "build:all": "node scripts/build.js all --clean",
+    "build:protected": "node scripts/build-protected.js",
+    "build:watch": "node scripts/build.js dev --watch",
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
     "test": "echo 'Tests coming soon'",
-    "lint": "echo 'Linting coming soon'",
-    "start": "npm run dev"
+    "lint": "echo 'Linting coming soon'"
   },
   "keywords": [
     "microfrontends",
@@ -65,6 +81,8 @@
   ],
   "files": [
     "src/",
+    "dist/",
+    "scripts/",
     "README.md",
     "LICENSE"
   ],
@@ -81,7 +99,15 @@
     }
   },
   "dependencies": {},
-  "devDependencies": {},
+  "devDependencies": {
+    "rollup": "^4.9.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-terser": "^0.4.4",
+    "terser": "^5.27.0",
+    "rollup-plugin-obfuscator": "^1.1.0",
+    "javascript-obfuscator": "^4.1.0"
+  },
   "peerDependencies": {},
   "optionalDependencies": {},
   "funding": {

package/scripts/build-protected.js

@@ -0,0 +1,366 @@
+#!/usr/bin/env node
+
+/**
+ * 🔒 WU-FRAMEWORK PROTECTED BUILD
+ *
+ * Pipeline de protección en secuencia:
+ * 1. Bundle (Rollup) - Empaquetar todos los módulos
+ * 2. Minify (Terser) - Minificar el código
+ * 3. Obfuscate (javascript-obfuscator) - Ofuscar el código
+ * 4. Hex Encode - Convertir a hexadecimal
+ *
+ * Output: UN SOLO archivo protegido
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { rollup } from 'rollup';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import { minify } from 'terser';
+import JavaScriptObfuscator from 'javascript-obfuscator';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const rootDir = path.resolve(__dirname, '..');
+
+// ═══════════════════════════════════════════════════════════
+// CONFIGURACIÓN
+// ═══════════════════════════════════════════════════════════
+
+const CONFIG = {
+  input: path.join(rootDir, 'src/index.js'),
+  output: path.join(rootDir, 'dist/wu-framework.protected.js'),
+
+  // Opciones de Terser (minificación)
+  terser: {
+    compress: {
+      drop_console: false,
+      drop_debugger: true,
+      passes: 3,
+      dead_code: true,
+      unused: true,
+      conditionals: true,
+      evaluate: true,
+      booleans: true,
+      loops: true,
+      join_vars: true
+    },
+    mangle: {
+      toplevel: true,
+      properties: false
+    },
+    format: {
+      comments: false,
+      beautify: false
+    }
+  },
+
+  // Opciones de Obfuscator (ofuscación OPTIMIZADA - balance protección/tamaño)
+  obfuscator: {
+    compact: true,
+    controlFlowFlattening: false,        // Desactivado - agrega mucho código
+    deadCodeInjection: false,            // Desactivado - agrega código muerto
+    debugProtection: false,
+    disableConsoleOutput: false,
+    identifierNamesGenerator: 'hexadecimal',
+    log: false,
+    numbersToExpressions: false,         // Desactivado - infla números
+    renameGlobals: false,
+    rotateStringArray: true,
+    selfDefending: false,                // Desactivado - agrega código
+    shuffleStringArray: true,
+    simplify: true,
+    splitStrings: false,                 // Desactivado - divide strings innecesariamente
+    stringArray: true,
+    stringArrayCallsTransform: false,    // Desactivado - agrega wrappers
+    stringArrayEncoding: ['base64'],
+    stringArrayIndexShift: true,
+    stringArrayRotate: true,
+    stringArrayShuffle: true,
+    stringArrayWrappersCount: 1,         // Reducido de 2 a 1
+    stringArrayWrappersChainedCalls: false,
+    stringArrayWrappersParametersMaxCount: 2,
+    stringArrayWrappersType: 'variable', // Más ligero que 'function'
+    stringArrayThreshold: 0.5,           // Reducido de 0.75
+    transformObjectKeys: false,          // Desactivado - infla objetos
+    unicodeEscapeSequence: false
+  },
+
+  // Opciones de Obfuscator MÁXIMA (para cuando se necesite máxima protección)
+  obfuscatorMax: {
+    compact: true,
+    controlFlowFlattening: true,
+    controlFlowFlatteningThreshold: 0.5,
+    deadCodeInjection: true,
+    deadCodeInjectionThreshold: 0.2,
+    debugProtection: false,
+    disableConsoleOutput: false,
+    identifierNamesGenerator: 'hexadecimal',
+    log: false,
+    numbersToExpressions: true,
+    renameGlobals: false,
+    rotateStringArray: true,
+    selfDefending: true,
+    shuffleStringArray: true,
+    simplify: true,
+    splitStrings: true,
+    splitStringsChunkLength: 10,
+    stringArray: true,
+    stringArrayEncoding: ['base64'],
+    stringArrayThreshold: 0.75,
+    transformObjectKeys: true,
+    unicodeEscapeSequence: false
+  }
+};
+
+// ═══════════════════════════════════════════════════════════
+// UTILIDADES
+// ═══════════════════════════════════════════════════════════
+
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m'
+};
+
+function log(msg, color = 'reset') {
+  console.log(`${colors[color]}${msg}${colors.reset}`);
+}
+
+function logStep(step, total, msg) {
+  const progress = `[${step}/${total}]`;
+  console.log(`${colors.cyan}${progress}${colors.reset} ${msg}`);
+}
+
+function logSuccess(msg) {
+  console.log(`    ${colors.green}✓${colors.reset} ${msg}`);
+}
+
+function logInfo(msg) {
+  console.log(`    ${colors.blue}ℹ${colors.reset} ${msg}`);
+}
+
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+function stringToHex(str) {
+  let hex = '';
+  for (let i = 0; i < str.length; i++) {
+    hex += str.charCodeAt(i).toString(16).padStart(2, '0');
+  }
+  return hex;
+}
+
+function stringToBase64(str) {
+  // Convertir string a Base64 (más eficiente que hex)
+  return Buffer.from(str, 'utf-8').toString('base64');
+}
+
+// ═══════════════════════════════════════════════════════════
+// PIPELINE DE BUILD
+// ═══════════════════════════════════════════════════════════
+
+async function build() {
+  const startTime = Date.now();
+
+  // Banner
+  console.log(`
+${colors.magenta}╔═══════════════════════════════════════════════════════════════╗
+║                                                               ║
+║   ${colors.bright}🔒 WU-FRAMEWORK PROTECTED BUILD${colors.magenta}                           ║
+║                                                               ║
+║   Pipeline: Bundle → Minify → Obfuscate → Hexadecimal        ║
+║                                                               ║
+╚═══════════════════════════════════════════════════════════════╝${colors.reset}
+`);
+
+  let code = '';
+  const stats = {
+    original: 0,
+    bundled: 0,
+    minified: 0,
+    obfuscated: 0,
+    encoded: 0
+  };
+
+  try {
+    // ─────────────────────────────────────────────────────────
+    // PASO 1: BUNDLE (Rollup)
+    // ─────────────────────────────────────────────────────────
+    logStep(1, 4, 'Bundling with Rollup...');
+
+    const bundle = await rollup({
+      input: CONFIG.input,
+      plugins: [
+        resolve(),
+        commonjs()
+      ]
+    });
+
+    const { output } = await bundle.generate({
+      format: 'es',
+      sourcemap: false
+    });
+
+    code = output[0].code;
+    stats.bundled = code.length;
+
+    logSuccess(`Bundled: ${formatSize(stats.bundled)}`);
+    await bundle.close();
+
+    // ─────────────────────────────────────────────────────────
+    // PASO 2: MINIFY (Terser)
+    // ─────────────────────────────────────────────────────────
+    logStep(2, 4, 'Minifying with Terser...');
+
+    const minified = await minify(code, CONFIG.terser);
+    code = minified.code;
+    stats.minified = code.length;
+
+    logSuccess(`Minified: ${formatSize(stats.minified)} (${((1 - stats.minified / stats.bundled) * 100).toFixed(1)}% reduction)`);
+
+    // ─────────────────────────────────────────────────────────
+    // PASO 3: OBFUSCATE (javascript-obfuscator)
+    // ─────────────────────────────────────────────────────────
+    logStep(3, 4, 'Obfuscating with javascript-obfuscator...');
+
+    const obfuscated = JavaScriptObfuscator.obfuscate(code, CONFIG.obfuscator);
+    code = obfuscated.getObfuscatedCode();
+    stats.obfuscated = code.length;
+
+    logSuccess(`Obfuscated: ${formatSize(stats.obfuscated)}`);
+
+    // ─────────────────────────────────────────────────────────
+    // PASO 4: BASE64 ENCODE (más eficiente que hex)
+    // ─────────────────────────────────────────────────────────
+    logStep(4, 4, 'Encoding to Base64...');
+
+    const base64Code = stringToBase64(code);
+    stats.encoded = base64Code.length;
+
+    // Crear loader que decodifica y ejecuta el código
+    const finalCode = generateBase64Loader(base64Code);
+
+    logSuccess(`Base64 Encoded: ${formatSize(finalCode.length)}`);
+
+    // ─────────────────────────────────────────────────────────
+    // GUARDAR OUTPUT
+    // ─────────────────────────────────────────────────────────
+    const distDir = path.dirname(CONFIG.output);
+    if (!fs.existsSync(distDir)) {
+      fs.mkdirSync(distDir, { recursive: true });
+    }
+
+    fs.writeFileSync(CONFIG.output, finalCode, 'utf-8');
+
+    // ─────────────────────────────────────────────────────────
+    // RESUMEN
+    // ─────────────────────────────────────────────────────────
+    const elapsed = ((Date.now() - startTime) / 1000).toFixed(2);
+
+    console.log(`
+${colors.green}═══════════════════════════════════════════════════════════════${colors.reset}
+${colors.bright}                     BUILD COMPLETE!${colors.reset}
+${colors.green}═══════════════════════════════════════════════════════════════${colors.reset}
+
+${colors.cyan}Pipeline Results:${colors.reset}
+
+  ${colors.yellow}Step 1 - Bundle:${colors.reset}     ${formatSize(stats.bundled).padStart(12)}
+  ${colors.yellow}Step 2 - Minify:${colors.reset}     ${formatSize(stats.minified).padStart(12)}  (↓ ${((1 - stats.minified / stats.bundled) * 100).toFixed(1)}%)
+  ${colors.yellow}Step 3 - Obfuscate:${colors.reset}  ${formatSize(stats.obfuscated).padStart(12)}
+  ${colors.yellow}Step 4 - Base64:${colors.reset}     ${formatSize(finalCode.length).padStart(12)}
+
+${colors.cyan}Output:${colors.reset} ${CONFIG.output}
+${colors.cyan}Time:${colors.reset}   ${elapsed}s
+
+${colors.green}═══════════════════════════════════════════════════════════════${colors.reset}
+`);
+
+    // Mostrar uso
+    console.log(`${colors.yellow}Usage:${colors.reset}`);
+    console.log(`
+  ${colors.cyan}ES Module:${colors.reset}
+    import * as WuFramework from './dist/wu-framework.protected.js';
+
+  ${colors.cyan}Browser:${colors.reset}
+    <script type="module" src="./dist/wu-framework.protected.js"></script>
+
+  ${colors.cyan}Dynamic Import:${colors.reset}
+    const WuFramework = await import('./dist/wu-framework.protected.js');
+`);
+
+  } catch (error) {
+    console.error(`${colors.red}Build failed:${colors.reset}`, error);
+    process.exit(1);
+  }
+}
+
+// ═══════════════════════════════════════════════════════════
+// GENERADOR DE LOADER HEXADECIMAL
+// ═══════════════════════════════════════════════════════════
+
+function generateBase64Loader(base64Code) {
+  // Generar nombres de variables ofuscados consistentes
+  const v = {
+    data: `_0x${randomHex(4)}`,
+    decode: `_0x${randomHex(4)}`,
+    input: `_0x${randomHex(4)}`,
+    code: `_0x${randomHex(4)}`,
+    blob: `_0x${randomHex(4)}`,
+    url: `_0x${randomHex(4)}`,
+    mod: `_0x${randomHex(4)}`
+  };
+
+  // Loader que decodifica Base64 y ejecuta como módulo ES
+  // atob() decodifica Base64 en el browser
+  return `/*!
+ * Wu Framework v1.1.1 - Protected Build
+ * (c) ${new Date().getFullYear()} Wu Framework Team
+ * This code is protected and encoded.
+ */
+const ${v.data}="${base64Code}";
+const ${v.decode}=(${v.input})=>decodeURIComponent(atob(${v.input}).split("").map(c=>"%"+("00"+c.charCodeAt(0).toString(16)).slice(-2)).join(""));
+const ${v.code}=${v.decode}(${v.data});
+const ${v.blob}=new Blob([${v.code}],{type:"text/javascript"});
+const ${v.url}=URL.createObjectURL(${v.blob});
+const ${v.mod}=await import(${v.url});
+URL.revokeObjectURL(${v.url});
+export const WuCore=${v.mod}.WuCore;
+export const WuLoader=${v.mod}.WuLoader;
+export const WuSandbox=${v.mod}.WuSandbox;
+export const WuManifest=${v.mod}.WuManifest;
+export const WuEventBus=${v.mod}.WuEventBus;
+export const WuStore=${v.mod}.WuStore;
+export const WuCache=${v.mod}.WuCache;
+export const WuPlugin=${v.mod}.WuPlugin;
+export const WuHooks=${v.mod}.WuHooks;
+export const WuPerformance=${v.mod}.WuPerformance;
+export const adapters=${v.mod}.adapters;
+export default ${v.mod}.default||${v.mod}.WuCore;
+`;
+}
+
+// Generar identificador hex aleatorio
+function randomHex(length) {
+  let result = '';
+  for (let i = 0; i < length; i++) {
+    result += Math.floor(Math.random() * 16).toString(16);
+  }
+  return result;
+}
+
+// ═══════════════════════════════════════════════════════════
+// EJECUTAR BUILD
+// ═══════════════════════════════════════════════════════════
+
+build().catch(console.error);

package/scripts/build.js

@@ -0,0 +1,212 @@
+#!/usr/bin/env node
+
+/**
+ * 🔨 WU-FRAMEWORK BUILD SCRIPT
+ *
+ * Script maestro para construir el framework con diferentes niveles de protección.
+ *
+ * Uso:
+ *   node scripts/build.js [target] [options]
+ *
+ * Targets:
+ *   dev         - Build desarrollo (sin minificar)
+ *   prod        - Build producción (minificado)
+ *   obfuscated  - Build ofuscado (minificado + ofuscado)
+ *   hex         - Build hexadecimal (máxima protección)
+ *   umd         - Build UMD para browsers
+ *   cjs         - Build CommonJS para Node
+ *   all         - Todos los builds (default)
+ *
+ * Options:
+ *   --clean     - Limpiar directorio dist antes de build
+ *   --watch     - Modo watch (solo para dev)
+ *   --analyze   - Analizar bundle size
+ *   --verbose   - Output detallado
+ */
+
+import { spawn, execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const rootDir = path.resolve(__dirname, '..');
+
+// Colores para console
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m'
+};
+
+function log(msg, color = 'reset') {
+  console.log(`${colors[color]}${msg}${colors.reset}`);
+}
+
+function logStep(step, msg) {
+  console.log(`${colors.cyan}[${step}]${colors.reset} ${msg}`);
+}
+
+function logSuccess(msg) {
+  console.log(`${colors.green}✓${colors.reset} ${msg}`);
+}
+
+function logError(msg) {
+  console.log(`${colors.red}✗${colors.reset} ${msg}`);
+}
+
+// Parsear argumentos
+const args = process.argv.slice(2);
+const target = args.find(a => !a.startsWith('--')) || 'all';
+const options = {
+  clean: args.includes('--clean'),
+  watch: args.includes('--watch'),
+  analyze: args.includes('--analyze'),
+  verbose: args.includes('--verbose')
+};
+
+// Banner
+console.log(`
+${colors.cyan}╔═══════════════════════════════════════════════════════════╗
+║                                                           ║
+║   ${colors.bright}🔨 WU-FRAMEWORK BUILD SYSTEM${colors.cyan}                          ║
+║                                                           ║
+║   Universal Microfrontends Framework                      ║
+║   Build Pipeline: Bundle → Minify → Obfuscate → Hex      ║
+║                                                           ║
+╚═══════════════════════════════════════════════════════════╝${colors.reset}
+`);
+
+// Info del build
+log(`Target: ${target}`, 'yellow');
+log(`Options: ${JSON.stringify(options)}`, 'yellow');
+console.log('');
+
+// Paso 1: Limpiar dist
+if (options.clean) {
+  logStep('1/4', 'Cleaning dist directory...');
+  const distDir = path.join(rootDir, 'dist');
+  if (fs.existsSync(distDir)) {
+    fs.rmSync(distDir, { recursive: true });
+    logSuccess('Dist directory cleaned');
+  } else {
+    logSuccess('Dist directory does not exist, skipping');
+  }
+} else {
+  logStep('1/4', 'Skip cleaning (use --clean to enable)');
+}
+
+// Paso 2: Crear directorio dist
+logStep('2/4', 'Creating dist directory...');
+const distDir = path.join(rootDir, 'dist');
+if (!fs.existsSync(distDir)) {
+  fs.mkdirSync(distDir, { recursive: true });
+}
+logSuccess('Dist directory ready');
+
+// Paso 3: Ejecutar Rollup
+logStep('3/4', `Building target: ${target}...`);
+console.log('');
+
+const startTime = Date.now();
+
+try {
+  // Configurar entorno
+  const env = {
+    ...process.env,
+    BUILD_TARGET: target,
+    NODE_ENV: target === 'dev' ? 'development' : 'production'
+  };
+
+  // Comando de Rollup
+  const rollupArgs = ['-c', 'rollup.config.js'];
+
+  if (options.watch) {
+    rollupArgs.push('--watch');
+  }
+
+  if (options.verbose) {
+    rollupArgs.push('--verbose');
+  }
+
+  // Ejecutar Rollup
+  const result = execSync(`npx rollup ${rollupArgs.join(' ')}`, {
+    cwd: rootDir,
+    env,
+    stdio: 'inherit'
+  });
+
+  const elapsed = ((Date.now() - startTime) / 1000).toFixed(2);
+  console.log('');
+  logSuccess(`Build completed in ${elapsed}s`);
+
+} catch (error) {
+  logError(`Build failed: ${error.message}`);
+  process.exit(1);
+}
+
+// Paso 4: Mostrar resultados
+logStep('4/4', 'Build summary:');
+console.log('');
+
+// Leer archivos generados
+const files = fs.readdirSync(distDir).filter(f => f.endsWith('.js'));
+
+if (files.length === 0) {
+  logError('No files generated!');
+  process.exit(1);
+}
+
+// Tabla de resultados
+console.log(`${colors.cyan}┌────────────────────────────────┬──────────────┬──────────────┐${colors.reset}`);
+console.log(`${colors.cyan}│${colors.reset} ${colors.bright}File${colors.reset}                           ${colors.cyan}│${colors.reset} ${colors.bright}Size${colors.reset}         ${colors.cyan}│${colors.reset} ${colors.bright}Gzip${colors.reset}         ${colors.cyan}│${colors.reset}`);
+console.log(`${colors.cyan}├────────────────────────────────┼──────────────┼──────────────┤${colors.reset}`);
+
+let totalSize = 0;
+
+files.forEach(file => {
+  const filePath = path.join(distDir, file);
+  const stats = fs.statSync(filePath);
+  const size = stats.size;
+  totalSize += size;
+
+  // Calcular gzip estimado (aproximadamente 30% del original para código ofuscado)
+  const gzipSize = Math.round(size * 0.3);
+
+  const sizeStr = formatSize(size).padEnd(10);
+  const gzipStr = formatSize(gzipSize).padEnd(10);
+  const fileStr = file.padEnd(30);
+
+  console.log(`${colors.cyan}│${colors.reset} ${fileStr} ${colors.cyan}│${colors.reset} ${sizeStr} ${colors.cyan}│${colors.reset} ${gzipStr} ${colors.cyan}│${colors.reset}`);
+});
+
+console.log(`${colors.cyan}├────────────────────────────────┼──────────────┼──────────────┤${colors.reset}`);
+console.log(`${colors.cyan}│${colors.reset} ${colors.bright}Total${colors.reset}                          ${colors.cyan}│${colors.reset} ${formatSize(totalSize).padEnd(10)} ${colors.cyan}│${colors.reset} ${formatSize(Math.round(totalSize * 0.3)).padEnd(10)} ${colors.cyan}│${colors.reset}`);
+console.log(`${colors.cyan}└────────────────────────────────┴──────────────┴──────────────┘${colors.reset}`);
+
+console.log('');
+log('Build complete! Files are in dist/', 'green');
+console.log('');
+
+// Mostrar uso
+console.log(`${colors.yellow}Usage:${colors.reset}`);
+console.log(`  ${colors.cyan}Development:${colors.reset}   import WuFramework from './dist/wu-framework.dev.js'`);
+console.log(`  ${colors.cyan}Production:${colors.reset}    import WuFramework from './dist/wu-framework.min.js'`);
+console.log(`  ${colors.cyan}Obfuscated:${colors.reset}    import WuFramework from './dist/wu-framework.obf.js'`);
+console.log(`  ${colors.cyan}Hex Encoded:${colors.reset}   import WuFramework from './dist/wu-framework.hex.js'`);
+console.log(`  ${colors.cyan}UMD (Browser):${colors.reset} <script src="./dist/wu-framework.umd.js"></script>`);
+console.log(`  ${colors.cyan}CommonJS:${colors.reset}      const WuFramework = require('./dist/wu-framework.cjs.js')`);
+console.log('');
+
+// Utilidades
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}