slicejs-web-framework 2.0.1 → 2.1.0

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

@@ -276,10 +276,126 @@ export default class Controller {
       return usedProps;
    }
 
-   destroyComponent(component) {
-      const sliceId = component.sliceId;
-      this.activeComponents.delete(sliceId);
-      component.remove();
+   /**
+    * Destruye uno o múltiples componentes
+    * @param {HTMLElement|Array<HTMLElement>|string|Array<string>} components 
+    *        - Componente individual (HTMLElement)
+    *        - Array de componentes
+    *        - sliceId individual (string)
+    *        - Array de sliceIds
+    * @returns {number} Cantidad de componentes destruidos
+    */
+   destroyComponent(components) {
+      // Normalizar entrada a array
+      const toDestroy = Array.isArray(components) ? components : [components];
+      let destroyedCount = 0;
+
+      for (const item of toDestroy) {
+         let component = null;
+
+         // Si es string, buscar el componente por sliceId
+         if (typeof item === 'string') {
+            component = this.activeComponents.get(item);
+            
+            if (!component) {
+               slice.logger.logWarning('Controller', `Component with sliceId "${item}" not found`);
+               continue;
+            }
+         } 
+         // Si es un componente directamente
+         else if (item && item.sliceId) {
+            component = item;
+         } 
+         else {
+            slice.logger.logWarning('Controller', `Invalid component or sliceId provided to destroyComponent`);
+            continue;
+         }
+
+         // Ejecutar hook beforeDestroy si existe
+         if (typeof component.beforeDestroy === 'function') {
+            try {
+               component.beforeDestroy();
+            } catch (error) {
+               slice.logger.logError('Controller', `Error in beforeDestroy for ${component.sliceId}`, error);
+            }
+         }
+
+         // Eliminar del mapa de componentes activos
+         this.activeComponents.delete(component.sliceId);
+
+         // Remover del DOM si está conectado
+         if (component.isConnected) {
+            component.remove();
+         }
+
+         destroyedCount++;
+      }
+
+      if (destroyedCount > 0) {
+         slice.logger.logInfo('Controller', `Destroyed ${destroyedCount} component(s)`);
+      }
+
+      return destroyedCount;
+   }
+
+   /**
+    * Destruye todos los componentes Slice dentro de un contenedor
+    * @param {HTMLElement} container - Elemento contenedor
+    * @returns {number} Cantidad de componentes destruidos
+    */
+   destroyByContainer(container) {
+      if (!container) {
+         slice.logger.logWarning('Controller', 'No container provided to destroyByContainer');
+         return 0;
+      }
+
+      // Buscar todos los elementos que sean componentes Slice
+      const sliceComponents = container.querySelectorAll('[slice-id]');
+      const sliceIdsToDestroy = [];
+
+      sliceComponents.forEach(element => {
+         const sliceId = element.getAttribute('slice-id') || element.sliceId;
+         if (sliceId && this.activeComponents.has(sliceId)) {
+            sliceIdsToDestroy.push(sliceId);
+         }
+      });
+
+      // Destruir usando el método principal
+      const count = this.destroyComponent(sliceIdsToDestroy);
+      
+      if (count > 0) {
+         slice.logger.logInfo('Controller', `Destroyed ${count} component(s) from container`);
+      }
+
+      return count;
+   }
+
+   /**
+    * Destruye componentes cuyos sliceId coincidan con un patrón
+    * @param {string|RegExp} pattern - Patrón a buscar (string o expresión regular)
+    * @returns {number} Cantidad de componentes destruidos
+    */
+   destroyByPattern(pattern) {
+      const componentsToDestroy = [];
+      
+      // Convertir string a RegExp si es necesario
+      const regex = pattern instanceof RegExp ? pattern : new RegExp(pattern);
+
+      // Buscar componentes que coincidan con el patrón
+      for (const [sliceId, component] of this.activeComponents) {
+         if (regex.test(sliceId)) {
+            componentsToDestroy.push(component);
+         }
+      }
+
+      // Destruir usando el método principal
+      const count = this.destroyComponent(componentsToDestroy);
+      
+      if (count > 0) {
+         slice.logger.logInfo('Controller', `Destroyed ${count} component(s) matching pattern: ${pattern}`);
+      }
+
+      return count;
    }
 }
 

package/Slice/Slice.js

@@ -11,7 +11,6 @@ export default class Slice {
       this.loggerConfig = sliceConfig.logger;
       this.debuggerConfig = sliceConfig.debugger;
       this.loadingConfig = sliceConfig.loading;
-      this.productionConfig = sliceConfig.production;
    }
 
    async getClass(module) {
@@ -24,7 +23,7 @@ export default class Slice {
    }
 
    isProduction(){
-      return this.productionConfig.enabled;
+      return true;
    }
 
    getComponent(componentSliceId) {

package/api/index.js

@@ -14,35 +14,20 @@ const app = express();
 
 // Parsear argumentos de línea de comandos
 const args = process.argv.slice(2);
-let runMode = 'development'; // Default
 
-// Detectar modo basado en argumentos
-if (args.includes('--production') || args.includes('--prod')) {
-  runMode = 'production';
-} else if (args.includes('--development') || args.includes('--dev')) {
-  runMode = 'development';
-}
-
-// También mantener compatibilidad con NODE_ENV como fallback
-if (!args.length) {
-  const NODE_ENV = process.env.NODE_ENV || 'development';
-  runMode = NODE_ENV === 'production' ? 'production' : 'development';
-}
+// Siempre usar development mode (ignorar argumentos de production)
+const runMode = 'development';
+const folderDeployed = 'src';
 
 // Obtener puerto desde sliceConfig.json, con fallback a process.env.PORT
 const PORT = sliceConfig.server?.port || process.env.PORT || 3001;
 
-// Determinar directorio a servir basado en argumentos
-let folderDeployed;
-if (runMode === 'production') {
-  folderDeployed = 'dist';
-} else {
-  folderDeployed = 'src';
-}
-
 console.log(`🚀 Starting Slice.js server in ${runMode} mode`);
 console.log(`📁 Serving files from: /${folderDeployed}`);
 
+app.use('/Slice/', express.static(path.join(__dirname, '..', 'node_modules', 'slicejs-web-framework', 'Slice')));
+
+
 // Middleware para servir archivos estáticos
 app.use(express.static(path.join(__dirname, `../${folderDeployed}`)));
 
@@ -77,7 +62,7 @@ app.get('/api/status', (req, res) => {
 
 // SPA fallback - servir index.html para rutas no encontradas
 app.get('*', (req, res) => {
-  const indexPath = path.join(__dirname, `../${folderDeployed}`, 'index.html');
+  const indexPath = path.join(__dirname, `../${folderDeployed}`,"App", 'index.html');
   res.sendFile(indexPath, (err) => {
     if (err) {
       res.status(404).send(`
@@ -95,24 +80,29 @@ app.get('*', (req, res) => {
 
 function startServer() {
   server = app.listen(PORT, () => {
-    console.log(`✅ Server running at http://localhost:${PORT}`);
-    console.log(`📂 Mode: ${runMode} (serving from /${folderDeployed})`);
-    
-    if (runMode === 'development') {
-      console.log('🔄 Development mode: Changes in /src will require server restart');
-    } else {
-      console.log('⚡ Production mode: Serving optimized files from /dist');
-    }
+    // Limpiar consola y mostrar banner de inicio
+    console.clear();
+    showWelcomeBanner();
     
-    console.log('🛑 Press Ctrl+C to stop');
-    console.log('\n💡 Available commands:');
-    console.log('  - Development: npm run slice:dev');
-    console.log('  - Production:  npm run slice:start');
-    console.log('  - Build:       npm run slice:build');
+    // Información del servidor
+    console.log(`✅ Server running at ${'\x1b[36m'}http://localhost:${PORT}${'\x1b[0m'}`);
+    console.log(`📂 Mode: ${'\x1b[32m'}${runMode}${'\x1b[0m'} (serving from ${'\x1b[33m'}/${folderDeployed}${'\x1b[0m'})`);
+    console.log(`🔄 ${'\x1b[32m'}Development mode${'\x1b[0m'}: Changes in /src are served instantly`);
+    console.log(`🛑 Press ${'\x1b[31m'}Ctrl+C${'\x1b[0m'} to stop\n`);
   });
 
-  // Siempre mostrar menú interactivo
-  setTimeout(showInteractiveMenu, 1000);
+  // Mostrar menú interactivo después de un momento
+  setTimeout(showInteractiveMenu, 1500);
+}
+
+function showWelcomeBanner() {
+  const banner = `
+${'\x1b[36m'}╔══════════════════════════════════════════════════╗${'\x1b[0m'}
+${'\x1b[36m'}║${'\x1b[0m'}              ${'\x1b[1m'}🍰 SLICE.JS SERVER${'\x1b[0m'}                ${'\x1b[36m'}║${'\x1b[0m'}
+${'\x1b[36m'}║${'\x1b[0m'}            ${'\x1b[90m'}Development Environment${'\x1b[0m'}             ${'\x1b[36m'}║${'\x1b[0m'}
+${'\x1b[36m'}╚══════════════════════════════════════════════════╝${'\x1b[0m'}
+`;
+  console.log(banner);
 }
 
 async function showInteractiveMenu() {

package/package.json

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