@nutin/cli 1.3.1 → 2.1.0

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

@@ -1,6 +1,17 @@
 export type TrustLevel = 'strict' | 'normal' | 'trusted';
 
 export class SecurityHelper {
+  private static readonly STRICT_STRIPPED_TAGS = new Set(['IFRAME', 'OBJECT', 'EMBED']);
+  private static readonly URL_ATTRS = new Set([
+    'href',
+    'src',
+    'action',
+    'formaction',
+    'poster',
+    'background',
+  ]);
+  private static readonly DANGEROUS_URL_SCHEMES = /^(javascript|data):/i;
+
   public static sanitizeTemplate(value: unknown, trustLevel: TrustLevel = 'normal'): string {
     if (value === null || value === undefined) return '';
     let template = String(value);
@@ -22,35 +33,69 @@ export class SecurityHelper {
 
   public static escapeHtml(value: unknown): string {
     if (value === null || value === undefined) return '';
-    const str = String(value);
-    return str
-      .replace(/&/g, "&")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;")
-      .replace(/'/g, "&#039;");
+
+    return String(value)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
   }
 
   private static sanitizeInputTemplate(template: string, trustLevel: TrustLevel): string {
-    // Trusted: no tamplate sanitization
+    // Trusted: no template sanitization
     if (trustLevel === 'trusted') {
       return template;
     }
 
-    // Always remove scripts and inline event handlers
-    template = template
-      .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
-      .replace(/\son\w+\s*=\s*["'][^"']*["']/gi, '');
-    
-    // Strict: remove iframe, object, embed, href, data: protocol
-    if (trustLevel === 'strict') {
-      template = template
-        .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '')
-        .replace(/<object\b[^<]*(?:(?!<\/object>)<[^<]*)*<\/object>/gi, '')
-        .replace(/<embed\b[^>]*>/gi, '')
-        .replace(/href\s*=\s*["']javascript:[^"']*["']/gi, '')
-        .replace(/src\s*=\s*["']data:[^"']*["']/gi, '');
+    const holder = document.createElement('template');
+    holder.innerHTML = template;
+    this.sanitizeNode(holder.content, trustLevel);
+
+    return holder.innerHTML;
+  }
+
+  private static sanitizeNode(root: ParentNode, trustLevel: TrustLevel): void {
+    // Snapshot children before mutating — removing an element from a live
+    // collection while iterating it would skip its next sibling.
+    const children = Array.from(root.children);
+
+    for (const el of children) {
+      const tag = el.tagName;
+
+      if (tag === 'SCRIPT') {
+        el.remove();
+        continue;
+      }
+      if (trustLevel === 'strict' && this.STRICT_STRIPPED_TAGS.has(tag)) {
+        el.remove();
+        continue;
+      }
+
+      for (const attr of Array.from(el.attributes)) {
+        const name = attr.name.toLowerCase();
+        if (name.startsWith('on')) {
+          el.removeAttribute(attr.name);
+          continue;
+        }
+        if (trustLevel === 'strict' && this.URL_ATTRS.has(name) && this.isDangerousUrl(attr.value)) {
+          el.removeAttribute(attr.name);
+        }
+      }
+
+      if (tag === 'TEMPLATE') {
+        this.sanitizeNode((el as HTMLTemplateElement).content, trustLevel);
+      } else {
+        this.sanitizeNode(el, trustLevel);
+      }
     }
-    return template;
+  }
+
+  private static isDangerousUrl(value: string): boolean {
+    // Browsers strip ASCII tab/newline/CR from a URL (and trim leading C0
+    // control/space) before scheme-sniffing, so "java\tscript:" still runs
+    // as javascript: — normalize the same way before checking the scheme.
+    const normalized = value.replace(/[\t\n\r]/g, '').replace(/^[\x00-\x20]+/, '');
+    return this.DANGEROUS_URL_SCHEMES.test(normalized);
   }
 }

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

@@ -0,0 +1,183 @@
+import { TokenHelper } from '#root/dist/src/core/base-classes/base-component/helpers/token.helper.js';
+
+describe('TokenHelper', () => {
+  const makeEvent = (overrides = {}) => ({
+    preventDefault: () => {},
+    target: null,
+    clientX: 10,
+    clientY: 20,
+    key: 'Enter',
+    code: 'Enter',
+    ...overrides,
+  });
+
+  it('resolve always calls event.preventDefault()', () => {
+    let called = false;
+    const ev = makeEvent({ preventDefault: () => { called = true; } });
+    TokenHelper.resolve('@id', document.createElement('div'), ev);
+    expect(called).toBe(true);
+  });
+
+  it('@id resolves and escapes the element id', () => {
+    const el = document.createElement('div');
+    el.id = '<x>';
+    expect(TokenHelper.resolve('@id', el, makeEvent())).toBe('&lt;x&gt;');
+  });
+
+  it('@class resolves the escaped className', () => {
+    const el = document.createElement('div');
+    el.className = 'a b';
+    expect(TokenHelper.resolve('@class', el, makeEvent())).toBe('a b');
+  });
+
+  it('@name resolves the escaped name attribute', () => {
+    const el = document.createElement('input');
+    el.name = 'field';
+    expect(TokenHelper.resolve('@name', el, makeEvent())).toBe('field');
+  });
+
+  it('@name falls back to an empty string when el has no name property', () => {
+    const el = document.createElement('div');
+    expect(TokenHelper.resolve('@name', el, makeEvent())).toBe('');
+  });
+
+  it('@tag resolves the escaped tag name', () => {
+    const el = document.createElement('div');
+    expect(TokenHelper.resolve('@tag', el, makeEvent())).toBe('DIV');
+  });
+
+  it('@value resolves the sanitized input value', () => {
+    const el = document.createElement('input');
+    el.value = '<b>';
+    expect(TokenHelper.resolve('@value', el, makeEvent())).toBe('&lt;b&gt;');
+  });
+
+  it('@checked resolves the checked state', () => {
+    const el = document.createElement('input');
+    el.type = 'checkbox';
+    el.checked = true;
+    expect(TokenHelper.resolve('@checked', el, makeEvent())).toBe(true);
+  });
+
+  it('@selected resolves the selected state', () => {
+    const select = document.createElement('select');
+    const option = document.createElement('option');
+    option.selected = true;
+    select.appendChild(option);
+    expect(TokenHelper.resolve('@selected', option, makeEvent())).toBe(true);
+  });
+
+  it('@textContent resolves escaped textContent', () => {
+    const el = document.createElement('div');
+    el.textContent = '<i>';
+    expect(TokenHelper.resolve('@textContent', el, makeEvent())).toBe('&lt;i&gt;');
+  });
+
+  it('@textContent falls back to an empty string when el has no textContent', () => {
+    expect(TokenHelper.resolve('@textContent', {}, makeEvent())).toBe('');
+  });
+
+  it('@innerText resolves escaped innerText', () => {
+    const el = document.createElement('div');
+    el.innerText = '<i>';
+    expect(TokenHelper.resolve('@innerText', el, makeEvent())).toBe('&lt;i&gt;');
+  });
+
+  it('@innerText falls back to an empty string when el has no innerText', () => {
+    expect(TokenHelper.resolve('@innerText', {}, makeEvent())).toBe('');
+  });
+
+  it('@html resolves escaped innerHTML', () => {
+    const el = document.createElement('div');
+    el.innerHTML = '<i>x</i>';
+    expect(TokenHelper.resolve('@html', el, makeEvent())).toBe('&lt;i&gt;x&lt;/i&gt;');
+  });
+
+  it('@html falls back to an empty string when el has no innerHTML', () => {
+    expect(TokenHelper.resolve('@html', {}, makeEvent())).toBe('');
+  });
+
+  it('@event resolves to the raw event object', () => {
+    const ev = makeEvent();
+    expect(TokenHelper.resolve('@event', document.createElement('div'), ev)).toBe(ev);
+  });
+
+  it('@target resolves to event.target', () => {
+    const target = document.createElement('span');
+    const ev = makeEvent({ target });
+    expect(TokenHelper.resolve('@target', document.createElement('div'), ev)).toBe(target);
+  });
+
+  it('@x and @y resolve to clientX/clientY', () => {
+    const ev = makeEvent({ clientX: 5, clientY: 6 });
+    expect(TokenHelper.resolve('@x', document.createElement('div'), ev)).toBe(5);
+    expect(TokenHelper.resolve('@y', document.createElement('div'), ev)).toBe(6);
+  });
+
+  it('@x and @y fall back to 0 when clientX/clientY are missing', () => {
+    const ev = makeEvent({ clientX: undefined, clientY: undefined });
+    expect(TokenHelper.resolve('@x', document.createElement('div'), ev)).toBe(0);
+    expect(TokenHelper.resolve('@y', document.createElement('div'), ev)).toBe(0);
+  });
+
+  it('@key and @code resolve to escaped keyboard event properties', () => {
+    const ev = makeEvent({ key: '<', code: 'KeyA' });
+    expect(TokenHelper.resolve('@key', document.createElement('div'), ev)).toBe('&lt;');
+    expect(TokenHelper.resolve('@code', document.createElement('div'), ev)).toBe('KeyA');
+  });
+
+  it('@key and @code fall back to an empty string when key/code are missing', () => {
+    const ev = makeEvent({ key: undefined, code: undefined });
+    expect(TokenHelper.resolve('@key', document.createElement('div'), ev)).toBe('');
+    expect(TokenHelper.resolve('@code', document.createElement('div'), ev)).toBe('');
+  });
+
+  it('@attr: resolves an escaped attribute value', () => {
+    const el = document.createElement('div');
+    el.setAttribute('title', '<t>');
+    expect(TokenHelper.resolve('@attr:title', el, makeEvent())).toBe('&lt;t&gt;');
+  });
+
+  it('@attr: falls back to an empty string when the attribute is missing', () => {
+    const el = document.createElement('div');
+    expect(TokenHelper.resolve('@attr:title', el, makeEvent())).toBe('');
+  });
+
+  it('@dataset: resolves an escaped dataset value', () => {
+    const el = document.createElement('div');
+    el.dataset.foo = '<f>';
+    expect(TokenHelper.resolve('@dataset:foo', el, makeEvent())).toBe('&lt;f&gt;');
+  });
+
+  it('@dataset: falls back to an empty string when the dataset key is missing', () => {
+    const el = document.createElement('div');
+    expect(TokenHelper.resolve('@dataset:foo', el, makeEvent())).toBe('');
+  });
+
+  it('resolves a double-quoted string literal', () => {
+    expect(TokenHelper.resolve('"hello"', document.createElement('div'), makeEvent())).toBe('hello');
+  });
+
+  it('resolves a single-quoted string literal', () => {
+    expect(TokenHelper.resolve("'hello'", document.createElement('div'), makeEvent())).toBe('hello');
+  });
+
+  it('resolves a number literal', () => {
+    expect(TokenHelper.resolve('42', document.createElement('div'), makeEvent())).toBe(42);
+  });
+
+  it('falls back to the raw token string when nothing else matches', () => {
+    expect(TokenHelper.resolve('unknownToken', document.createElement('div'), makeEvent())).toBe('unknownToken');
+  });
+
+  it('registerCustomToken adds a resolvable exact token', () => {
+    TokenHelper.registerCustomToken('@custom', (el) => `custom:${el.tagName}`);
+    const el = document.createElement('span');
+    expect(TokenHelper.resolve('@custom', el, makeEvent())).toBe('custom:SPAN');
+  });
+
+  it('registerPrefixedToken adds a resolvable prefixed token', () => {
+    TokenHelper.registerPrefixedToken('@upper:', (suffix) => suffix.toUpperCase());
+    expect(TokenHelper.resolve('@upper:hi', document.createElement('div'), makeEvent())).toBe('HI');
+  });
+});

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

@@ -0,0 +1,85 @@
+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 = {}) {
+    super(options);
+  }
+}
+
+describe('Component', () => {
+  let app;
+
+  beforeEach(() => {
+    app = document.getElementById('app');
+  });
+
+  afterEach(() => {
+    app.innerHTML = '';
+    app = null;
+  });
+
+  it('getValues() delegates to DataBindingHelper.getDataBindingValues on the element', () => {
+    const component = new TestComponent();
+    component.getElement().innerHTML = '<input data-bind="name" value="Ada">';
+    expect(component.getValues()).toEqual({ name: 'Ada' });
+  });
+
+  it('generateTemplate() delegates to ConfigHelper.createNormalizedTemplate using config/defaults/normalizeKeys/templateFn', () => {
+    const component = new TestComponent({
+      config: { name: undefined },
+      defaults: { name: 'fallback', greeting: 'hi' },
+      normalizeKeys: ['name'],
+      templateFn: (cfg) => `<span>${cfg.greeting} ${cfg.name}</span>`,
+    });
+
+    component.render();
+
+    expect(component.getElement().innerHTML).toBe('<span>hi </span>');
+  });
+
+  it('onBeforeRender applies props.className to the element on render', () => {
+    const component = new TestComponent({ props: { className: 'highlight' } });
+    component.render();
+    expect(component.getElement().classList.contains('highlight')).toBe(true);
+  });
+
+  it('onBeforeRender applies props.style as cssText on render', () => {
+    const component = new TestComponent({ props: { style: 'color: red;' } });
+    component.render();
+    expect(component.getElement().style.color).toBe('red');
+  });
+
+  it('applies props-based data-bindings to the rendered template', () => {
+    const component = new TestComponent({
+      templateFn: () => '<span data-bind="name"></span>',
+      props: { name: 'Ada' },
+    });
+
+    component.render();
+
+    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({
+      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();
+  });
+});

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

@@ -1,24 +1,17 @@
-import { BaseComponent, ButtonManager, BaseButton, BaseComponentOptions } from '../../index.js';
+import { BaseComponent, BaseComponentOptions } from '../../index.js';
 import { ConfigHelper } from './helpers/config.helper.js';
 import { DataBindingHelper } from './helpers/data-binding.helper.js';
 
-export interface ComponentButton extends BaseButton {
-  // if needed for Component-specific properties
-}
-
 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;
-  
-  // Dynamic buttons
-  buttons?: ComponentButton[];
-  
+
   // Allow for additional data-bind attributes
   [key: string]: any;
 }
@@ -45,7 +38,9 @@ interface ComponentOptions<K = any> extends BaseComponentOptions {
 export abstract class Component<T extends HTMLElement = HTMLElement, K = any> extends BaseComponent<T> {
   protected config: K;
   protected props: ComponentProps;
-  private buttonManager: ButtonManager;
+  private _templateFn: (config?: K) => string;
+  private _normalizeKeys: (keyof K)[];
+  private _defaults: Partial<K>;
 
   constructor({
     templateFn = () => '',
@@ -55,35 +50,36 @@ export abstract class Component<T extends HTMLElement = HTMLElement, K = any> ex
     config,
     normalizeKeys = [],
     defaults = {},
+    trustLevel,
   }: ComponentOptions) {
-    const template = ConfigHelper.createNormalizedTemplate({
-      config, defaults, normalizeKeys, templateFn,
-    });
-    super({template, mountTarget, tagName});
+    super({ mountTarget, tagName, trustLevel });
 
     this.config = ConfigHelper.setConfigValue(config, normalizeKeys);
     this.props = props;
-    this.buttonManager = this.createButtonManager();
+    this._templateFn = templateFn;
+    this._normalizeKeys = normalizeKeys as (keyof K)[];
+    this._defaults = defaults;
   }
 
   public getValues(): Record<string, string> {
     return DataBindingHelper.getDataBindingValues(this.element);
   }
 
-  public override render(): HTMLElement {
+  protected override generateTemplate(): string {
+    return ConfigHelper.createNormalizedTemplate({
+      config: this.config,
+      defaults: this._defaults,
+      normalizeKeys: this._normalizeKeys,
+      templateFn: this._templateFn,
+    });
+  }
+
+  protected override onBeforeRender(): void {
     this.applyProps();
-    this.appendDynamicButtons();
-    this.autoBindEvents();
-    this.parseDataAttributes();
-    return super.render();
   }
 
-  private createButtonManager(): ButtonManager {
-    return new ButtonManager(
-      this, 
-      this.props.buttons, 
-      { containerClassName: 'component-buttons' }
-    );
+  protected override onAfterRender(): void {
+    this.applyDataBindings();
   }
 
   private applyProps(): void {
@@ -91,13 +87,8 @@ export abstract class Component<T extends HTMLElement = HTMLElement, K = any> ex
       this.element.classList.add(this.props.className);
     }
     if (this.props.style) {
-      this.element.style = this.props.style;
+      this.element.style.cssText = this.props.style;
     }
-    this.applyDataBindings();
-  }
-
-  private appendDynamicButtons(): void {
-    this.buttonManager.appendTo(this.element);
   }
 
   private applyDataBindings(): void {

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

@@ -0,0 +1,58 @@
+import { 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', () => {
+    const result = ConfigHelper.normalize({ a: 1 }, { a: 0, b: 2 });
+    expect(result).toEqual({ a: 1, b: 2 });
+  });
+
+  it('normalize returns config untouched when there are no matching defaults', () => {
+    const result = ConfigHelper.normalize({ a: 1 }, {});
+    expect(result).toEqual({ a: 1 });
+  });
+
+  it('normalizeStrings replaces undefined and null values with an empty string for the given keys', () => {
+    const result = ConfigHelper.normalizeStrings({ a: undefined, b: null, c: 'x' }, ['a', 'b']);
+    expect(result).toEqual({ a: '', b: '', c: 'x' });
+  });
+
+  it('normalizeStrings leaves keys not in stringKeys untouched, even if undefined', () => {
+    const result = ConfigHelper.normalizeStrings({ a: undefined, b: undefined }, ['a']);
+    expect(result).toEqual({ a: '', b: undefined });
+  });
+
+  it('normalizeStrings does not mutate the original config object', () => {
+    const original = { a: undefined };
+    ConfigHelper.normalizeStrings(original, ['a']);
+    expect(original.a).toBeUndefined();
+  });
+
+  it('createNormalizedTemplate normalizes then calls templateFn with the result', () => {
+    const result = ConfigHelper.createNormalizedTemplate({
+      config: { name: undefined },
+      defaults: { name: 'fallback', extra: 1 },
+      normalizeKeys: ['name'],
+      templateFn: (cfg) => `name=${cfg.name},extra=${cfg.extra}`,
+    });
+    expect(result).toBe('name=,extra=1');
+  });
+
+  it('createNormalizedTemplate defaults templateFn to a function returning an empty string', () => {
+    const result = ConfigHelper.createNormalizedTemplate({ config: { a: 1 } });
+    expect(result).toBe('');
+  });
+
+  it('setConfigValue normalizes strings when normalizeKeys is truthy', () => {
+    const result = ConfigHelper.setConfigValue({ a: undefined }, ['a']);
+    expect(result).toEqual({ a: '' });
+  });
+
+  it('setConfigValue returns the config as-is when normalizeKeys is falsy and config is truthy', () => {
+    const config = { a: 1 };
+    expect(ConfigHelper.setConfigValue(config, null)).toBe(config);
+  });
+
+  it('setConfigValue returns an empty object when both normalizeKeys and config are falsy', () => {
+    expect(ConfigHelper.setConfigValue(undefined, null)).toEqual({});
+  });
+});

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

@@ -0,0 +1,75 @@
+import { DataBindingHelper } from '#root/dist/src/core/base-classes/component/helpers/data-binding.helper.js';
+
+describe('DataBindingHelper', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+    container = null;
+  });
+
+  it('applyDataBindings sets textContent for a plain bound element', () => {
+    container.innerHTML = '<span data-bind="name"></span>';
+    DataBindingHelper.applyDataBindings(container, { name: 'Ada' });
+    expect(container.querySelector('span').textContent).toBe('Ada');
+  });
+
+  it('applyDataBindings sets .value for a bound input element', () => {
+    container.innerHTML = '<input data-bind="name">';
+    DataBindingHelper.applyDataBindings(container, { name: 'Ada' });
+    expect(container.querySelector('input').value).toBe('Ada');
+  });
+
+  it('applyDataBindings sets .value for a bound textarea element', () => {
+    container.innerHTML = '<textarea data-bind="bio"></textarea>';
+    DataBindingHelper.applyDataBindings(container, { bio: 'hello' });
+    expect(container.querySelector('textarea').value).toBe('hello');
+  });
+
+  it('applyDataBindings coerces non-string values to strings', () => {
+    container.innerHTML = '<span data-bind="count"></span>';
+    DataBindingHelper.applyDataBindings(container, { count: 42 });
+    expect(container.querySelector('span').textContent).toBe('42');
+  });
+
+  it('applyDataBindings skips a bound element when props[key] is undefined', () => {
+    container.innerHTML = '<span data-bind="missing">original</span>';
+    DataBindingHelper.applyDataBindings(container, {});
+    expect(container.querySelector('span').textContent).toBe('original');
+  });
+
+  it('applyDataBindings skips a bound element when data-bind is empty', () => {
+    container.innerHTML = '<span data-bind="">original</span>';
+    DataBindingHelper.applyDataBindings(container, { '': 'ignored' });
+    expect(container.querySelector('span').textContent).toBe('original');
+  });
+
+  it('getDataBindingValues reads .value from bound input/textarea elements', () => {
+    container.innerHTML = '<input data-bind="name" value="Ada"><textarea data-bind="bio">hi</textarea>';
+    const values = DataBindingHelper.getDataBindingValues(container);
+    expect(values).toEqual({ name: 'Ada', bio: 'hi' });
+  });
+
+  it('getDataBindingValues reads textContent from bound plain elements', () => {
+    container.innerHTML = '<span data-bind="name">Ada</span>';
+    const values = DataBindingHelper.getDataBindingValues(container);
+    expect(values).toEqual({ name: 'Ada' });
+  });
+
+  it('getDataBindingValues defaults missing textContent to an empty string', () => {
+    container.innerHTML = '<span data-bind="name"></span>';
+    const values = DataBindingHelper.getDataBindingValues(container);
+    expect(values).toEqual({ name: '' });
+  });
+
+  it('getDataBindingValues skips an element when data-bind is empty', () => {
+    container.innerHTML = '<span data-bind="">hi</span>';
+    const values = DataBindingHelper.getDataBindingValues(container);
+    expect(values).toEqual({});
+  });
+});