slicejs-web-framework 3.4.4 → 3.5.1

package/api/index.js

@@ -1,281 +1,7 @@
-// api/index.js - Seguridad automática sin configuración
-import express from 'slicejs-web-framework/api/framework/express.js';
-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';
+// api/index.js - Punto de entrada del servidor
+import { createSliceServer } from 'slicejs-web-framework/api/framework/server.js';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-import sliceConfig from '../src/sliceConfig.json' with { type: 'json' };
+const server = createSliceServer();
+server.start();
 
-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');
-    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
-// ⚠️ 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.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');
-    }
-  }
-
-  // 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')));
-  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('/manifest.json', (req, res) => {
-    const manifestPath = path.join(__dirname, `../${folderDeployed}`, 'manifest.json');
-    serveStaticFile(req, res, manifestPath, 'application/json; charset=utf-8', 'manifest.json');
-  });
-  app.get('/service-worker.js', (req, res) => {
-    const workerPath = path.join(__dirname, `../${folderDeployed}`, 'service-worker.js');
-    serveStaticFile(req, res, workerPath, 'application/javascript; charset=utf-8', 'service-worker.js');
-  });
-  app.get('/routes.js', (req, res) => {
-    const routesPath = path.join(__dirname, `../${folderDeployed}`, 'routes.js');
-    serveStaticFile(req, res, routesPath, 'application/javascript; charset=utf-8', 'routes.js');
-  });
-  app.get('/sliceConfig.json', (req, res) => {
-    const configPath = path.join(__dirname, `../${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(__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) {
-      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>`);
-    }
-  });
-});
-
-// ==============================================
-// 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;
+export default server.app;

package/api/tests/public-env-resolver.test.js

@@ -4,7 +4,7 @@ import { mkdtemp, rm, writeFile } from 'node:fs/promises';
 import path from 'node:path';
 import { tmpdir } from 'node:os';
 
-const resolverModulePath = new URL('../utils/publicEnvResolver.js', import.meta.url);
+const resolverModulePath = new URL('../framework/publicEnvResolver.js', import.meta.url);
 
 async function withTempEnvFile(contents, callback) {
    const dir = await mkdtemp(path.join(tmpdir(), 'slice-public-env-'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "3.4.4",
+  "version": "3.5.1",
   "description": "",
   "engines": {
     "node": ">=20"
@@ -25,10 +25,12 @@
   "type": "module",
   "exports": {
     ".": "./Slice/Slice.js",
-    "./api/framework/express.js": "./api/framework/express.js"
+    "./api/framework/express.js": "./api/framework/express.js",
+    "./api/framework/server.js": "./api/framework/server.js"
   },
   "types": "./types/index.d.ts",
   "dependencies": {
+    "compression": "^1.8.1",
     "express": "^4.19.2"
   },
   "devDependencies": {

package/sliceConfig.schema.json

@@ -10,7 +10,16 @@
       "additionalProperties": true,
       "properties": {
         "enabled": { "type": "boolean" },
-        "click": { "type": "string", "enum": ["right", "left"] }
+        "click": { "type": "string", "enum": ["right", "left"] },
+        "leakInspector": {
+          "type": "object",
+          "additionalProperties": true,
+          "description": "Dev-only memory-leak panel. Disabled in production regardless of this flag.",
+          "properties": {
+            "enabled": { "type": "boolean" },
+            "shortcut": { "type": "string" }
+          }
+        }
       }
     },
     "stylesManager": {

package/src/App/index.html

@@ -3,9 +3,39 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Slice App</title>
+    <title>Slice.js Web Framework</title>
+    <meta name="description" content="Slice.js — a lightweight web framework built on native Web Components. Build web apps one slice at a time. No build step required." />
+    <meta name="robots" content="index, follow" />
+    <meta name="author" content="vkneider.dev" />
+    <link rel="canonical" href="https://slicejs.com" />
     <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#F8F4FF" />
+    <meta name="color-scheme" content="light dark" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Slice.js Web Framework" />
+    <meta property="og:description" content="Slice.js — a lightweight web framework built on native Web Components. Build web apps one slice at a time. No build step required." />
+    <meta property="og:url" content="https://slicejs.com" />
+    <meta property="og:image" content="https://slicejs.com/images/og-image.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Slice.js Web Framework" />
+    <meta name="twitter:description" content="Slice.js — a lightweight web framework built on native Web Components." />
+    <meta name="twitter:image" content="https://slicejs.com/images/og-image.png" />
     <link rel="stylesheet" type="text/css" href="/App/style.css" />
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "Slice.js Web Framework",
+        "url": "https://slicejs.com",
+        "description": "Slice.js — a lightweight web framework built on native Web Components. Build web apps one slice at a time.",
+        "author": {
+          "@type": "Organization",
+          "name": "VKneider",
+          "url": "https://github.com/VKneider"
+        }
+      }
+    </script>
   </head>
 
   <body>

package/src/manifest.json

@@ -0,0 +1,15 @@
+{
+  "name": "Slice.js Web Framework",
+  "short_name": "Slice.js",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#F8F4FF",
+  "theme_color": "#F8F4FF",
+  "icons": [
+    {
+      "src": "/images/favicon.ico",
+      "sizes": "192x192 512x512",
+      "type": "image/x-icon"
+    }
+  ]
+}

package/src/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://slicejs.com/sitemap.xml

package/src/sitemap.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://slicejs.com/</loc>
+    <priority>1.0</priority>
+    <changefreq>weekly</changefreq>
+  </url>
+</urlset>

package/src/sliceConfig.json

@@ -5,7 +5,11 @@
    },
    "debugger": {
       "enabled": false,
-      "click": "right"
+      "click": "right",
+      "leakInspector": {
+         "enabled": true,
+         "shortcut": "alt+shift+k"
+      }
    },
    "events": {
       "enabled": true,

package/types/index.d.ts

@@ -44,6 +44,10 @@ export interface SliceControllerApi {
   destroyComponent(components: HTMLElement | string | Array<HTMLElement | string>): number;
   destroyByContainer(container: HTMLElement): number;
   destroyByPattern(pattern: string | RegExp): number;
+  findOrphans(): Array<{ sliceId: string; name: string; reason: string; retainPath: string[] }>;
+  registerLeakExclusion(predicate: (component: HTMLElement) => boolean): void;
+  sampleComponentGrowth(): void;
+  isGrowthMonotonic(): boolean;
 }
 
 export interface SliceStylesManagerApi {
@@ -88,6 +92,13 @@ export interface SliceEventManagerApi {
   unsubscribe(eventName: string, subscriptionId: string): boolean;
   emit(eventName: string, ...data: unknown[]): void;
   bind(component: HTMLElement): SliceEventBindingApi | null;
+  register(namespace: string, catalog: Record<string, { description?: string; payload?: unknown }>): SliceEventManagerApi;
+  register(catalog: Record<string, { description?: string; payload?: unknown }>): SliceEventManagerApi;
+  loadGraph(graph: { events: Record<string, unknown>; dynamic?: unknown }): SliceEventManagerApi;
+  staticEmittersOf(eventName: string): Array<{ file: string; line: number; component: string | null }>;
+  staticListenersOf(eventName: string): Array<{ file: string; line: number; component: string | null }>;
+  isDeclared(eventName: string): boolean;
+  namespaceOf(eventName: string): string | null;
   cleanupComponent(sliceId: string): number;
   hasSubscribers(eventName: string): boolean;
   subscriberCount(eventName: string): number;
@@ -178,6 +189,7 @@ export interface SliceApi {
   debugger?: SliceDebuggerApi;
   eventsDebugger?: SlicePanelDebuggerApi;
   contextDebugger?: SlicePanelDebuggerApi;
+  leakInspector?: SlicePanelDebuggerApi;
   loading?: SliceLoadingApi;
   paths: SlicePaths;
   _mode: SliceMode;

package/slicejs-cli/.github/workflows/ci.yml

@@ -1,43 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches: [master, main]
-  pull_request:
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    timeout-minutes: 20
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: pnpm/action-setup@v4
-        with:
-          version: 11
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 22
-          cache: pnpm
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Install Playwright browser
-        run: pnpm exec playwright install --with-deps chromium
-
-      # Serialized to avoid resource contention between the build-heavy
-      # integration tests under parallel runners.
-      - name: Unit & integration tests
-        run: node --test --test-concurrency=1
-
-      - name: Browser E2E tests
-        run: pnpm exec playwright test
-
-      - uses: actions/upload-artifact@v4
-        if: ${{ !cancelled() }}
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 7

package/slicejs-cli/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Victor Jose Kneider Alnahi and Julio Antonio Graterol Bracho
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.