slicejs-web-framework 3.4.4 → 3.5.1

package/Slice/tests/leak-orphans.test.js

@@ -0,0 +1,131 @@
+// Real-Controller tests for the dev-mode leak detector (findOrphans + criteria).
+// Loads the REAL Controller via the resolve hook (same pattern as
+// destroy-cascade.test.js) and drives it with a minimal fake DOM. Fake nodes are
+// made `instanceof HTMLElement` because findOrphans filters on that.
+import { register } from 'node:module';
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+globalThis.alert = () => {};
+register(new URL('./fixtures/real-runtime-loader.mjs', import.meta.url));
+
+globalThis.HTMLElement = class HTMLElement {};
+globalThis.slice = {
+   logger: { logError() {}, logWarning() {}, logInfo() {} },
+   events: null,
+};
+
+const { default: Controller } = await import('../Components/Structural/Controller/Controller.js');
+
+function mkEl(sliceId, children = []) {
+   return Object.assign(Object.create(HTMLElement.prototype), {
+      sliceId,
+      tagName: 'SLICE-X',
+      isConnected: true,
+      parentComponent: null,
+      _children: children,
+      querySelectorAll() {
+         const out = [];
+         const walk = (n) => { for (const c of n._children) { out.push(c); walk(c); } };
+         walk(this);
+         return out;
+      },
+      setAttribute() {},
+      remove() { this.isConnected = false; },
+   });
+}
+
+function flatten(root) {
+   const out = [root];
+   for (const c of root._children) out.push(...flatten(c));
+   return out;
+}
+
+function buildTree(controller, root) {
+   for (const node of flatten(root)) controller.registerComponent(node);
+   controller.registerComponentsRecursively(root);
+}
+
+test('a built-then-detached component (no destroy) IS flagged', () => {
+   const c = new Controller();
+   const comp = mkEl('leaky');
+   buildTree(c, comp);
+   comp.isConnected = false; // simulate innerHTML='' / remove() without destroyComponent
+
+   const orphans = c.findOrphans();
+   assert.equal(orphans.length, 1, 'one orphan');
+   assert.equal(orphans[0].sliceId, 'leaky');
+   assert.ok(orphans[0].retainPath.includes('Object(leaky)') || orphans[0].retainPath.length >= 1);
+});
+
+test('a connected component is NOT flagged', () => {
+   const c = new Controller();
+   const comp = mkEl('alive');
+   buildTree(c, comp);
+   assert.equal(c.findOrphans().length, 0);
+});
+
+test('__sliceCached components are excluded (Route/MultiRoute cache)', () => {
+   const c = new Controller();
+   const comp = mkEl('cachedView');
+   buildTree(c, comp);
+   comp.isConnected = false;
+   comp.__sliceCached = true;
+   assert.equal(c.findOrphans().length, 0);
+});
+
+test('router-managed route-* sliceIds are excluded', () => {
+   const c = new Controller();
+   const comp = mkEl('route-Home');
+   buildTree(c, comp);
+   comp.isConnected = false;
+   assert.equal(c.findOrphans().length, 0);
+});
+
+test('ancestor de-dup: only the detached root is reported', () => {
+   const c = new Controller();
+   const child = mkEl('child');
+   const parent = mkEl('parent', [child]);
+   buildTree(c, parent);
+   parent.isConnected = false;
+   child.isConnected = false;
+
+   const orphans = c.findOrphans();
+   assert.equal(orphans.length, 1, 'only the root, not the descendant');
+   assert.equal(orphans[0].sliceId, 'parent');
+});
+
+test('descendants of a cached subtree are NOT flagged', () => {
+   const c = new Controller();
+   const child = mkEl('child');
+   const parent = mkEl('parent', [child]);
+   buildTree(c, parent);
+   parent.__sliceCached = true; // cached route root
+   parent.isConnected = false;
+   child.isConnected = false;
+   assert.equal(c.findOrphans().length, 0);
+});
+
+test('app-registered exclusion predicate is honored', () => {
+   const c = new Controller();
+   const comp = mkEl('special');
+   buildTree(c, comp);
+   comp.isConnected = false;
+   c.registerLeakExclusion((node) => node.sliceId === 'special');
+   assert.equal(c.findOrphans().length, 0);
+});
+
+test('growth heuristic trips on monotonic increase and resets on shrink', () => {
+   const c = new Controller();
+   assert.equal(c.isGrowthMonotonic(), false, 'needs >= 5 samples');
+
+   for (let i = 0; i < 5; i++) {
+      c.registerComponent(mkEl(`g${i}`));
+      c.sampleComponentGrowth();
+   }
+   assert.equal(c.isGrowthMonotonic(), true, 'sizes 1..5 are monotonic growth');
+
+   c.destroyComponent('g4');
+   c.sampleComponentGrowth(); // size dips
+   assert.equal(c.isGrowthMonotonic(), false, 'a shrink breaks the monotonic signal');
+});

package/api/{middleware → framework}/securityMiddleware.js

@@ -1,4 +1,4 @@
-// api/middleware/securityMiddleware.js
+// api/framework/securityMiddleware.js
 import path from 'path';
 
 /**
@@ -7,7 +7,17 @@ import path from 'path';
  */
 export function securityMiddleware(options = {}) {
   const {
-    allowedExtensions = ['.js', '.css', '.html', '.json', '.svg', '.png', '.jpg', '.jpeg', '.gif', '.woff', '.woff2', '.ttf'],
+    allowedExtensions = [
+      '.js', '.mjs', '.cjs',
+      '.css',
+      '.html', '.htm',
+      '.json',
+      '.svg', '.png', '.jpg', '.jpeg', '.gif', '.webp', '.avif', '.ico',
+      '.woff', '.woff2', '.ttf', '.otf', '.eot',
+      '.txt', '.xml', '.pdf',
+      '.webm', '.mp4', '.mp3', '.wav', '.ogg',
+      '.wasm'
+    ],
     blockedPaths = [
       '/node_modules',
       '/package.json',
@@ -15,7 +25,8 @@ export function securityMiddleware(options = {}) {
       '/.env',
       '/.git'
     ],
-    allowPublicAssets = true
+    allowPublicAssets = true,
+    publicPaths = ['/assets', '/public', '/images', '/styles']
   } = options;
 
   return (req, res, next) => {
@@ -35,9 +46,8 @@ export function securityMiddleware(options = {}) {
       });
     }
 
-    // 2. Permitir acceso a assets públicos
+    // 2. Permitir acceso a assets públicos (según sliceConfig.publicFolders)
     if (allowPublicAssets) {
-      const publicPaths = ['/assets', '/public', '/images', '/styles'];
       const isPublicAsset = publicPaths.some(publicPath => 
         requestPath.startsWith(publicPath)
       );
@@ -92,9 +102,7 @@ export function sliceFrameworkProtection(options = {}) {
 
     // Rutas del framework que requieren verificación
     const frameworkPaths = [
-      '/Slice/Components/Structural',
-      '/Slice/Core',
-      '/Slice/Services'
+      '/Slice/Components/Structural'
     ];
 
     const isFrameworkFile = frameworkPaths.some(fwPath => 
@@ -182,72 +190,8 @@ export function suspiciousRequestLogger() {
   };
 }
 
-/**
- * Middleware para bloquear acceso directo vía navegador (typing en la URL)
- * pero permitir peticiones desde scripts (fetch, import, etc.)
- */
-export function directAccessProtection(options = {}) {
-  const { protectedPaths = [] } = options;
-  
-  return (req, res, next) => {
-    const requestPath = req.path;
-    
-    const isProtectedPath = protectedPaths.some(protectedPath => 
-      requestPath.startsWith(protectedPath)
-    );
-    
-    if (!isProtectedPath) {
-      return next();
-    }
-
-    // Detectar acceso directo: 
-    // - No tiene Referer (usuario escribió la URL directamente)
-    // - Accept header indica navegación HTML
-    const referer = req.get('Referer');
-    const accept = req.get('Accept') || '';
-    
-    const isDirectBrowserAccess = !referer && accept.includes('text/html');
-    
-    if (isDirectBrowserAccess) {
-      console.warn(`🚫 Blocked direct browser access: ${requestPath}`);
-      return res.status(403).send(`
-        <!DOCTYPE html>
-        <html>
-        <head>
-          <title>Access Denied</title>
-          <style>
-            body { 
-              font-family: system-ui; 
-              max-width: 600px; 
-              margin: 100px auto; 
-              padding: 20px;
-            }
-            h1 { color: #d32f2f; }
-            code { 
-              background: #f5f5f5; 
-              padding: 2px 6px; 
-              border-radius: 3px;
-            }
-          </style>
-        </head>
-        <body>
-          <h1>🚫 Direct Access Denied</h1>
-          <p>This file cannot be accessed directly.</p>
-          <p>Path: <code>${requestPath}</code></p>
-          <p>Framework files are automatically loaded by the application.</p>
-          <p><a href="/">← Return to application</a></p>
-        </body>
-        </html>
-      `);
-    }
-
-    next();
-  };
-}
-
 export default {
   securityMiddleware,
   sliceFrameworkProtection,
-  suspiciousRequestLogger,
-  directAccessProtection
-};
+  suspiciousRequestLogger
+};

package/api/framework/server.js

@@ -0,0 +1,333 @@
+// api/framework/server.js - Servidor Express encapsulado del framework
+import express from 'express';
+import path from 'path';
+import fs from 'fs';
+import compression from 'compression';
+import {
+  securityMiddleware,
+  sliceFrameworkProtection,
+  suspiciousRequestLogger
+} from './securityMiddleware.js';
+import { createPublicEnvProvider } from './publicEnvResolver.js';
+
+export function createSliceServer(options = {}) {
+  const projectRoot = options.projectRoot || process.cwd();
+  const runMode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
+  const folderDeployed = runMode === 'production' ? 'dist' : 'src';
+
+  let sliceConfig = {};
+  try {
+    const configPath = path.join(projectRoot, 'src', 'sliceConfig.json');
+    if (fs.existsSync(configPath)) {
+      sliceConfig = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+    }
+  } catch {
+    // usa defaults si no se puede leer la config
+  }
+
+  let frameworkVersion = '';
+  try {
+    const pkgPath = new URL('../../package.json', import.meta.url);
+    frameworkVersion = JSON.parse(fs.readFileSync(pkgPath, 'utf8')).version;
+  } catch {
+    frameworkVersion = 'unknown';
+  }
+
+  const PORT = process.env.PORT || sliceConfig.server?.port || 3001;
+
+  const normalizedPublicFolders = (Array.isArray(sliceConfig.publicFolders) ? sliceConfig.publicFolders : [])
+    .filter((entry) => typeof entry === 'string')
+    .map((entry) => entry.trim())
+    .filter((entry) => entry.length > 0)
+    .map((entry) => (entry.startsWith('/') ? entry : `/${entry}`));
+
+  const publicEnvProvider = createPublicEnvProvider({
+    mode: runMode,
+    envFilePath: path.join(projectRoot, '.env')
+  });
+
+  const app = express();
+
+  // ==============================================
+  // MIDDLEWARES DE SEGURIDAD (APLICAR PRIMERO)
+  // ==============================================
+
+  // 1. Logger de peticiones sospechosas (solo observación, no bloquea)
+  app.use(suspiciousRequestLogger());
+
+  // 2. Protección del framework - TOTALMENTE AUTOMÁTICA
+  app.use(sliceFrameworkProtection({ port: PORT }));
+
+  app.use(securityMiddleware({
+    publicPaths: normalizedPublicFolders
+  }));
+
+  // ==============================================
+  // MIDDLEWARES DE APLICACIÓN
+  // ==============================================
+
+  // Compresión gzip/brotli para respuestas (threshold 0 = comprimir todo)
+  app.use(compression({ threshold: 0 }));
+
+  // Security headers básicos
+  app.use((req, res, next) => {
+    res.setHeader('X-Content-Type-Options', 'nosniff');
+    res.setHeader('X-Frame-Options', 'DENY');
+    res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
+    next();
+  });
+
+  // Middleware global para archivos JavaScript con MIME types correctos
+  app.use((req, res, next) => {
+    if (req.path.endsWith('.js') || req.path.endsWith('.mjs') || req.path.endsWith('.cjs')) {
+      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 }));
+
+  // Configurar headers de CORS
+  app.use((req, res, next) => {
+    res.header('Access-Control-Allow-Origin', '*');
+    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
+
+    if (req.method === 'OPTIONS') {
+      res.sendStatus(200);
+    } else {
+      next();
+    }
+  });
+
+  // ==============================================
+  // RUNTIME MODE ENDPOINT
+  // ==============================================
+
+  app.get('/slice-env.json', (req, res) => {
+    const payload = publicEnvProvider.getPayload();
+    res.setHeader('Cache-Control', 'no-store');
+    res.setHeader('Pragma', 'no-cache');
+    res.setHeader('Expires', '0');
+    res.json(payload);
+  });
+
+  // ==============================================
+  // PWA — manifest + service worker (dev y prod)
+  // ==============================================
+
+  const servePwaFile = (res, fileName, contentType, extraHeaders = {}) => {
+    const filePath = path.join(projectRoot, folderDeployed, fileName);
+    try {
+      if (fs.existsSync(filePath)) {
+        res.setHeader('Content-Type', contentType);
+        for (const [key, value] of Object.entries(extraHeaders)) res.setHeader(key, value);
+        return res.send(fs.readFileSync(filePath, 'utf8'));
+      }
+    } catch (error) {
+      console.error(`Error reading ${fileName}:`, error);
+      return res.status(500).send(`Error reading ${fileName}`);
+    }
+    return res.status(404).send(`${fileName} not found`);
+  };
+
+  app.get('/service-worker.js', (req, res) => {
+    servePwaFile(res, 'service-worker.js', 'application/javascript; charset=utf-8', {
+      'Cache-Control': 'no-cache, no-store, must-revalidate',
+      'Service-Worker-Allowed': '/',
+    });
+  });
+
+  app.get('/manifest.json', (req, res) => {
+    servePwaFile(res, 'manifest.json', 'application/manifest+json; charset=utf-8');
+  });
+
+  // ==============================================
+  // ARCHIVOS ESTÁTICOS (DESPUÉS DE SEGURIDAD)
+  // ==============================================
+
+  if (runMode === 'production') {
+    app.get('/Slice/Slice.js', (req, res) => {
+      const slicePath = path.join(projectRoot, 'node_modules', 'slicejs-web-framework', 'Slice', 'Slice.js');
+      try {
+        if (fs.existsSync(slicePath)) {
+          res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+          return res.send(fs.readFileSync(slicePath, 'utf8'));
+        }
+      } catch (error) {
+        console.error(`Error reading Slice.js:`, error);
+        return res.status(500).send('Error loading framework');
+      }
+      return res.status(404).send('Slice.js not found');
+    });
+
+    app.use('/Slice', (req, res) => res.status(404).send('Not found'));
+    app.use('/Components', (req, res) => res.status(404).send('Not found'));
+  }
+
+  // Middleware personalizado para archivos de bundles con MIME types correctos
+  app.use('/bundles/', (req, res, next) => {
+    if (req.path.endsWith('.js')) {
+      const filePath = path.join(projectRoot, folderDeployed, 'bundles', req.path);
+      console.log(`📂 Processing bundle: ${req.path} -> ${filePath}`);
+
+      if (fs.existsSync(filePath)) {
+        try {
+          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');
+          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.error(`Error reading bundle file:`, error);
+          return res.status(500).send('Error reading bundle file');
+        }
+      } else {
+        console.log(`❌ Bundle file not found: ${filePath}`);
+        return res.status(404).send('Bundle file not found');
+      }
+    }
+
+    next();
+  });
+
+  app.use('/bundles/', express.static(path.join(projectRoot, folderDeployed, 'bundles')));
+  console.log(`📦 Serving bundles from /${folderDeployed}/bundles`);
+
+  // Servir framework Slice.js (solo development)
+  if (runMode === 'development') {
+    app.use('/Slice/', express.static(path.join(projectRoot, 'node_modules', 'slicejs-web-framework', 'Slice')));
+  }
+
+  if (runMode === 'development') {
+    app.use(express.static(path.join(projectRoot, folderDeployed)));
+  } else {
+    app.use('/App', express.static(path.join(projectRoot, folderDeployed, 'App')));
+    const serveStaticFile = (req, res, filePath, contentType, fileName) => {
+      try {
+        if (fs.existsSync(filePath)) {
+          res.setHeader('Content-Type', contentType);
+          return res.send(fs.readFileSync(filePath, 'utf8'));
+        }
+      } catch (error) {
+        console.error(`Error reading ${fileName}:`, error);
+        return res.status(500).send(`Error reading ${fileName}`);
+      }
+      return res.status(404).send(`${fileName} not found`);
+    };
+
+    app.get('/routes.js', (req, res) => {
+      const routesPath = path.join(projectRoot, folderDeployed, 'routes.js');
+      serveStaticFile(req, res, routesPath, 'application/javascript; charset=utf-8', 'routes.js');
+    });
+    app.get('/sliceConfig.json', (req, res) => {
+      const configPath = path.join(projectRoot, folderDeployed, 'sliceConfig.json');
+      serveStaticFile(req, res, configPath, 'application/json; charset=utf-8', 'sliceConfig.json');
+    });
+    for (const folder of normalizedPublicFolders) {
+      app.use(folder, express.static(path.join(projectRoot, folderDeployed, folder)));
+    }
+    app.use('/bundles/', express.static(path.join(projectRoot, folderDeployed, 'bundles')));
+    app.use('/dist/', express.static(path.join(projectRoot, 'dist')));
+  }
+
+  // ==============================================
+  // RUTAS DE API
+  // ==============================================
+
+  // Ruta de ejemplo para API
+  app.get('/api/status', (req, res) => {
+    res.json({
+      status: 'ok',
+      mode: runMode,
+      folder: folderDeployed,
+      timestamp: new Date().toISOString(),
+      framework: 'Slice.js',
+      version: frameworkVersion,
+      security: {
+        enabled: true,
+        mode: 'automatic',
+        description: 'Zero-config security - works with any domain'
+      }
+    });
+  });
+
+  // ==============================================
+  // SEO: robots.txt & sitemap.xml
+  // ==============================================
+
+  app.get('/robots.txt', (req, res) => {
+    res.sendFile(path.join(projectRoot, folderDeployed, 'robots.txt'));
+  });
+
+  app.get('/sitemap.xml', (req, res) => {
+    res.sendFile(path.join(projectRoot, folderDeployed, 'sitemap.xml'));
+  });
+
+  // ==============================================
+  // API 404 — las rutas /api/* irreconocibles devuelven JSON, no HTML
+  // ==============================================
+
+  app.use('/api', (req, res) => {
+    res.status(404).json({ error: 'API route not found', path: req.originalUrl });
+  });
+
+  // ==============================================
+  // SPA FALLBACK
+  // ==============================================
+
+  app.get('*', (req, res) => {
+    const indexPath = path.join(projectRoot, folderDeployed, 'App', 'index.html');
+    res.sendFile(indexPath, (err) => {
+      if (err) {
+        console.error(`[SPA Fallback] Error sending ${indexPath}:`, err);
+        res.status(500).send(`<h1>500 - Internal Server Error</h1><p>Could not serve application file</p>`);
+      }
+    });
+  });
+
+  // ==============================================
+  // ERROR HANDLER CENTRALIZADO
+  // ==============================================
+
+  app.use((err, req, res, next) => {
+    console.error('[Server Error]', err.stack || err.message || err);
+    if (res.headersSent) return next(err);
+    res.status(err.status || 500).json({
+      error: 'Internal Server Error',
+      message: process.env.NODE_ENV === 'production' ? 'An unexpected error occurred' : err.message
+    });
+  });
+
+  // ==============================================
+  // INICIO DEL SERVIDOR
+  // ==============================================
+
+  function startServer() {
+    const server = app.listen(PORT, () => {
+      console.log(`🔒 Security middleware: active (zero-config, automatic)`);
+      console.log(`🚀 Slice.js server running on port ${PORT}`);
+    });
+
+    process.on('SIGINT', () => {
+      console.log('\n🛑 Slice server stopped');
+      process.exit(0);
+    });
+
+    process.on('SIGTERM', () => {
+      console.log('\n🛑 Server terminated');
+      process.exit(0);
+    });
+
+    return server;
+  }
+
+  return {
+    app,
+    start: startServer
+  };
+}