@nutin/cli 2.1.0 → 3.0.0

package/templates/base/src/core/base-classes/base-component/helpers/token.helper.ts.hbs

@@ -1,19 +1,24 @@
-import { SecurityHelper } from './security.helper.js';
+// Tokens resolve to raw values: escaping happens at output, in html`` templates.
+function readInputValue(el: HTMLElement): string {
+  if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) return el.value;
+  if (el.hasAttribute('contenteditable')) return el.innerText;
+  return '';
+}
 
 // Exact token resolvers
 const EXACT_TOKEN_RESOLVERS: Record<string, (el: HTMLElement, ev: Event) => any> = {
-  '@id': (el) => SecurityHelper.escapeHtml(el.id),
-  '@class': (el) => SecurityHelper.escapeHtml(el.className),
-  '@name': (el) => SecurityHelper.escapeHtml((el as any).name ?? ''),
-  '@tag': (el) => SecurityHelper.escapeHtml(el.tagName),
+  '@id': (el) => el.id,
+  '@class': (el) => el.className,
+  '@name': (el) => (el as any).name ?? '',
+  '@tag': (el) => el.tagName,
 
-  '@value': (el) => SecurityHelper.sanitizeInputElement(el as any),
+  '@value': (el) => readInputValue(el),
   '@checked': (el) => (el as HTMLInputElement).checked,
   '@selected': (el) => (el as HTMLOptionElement).selected,
 
-  '@textContent': (el) => SecurityHelper.escapeHtml(el.textContent ?? ''),
-  '@innerText': (el) => SecurityHelper.escapeHtml(el.innerText ?? ''),
-  '@html': (el) => SecurityHelper.escapeHtml(el.innerHTML ?? ''),
+  '@textContent': (el) => el.textContent ?? '',
+  '@innerText': (el) => el.innerText ?? '',
+  '@html': (el) => el.innerHTML ?? '',
 
   '@event': (_el, ev) => ev,
   '@target': (_el, ev) => ev.target,
@@ -21,79 +26,76 @@ const EXACT_TOKEN_RESOLVERS: Record<string, (el: HTMLElement, ev: Event) => any>
   '@x': (_el, ev) => (ev as MouseEvent).clientX ?? 0,
   '@y': (_el, ev) => (ev as MouseEvent).clientY ?? 0,
 
-  '@key': (_el, ev) => SecurityHelper.escapeHtml((ev as KeyboardEvent).key ?? ''),
-  '@code': (_el, ev) => SecurityHelper.escapeHtml((ev as KeyboardEvent).code ?? ''),
+  '@key': (_el, ev) => (ev as KeyboardEvent).key ?? '',
+  '@code': (_el, ev) => (ev as KeyboardEvent).code ?? '',
 };
 
 // Prefix-based token resolvers
 const PREFIXED_TOKEN_RESOLVERS: Record<string, (suffix: string, el: HTMLElement) => any> = {
-  '@attr:': (suffix, el) => SecurityHelper.escapeHtml(el.getAttribute(suffix) ?? ''),
-  '@dataset:': (suffix, el) => SecurityHelper.escapeHtml((el.dataset as any)[suffix] ?? ''),
+  '@attr:': (suffix, el) => el.getAttribute(suffix) ?? '',
+  '@dataset:': (suffix, el) => (el.dataset as any)[suffix] ?? '',
 };
 
-export class TokenHelper {
-  private static customResolvers: Record<string, (el: HTMLElement, ev: Event) => any> = {};
+const customResolvers: Record<string, (el: HTMLElement, ev: Event) => any> = {};
 
-  public static resolve(token: string, el: Element, event: Event): any {
-    const htmlEl = el as HTMLElement;
-    event.preventDefault();
+export function resolve(token: string, el: Element, event: Event): any {
+  const htmlEl = el as HTMLElement;
 
-    return (
-      this.resolveExact(token, htmlEl, event) ??
-      this.resolvePrefixed(token, htmlEl) ??
-      this.resolveCustom(token, htmlEl, event) ??
-      this.resolveLiteral(token) ??
-      token
-    );
-  }
+  return (
+    resolveExact(token, htmlEl, event) ??
+    resolvePrefixed(token, htmlEl) ??
+    resolveCustom(token, htmlEl, event) ??
+    resolveLiteral(token) ??
+    token
+  );
+}
 
 /** Register a new exact token like "@foo" */
-  public static registerCustomToken(
-    name: string,
-    resolver: (el: HTMLElement, ev: Event) => any
-  ): void {
-    this.customResolvers[name] = resolver;
-  }
+export function registerCustomToken(
+  name: string,
+  resolver: (el: HTMLElement, ev: Event) => any
+): void {
+  customResolvers[name] = resolver;
+}
 
 /** Register a new prefixed token like "@style:" */
-  public static registerPrefixedToken(
-    prefix: string,
-    resolver: (suffix: string, el: HTMLElement) => any
-  ): void {
-    PREFIXED_TOKEN_RESOLVERS[prefix] = resolver;
-  }
+export function registerPrefixedToken(
+  prefix: string,
+  resolver: (suffix: string, el: HTMLElement) => any
+): void {
+  PREFIXED_TOKEN_RESOLVERS[prefix] = resolver;
+}
 
-  private static resolveExact(token: string, el: HTMLElement, ev: Event): any | null {
-    const resolver = EXACT_TOKEN_RESOLVERS[token];
-    return resolver ? resolver(el, ev) : null;
-  }
+function resolveExact(token: string, el: HTMLElement, ev: Event): any | null {
+  const resolver = EXACT_TOKEN_RESOLVERS[token];
+  return resolver ? resolver(el, ev) : null;
+}
 
-  private static resolvePrefixed(token: string, el: HTMLElement): any | null {
-    for (const [prefix, resolver] of Object.entries(PREFIXED_TOKEN_RESOLVERS)) {
-      if (token.startsWith(prefix)) {
-        return resolver(token.slice(prefix.length), el);
-      }
+function resolvePrefixed(token: string, el: HTMLElement): any | null {
+  for (const [prefix, resolver] of Object.entries(PREFIXED_TOKEN_RESOLVERS)) {
+    if (token.startsWith(prefix)) {
+      return resolver(token.slice(prefix.length), el);
     }
-    return null;
   }
+  return null;
+}
 
-  private static resolveCustom(token: string, el: HTMLElement, ev: Event): any | null {
-    const resolver = this.customResolvers[token];
-    return resolver ? resolver(el, ev) : null;
-  }
+function resolveCustom(token: string, el: HTMLElement, ev: Event): any | null {
+  const resolver = customResolvers[token];
+  return resolver ? resolver(el, ev) : null;
+}
 
-  private static resolveLiteral(token: string): any | null {
-    // string literal
-    if (
-      (token.startsWith('"') && token.endsWith('"')) ||
-      (token.startsWith("'") && token.endsWith("'"))
-    ) {
-      return token.slice(1, -1);
-    }
-    // number literal
-    if (!isNaN(Number(token))) {
-      return Number(token);
-    }
-    return null;
+function resolveLiteral(token: string): any | null {
+  // string literal
+  if (
+    (token.startsWith('"') && token.endsWith('"')) ||
+    (token.startsWith("'") && token.endsWith("'"))
+  ) {
+    return token.slice(1, -1);
+  }
+  // number literal
+  if (!isNaN(Number(token))) {
+    return Number(token);
   }
+  return null;
 }

package/templates/base/src/core/base-classes/component/component.test.js.hbs

@@ -1,5 +1,4 @@
 import { Component } from '#root/dist/src/core/index.js';
-import { DataBindingHelper } from '#root/dist/src/core/base-classes/component/helpers/data-binding.helper.js';
 
 class TestComponent extends Component {
   constructor(options = {}) {
@@ -44,6 +43,13 @@ describe('Component', () => {
     expect(component.getElement().classList.contains('highlight')).toBe(true);
   });
 
+  it('onBeforeRender applies a space-separated props.className as several classes', () => {
+    const component = new TestComponent({ props: { className: ' btn  primary ' } });
+    component.render();
+    expect(component.getElement().classList.contains('btn')).toBe(true);
+    expect(component.getElement().classList.contains('primary')).toBe(true);
+  });
+
   it('onBeforeRender applies props.style as cssText on render', () => {
     const component = new TestComponent({ props: { style: 'color: red;' } });
     component.render();
@@ -61,25 +67,19 @@ describe('Component', () => {
     expect(component.getElement().querySelector('span').textContent).toBe('Ada');
   });
 
-  it('onAfterRender calls DataBindingHelper.applyDataBindings with the element and props, after the template has been written', () => {
-    // onAfterRender runs after render() sets innerHTML from generateTemplate(),
-    // so the template's own [data-bind] nodes already exist by the time this fires.
-    const calls = [];
-    const spy = spyOn(DataBindingHelper, 'applyDataBindings');
-    spy.andCallFake((element, props) => {
-      calls.push({ props, htmlAtCallTime: element.innerHTML });
-    });
-
-    const component = new TestComponent({
+  it('applies data-bindings in onAfterRender, so a subclass sees them once it calls super', () => {
+    let seen = null;
+    class BoundComponent extends Component {
+      onAfterRender() {
+        super.onAfterRender();
+        seen = this.getElement().querySelector('span').textContent;
+      }
+    }
+    const component = new BoundComponent({
       templateFn: () => '<span data-bind="name"></span>',
       props: { name: 'Ada' },
     });
     component.render();
-
-    expect(calls.length).toBe(1);
-    expect(calls[0].props).toEqual({ name: 'Ada' });
-    expect(calls[0].htmlAtCallTime).toBe('<span data-bind="name"></span>');
-
-    spy.restore();
+    expect(seen).toBe('Ada');
   });
 });

package/templates/base/src/core/base-classes/component/component.ts.hbs

@@ -1,44 +1,11 @@
-import { BaseComponent, BaseComponentOptions } from '../../index.js';
-import { ConfigHelper } from './helpers/config.helper.js';
-import { DataBindingHelper } from './helpers/data-binding.helper.js';
+import { BaseComponent } from '../base-component/base-component.js';
+import * as ConfigHelper from './helpers/config.helper.js';
+import * as DataBindingHelper from './helpers/data-binding.helper.js';
 
-export interface ComponentProps {
-  // Common HTML attributes - extend as needed
-  className?: string;
-  style?: string;
-  textContent?: string;
-
-  // Form field bindings - extend as needed
-  name?: string;
-  email?: string;
-
-  // Allow for additional data-bind attributes
-  [key: string]: any;
-}
-
-export interface ComponentOptions<K = any> extends BaseComponentOptions {
-  props?: ComponentProps;
-  config?: K;
-  defaults?: Partial<K>;
-  templateFn?: (config?: K) => string;
-  normalizeKeys?: (keyof K)[];
-}
-
-/**
- * ```typescript
-interface ComponentOptions<K = any> extends BaseComponentOptions {
-  props?: ComponentProps;
-  config?: K;
-  defaults?: Partial<K>;
-  templateFn?: (config?: K) => string;
-  normalizeKeys?: (keyof K)[];
-}
-  ```
-*/
 export abstract class Component<T extends HTMLElement = HTMLElement, K = any> extends BaseComponent<T> {
   protected config: K;
-  protected props: ComponentProps;
-  private _templateFn: (config?: K) => string;
+  protected props: Nutin.ComponentProps;
+  private _templateFn: (config?: K) => Nutin.Template;
   private _normalizeKeys: (keyof K)[];
   private _defaults: Partial<K>;
 
@@ -51,7 +18,7 @@ export abstract class Component<T extends HTMLElement = HTMLElement, K = any> ex
     normalizeKeys = [],
     defaults = {},
     trustLevel,
-  }: ComponentOptions) {
+  }: Nutin.ComponentOptions) {
     super({ mountTarget, tagName, trustLevel });
 
     this.config = ConfigHelper.setConfigValue(config, normalizeKeys);
@@ -65,7 +32,7 @@ export abstract class Component<T extends HTMLElement = HTMLElement, K = any> ex
     return DataBindingHelper.getDataBindingValues(this.element);
   }
 
-  protected override generateTemplate(): string {
+  protected override generateTemplate(): Nutin.Template {
     return ConfigHelper.createNormalizedTemplate({
       config: this.config,
       defaults: this._defaults,
@@ -84,7 +51,7 @@ export abstract class Component<T extends HTMLElement = HTMLElement, K = any> ex
 
   private applyProps(): void {
     if (this.props.className) {
-      this.element.classList.add(this.props.className);
+      this.element.classList.add(...this.props.className.split(/\s+/).filter(Boolean));
     }
     if (this.props.style) {
       this.element.style.cssText = this.props.style;

package/templates/base/src/core/base-classes/component/helpers/config.helper.test.js.hbs

@@ -1,4 +1,4 @@
-import { ConfigHelper } from '#root/dist/src/core/base-classes/component/helpers/config.helper.js';
+import * as ConfigHelper from '#root/dist/src/core/base-classes/component/helpers/config.helper.js';
 
 describe('ConfigHelper', () => {
   it('normalize shallow-merges defaults under config, letting config win', () => {

package/templates/base/src/core/base-classes/component/helpers/config.helper.ts.hbs

@@ -1,43 +1,41 @@
-export class ConfigHelper {
-  public static normalize<T extends Record<string, any>>(
-    config: T, 
-    defaults: Partial<T>
-  ): T {
-    return {
-      ...defaults,
-      ...config
-    } as T;
-  }
+export function normalize<T extends Record<string, any>>(
+  config: T, 
+  defaults: Partial<T>
+): T {
+  return {
+    ...defaults,
+    ...config
+  } as T;
+}
 
-  public static normalizeStrings<T extends Record<string, any>>(
-    config: T,
-    stringKeys: (keyof T)[]
-  ): T {
-    const normalized = { ...config };
-    
-    stringKeys.forEach(key => {
-      if (normalized[key] === undefined || normalized[key] === null) {
-        normalized[key] = '' as T[keyof T];
-      }
-    });
-    
-    return normalized;
-  }
+export function normalizeStrings<T extends Record<string, any>>(
+  config: T,
+  stringKeys: (keyof T)[]
+): T {
+  const normalized = { ...config };
+  
+  stringKeys.forEach(key => {
+    if (normalized[key] === undefined || normalized[key] === null) {
+      normalized[key] = '' as T[keyof T];
+    }
+  });
   
-  public static createNormalizedTemplate<T extends Record<string, any>>({
-    config, 
-    defaults = {}, 
-    normalizeKeys = [], 
-    templateFn = () => ''
-  }: T) {
-    let normalizedConfig = ConfigHelper.normalize(config, defaults);
-    normalizedConfig = ConfigHelper.normalizeStrings(normalizedConfig, normalizeKeys);
-    return templateFn(normalizedConfig);
-  }
+  return normalized;
+}
+
+export function createNormalizedTemplate<T extends Record<string, any>>({
+  config, 
+  defaults = {}, 
+  normalizeKeys = [], 
+  templateFn = () => ''
+}: T) {
+  let normalizedConfig = normalize(config, defaults);
+  normalizedConfig = normalizeStrings(normalizedConfig, normalizeKeys);
+  return templateFn(normalizedConfig);
+}
 
-  public static setConfigValue<T extends Record<string, any>>(config: T, normalizeKeys: (keyof T)[]): T {
-    if (normalizeKeys) return ConfigHelper.normalizeStrings(config, normalizeKeys) as T;
-    else if (config) return config as T 
-    else return ({} as T);
-  }
+export function setConfigValue<T extends Record<string, any>>(config: T, normalizeKeys: (keyof T)[]): T {
+  if (normalizeKeys) return normalizeStrings(config, normalizeKeys) as T;
+  else if (config) return config as T 
+  else return ({} as T);
 }

package/templates/base/src/core/base-classes/component/helpers/data-binding.helper.test.js.hbs

@@ -1,4 +1,5 @@
-import { DataBindingHelper } from '#root/dist/src/core/base-classes/component/helpers/data-binding.helper.js';
+import * as DataBindingHelper from '#root/dist/src/core/base-classes/component/helpers/data-binding.helper.js';
+import * as DomHelper from '#root/dist/src/core/base-classes/base-component/helpers/dom.helper.js';
 
 describe('DataBindingHelper', () => {
   let container;
@@ -72,4 +73,16 @@ describe('DataBindingHelper', () => {
     const values = DataBindingHelper.getDataBindingValues(container);
     expect(values).toEqual({});
   });
+
+  it('skips fields inside a nested component root in both directions', () => {
+    container.innerHTML = '<input class="own" data-bind="name"><div class="child"><input class="nested" data-bind="name" value="child"></div>';
+    DomHelper.markComponentRoot(container.querySelector('.child'));
+
+    DataBindingHelper.applyDataBindings(container, { name: 'Ada' });
+
+    expect(container.querySelector('.own').value).toBe('Ada');
+    expect(container.querySelector('.nested').value).toBe('child');
+    container.querySelector('.own').value = 'parent';
+    expect(DataBindingHelper.getDataBindingValues(container)).toEqual({ name: 'parent' });
+  });
 });

package/templates/base/src/core/base-classes/component/helpers/data-binding.helper.ts.hbs

@@ -1,35 +1,37 @@
-import { ComponentProps } from "../component.js";
+import * as DomHelper from '../../base-component/helpers/dom.helper.js';
 
-export class DataBindingHelper {
-  public static applyDataBindings(element: HTMLElement, props: ComponentProps): void {
-    const bindEls = element.querySelectorAll('[data-bind]');
-    bindEls.forEach(el => {
-      const key = el.getAttribute('data-bind');
-      if (!key) return;
-      
-      const value = props[key];
-      if (value === undefined) return;
+// A nested component's data-bind fields belong to that component: they are neither
+// filled from this one's props nor returned by its getValues().
+export function applyDataBindings(element: HTMLElement, props: Nutin.ComponentProps): void {
+  const bindEls = element.querySelectorAll('[data-bind]');
+  bindEls.forEach(el => {
+    if (DomHelper.isInsideNestedComponent(el, element)) return;
+    const key = el.getAttribute('data-bind');
+    if (!key) return;
+    
+    const value = props[key];
+    if (value === undefined) return;
 
-      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
-        el.value = String(value);
-      } else {
-        el.textContent = String(value);
-      }
-    });
-  }
+    if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+      el.value = String(value);
+    } else {
+      el.textContent = String(value);
+    }
+  });
+}
 
-  public static getDataBindingValues(element: HTMLElement): Record<string, string> {
-    const values: Record<string, string> = {};
-    element.querySelectorAll('[data-bind]').forEach(el => {
-      const key = el.getAttribute('data-bind');
-      if (!key) return;
-      
-      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
-        values[key] = el.value;
-      } else {
-        values[key] = el.textContent || '';
-      }
-    });
-    return values;
-  }
+export function getDataBindingValues(element: HTMLElement): Record<string, string> {
+  const values: Record<string, string> = {};
+  element.querySelectorAll('[data-bind]').forEach(el => {
+    if (DomHelper.isInsideNestedComponent(el, element)) return;
+    const key = el.getAttribute('data-bind');
+    if (!key) return;
+    
+    if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+      values[key] = el.value;
+    } else {
+      values[key] = el.textContent || '';
+    }
+  });
+  return values;
 }

package/templates/base/src/core/base-classes/service/service.test.js.hbs

@@ -99,6 +99,38 @@ describe('Service', () => {
     expect(Service.hasInstance(TestService)).toBe(false);
   });
 
+  it('destroy runs registerCleanup callbacks once', async () => {
+    const instance = TestService.getInstance();
+    let calls = 0;
+    instance.addCleanup(() => { calls++; });
+
+    await TestService.destroy();
+    instance.dispose();
+
+    expect(calls).toBe(1);
+  });
+
+  it('destroyAll runs every instance\'s registerCleanup callbacks', async () => {
+    const instance = TestService.getInstance();
+    let cleaned = false;
+    instance.addCleanup(() => { cleaned = true; });
+
+    await Service.destroyAll();
+
+    expect(cleaned).toBe(true);
+  });
+
+  it('does not tear anything down on page unload', () => {
+    const instance = TestService.getInstance();
+    let cleaned = false;
+    instance.addCleanup(() => { cleaned = true; });
+
+    window.dispatchEvent(new window.Event('beforeunload'));
+
+    expect(cleaned).toBe(false);
+    expect(Service.hasInstance(TestService)).toBe(true);
+  });
+
   it('destroy is a no-op when no instance exists', async () => {
     expect(Service.hasInstance(TestService)).toBe(false);
     await TestService.destroy();

package/templates/base/src/core/base-classes/service/service.ts.hbs

@@ -3,11 +3,11 @@
  * Supports constructor parameters for initialization.
  */
 export abstract class Service<T extends Service<T>> {
-  private static _instances = new Map<Function, any>();
+  private static _instances = new Map<Function, Service<any>>();
   private static _instantiating = new Set<Function>();
   private _cleanupCallbacks: (() => void)[] = [];
 
-  constructor(...args: any[]) {
+  constructor() {
     const constructor = this.constructor as new (...args: any[]) => T;
 
     if (!Service._instantiating.has(constructor)) {
@@ -16,7 +16,6 @@ export abstract class Service<T extends Service<T>> {
       );
     }
     this.autoBindMethods();
-    window.addEventListener('beforeunload', this.dispose);
   }
 
   /**
@@ -24,10 +23,10 @@ export abstract class Service<T extends Service<T>> {
    * doesn't exist yet. Throws if args are passed to an already-initialized instance,
    * preventing silent re-initialization mismatches.
    */
-  public static getInstance<T extends Service<T>>(
-    this: new (...args: any[]) => T,
-    ...args: any[]
-  ): T {
+  public static getInstance<C extends new (...args: any) => Service<any>>(
+    this: C,
+    ...args: ConstructorParameters<C> | []
+  ): InstanceType<C> {
     const alreadyExists = Service._instances.has(this);
 
     if (alreadyExists && args.length > 0) {
@@ -45,7 +44,7 @@ export abstract class Service<T extends Service<T>> {
       Service._instantiating.delete(this);
     }
 
-    return Service._instances.get(this);
+    return Service._instances.get(this) as InstanceType<C>;
   }
 
   public static hasInstance<T extends Service<T>>(
@@ -60,21 +59,24 @@ export abstract class Service<T extends Service<T>> {
     const instance = Service._instances.get(this);
     if (instance) {
       await instance.onDestroy();
+      instance.runCleanup();
       Service._instances.delete(this);
     }
   }
 
+  // No page-unload hook: the browser frees everything on unload, and tearing down on
+  // `beforeunload` left a page restored from the back/forward cache (or kept after a
+  // cancelled "Leave site?" prompt) with every service already disposed.
   public dispose = (): void => {
-    this._cleanupCallbacks.forEach(fn => fn());
-    this._cleanupCallbacks = [];
+    this.runCleanup();
     Service._instances.delete(this.constructor);
   };
 
   public static async destroyAll(): Promise<void> {
-    const destroyPromises = Array.from(Service._instances.values())
-      .map(instance => instance.onDestroy());
+    const instances = Array.from(Service._instances.values());
 
-    await Promise.all(destroyPromises);
+    await Promise.all(instances.map(instance => instance.onDestroy()));
+    instances.forEach(instance => instance.runCleanup());
     Service._instances.clear();
     Service._instantiating.clear();
   }
@@ -83,6 +85,12 @@ export abstract class Service<T extends Service<T>> {
     this._cleanupCallbacks.push(callback);
   }
 
+  private runCleanup(): void {
+    const callbacks = this._cleanupCallbacks;
+    this._cleanupCallbacks = [];
+    callbacks.forEach(fn => fn());
+  }
+
   /**
    * For async and custom cleanup operations.
    */

package/templates/base/src/core/base-classes/view/view.test.js.hbs

@@ -23,6 +23,10 @@ describe('View', () => {
     expect(() => new HomeView({ viewName: '' })).toThrow();
   });
 
+  it('has no document title of its own by default', () => {
+    expect(new NamedView({ viewName: 'custom-name' }).documentTitle()).toBe(undefined);
+  });
+
   it('uses the explicit viewName option', () => {
     const view = new NamedView({ viewName: 'custom-name' });
     expect(view.viewName).toBe('custom-name');