slicejs-web-framework 3.3.5 → 3.3.7

package/.opencode/opencode.json

@@ -1,5 +1,4 @@
 {
-  "$schema": "https://app.kilo.ai/config.json",
   "mcp": {
     "thinking": {
       "type": "local",

package/Slice/Components/Structural/ContextManager/ContextManager.js

@@ -154,6 +154,60 @@ export default class ContextManager {
       slice.logger.logInfo('ContextManager', `Contexto "${name}" actualizado`);
    }
 
+   /**
+    * Merge a partial object into the context's state (first-level merge).
+    * `setState` REPLACES the whole state; `patch` keeps the existing fields and
+    * overrides only the keys you pass — the common "update one field" case.
+    * @param {string} name - Nombre del contexto
+    * @param {Object} partial - Campos a fusionar sobre el estado actual
+    * @returns {void}
+    *
+    * @example
+    * slice.context.patch('cart', { discount: 0.1 });   // items/total se conservan
+    */
+   patch(name, partial) {
+      if (!this.contexts.has(name)) {
+         slice.logger.logError('ContextManager', `El contexto "${name}" no existe`);
+         return;
+      }
+      if (!partial || typeof partial !== 'object' || Array.isArray(partial)) {
+         slice.logger.logError('ContextManager', `patch("${name}") requiere un objeto parcial`);
+         return;
+      }
+      return this.setState(name, (prev) => ({ ...prev, ...partial }));
+   }
+
+   /**
+    * Return a handle bound to a single context so you call its methods without
+    * repeating the name on every call.
+    * @param {string} name - Nombre del contexto
+    * @returns {{ get: Function, set: Function, patch: Function, watch: Function, bind: Function, has: Function, destroy: Function }}
+    *
+    * @example
+    * const cart = slice.context.use('cart');
+    * cart.get();                         // estado actual
+    * cart.patch({ discount: 0.1 });      // merge (conserva el resto)
+    * cart.watch(this, (s) => this.render(s));
+    * // watch + render inicial en una línea:
+    * cart.bind(this, (count) => { this.$badge.textContent = count; }, (s) => s.items.length);
+    */
+   use(name) {
+      return {
+         get: () => this.getState(name),
+         set: (updater) => this.setState(name, updater),
+         patch: (partial) => this.patch(name, partial),
+         watch: (component, callback, selector = null) => this.watch(name, component, callback, selector),
+         // watch + an immediate call with the current value (initial render in one line)
+         bind: (component, callback, selector = null) => {
+            const state = this.getState(name);
+            callback(selector ? selector(state) : state);
+            return this.watch(name, component, callback, selector);
+         },
+         has: () => this.has(name),
+         destroy: () => this.destroy(name),
+      };
+   }
+
    // ============================================
    // WATCH (OBSERVAR CAMBIOS)
    // ============================================

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

@@ -716,6 +716,11 @@ export default class Controller {
       // Registrar en activeComponents
       this.activeComponents.set(component.sliceId, component);
 
+      // Exponer sliceId como atributo HTML para búsqueda por DOM (destroyByContainer, etc.)
+      if (typeof component.setAttribute === 'function') {
+         component.setAttribute('slice-id', component.sliceId);
+      }
+
       // 🚀 OPTIMIZACIÓN: Actualizar índice inverso de hijos
       if (parent) {
          if (!this.childrenIndex.has(parent.sliceId)) {

package/Slice/Components/Structural/Router/Router.js

@@ -46,6 +46,14 @@ export default class Router {
       this.activeRoute = null;
       this.pathToRouteMap = this.createPathToRouteMap(routes);
 
+      // O(1) case-insensitive lookup for static routes, so a miss on the exact map
+      // doesn't scan every route on each navigation. Param routes (which carry a
+      // precompiled `compiled` regex) are excluded — they go through the param loop.
+      this._staticLowerIndex = new Map();
+      for (const [pattern, route] of this.pathToRouteMap.entries()) {
+         if (!route.compiled) this._staticLowerIndex.set(pattern.toLowerCase(), route);
+      }
+
       // Navigation Guards
       this._beforeEachGuard = null;
       this._afterEachGuard = null;
@@ -581,6 +589,12 @@ export default class Router {
             parentRoute: parentRoute,
          };
 
+         // Compile parameterized patterns once at map-build time instead of on every
+         // navigation. Static routes leave `compiled` undefined.
+         if (fullPath.includes('${')) {
+            routeWithParent.compiled = this.compilePathPattern(fullPath);
+         }
+
          pathToRouteMap.set(fullPath, routeWithParent);
 
          if (route.children) {
@@ -685,13 +699,7 @@ export default class Router {
       // so '/About' resolves to a route declared as '/about'.
       let exactMatch = this.pathToRouteMap.get(path);
       if (!exactMatch) {
-         const lowerPath = path.toLowerCase();
-         for (const [routePattern, route] of this.pathToRouteMap.entries()) {
-            if (!routePattern.includes('${') && routePattern.toLowerCase() === lowerPath) {
-               exactMatch = route;
-               break;
-            }
-         }
+         exactMatch = this._staticLowerIndex.get(path.toLowerCase());
       }
       if (exactMatch) {
          if (exactMatch.parentRoute) {
@@ -704,9 +712,9 @@ export default class Router {
          return { route: exactMatch, params: {} };
       }
 
-      for (const [routePattern, route] of this.pathToRouteMap.entries()) {
-         if (routePattern.includes('${')) {
-            const { regex, paramNames } = this.compilePathPattern(routePattern);
+      for (const route of this.pathToRouteMap.values()) {
+         if (route.compiled) {
+            const { regex, paramNames } = route.compiled;
             const match = path.match(regex);
             if (match) {
                const params = {};

package/Slice/Components/Structural/StylesManager/StylesManager.js

@@ -72,6 +72,10 @@ export default class StylesManager {
     * @returns {void}
     */
    registerComponentStyles(componentName, cssText) {
+      // Idempotent: a component's CSS is injected at most once, no matter how many
+      // times it is built or how a caller reaches here (Controller guards upstream,
+      // but the debuggers and the resource loader do not).
+      if (slice.controller.requestedStyles.has(componentName)) return;
       slice.controller.requestedStyles.add(componentName);
       this.appendComponentStyles(cssText);
    }

package/Slice/Components/Structural/StylesManager/ThemeManager/ThemeManager.js

@@ -5,6 +5,9 @@ export default class ThemeManager {
    constructor() {
       this.themeStyles = new Map();
       this.currentTheme = null;
+      // In-flight loads, keyed by theme name, so concurrent applyTheme() calls for
+      // the same theme share one fetch instead of racing and double-fetching.
+      this._loadingThemes = new Map();
       this.themeStyle = document.createElement('style');
       document.head.appendChild(this.themeStyle);
    }
@@ -20,12 +23,25 @@ export default class ThemeManager {
          return;
       }
 
-      if (!this.themeStyles.has(themeName)) {
-         await this.loadThemeCSS(themeName);
-      } else {
+      // Already the active theme — nothing to re-inject.
+      if (themeName === this.currentTheme) {
+         return;
+      }
+
+      if (this.themeStyles.has(themeName)) {
          this.setThemeStyle(themeName);
          this.saveThemeLocally(themeName, this.themeStyles.get(themeName));
+         return;
       }
+
+      // Coalesce concurrent loads of the same theme into a single fetch.
+      if (!this._loadingThemes.has(themeName)) {
+         this._loadingThemes.set(
+            themeName,
+            this.loadThemeCSS(themeName).finally(() => this._loadingThemes.delete(themeName))
+         );
+      }
+      await this._loadingThemes.get(themeName);
    }
 
    /**
@@ -79,6 +95,12 @@ export default class ThemeManager {
    setThemeStyle(themeName) {
       this.themeStyle.textContent = this.themeStyles.get(themeName);
       this.currentTheme = themeName;
+      // Expose the active theme on the root element so CSS can react per theme
+      // without any JS — e.g. [data-slice-theme="Dark"] .logo { filter: ... }.
+      // Non-breaking: apps opt in only if they reference the attribute.
+      if (typeof document !== 'undefined' && document.documentElement) {
+         document.documentElement.setAttribute('data-slice-theme', themeName);
+      }
       slice.logger.logInfo('ThemeManager', `Theme ${themeName} applied`);
    }
 }

package/Slice/Slice.js

@@ -79,6 +79,44 @@ export default class Slice {
       return { ...this._publicEnv };
    }
 
+   /**
+    * Typed accessors over the public env, so callers stop re-parsing strings.
+    *   slice.env.get('SLICE_PUBLIC_API_URL', '')
+    *   slice.env.bool('SLICE_PUBLIC_AUTH_ENABLED')   // '1'|'true'|'yes'|'on' → true
+    *   slice.env.int('SLICE_PUBLIC_TIMEOUT', 5000)
+    *   slice.env.list('SLICE_PUBLIC_MODELS')         // 'a, b' → ['a','b']
+    *   slice.env.has('X')  /  slice.env.all()
+    * @returns {{ get: Function, has: Function, all: Function, bool: Function, int: Function, list: Function }}
+    */
+   get env() {
+      const read = (name) =>
+         Object.prototype.hasOwnProperty.call(this._publicEnv, name) ? this._publicEnv[name] : undefined;
+      const present = (v) => v !== undefined && String(v).trim() !== '';
+
+      return {
+         get: (name, fallback = undefined) => this.getEnv(name, fallback),
+         has: (name) => Object.prototype.hasOwnProperty.call(this._publicEnv, name),
+         all: () => this.getPublicEnv(),
+         bool: (name, fallback = false) => {
+            const v = read(name);
+            return present(v) ? ['1', 'true', 'yes', 'on'].includes(String(v).trim().toLowerCase()) : fallback;
+         },
+         int: (name, fallback = 0) => {
+            const v = read(name);
+            const n = parseInt(v, 10);
+            return Number.isNaN(n) ? fallback : n;
+         },
+         list: (name, fallback = []) => {
+            const v = read(name);
+            if (!present(v)) return fallback;
+            return String(v)
+               .split(',')
+               .map((s) => s.trim())
+               .filter(Boolean);
+         },
+      };
+   }
+
    /**
     * Get a component instance by sliceId.
     * @param {string} componentSliceId
@@ -114,11 +152,15 @@ export default class Slice {
       const { singleton, ...rest } = props;
       const sliceId = rest.sliceId || componentName;
 
+      // Singletons are allowed for any category whose *type* is 'Service' — not
+      // only the built-in 'Service' category. Custom categories declared in
+      // sliceConfig with `"type": "Service"` (e.g. AppServices) are services too.
       const category = this.controller.componentCategories.get(componentName);
-      if (category !== 'Service') {
+      const categoryType = slice.paths?.components?.[category]?.type;
+      if (categoryType !== 'Service') {
          this.logger.logError(
             'Slice',
-            `singleton:true is only supported for Service components ('${componentName}' is ${category || 'unknown'}). ` +
+            `singleton:true is only supported for Service-type components ('${componentName}' is in category '${category || 'unknown'}', type '${categoryType || 'unknown'}'). ` +
                `For app-wide UI build a Provider Service that manages the Visual (see ToastProvider/ToolTipProvider).`
          );
          return null;

package/Slice/tests/build-singleton.test.js

@@ -43,7 +43,9 @@ function createSlice() {
       paths: {
         components: {
           Service: { path: '/Components/Service', type: 'Service' },
-          Visual: { path: '/Components/Visual', type: 'Visual' }
+          Visual: { path: '/Components/Visual', type: 'Visual' },
+          // Custom category whose type is Service (e.g. an app's own services).
+          AppServices: { path: '/Components/AppServices', type: 'Service' }
         }
       },
       themeManager: {},
@@ -60,6 +62,9 @@ function createSlice() {
   // Pre-seed the class so _build skips the network fetch (the real path for a
   // class already cached by the controller). Everything else is real.
   instance.controller.classes.set('Probe', Probe);
+  // AppProbe is a Service-shaped class registered under the custom 'AppServices'
+  // category; reuse the Probe class (same shape).
+  instance.controller.classes.set('AppProbe', Probe);
   return instance;
 }
 
@@ -157,6 +162,24 @@ test(
   })
 );
 
+test(
+  'singleton:true is allowed for a custom Service-type category (AppServices)',
+  withSlice(async (slice) => {
+    let errored = false;
+    slice.logger.logError = () => {
+      errored = true;
+    };
+
+    const a = await slice.build('AppProbe', { singleton: true });
+    const b = await slice.build('AppProbe', { singleton: true });
+
+    assert.ok(a, 'builds the instance');
+    assert.equal(a, b, 'returns the same singleton instance');
+    assert.equal(errored, false, 'does not log an error for a Service-type category');
+    assert.equal(constructCount, 1, 'constructed exactly once');
+  })
+);
+
 test(
   'default (non-singleton) build path is unchanged',
   withSlice(async (slice) => {

package/Slice/tests/context-patch-use.test.js

@@ -0,0 +1,95 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+globalThis.alert = () => {};
+
+// Minimal global `slice` so ContextManager's slice.logger / slice.events work in
+// isolation (a tiny in-memory event bus drives the watch notifications).
+const subscribers = new Map(); // eventName -> Set<fn>
+let subId = 0;
+globalThis.slice = {
+   logger: { logError() {}, logInfo() {}, logWarning() {} },
+   events: {
+      subscribe(name, cb) {
+         if (!subscribers.has(name)) subscribers.set(name, new Set());
+         subscribers.get(name).add(cb);
+         return `sub-${++subId}`;
+      },
+      emit(name, ...args) {
+         for (const cb of subscribers.get(name) ?? []) cb(...args);
+      },
+   },
+};
+
+const { default: ContextManager } = await import(
+   '../Components/Structural/ContextManager/ContextManager.js'
+);
+
+function freshContext(name, initial) {
+   const ctx = new ContextManager();
+   ctx.create(name, initial);
+   return ctx;
+}
+
+test('patch merges into existing state (does not replace)', () => {
+   const ctx = freshContext('cart', { items: 2, total: 47, discount: 0 });
+   ctx.patch('cart', { discount: 0.1 });
+   assert.deepEqual(ctx.getState('cart'), { items: 2, total: 47, discount: 0.1 });
+});
+
+test('setState replaces, patch keeps the rest', () => {
+   const ctx = freshContext('s', { a: 1, b: 2 });
+   ctx.setState('s', { a: 9 }); // replace → drops b
+   assert.deepEqual(ctx.getState('s'), { a: 9 });
+   ctx.patch('s', { b: 5 }); // merge onto { a: 9 }
+   assert.deepEqual(ctx.getState('s'), { a: 9, b: 5 });
+});
+
+test('patch rejects non-object partials and missing contexts (no throw)', () => {
+   const ctx = freshContext('s', { a: 1 });
+   ctx.patch('s', null);
+   ctx.patch('s', [1, 2]);
+   ctx.patch('nope', { x: 1 });
+   assert.deepEqual(ctx.getState('s'), { a: 1 });
+   assert.equal(ctx.has('nope'), false);
+});
+
+test('use(name) returns a handle bound to that context', () => {
+   const ctx = freshContext('settings', { model: 'a' });
+   const settings = ctx.use('settings');
+
+   assert.equal(settings.get().model, 'a');
+   settings.set({ model: 'b' });
+   assert.equal(ctx.getState('settings').model, 'b');
+   settings.patch({ theme: 'dark' });
+   assert.deepEqual(ctx.getState('settings'), { model: 'b', theme: 'dark' });
+   assert.equal(settings.has(), true);
+   settings.destroy();
+   assert.equal(ctx.has('settings'), false);
+});
+
+test('use(name).bind calls back immediately and on every change', () => {
+   const ctx = freshContext('cart', { items: [], n: 0 });
+   const calls = [];
+   ctx.use('cart').bind({ sliceId: 'c1' }, (state) => calls.push(state.n));
+
+   assert.deepEqual(calls, [0]); // immediate initial call
+   ctx.patch('cart', { n: 1 });
+   assert.deepEqual(calls, [0, 1]); // fired on change
+});
+
+test('use(name).bind with a selector only fires when the selected value changes', () => {
+   const ctx = freshContext('cart', { items: ['x'], note: 'a' });
+   const counts = [];
+   ctx.use('cart').bind(
+      { sliceId: 'c2' },
+      (count) => counts.push(count),
+      (s) => s.items.length
+   );
+
+   assert.deepEqual(counts, [1]); // immediate, selected value = length
+   ctx.patch('cart', { note: 'b' }); // length unchanged → no fire
+   assert.deepEqual(counts, [1]);
+   ctx.patch('cart', { items: ['x', 'y'] }); // length changed → fire
+   assert.deepEqual(counts, [1, 2]);
+});

package/Slice/tests/fixtures/real-runtime-loader.mjs

@@ -5,7 +5,9 @@
 // map only that exact specifier to a small fixture components map (just data,
 // the same shape the real components.js exports). Everything else resolves
 // normally, so the tests exercise the real Slice + Controller code, not mocks.
-const COMPONENTS = { Probe: 'Service', ModalProbe: 'Visual' };
+// AppProbe lives in a CUSTOM category ('AppServices') whose type is 'Service' —
+// it must be allowed as a singleton (the type, not the category name, decides).
+const COMPONENTS = { Probe: 'Service', ModalProbe: 'Visual', AppProbe: 'AppServices' };
 const STUB = `export default ${JSON.stringify(COMPONENTS)};`;
 
 export async function resolve(specifier, context, nextResolve) {

package/Slice/tests/public-env-typed-accessors.test.js

@@ -0,0 +1,66 @@
+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('slice.env.get / has / all', () => {
+  const s = createSliceInstance();
+  s.setPublicEnv({ SLICE_PUBLIC_API_URL: 'https://api.example.com', INTERNAL: 'hidden' });
+
+  assert.equal(s.env.get('SLICE_PUBLIC_API_URL'), 'https://api.example.com');
+  assert.equal(s.env.get('SLICE_PUBLIC_MISSING', 'fb'), 'fb');
+  assert.equal(s.env.has('SLICE_PUBLIC_API_URL'), true);
+  assert.equal(s.env.has('SLICE_PUBLIC_MISSING'), false);
+  assert.deepEqual(s.env.all(), { SLICE_PUBLIC_API_URL: 'https://api.example.com' }); // only SLICE_PUBLIC_*
+});
+
+test('slice.env.bool parses truthy strings and falls back', () => {
+  const s = createSliceInstance();
+  s.setPublicEnv({
+    SLICE_PUBLIC_ON: 'true',
+    SLICE_PUBLIC_ON2: 'YES',
+    SLICE_PUBLIC_ON3: '1',
+    SLICE_PUBLIC_OFF: 'false',
+    SLICE_PUBLIC_EMPTY: ''
+  });
+
+  assert.equal(s.env.bool('SLICE_PUBLIC_ON'), true);
+  assert.equal(s.env.bool('SLICE_PUBLIC_ON2'), true);
+  assert.equal(s.env.bool('SLICE_PUBLIC_ON3'), true);
+  assert.equal(s.env.bool('SLICE_PUBLIC_OFF'), false);
+  assert.equal(s.env.bool('SLICE_PUBLIC_EMPTY', true), true);   // empty → fallback
+  assert.equal(s.env.bool('SLICE_PUBLIC_MISSING'), false);       // missing → default false
+  assert.equal(s.env.bool('SLICE_PUBLIC_MISSING', true), true);  // missing → custom fallback
+});
+
+test('slice.env.int parses integers and falls back', () => {
+  const s = createSliceInstance();
+  s.setPublicEnv({ SLICE_PUBLIC_TIMEOUT: '5000', SLICE_PUBLIC_BAD: 'nope' });
+
+  assert.equal(s.env.int('SLICE_PUBLIC_TIMEOUT'), 5000);
+  assert.equal(s.env.int('SLICE_PUBLIC_BAD', 10), 10);       // non-numeric → fallback
+  assert.equal(s.env.int('SLICE_PUBLIC_MISSING', 42), 42);   // missing → fallback
+});
+
+test('slice.env.list splits CSV, trims, drops empties', () => {
+  const s = createSliceInstance();
+  s.setPublicEnv({ SLICE_PUBLIC_MODELS: ' a , b ,, c ', SLICE_PUBLIC_EMPTY: '' });
+
+  assert.deepEqual(s.env.list('SLICE_PUBLIC_MODELS'), ['a', 'b', 'c']);
+  assert.deepEqual(s.env.list('SLICE_PUBLIC_EMPTY', ['x']), ['x']);     // empty → fallback
+  assert.deepEqual(s.env.list('SLICE_PUBLIC_MISSING'), []);             // missing → default []
+});

package/package.json

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