slicejs-web-framework 3.4.4 → 3.5.0

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/index.js

@@ -103,6 +103,39 @@ app.get('/slice-env.json', (req, res) => {
   res.json(payload);
 });
 
+// ==============================================
+// PWA — manifest + service worker (dev y prod)
+// ==============================================
+// Despacha los archivos PWA desde la carpeta desplegada (src en dev, dist en
+// prod) si existen; 404 si no, así no estorba cuando la app no es PWA.
+// El service worker se sirve SIN caché (para que sus actualizaciones lleguen) y
+// con Service-Worker-Allowed:/ para permitir scope raíz.
+const servePwaFile = (res, fileName, contentType, extraHeaders = {}) => {
+  const filePath = path.join(__dirname, `../${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)
 // ==============================================
@@ -193,14 +226,8 @@ if (runMode === 'development') {
     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');
-  });
+  // (manifest.json y service-worker.js los sirve el bloque PWA compartido de arriba,
+  //  con headers correctos en dev y prod.)
   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');

package/package.json

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

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/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.