slicejs-web-framework 4.0.0 → 4.0.1

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

@@ -1,63 +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);
-  });
-});
+// 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);
+  });
+});

package/types/index.d.ts

@@ -1,219 +1,219 @@
-export type SliceMode = 'development' | 'production' | string;
-
-export interface RouteConfig {
-  path: string;
-  component: string;
-  children?: RouteConfig[];
-  metadata?: Record<string, unknown>;
-  fullPath?: string;
-  parentPath?: string | null;
-  parentRoute?: RouteConfig | null;
-}
-
-export interface RouteInfo {
-  path: string;
-  component: string;
-  params: Record<string, string>;
-  query: Record<string, string>;
-  metadata: Record<string, unknown>;
-}
-
-export interface RouteMatch {
-  route: RouteConfig | null;
-  params: Record<string, string>;
-  childRoute?: RouteConfig;
-}
-
-export type RouterNext = (arg?: void | false | string | { path: string; replace?: boolean }) => void;
-
-export interface SliceControllerApi {
-  componentCategories: Map<string, string>;
-  templates: Map<string, HTMLTemplateElement>;
-  classes: Map<string, new (...args: any[]) => HTMLElement>;
-  requestedStyles: Set<string>;
-  activeComponents: Map<string, HTMLElement>;
-  getComponent(sliceId: string): HTMLElement | undefined;
-  getComponentCategory(componentSliceId: string): string | undefined;
-  fetchText(
-    componentName: string,
-    resourceType: 'html' | 'css' | 'theme' | 'styles',
-    componentCategory?: string,
-    customPath?: string
-  ): Promise<string>;
-  setComponentProps(component: HTMLElement, props: Record<string, unknown>): void;
-  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 {
-  componentStyles: HTMLStyleElement;
-  themeManager?: SliceThemeManagerApi;
-  init(): Promise<void>;
-  appendComponentStyles(cssText: string): void;
-  registerComponentStyles(componentName: string, cssText: string): void;
-}
-
-export interface SliceThemeManagerApi {
-  currentTheme: string | null;
-  applyTheme(themeName: string): Promise<void>;
-}
-
-export interface SliceLoggerApi {
-  logError(componentSliceId: string, message: string, error?: unknown): void;
-  logWarning(componentSliceId: string, message: string): void;
-  logInfo(componentSliceId: string, message: string): void;
-  getLogs(): unknown[];
-  clearLogs(): void;
-}
-
-export interface SliceEventBindingApi {
-  subscribe(eventName: string, callback: (data?: unknown) => void): string | null;
-  subscribeOnce(eventName: string, callback: (data?: unknown) => void): string | null;
-  emit(eventName: string, data?: unknown): void;
-}
-
-export interface SliceEventManagerApi {
-  init(): boolean;
-  subscribe(
-    eventName: string,
-    callback: (data?: unknown) => void,
-    options?: { component?: HTMLElement }
-  ): string | null;
-  subscribeOnce(
-    eventName: string,
-    callback: (data?: unknown) => void,
-    options?: { component?: HTMLElement }
-  ): string | null;
-  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;
-  clear(): void;
-}
-
-export interface SliceContextOptions {
-  persist?: boolean;
-  storageKey?: string;
-}
-
-export interface SliceContextManagerApi {
-  init(): boolean;
-  create(name: string, initialState?: Record<string, unknown>, options?: SliceContextOptions): boolean;
-  getState<T = unknown>(name: string): T | null;
-  setState<T = unknown>(name: string, updater: T | ((prevState: T) => T)): void;
-  watch<TSelected = unknown>(
-    name: string,
-    component: HTMLElement,
-    callback: (value: TSelected) => void,
-    selector?: (state: unknown) => TSelected
-  ): string | null;
-  has(name: string): boolean;
-  destroy(name: string): boolean;
-  list(): string[];
-}
-
-export interface SliceRouterApi {
-  activeRoute: RouteConfig | null;
-  pathToRouteMap: Map<string, RouteConfig>;
-  init(): void;
-  start(): Promise<void>;
-  beforeEach(guard: (to: RouteInfo, from: RouteInfo, next: RouterNext) => void | Promise<void>): void;
-  afterEach(guard: (to: RouteInfo, from: RouteInfo) => void): void;
-  navigate(path: string, redirectChain?: string[], options?: { replace?: boolean }): Promise<void>;
-  matchRoute(path: string): RouteMatch;
-}
-
-export interface SlicePanelDebuggerApi {
-  init(): Promise<void>;
-  toggle(): void;
-  open(): void;
-  close(): void;
-}
-
-export interface SliceDebuggerApi {
-  enableDebugMode(): Promise<boolean>;
-  attachDebugMode(component: HTMLElement): void;
-  hide(): void;
-}
-
-export interface SliceLoadingApi {
-  start?: () => void;
-  stop?: () => void;
-}
-
-export interface SlicePaths {
-  routesFile?: string;
-  themes?: string;
-  styles?: string;
-  structuralComponentFolderPath?: string;
-  components?: Record<string, { path: string; type?: string }>;
-  [key: string]: unknown;
-}
-
-export interface SliceFrameworkClasses {
-  Controller?: new () => SliceControllerApi;
-  StylesManager?: new () => SliceStylesManagerApi;
-  Router?: new (routes: RouteConfig[]) => SliceRouterApi;
-  Logger?: new () => SliceLoggerApi;
-  EventManager?: new () => SliceEventManagerApi;
-  ContextManager?: new () => SliceContextManagerApi;
-  Debugger?: new () => SliceDebuggerApi;
-  EventManagerDebugger?: new () => SlicePanelDebuggerApi;
-  ContextManagerDebugger?: new () => SlicePanelDebuggerApi;
-  ThemeManager?: new () => SliceThemeManagerApi;
-  [key: string]: unknown;
-}
-
-export interface SliceApi {
-  frameworkClasses: SliceFrameworkClasses | null;
-  controller: SliceControllerApi;
-  stylesManager: SliceStylesManagerApi;
-  logger: SliceLoggerApi;
-  router: SliceRouterApi;
-  events: SliceEventManagerApi;
-  context: SliceContextManagerApi;
-  debugger?: SliceDebuggerApi;
-  eventsDebugger?: SlicePanelDebuggerApi;
-  contextDebugger?: SlicePanelDebuggerApi;
-  leakInspector?: SlicePanelDebuggerApi;
-  loading?: SliceLoadingApi;
-  paths: SlicePaths;
-  _mode: SliceMode;
-  getClass<T = unknown>(module: string): Promise<T | undefined>;
-  isProduction(): boolean;
-  getEnv(name: string, fallbackValue?: string): string | undefined;
-  getPublicEnv(): Record<string, string>;
-  getComponent(componentSliceId: string): HTMLElement | undefined;
-  build<T = HTMLElement>(componentName: string, props?: Record<string, unknown>): Promise<T | null>;
-  setTheme(themeName: string): Promise<void>;
-  readonly theme: string | null;
-  attachTemplate(componentInstance: HTMLElement): void;
-}
-
-declare class Slice {
-  constructor(sliceConfig: Record<string, unknown>, frameworkClasses?: SliceFrameworkClasses | null);
-}
-
-export default Slice;
-
-declare global {
-  interface Window {
-    slice: SliceApi;
-  }
-
-  const slice: SliceApi;
-}
+export type SliceMode = 'development' | 'production' | string;
+
+export interface RouteConfig {
+  path: string;
+  component: string;
+  children?: RouteConfig[];
+  metadata?: Record<string, unknown>;
+  fullPath?: string;
+  parentPath?: string | null;
+  parentRoute?: RouteConfig | null;
+}
+
+export interface RouteInfo {
+  path: string;
+  component: string;
+  params: Record<string, string>;
+  query: Record<string, string>;
+  metadata: Record<string, unknown>;
+}
+
+export interface RouteMatch {
+  route: RouteConfig | null;
+  params: Record<string, string>;
+  childRoute?: RouteConfig;
+}
+
+export type RouterNext = (arg?: void | false | string | { path: string; replace?: boolean }) => void;
+
+export interface SliceControllerApi {
+  componentCategories: Map<string, string>;
+  templates: Map<string, HTMLTemplateElement>;
+  classes: Map<string, new (...args: any[]) => HTMLElement>;
+  requestedStyles: Set<string>;
+  activeComponents: Map<string, HTMLElement>;
+  getComponent(sliceId: string): HTMLElement | undefined;
+  getComponentCategory(componentSliceId: string): string | undefined;
+  fetchText(
+    componentName: string,
+    resourceType: 'html' | 'css' | 'theme' | 'styles',
+    componentCategory?: string,
+    customPath?: string
+  ): Promise<string>;
+  setComponentProps(component: HTMLElement, props: Record<string, unknown>): void;
+  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 {
+  componentStyles: HTMLStyleElement;
+  themeManager?: SliceThemeManagerApi;
+  init(): Promise<void>;
+  appendComponentStyles(cssText: string): void;
+  registerComponentStyles(componentName: string, cssText: string): void;
+}
+
+export interface SliceThemeManagerApi {
+  currentTheme: string | null;
+  applyTheme(themeName: string): Promise<void>;
+}
+
+export interface SliceLoggerApi {
+  logError(componentSliceId: string, message: string, error?: unknown): void;
+  logWarning(componentSliceId: string, message: string): void;
+  logInfo(componentSliceId: string, message: string): void;
+  getLogs(): unknown[];
+  clearLogs(): void;
+}
+
+export interface SliceEventBindingApi {
+  subscribe(eventName: string, callback: (data?: unknown) => void): string | null;
+  subscribeOnce(eventName: string, callback: (data?: unknown) => void): string | null;
+  emit(eventName: string, data?: unknown): void;
+}
+
+export interface SliceEventManagerApi {
+  init(): boolean;
+  subscribe(
+    eventName: string,
+    callback: (data?: unknown) => void,
+    options?: { component?: HTMLElement }
+  ): string | null;
+  subscribeOnce(
+    eventName: string,
+    callback: (data?: unknown) => void,
+    options?: { component?: HTMLElement }
+  ): string | null;
+  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;
+  clear(): void;
+}
+
+export interface SliceContextOptions {
+  persist?: boolean;
+  storageKey?: string;
+}
+
+export interface SliceContextManagerApi {
+  init(): boolean;
+  create(name: string, initialState?: Record<string, unknown>, options?: SliceContextOptions): boolean;
+  getState<T = unknown>(name: string): T | null;
+  setState<T = unknown>(name: string, updater: T | ((prevState: T) => T)): void;
+  watch<TSelected = unknown>(
+    name: string,
+    component: HTMLElement,
+    callback: (value: TSelected) => void,
+    selector?: (state: unknown) => TSelected
+  ): string | null;
+  has(name: string): boolean;
+  destroy(name: string): boolean;
+  list(): string[];
+}
+
+export interface SliceRouterApi {
+  activeRoute: RouteConfig | null;
+  pathToRouteMap: Map<string, RouteConfig>;
+  init(): void;
+  start(): Promise<void>;
+  beforeEach(guard: (to: RouteInfo, from: RouteInfo, next: RouterNext) => void | Promise<void>): void;
+  afterEach(guard: (to: RouteInfo, from: RouteInfo) => void): void;
+  navigate(path: string, redirectChain?: string[], options?: { replace?: boolean }): Promise<void>;
+  matchRoute(path: string): RouteMatch;
+}
+
+export interface SlicePanelDebuggerApi {
+  init(): Promise<void>;
+  toggle(): void;
+  open(): void;
+  close(): void;
+}
+
+export interface SliceDebuggerApi {
+  enableDebugMode(): Promise<boolean>;
+  attachDebugMode(component: HTMLElement): void;
+  hide(): void;
+}
+
+export interface SliceLoadingApi {
+  start?: () => void;
+  stop?: () => void;
+}
+
+export interface SlicePaths {
+  routesFile?: string;
+  themes?: string;
+  styles?: string;
+  structuralComponentFolderPath?: string;
+  components?: Record<string, { path: string; type?: string }>;
+  [key: string]: unknown;
+}
+
+export interface SliceFrameworkClasses {
+  Controller?: new () => SliceControllerApi;
+  StylesManager?: new () => SliceStylesManagerApi;
+  Router?: new (routes: RouteConfig[]) => SliceRouterApi;
+  Logger?: new () => SliceLoggerApi;
+  EventManager?: new () => SliceEventManagerApi;
+  ContextManager?: new () => SliceContextManagerApi;
+  Debugger?: new () => SliceDebuggerApi;
+  EventManagerDebugger?: new () => SlicePanelDebuggerApi;
+  ContextManagerDebugger?: new () => SlicePanelDebuggerApi;
+  ThemeManager?: new () => SliceThemeManagerApi;
+  [key: string]: unknown;
+}
+
+export interface SliceApi {
+  frameworkClasses: SliceFrameworkClasses | null;
+  controller: SliceControllerApi;
+  stylesManager: SliceStylesManagerApi;
+  logger: SliceLoggerApi;
+  router: SliceRouterApi;
+  events: SliceEventManagerApi;
+  context: SliceContextManagerApi;
+  debugger?: SliceDebuggerApi;
+  eventsDebugger?: SlicePanelDebuggerApi;
+  contextDebugger?: SlicePanelDebuggerApi;
+  leakInspector?: SlicePanelDebuggerApi;
+  loading?: SliceLoadingApi;
+  paths: SlicePaths;
+  _mode: SliceMode;
+  getClass<T = unknown>(module: string): Promise<T | undefined>;
+  isProduction(): boolean;
+  getEnv(name: string, fallbackValue?: string): string | undefined;
+  getPublicEnv(): Record<string, string>;
+  getComponent(componentSliceId: string): HTMLElement | undefined;
+  build<T = HTMLElement>(componentName: string, props?: Record<string, unknown>): Promise<T | null>;
+  setTheme(themeName: string): Promise<void>;
+  readonly theme: string | null;
+  attachTemplate(componentInstance: HTMLElement): void;
+}
+
+declare class Slice {
+  constructor(sliceConfig: Record<string, unknown>, frameworkClasses?: SliceFrameworkClasses | null);
+}
+
+export default Slice;
+
+declare global {
+  interface Window {
+    slice: SliceApi;
+  }
+
+  const slice: SliceApi;
+}