slicejs-web-framework 3.5.3 → 3.5.4

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

@@ -415,25 +415,43 @@ export default class Router {
    async onRouteChange() {
       if (this.routeChangeTimeout) {
          clearTimeout(this.routeChangeTimeout);
+         // This call supersedes a still-pending one; resolve the superseded
+         // promise so anything awaiting it doesn't hang — the new call does the
+         // real work.
+         if (this._routeChangeResolve) {
+            this._routeChangeResolve();
+            this._routeChangeResolve = null;
+         }
       }
 
-      this.routeChangeTimeout = setTimeout(async () => {
-         try {
-            const path = window.location.pathname;
-            const routeContainersFlag = await this.renderRoutesComponentsInPage();
+      // Resolve only AFTER the debounced route handling finishes, so a caller
+      // that awaits this (e.g. _performNavigation) sees slice.router.activeRoute
+      // already updated before it emits router:change. (Previously the awaited
+      // promise resolved the instant the timer was scheduled, so router:change
+      // fired ~10ms before activeRoute was set.)
+      return new Promise((resolve) => {
+         this._routeChangeResolve = resolve;
+         this.routeChangeTimeout = setTimeout(async () => {
+            try {
+               const path = window.location.pathname;
+               const routeContainersFlag = await this.renderRoutesComponentsInPage();
 
-            if (routeContainersFlag) {
-               return;
-            }
+               if (routeContainersFlag) {
+                  return;
+               }
 
-            const { route, params } = this.matchRoute(path);
-            if (route) {
-               await this.handleRoute(route, params);
+               const { route, params } = this.matchRoute(path);
+               if (route) {
+                  await this.handleRoute(route, params);
+               }
+            } catch (error) {
+               slice.logger.error('Router', `Route change failed for ${window.location.pathname}`, error);
+            } finally {
+               this._routeChangeResolve = null;
+               resolve();
             }
-         } catch (error) {
-            slice.logger.error('Router', `Route change failed for ${window.location.pathname}`, error);
-         }
-      }, 10);
+         }, 10);
+      });
    }
 
    /**

package/Slice/Slice.js

@@ -316,8 +316,27 @@ export default class Slice {
             return null;
          }
 
+         // Dev guard: update() called during init() runs BEFORE the component is
+         // registered, so the framework's update() wrapper (serialization +
+         // liveness) isn't installed yet and the call misbehaves silently. Warn
+         // instead. Restored right after init() so registerComponent →
+         // installUpdate wraps the real method, not this guard.
+         let _rawUpdate = null;
+         if (typeof componentInstance.update === 'function') {
+            _rawUpdate = componentInstance.update;
+            componentInstance.update = function (...args) {
+               slice.logger.logWarning(
+                  componentInstance.constructor?.name || 'Component',
+                  'update() was called during init() (before registration). Run your render logic directly from init(); the update() wrapper (serialization + liveness) is not active until the component is registered.'
+               );
+               return _rawUpdate.apply(this, args);
+            };
+         }
+
          if (componentInstance.init) await componentInstance.init();
 
+         if (_rawUpdate) componentInstance.update = _rawUpdate;
+
          if (slice.debuggerConfig.enabled && isVisual) {
             this.debugger.attachDebugMode(componentInstance);
          }
@@ -549,6 +568,20 @@ async function init() {
        document.body.appendChild(window.slice.leakInspector);
     }
 
+    // ContextManager delivers setState → watch through EventManager, so context
+    // reactivity requires events. We don't auto-enable events (in a production
+    // build EventManager is only bundled when events.enabled was true, so it may
+    // not have shipped) nor throw (a boot-time throw would take down the whole
+    // app, inconsistent with how "EventManager disabled" is handled below). Log a
+    // loud error and continue; `slice build` hard-fails on this same misconfig so
+    // a broken bundle never ships.
+    if (sliceConfig.context?.enabled && !sliceConfig.events?.enabled) {
+       window.slice.logger.logError(
+          'Slice',
+          'context.enabled requires events.enabled — ContextManager reactivity (setState → watch/bind) is delivered through EventManager. With events disabled, watchers will not fire. Set "events": { "enabled": true } in sliceConfig.json.'
+       );
+    }
+
     if (sliceConfig.events?.enabled) {
        const EventManagerModule = window.slice.frameworkClasses?.EventManager
           || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/EventManager/EventManager.js`);

package/package.json

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

package/tests/router-emit-ordering.test.js

@@ -0,0 +1,63 @@
+// Regression test for GOTCHAS §3: router:change must not be observable before
+// slice.router.activeRoute is updated.
+//
+// Router is a plain class with no module-level DOM/global access and no imports,
+// so onRouteChange() can be exercised directly on a stubbed instance. The fix
+// makes onRouteChange() resolve only AFTER the debounced handleRoute() runs
+// (which is where activeRoute is set), so a caller that awaits it — like
+// _performNavigation — emits router:change with activeRoute already current.
+//
+// Run: node --test tests/router-emit-ordering.test.js
+
+import { test, describe, before } from 'node:test';
+import assert from 'node:assert/strict';
+
+describe('Router.onRouteChange (§3 emit-after-activeRoute)', () => {
+  let Router;
+
+  before(async () => {
+    globalThis.window = globalThis.window || { location: { pathname: '/' } };
+    globalThis.slice = globalThis.slice || { logger: { error() {} }, router: {} };
+    ({ default: Router } = await import('../Slice/Components/Structural/Router/Router.js'));
+  });
+
+  const makeRouter = (handleRoute) => {
+    const r = Object.create(Router.prototype);
+    r.renderRoutesComponentsInPage = async () => false; // not the MultiRoute container path
+    r.matchRoute = () => ({ route: { component: 'X' }, params: {} });
+    r.handleRoute = handleRoute;
+    return r;
+  };
+
+  test('awaiting onRouteChange() waits until handleRoute() has finished', async () => {
+    const order = [];
+    const r = makeRouter(async () => {
+      await new Promise((res) => setTimeout(res, 5)); // simulate async render
+      order.push('handleRoute-done'); // activeRoute is assigned here in the real code
+    });
+
+    await r.onRouteChange();
+    order.push('after-await');
+
+    // With the fix, handleRoute completes BEFORE the await returns. (Before the
+    // fix the awaited promise resolved the instant the timer was scheduled, so
+    // 'after-await' would land first — i.e. emit-before-activeRoute.)
+    assert.deepEqual(order, ['handleRoute-done', 'after-await']);
+  });
+
+  test('a superseded (debounced) call still resolves — no hang', async () => {
+    let handled = 0;
+    const r = makeRouter(async () => { handled++; });
+
+    const p1 = r.onRouteChange(); // schedules timer T1
+    const p2 = r.onRouteChange(); // clears T1, resolves p1, schedules T2
+
+    await Promise.race([
+      Promise.all([p1, p2]),
+      new Promise((_, rej) => setTimeout(() => rej(new Error('onRouteChange hung')), 1000)),
+    ]);
+
+    // Only the surviving timer runs its work.
+    assert.equal(handled, 1);
+  });
+});