slicejs-web-framework 2.4.8 → 3.1.0

package/.worktrees/public-env-browser-exposure/Slice/tests/bundle-v2-runtime-contract.test.js

@@ -0,0 +1,268 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { mkdtemp, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { register } from 'node:module';
+import { pathToFileURL } from 'node:url';
+
+test('validateBundleModule rejects module missing Bundling V2 exports contract', async () => {
+   const tempDir = await mkdtemp(path.join(tmpdir(), 'slice-controller-loader-'));
+   const loaderPath = path.join(tempDir, 'components-alias-loader.mjs');
+   await writeFile(
+      loaderPath,
+      `export async function resolve(specifier, context, nextResolve) {
+   if (specifier === '/Components/components.js') {
+      return {
+         shortCircuit: true,
+         url: 'data:text/javascript,export default {};',
+      };
+   }
+   return nextResolve(specifier, context);
+}
+`,
+      'utf8'
+   );
+   register(pathToFileURL(loaderPath).href);
+
+   const controllerModuleUrl = new URL('../Components/Structural/Controller/Controller.js', import.meta.url).href;
+   const { default: Controller } = await import(controllerModuleUrl);
+   const controller = new Controller();
+   const originalWindow = globalThis.window;
+
+   try {
+      globalThis.window = {
+         __slicePendingRegistrations: [],
+      };
+
+      assert.equal(
+         typeof controller.validateBundleModule,
+         'function',
+         'Controller must expose validateBundleModule for Bundling V2 runtime contract checks'
+      );
+
+      if (typeof controller.validateBundleModule === 'function') {
+         await assert.rejects(
+            () => Promise.resolve(controller.validateBundleModule({ default: {} }, 'critical.js')),
+            /missing bundling v2 exports contract/i
+         );
+      }
+   } finally {
+      globalThis.window = originalWindow;
+      await rm(tempDir, { recursive: true, force: true });
+   }
+});
+
+test('loadBundle marks requested bundle key and metadata bundleKey as loaded', async () => {
+   const tempDir = await mkdtemp(path.join(tmpdir(), 'slice-controller-loader-'));
+   const loaderPath = path.join(tempDir, 'components-alias-loader.mjs');
+   await writeFile(
+      loaderPath,
+      `export async function resolve(specifier, context, nextResolve) {
+   if (specifier === '/Components/components.js') {
+      return {
+         shortCircuit: true,
+         url: 'data:text/javascript,export default {};',
+      };
+   }
+   return nextResolve(specifier, context);
+}
+`,
+      'utf8'
+   );
+   register(pathToFileURL(loaderPath).href);
+
+   const controllerModuleUrl = new URL('../Components/Structural/Controller/Controller.js', import.meta.url).href;
+   const { default: Controller } = await import(controllerModuleUrl);
+   const controller = new Controller();
+   const originalSlice = globalThis.slice;
+
+   controller.bundleConfig = {
+      bundles: {
+         routes: {
+            dashboard: {
+               file: 'dashboard.js',
+            },
+         },
+      },
+   };
+
+   controller.importBundleOnce = async () => ({});
+   controller.validateBundleModule = async () => ({
+      metadata: {
+         bundleKey: 'routes.dashboard.v2',
+         type: 'route',
+      },
+      registerAll: async () => {},
+   });
+
+   try {
+      globalThis.slice = {
+         stylesManager: {},
+      };
+
+      await controller.loadBundle('dashboard');
+
+      assert.equal(controller.loadedBundles.has('dashboard'), true);
+      assert.equal(controller.loadedBundles.has('routes.dashboard.v2'), true);
+      assert.equal(controller.criticalBundleLoaded, false);
+   } finally {
+      globalThis.slice = originalSlice;
+      await rm(tempDir, { recursive: true, force: true });
+   }
+});
+
+test('Slice init fails fast with contextual error on invalid Bundling V2 contract path', async () => {
+   const tempDir = await mkdtemp(path.join(tmpdir(), 'slice-init-loader-'));
+   const loaderPath = path.join(tempDir, 'components-alias-loader.mjs');
+   await writeFile(
+      loaderPath,
+      `export async function resolve(specifier, context, nextResolve) {
+   if (specifier === '/Components/components.js') {
+      return {
+         shortCircuit: true,
+         url: 'data:text/javascript,export default {};',
+      };
+   }
+   return nextResolve(specifier, context);
+}
+`,
+      'utf8'
+   );
+   register(pathToFileURL(loaderPath).href);
+
+   const originalWindow = globalThis.window;
+   const originalDocument = globalThis.document;
+   const originalFetch = globalThis.fetch;
+   const originalAlert = globalThis.alert;
+   const originalSliceDescriptor = Object.getOwnPropertyDescriptor(globalThis, 'slice');
+   const originalConsoleLog = console.log;
+   const originalConsoleWarn = console.warn;
+   const controllerModuleUrl = new URL('../Components/Structural/Controller/Controller.js', import.meta.url).href;
+   const { default: Controller } = await import(controllerModuleUrl);
+   const originalLoadBundle = Controller.prototype.loadBundle;
+
+   const loggedMessages = [];
+
+   try {
+      globalThis.window = {
+         location: {
+            pathname: '/dashboard',
+            origin: 'http://localhost',
+         },
+      };
+
+      Object.defineProperty(globalThis, 'slice', {
+         configurable: true,
+         get() {
+            return globalThis.window?.slice;
+         },
+         set(value) {
+            if (!globalThis.window) {
+               globalThis.window = {};
+            }
+            globalThis.window.slice = value;
+         },
+      });
+
+      Controller.prototype.loadBundle = async () => {
+         throw new Error(
+            'Bundle "critical" missing Bundling V2 exports contract: requires SLICE_BUNDLE_META and registerAll'
+         );
+      };
+
+      globalThis.document = {
+         head: {
+            appendChild() {},
+         },
+         body: {
+            appendChild() {},
+         },
+         createElement() {
+            return {
+               appendChild() {},
+               innerHTML: '',
+               id: '',
+            };
+         },
+         createTextNode() {
+            return {};
+         },
+         addEventListener() {},
+      };
+
+      globalThis.alert = () => {};
+      console.log = (...args) => {
+         loggedMessages.push(args.map(String).join(' '));
+      };
+      console.warn = () => {};
+
+      globalThis.fetch = async (url) => {
+         if (url === '/sliceConfig.json') {
+            return {
+               ok: true,
+               json: async () => ({
+                  paths: {
+                     routesFile: '/routes.js',
+                     components: {},
+                  },
+                  themeManager: { enabled: false },
+                  stylesManager: { requestedStyles: [] },
+                  logger: { enabled: false },
+                  debugger: { enabled: false },
+                  loading: { enabled: false },
+                  events: { enabled: false },
+                  context: { enabled: false },
+               }),
+            };
+         }
+
+         if (url === '/slice-env.json') {
+            return {
+               ok: true,
+               json: async () => ({ mode: 'production' }),
+            };
+         }
+
+         if (url === '/bundles/bundle.config.json') {
+            return {
+               ok: true,
+               json: async () => ({
+                  production: true,
+                  bundles: {
+                     critical: { file: 'critical.js' },
+                     routes: {},
+                  },
+                  routeBundles: {},
+               }),
+            };
+         }
+
+         throw new Error(`Unexpected fetch URL: ${url}`);
+      };
+
+      const sliceModuleUrl = new URL(`../Slice.js?fail-fast-test=${Date.now()}`, import.meta.url).href;
+
+      await assert.rejects(() => import(sliceModuleUrl), /Bundling V2 initialization failed/i);
+
+      assert.equal(
+         loggedMessages.some((message) => message.includes('Using individual component loading (no bundles found)')),
+         false,
+         'init must not log fallback bundle message on Bundling V2 contract failure'
+      );
+   } finally {
+      Controller.prototype.loadBundle = originalLoadBundle;
+      globalThis.window = originalWindow;
+      globalThis.document = originalDocument;
+      globalThis.fetch = originalFetch;
+      globalThis.alert = originalAlert;
+      if (originalSliceDescriptor) {
+         Object.defineProperty(globalThis, 'slice', originalSliceDescriptor);
+      } else {
+         delete globalThis.slice;
+      }
+      console.log = originalConsoleLog;
+      console.warn = originalConsoleWarn;
+      await rm(tempDir, { recursive: true, force: true });
+   }
+});

package/.worktrees/public-env-browser-exposure/Slice/tests/public-env-runtime-accessors.test.js

@@ -0,0 +1,44 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+globalThis.alert = () => {};
+
+const { default: Slice } = await import('../Slice.js');
+
+function createSliceInstance() {
+  return new Slice({
+    paths: {},
+    themeManager: {},
+    stylesManager: {},
+    logger: {},
+    debugger: {},
+    loading: {},
+    events: {}
+  });
+}
+
+test('getEnv returns fallback for missing key and stored value for known key', () => {
+  const sliceInstance = createSliceInstance();
+
+  assert.equal(typeof sliceInstance.getEnv, 'function');
+  assert.equal(typeof sliceInstance.setPublicEnv, 'function');
+  assert.equal(sliceInstance.getEnv('SLICE_PUBLIC_MISSING', 'fallback'), 'fallback');
+
+  sliceInstance.setPublicEnv({ SLICE_PUBLIC_API_URL: 'https://api.example.com' });
+  assert.equal(sliceInstance.getEnv('SLICE_PUBLIC_API_URL'), 'https://api.example.com');
+});
+
+test('getPublicEnv returns a copy and only includes SLICE_PUBLIC_ keys', () => {
+  const sliceInstance = createSliceInstance();
+
+  sliceInstance.setPublicEnv({
+    SLICE_PUBLIC_FLAG: 'true',
+    INTERNAL_SECRET: 'hidden'
+  });
+
+  const snapshot = sliceInstance.getPublicEnv();
+  assert.deepEqual(snapshot, { SLICE_PUBLIC_FLAG: 'true' });
+
+  snapshot.SLICE_PUBLIC_FLAG = 'mutated';
+  assert.equal(sliceInstance.getEnv('SLICE_PUBLIC_FLAG'), 'true');
+});

package/.worktrees/public-env-browser-exposure/Slice/tests/router-loading-finally.test.js

@@ -0,0 +1,68 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+import Router from '../Components/Structural/Router/Router.js';
+
+test('handleRoute stops loading when build throws on error path', async () => {
+   const originalSlice = globalThis.slice;
+   const originalDocument = globalThis.document;
+
+   const targetElement = {
+      innerHTML: 'existing',
+      appendChild() {},
+   };
+
+   try {
+      globalThis.document = {
+         querySelector(selector) {
+            if (selector === '#app') {
+               return targetElement;
+            }
+            return null;
+         },
+      };
+
+      const loadingCalls = [];
+
+      globalThis.slice = {
+         loading: {
+            start() {
+               loadingCalls.push('start');
+            },
+            stop() {
+               loadingCalls.push('stop');
+            },
+         },
+         controller: {
+            getComponent() {
+               return null;
+            },
+         },
+         build: async () => {
+            throw new Error('boom');
+         },
+         router: {
+            activeRoute: null,
+         },
+      };
+
+      const router = new Router([]);
+
+      await assert.rejects(
+         () =>
+            router.handleRoute(
+               {
+                  component: 'Dashboard',
+                  parentRoute: null,
+               },
+               {}
+            ),
+         /boom/
+      );
+
+      assert.deepEqual(loadingCalls, ['start', 'stop']);
+   } finally {
+      globalThis.slice = originalSlice;
+      globalThis.document = originalDocument;
+   }
+});

package/.worktrees/public-env-browser-exposure/api/index.js

@@ -0,0 +1,286 @@
+// 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 { 
+  securityMiddleware, 
+  sliceFrameworkProtection, 
+  suspiciousRequestLogger
+} from './middleware/securityMiddleware.js';
+import { createPublicEnvProvider } from './utils/publicEnvResolver.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+import sliceConfig from '../src/sliceConfig.json' with { type: 'json' };
+
+let server;
+const app = express();
+
+// Parsear argumentos de línea de comandos
+const args = process.argv.slice(2);
+
+const runMode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
+const folderDeployed = runMode === 'production' ? 'dist' : 'src';
+const publicEnvProvider = createPublicEnvProvider({
+  mode: runMode,
+  envFilePath: path.join(__dirname, '..', '.env')
+});
+
+// Obtener puerto desde process.env.PORT con fallback a sliceConfig.json
+const PORT = process.env.PORT || sliceConfig.server?.port || 3001;
+
+// ==============================================
+// 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
+// Detecta automáticamente el dominio desde los headers
+// Funciona en localhost, IP, y cualquier dominio
+app.use(sliceFrameworkProtection());
+
+// 3. Middleware de seguridad general
+app.use(securityMiddleware({
+  allowedExtensions: [
+    '.js', '.css', '.html', '.json', 
+    '.svg', '.png', '.jpg', '.jpeg', '.gif', 
+    '.woff', '.woff2', '.ttf', '.ico'
+  ],
+  blockedPaths: [
+    '/node_modules',
+    '/package.json',
+    '/package-lock.json',
+    '/.env',
+    '/.git',
+    '/api/middleware'
+  ],
+  allowPublicAssets: true
+}));
+
+// ==============================================
+// 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 }));
+
+// 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);
+});
+
+// ==============================================
+// ARCHIVOS ESTÁTICOS (DESPUÉS DE SEGURIDAD)
+// ==============================================
+
+if (runMode === 'production') {
+  app.get('/Slice/Slice.js', (req, res) => {
+    const slicePath = path.join(__dirname, '..', 'node_modules', 'slicejs-web-framework', 'Slice', 'Slice.js');
+    if (fs.existsSync(slicePath)) {
+      res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+      return res.send(fs.readFileSync(slicePath, 'utf8'));
+    }
+    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
+// ⚠️ DEBE IR ANTES del middleware general para tener prioridad
+app.use('/bundles/', (req, res, next) => {
+  // 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}`);
+      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 (JSON, CSS, etc.) con el middleware estático normal
+app.use('/bundles/', express.static(path.join(__dirname, `../${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(__dirname, '..', 'node_modules', 'slicejs-web-framework', 'Slice')));
+}
+
+// Servir archivos estáticos del proyecto con allowlist
+const publicFolders = Array.isArray(sliceConfig.publicFolders) ? sliceConfig.publicFolders : [];
+const normalizedPublicFolders = publicFolders
+  .filter((entry) => typeof entry === 'string')
+  .map((entry) => entry.trim())
+  .filter((entry) => entry.length > 0)
+  .map((entry) => (entry.startsWith('/') ? entry : `/${entry}`));
+
+if (runMode === 'development') {
+  app.use(express.static(path.join(__dirname, `../${folderDeployed}`)));
+} else {
+  app.use('/App', express.static(path.join(__dirname, `../${folderDeployed}`, 'App')));
+  app.get('/manifest.json', (req, res) => {
+    const manifestPath = path.join(__dirname, `../${folderDeployed}`, 'manifest.json');
+    if (fs.existsSync(manifestPath)) {
+      res.setHeader('Content-Type', 'application/json; charset=utf-8');
+      return res.send(fs.readFileSync(manifestPath, 'utf8'));
+    }
+    return res.status(404).send('manifest.json not found');
+  });
+  app.get('/service-worker.js', (req, res) => {
+    const workerPath = path.join(__dirname, `../${folderDeployed}`, 'service-worker.js');
+    if (fs.existsSync(workerPath)) {
+      res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+      return res.send(fs.readFileSync(workerPath, 'utf8'));
+    }
+    return res.status(404).send('service-worker.js not found');
+  });
+  app.get('/routes.js', (req, res) => {
+    const routesPath = path.join(__dirname, `../${folderDeployed}`, 'routes.js');
+    if (fs.existsSync(routesPath)) {
+      res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+      return res.send(fs.readFileSync(routesPath, 'utf8'));
+    }
+    return res.status(404).send('routes.js not found');
+  });
+  app.get('/sliceConfig.json', (req, res) => {
+    const configPath = path.join(__dirname, `../${folderDeployed}`, 'sliceConfig.json');
+    if (fs.existsSync(configPath)) {
+      res.setHeader('Content-Type', 'application/json; charset=utf-8');
+      return res.send(fs.readFileSync(configPath, 'utf8'));
+    }
+    return res.status(404).send('sliceConfig.json not found');
+  });
+  for (const folder of normalizedPublicFolders) {
+    app.use(folder, express.static(path.join(__dirname, `../${folderDeployed}`, folder)));
+  }
+  app.use('/bundles/', express.static(path.join(__dirname, `../${folderDeployed}`, 'bundles')));
+  app.use('/dist/', express.static(path.join(__dirname, '..', '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: '2.0.0',
+    security: {
+      enabled: true,
+      mode: 'automatic',
+      description: 'Zero-config security - works with any domain'
+    }
+  });
+});
+
+
+// ==============================================
+// SPA FALLBACK
+// ==============================================
+
+// SPA fallback - servir index.html para rutas no encontradas
+app.get('*', (req, res) => {
+  const indexPath = path.join(__dirname, `../${folderDeployed}`, "App", 'index.html');
+  res.sendFile(indexPath, (err) => {
+    if (err) {
+      res.status(404).send(`
+        <h1>404 - Page Not Found</h1>
+        <p>The requested file could not be found in /${folderDeployed}</p>
+        <p>Make sure you've run the appropriate build command:</p>
+        <ul>
+          <li>For development: Files should be in /src</li>
+          <li>For production: Run "npm run slice:build" first</li>
+        </ul>
+      `);
+    }
+  });
+});
+
+// ==============================================
+// INICIO DEL SERVIDOR
+// ==============================================
+
+function startServer() {
+  server = app.listen(PORT, () => {
+    console.log(`🔒 Security middleware: active (zero-config, automatic)`);
+    console.log(`🚀 Slice.js server running on port ${PORT}`);
+  });
+}
+
+// Manejar cierre del proceso
+process.on('SIGINT', () => {
+  console.log('\n🛑 Slice server stopped');
+  process.exit(0);
+});
+
+process.on('SIGTERM', () => {
+  console.log('\n🛑 Server terminated');
+  process.exit(0);
+});
+
+// Iniciar servidor
+startServer();
+
+export default app;