slicejs-web-framework 2.2.7 → 2.2.8

package/Slice/Components/Structural/Controller/Controller.js

@@ -7,14 +7,365 @@ export default class Controller {
       this.classes = new Map();
       this.requestedStyles = new Set(); // ✅ CRÍTICO: Para tracking de CSS cargados
       this.activeComponents = new Map();
-      
+
       // 🚀 OPTIMIZACIÓN: Índice inverso para búsqueda rápida de hijos
       // parentSliceId → Set<childSliceId>
       this.childrenIndex = new Map();
-      
+
+      // 📦 Bundle system
+      this.loadedBundles = new Set();
+      this.bundleConfig = null;
+      this.criticalBundleLoaded = false;
+
       this.idCounter = 0;
    }
 
+   /**
+    * 📦 Initializes bundle system (called automatically when config is loaded)
+    */
+   initializeBundles(config = null) {
+      if (config) {
+         this.bundleConfig = config;
+
+         // Register critical bundle components if available
+         if (config.bundles?.critical) {
+            // The critical bundle should already be loaded, register its components
+            this.loadedBundles.add('critical');
+            // Note: Critical bundle registration is handled by the auto-import
+         }
+         this.criticalBundleLoaded = true;
+      } else {
+         // No bundles available, will use individual component loading
+         this.bundleConfig = null;
+         this.criticalBundleLoaded = false;
+      }
+   }
+
+   /**
+    * 📦 Loads a bundle by name or category
+    */
+   async loadBundle(bundleName) {
+      if (this.loadedBundles.has(bundleName)) {
+         return; // Already loaded
+      }
+
+      try {
+         const bundleInfo = this.bundleConfig?.bundles?.routes?.[bundleName];
+
+         if (!bundleInfo) {
+            console.warn(`Bundle ${bundleName} not found in configuration`);
+            return;
+         }
+
+         const bundlePath = `/bundles/${bundleInfo.file}`;
+
+         // Dynamic import of the bundle
+         const bundleModule = await import(bundlePath);
+
+         // Manually register components from the imported bundle
+         if (bundleModule.SLICE_BUNDLE) {
+            this.registerBundle(bundleModule.SLICE_BUNDLE);
+         }
+
+         this.loadedBundles.add(bundleName);
+
+      } catch (error) {
+         console.warn(`Failed to load bundle ${bundleName}:`, error);
+      }
+   }
+
+   /**
+    * 📦 Registers a bundle's components (called automatically by bundle files)
+    */
+   registerBundleLegacy(bundle) {
+      const { components, metadata } = bundle;
+
+      console.log(`📦 Registering bundle: ${metadata.type} (${metadata.componentCount} components)`);
+
+      // Phase 1: Register templates and CSS for all components first
+      for (const [componentName, componentData] of Object.entries(components)) {
+         try {
+            // Register HTML template
+            if (componentData.html !== undefined && !this.templates.has(componentName)) {
+               const template = document.createElement('template');
+               template.innerHTML = componentData.html || '';
+               this.templates.set(componentName, template);
+            }
+
+            // Register CSS styles
+            if (componentData.css !== undefined && !this.requestedStyles.has(componentName)) {
+               // Use the existing stylesManager to register component styles
+               if (window.slice && window.slice.stylesManager) {
+                  window.slice.stylesManager.registerComponentStyles(componentName, componentData.css || '');
+                  this.requestedStyles.add(componentName);
+               }
+            }
+         } catch (error) {
+            console.warn(`❌ Failed to register assets for ${componentName}:`, error);
+         }
+      }
+
+      // Phase 2: Evaluate all external file dependencies
+      const processedDeps = new Set();
+      for (const [componentName, componentData] of Object.entries(components)) {
+         if (componentData.dependencies) {
+            for (const [depName, depContent] of Object.entries(componentData.dependencies)) {
+               if (!processedDeps.has(depName)) {
+                  try {
+                     // Convert ES6 exports to global assignments
+                     let processedContent = depContent
+                        .replace(/export\s+const\s+(\w+)\s*=/g, 'window.$1 =')
+                        .replace(/export\s+let\s+(\w+)\s*=/g, 'window.$1 =')
+                        .replace(/export\s+var\s+(\w+)\s*=/g, 'window.$1 =')
+                        .replace(/export\s+function\s+(\w+)/g, 'window.$1 = function')
+                        .replace(/export\s+default\s+/g, 'window.defaultExport =')
+                        .replace(/export\s*{\s*([^}]+)\s*}/g, (match, exports) => {
+                           return exports.split(',').map(exp => {
+                              const cleanExp = exp.trim();
+                              const varName = cleanExp.split(' as ')[0].trim();
+                              return `window.${varName} = ${varName};`;
+                           }).join('\n');
+                        })
+                        // Remove any remaining export keywords
+                        .replace(/^\s*export\s+/gm, '');
+
+                     // Evaluate the dependency
+                     try {
+                        new Function('slice', 'customElements', 'window', 'document', processedContent)
+                           (window.slice, window.customElements, window, window.document);
+                     } catch (evalError) {
+                        console.warn(`❌ Failed to evaluate processed dependency ${depName}:`, evalError);
+                        console.warn('Processed content preview:', processedContent.substring(0, 200));
+                        // Try evaluating the original content as fallback
+                        try {
+                           new Function('slice', 'customElements', 'window', 'document', depContent)
+                              (window.slice, window.customElements, window, window.document);
+                           console.log(`✅ Fallback evaluation succeeded for ${depName}`);
+                        } catch (fallbackError) {
+                           console.warn(`❌ Fallback evaluation also failed for ${depName}:`, fallbackError);
+                        }
+                     }
+
+                     processedDeps.add(depName);
+                     console.log(`📄 Dependency loaded: ${depName}`);
+                  } catch (depError) {
+                     console.warn(`⚠️ Failed to load dependency ${depName} for ${componentName}:`, depError);
+                  }
+               }
+            }
+         }
+      }
+
+      // Phase 3: Evaluate all component classes (now that dependencies are available)
+      for (const [componentName, componentData] of Object.entries(components)) {
+         // For JavaScript classes, we need to evaluate the code
+         if (componentData.js && !this.classes.has(componentName)) {
+               try {
+                  // Create evaluation context with dependencies
+                  let evalCode = componentData.js;
+
+                  // Prepend dependencies to make them available
+                  if (componentData.dependencies) {
+                     const depCode = Object.entries(componentData.dependencies)
+                        .map(([depName, depContent]) => {
+                           // Convert ES6 exports to global assignments
+                           return depContent
+                              .replace(/export\s+const\s+(\w+)\s*=/g, 'window.$1 =')
+                              .replace(/export\s+let\s+(\w+)\s*=/g, 'window.$1 =')
+                              .replace(/export\s+function\s+(\w+)/g, 'window.$1 = function')
+                              .replace(/export\s+default\s+/g, 'window.defaultExport =')
+                              .replace(/export\s*{\s*([^}]+)\s*}/g, (match, exports) => {
+                                 return exports.split(',').map(exp => {
+                                    const cleanExp = exp.trim();
+                                    return `window.${cleanExp} = ${cleanExp};`;
+                                 }).join('\n');
+                              });
+                        })
+                        .join('\n\n');
+
+                     evalCode = depCode + '\n\n' + evalCode;
+                  }
+
+                  // Evaluate the complete code
+                  const componentClass = new Function('slice', 'customElements', 'window', 'document', `
+                     "use strict";
+                     ${evalCode}
+                     return ${componentName};
+                  `)(window.slice, window.customElements, window, window.document);
+
+                  if (componentClass) {
+                     this.classes.set(componentName, componentClass);
+                     console.log(`📝 Class registered for: ${componentName}`);
+                  }
+               } catch (error) {
+                  console.warn(`❌ Failed to evaluate class for ${componentName}:`, error);
+                  console.warn('Code that failed:', componentData.js.substring(0, 200) + '...');
+               }
+            }
+         }
+      }
+
+
+
+   /**
+    * 📦 New bundle registration method (simplified and robust)
+    */
+   registerBundle(bundle) {
+      const { components, metadata } = bundle;
+
+      console.log(`📦 Registering bundle: ${metadata.type} (${metadata.componentCount} components)`);
+
+      // Phase 1: Register all templates and CSS first
+      for (const [componentName, componentData] of Object.entries(components)) {
+         try {
+            if (componentData.html !== undefined && !this.templates.has(componentName)) {
+               const template = document.createElement('template');
+               template.innerHTML = componentData.html || '';
+               this.templates.set(componentName, template);
+            }
+
+            if (componentData.css !== undefined && !this.requestedStyles.has(componentName)) {
+               if (window.slice && window.slice.stylesManager) {
+                  window.slice.stylesManager.registerComponentStyles(componentName, componentData.css || '');
+                  this.requestedStyles.add(componentName);
+                  console.log(`🎨 CSS registered for: ${componentName}`);
+               }
+            }
+         } catch (error) {
+            console.warn(`❌ Failed to register assets for ${componentName}:`, error);
+         }
+      }
+
+      // Phase 2: Evaluate all external file dependencies first
+      const processedDeps = new Set();
+      for (const [componentName, componentData] of Object.entries(components)) {
+         if (componentData.externalDependencies) {
+            for (const [depName, depContent] of Object.entries(componentData.externalDependencies)) {
+               if (!processedDeps.has(depName)) {
+                  try {
+                     // Process ES6 exports to make the code evaluable
+                     let processedContent = depContent
+                        // Convert named exports: export const varName = ... → window.varName = ...
+                        .replace(/export\s+const\s+(\w+)\s*=\s*/g, 'window.$1 = ')
+                        .replace(/export\s+let\s+(\w+)\s*=\s*/g, 'window.$1 = ')
+                        .replace(/export\s+function\s+(\w+)/g, 'window.$1 = function')
+                        .replace(/export\s+default\s+/g, 'window.defaultExport = ')
+                        // Handle export { var1, var2 } statements
+                        .replace(/export\s*{\s*([^}]+)\s*}/g, (match, exportsStr) => {
+                           const exports = exportsStr.split(',').map(exp => exp.trim().split(' as ')[0].trim());
+                           return exports.map(varName => `window.${varName} = ${varName};`).join('\n');
+                        })
+                        // Remove any remaining export keywords
+                        .replace(/^\s*export\s+/gm, '');
+
+                     // Evaluate the processed content
+                     new Function('slice', 'customElements', 'window', 'document', processedContent)
+                        (window.slice, window.customElements, window, window.document);
+
+                     processedDeps.add(depName);
+                     console.log(`📄 External dependency loaded: ${depName}`);
+                  } catch (depError) {
+                     console.warn(`⚠️ Failed to load external dependency ${depName}:`, depError);
+                     console.warn('Original content preview:', depContent.substring(0, 200));
+                  }
+               }
+            }
+         }
+      }
+
+      // Phase 3: Evaluate all component classes (external dependencies are now available)
+      for (const [componentName, componentData] of Object.entries(components)) {
+         if (componentData.js && !this.classes.has(componentName)) {
+            try {
+               // Simple evaluation
+               const componentClass = new Function('slice', 'customElements', 'window', 'document', `
+                  ${componentData.js}
+                  return ${componentName};
+               `)(window.slice, window.customElements, window, window.document);
+
+               if (componentClass) {
+                  this.classes.set(componentName, componentClass);
+                  console.log(`📝 Class registered for: ${componentName}`);
+               }
+            } catch (error) {
+               console.warn(`❌ Failed to evaluate class for ${componentName}:`, error);
+               // Continue with other components instead of failing completely
+            }
+         }
+      }
+
+      console.log(`✅ Bundle registration completed: ${metadata.componentCount} components processed`);
+   }
+
+   /**
+    * 📦 Determines which bundle to load for a component
+    */
+   getBundleForComponent(componentName) {
+      if (!this.bundleConfig?.bundles) return null;
+
+      // Check if component is in critical bundle
+      if (this.bundleConfig.bundles.critical?.components?.includes(componentName)) {
+         return 'critical';
+      }
+
+      // Find component in route bundles
+      if (this.bundleConfig.bundles.routes) {
+         for (const [bundleName, bundleInfo] of Object.entries(this.bundleConfig.bundles.routes)) {
+            if (bundleInfo.components?.includes(componentName)) {
+               return bundleName;
+            }
+         }
+      }
+
+      return null;
+   }
+
+   /**
+    * 📦 Checks if a component is available from loaded bundles
+    */
+   isComponentFromBundle(componentName) {
+      if (!this.bundleConfig?.bundles) return false;
+
+      // Check critical bundle
+      if (this.bundleConfig.bundles.critical?.components?.includes(componentName)) {
+         return this.criticalBundleLoaded;
+      }
+
+      // Check route bundles
+      if (this.bundleConfig.bundles.routes) {
+         for (const [bundleName, bundleInfo] of Object.entries(this.bundleConfig.bundles.routes)) {
+            if (bundleInfo.components?.includes(componentName)) {
+               return this.loadedBundles.has(bundleName);
+            }
+         }
+      }
+
+      return false;
+   }
+
+   /**
+    * 📦 Gets component data from loaded bundles
+    */
+   getComponentFromBundle(componentName) {
+      if (!this.bundleConfig?.bundles) return null;
+
+      // Find component in any loaded bundle
+      const allBundles = [
+         { name: 'critical', data: this.bundleConfig.bundles.critical },
+         ...Object.entries(this.bundleConfig.bundles.routes || {}).map(([name, data]) => ({ name, data }))
+      ];
+
+      for (const { name: bundleName, data: bundleData } of allBundles) {
+         if (bundleData?.components?.includes(componentName) && this.loadedBundles.has(bundleName)) {
+            // Find the bundle file and extract component data
+            // This is a simplified version - in practice you'd need to access the loaded bundle data
+            return { bundleName, componentName };
+         }
+      }
+
+      return null;
+   }
+
    logActiveComponents() {
       this.activeComponents.forEach((component) => {
          let parent = component.parentComponent;

package/Slice/Slice.js

@@ -11,6 +11,8 @@ export default class Slice {
       this.loggerConfig = sliceConfig.logger;
       this.debuggerConfig = sliceConfig.debugger;
       this.loadingConfig = sliceConfig.loading;
+
+      // 📦 Bundle system is initialized automatically via import in index.js
    }
 
    async getClass(module) {
@@ -46,8 +48,17 @@ export default class Slice {
          return null;
       }
 
+      // 📦 Try to load from bundles first
+      const bundleName = this.controller.getBundleForComponent(componentName);
+      if (bundleName && !this.controller.loadedBundles.has(bundleName)) {
+         await this.controller.loadBundle(bundleName);
+      }
+
       let componentCategory = this.controller.componentCategories.get(componentName);
 
+      // 📦 Check if component is already available from loaded bundles
+      const isFromBundle = this.controller.isComponentFromBundle(componentName);
+
       if (componentCategory === 'Structural') {
          this.logger.logError(
             'Slice',
@@ -57,27 +68,31 @@ export default class Slice {
          return null;
       }
 
-      let isVisual = slice.paths.components[componentCategory].type === "Visual";     
+      let isVisual = slice.paths.components[componentCategory].type === "Visual";
       let modulePath = `${slice.paths.components[componentCategory].path}/${componentName}/${componentName}.js`;
 
       // Load template, class, and CSS concurrently if needed
       try {
-         const loadTemplate =
-            isVisual && !this.controller.templates.has(componentName)
-               ? this.controller.fetchText(componentName, 'html', componentCategory)
-               : Promise.resolve(null);
+         // 📦 Skip individual loading if component is available from bundles
+         const loadTemplate = (isFromBundle || !isVisual || this.controller.templates.has(componentName))
+            ? Promise.resolve(null)
+            : this.controller.fetchText(componentName, 'html', componentCategory);
 
-         const loadClass = !this.controller.classes.has(componentName)
-            ? this.getClass(modulePath)
-            : Promise.resolve(null);
+         const loadClass = (isFromBundle || this.controller.classes.has(componentName))
+            ? Promise.resolve(null)
+            : this.getClass(modulePath);
 
-         const loadCSS =
-            isVisual && !this.controller.requestedStyles.has(componentName)
-               ? this.controller.fetchText(componentName, 'css', componentCategory)
-               : Promise.resolve(null);
+         const loadCSS = (isFromBundle || !isVisual || this.controller.requestedStyles.has(componentName))
+            ? Promise.resolve(null)
+            : this.controller.fetchText(componentName, 'css', componentCategory);
 
          const [html, ComponentClass, css] = await Promise.all([loadTemplate, loadClass, loadCSS]);
 
+         // 📦 If component is from bundle but not in cache, it should have been registered by registerBundle
+         if (isFromBundle) {
+            console.log(`📦 Using bundled component: ${componentName}`);
+         }
+
          if (html || html === '') {
             const template = document.createElement('template');
             template.innerHTML = html;
@@ -219,4 +234,16 @@ async function init() {
    
 }
 
-await init();
+   await init();
+
+   // Initialize bundles if available
+   try {
+      const { initializeBundles } = await import('/bundles/bundle.config.js');
+      if (initializeBundles) {
+         await initializeBundles(window.slice);
+         console.log('📦 Bundles initialized automatically');
+      }
+   } catch (error) {
+      // Bundles not available, continue with individual component loading
+      console.log('📄 Using individual component loading (no bundles found)');
+   }

package/api/index.js

@@ -1,6 +1,7 @@
 // api/index.js - Seguridad automática sin configuración
 import express from 'express';
 import path from 'path';
+import fs from 'fs';
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
 import { 
@@ -60,6 +61,15 @@ app.use(securityMiddleware({
 // MIDDLEWARES DE APLICACIÓN
 // ==============================================
 
+// Middleware global para archivos JavaScript con MIME types correctos
+app.use((req, res, next) => {
+  if (req.path.endsWith('.js')) {
+    // Forzar headers correctos para TODOS los archivos .js
+    res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+  }
+  next();
+});
+
 // Middleware para parsear JSON y formularios
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
@@ -81,6 +91,76 @@ app.use((req, res, next) => {
 // ARCHIVOS ESTÁTICOS (DESPUÉS DE SEGURIDAD)
 // ==============================================
 
+// Función de utilidad para verificar si existe el directorio bundles
+function bundlesDirectoryExists() {
+  const bundleDir = path.join(__dirname, `../${folderDeployed}`, 'bundles');
+  return fs.existsSync(bundleDir) && fs.statSync(bundleDir).isDirectory();
+}
+
+// Capturar todas las peticiones a bundles para debugging
+app.use('/bundles/', (req, res, next) => {
+  console.log(`🔍 Bundle request: ${req.method} ${req.originalUrl}`);
+  next();
+});
+
+// Middleware personalizado para archivos de bundles con MIME types correctos
+// ⚠️ DEBE IR ANTES del middleware general para tener prioridad
+app.use('/bundles/', (req, res, next) => {
+  // Verificar si existe el directorio bundles
+  if (!bundlesDirectoryExists()) {
+    console.log(`ℹ️ Bundles directory does not exist, skipping bundle processing`);
+    return next(); // Continuar con el siguiente middleware
+  }
+
+  // Solo procesar archivos .js
+  if (req.path.endsWith('.js')) {
+    const filePath = path.join(__dirname, `../${folderDeployed}`, 'bundles', req.path);
+    console.log(`📂 Processing bundle: ${req.path} -> ${filePath}`);
+
+    // Verificar que el archivo existe
+    if (fs.existsSync(filePath)) {
+      try {
+        // Leer y servir el archivo con headers correctos
+        const fileContent = fs.readFileSync(filePath, 'utf8');
+        res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate'); // No cachear para permitir actualizaciones en tiempo real
+        res.setHeader('Pragma', 'no-cache');
+        res.setHeader('Expires', '0');
+        console.log(`✅ Serving bundle: ${req.path} (${fileContent.length} bytes, ${Buffer.byteLength(fileContent, 'utf8')} bytes UTF-8)`);
+        return res.send(fileContent);
+      } catch (error) {
+        console.log(`❌ Error reading bundle file: ${error.message}`);
+        return res.status(500).send('Error reading bundle file');
+      }
+    } else {
+      console.log(`❌ Bundle file not found: ${filePath}`);
+      // Listar archivos disponibles para debugging
+      try {
+        const bundleDir = path.join(__dirname, `../${folderDeployed}`, 'bundles');
+        if (fs.existsSync(bundleDir)) {
+          const files = fs.readdirSync(bundleDir);
+          console.log(`📁 Available files in bundles: ${files.join(', ')}`);
+        }
+      } catch (e) {
+        console.log(`❌ Could not list bundle directory: ${e.message}`);
+      }
+      return res.status(404).send('Bundle file not found');
+    }
+  }
+
+  // Para archivos no .js, continuar con el middleware estático normal
+  next();
+});
+
+// Servir otros archivos de bundles (CSS, etc.) con el middleware estático normal
+// Solo si existe el directorio bundles
+if (bundlesDirectoryExists()) {
+  app.use('/bundles/', express.static(path.join(__dirname, `../${folderDeployed}`, 'bundles')));
+  console.log(`📦 Bundles directory found, serving static files`);
+} else {
+  console.log(`ℹ️ Bundles directory not found, skipping static bundle serving`);
+}
+
 // Servir framework Slice.js
 app.use('/Slice/', express.static(path.join(__dirname, '..', 'node_modules', 'slicejs-web-framework', 'Slice')));
 
@@ -108,40 +188,6 @@ app.get('/api/status', (req, res) => {
   });
 });
 
-// Ruta para verificar estado de seguridad
-app.get('/api/security-status', (req, res) => {
-  const host = req.get('Host');
-  
-  res.json({
-    frameworkProtection: {
-      status: 'active',
-      mode: 'automatic',
-      description: 'Allows framework file loading from application, blocks direct browser access',
-      detectedHost: host
-    },
-    blockedPaths: [
-      '/node_modules/*',
-      '/package.json',
-      '/.env',
-      '/.git/*'
-    ],
-    protectedPaths: {
-      directAccessBlocked: [
-        '/Slice/Components/Structural/*',
-        '/Slice/Core/*',
-        '/Slice/Services/*'
-      ],
-      allowedFrom: 'Any request with valid Referer matching current host'
-    },
-    howItWorks: {
-      automatic: true,
-      config: 'No configuration needed',
-      localhost: 'Works automatically',
-      customDomain: 'Works automatically',
-      detection: 'Uses Referer and Host headers'
-    }
-  });
-});
 
 // ==============================================
 // SPA FALLBACK

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "",
   "engines": {
     "node": ">=20"