custom-elements-ts 0.0.17 → 0.2.0

package/tests/map-shallow-state.spec.ts

@@ -0,0 +1,184 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { CustomElement, State, TemplateResult, html, map } from 'custom-elements-ts';
+
+const nextMicrotask = () => Promise.resolve();
+
+interface Item {
+  id: number;
+  label: string;
+}
+
+const rowSpy = vi.fn();
+
+@CustomElement({
+  tag: 'mapped-list-element',
+  shadow: false,
+})
+class MappedListElement extends HTMLElement {
+  @State({ deep: false }) items: Item[] = [];
+
+  render(): TemplateResult {
+    return html`<ul>
+      ${map(this.items, (item) => {
+        rowSpy(item.id);
+        return html`<li data-id=${item.id}>${item.label}</li>`;
+      })}
+    </ul>`;
+  }
+}
+
+describe('map() identity-based list rendering', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    rowSpy.mockClear();
+  });
+
+  const mount = async (): Promise<MappedListElement> => {
+    const el = document.createElement('mapped-list-element') as MappedListElement;
+    document.body.appendChild(el);
+    await nextMicrotask();
+    return el;
+  };
+
+  it('renders mapped items and skips rows whose item is identical on rerender', async () => {
+    const el = await mount();
+    const a = { id: 1, label: 'one' };
+    const b = { id: 2, label: 'two' };
+    el.items = [a, b];
+    await nextMicrotask();
+
+    const listItems = el.querySelectorAll('li');
+    expect(listItems.length).toBe(2);
+    expect(listItems[1].textContent).toBe('two');
+    expect(rowSpy).toHaveBeenCalledTimes(2);
+
+    // Replace only the second item; the first row must be skipped entirely.
+    rowSpy.mockClear();
+    el.items = [a, { id: 2, label: 'TWO' }];
+    await nextMicrotask();
+
+    expect(rowSpy).toHaveBeenCalledTimes(1);
+    expect(rowSpy).toHaveBeenCalledWith(2);
+    expect(el.querySelectorAll('li')[1].textContent).toBe('TWO');
+    expect(el.querySelectorAll('li')[0].textContent).toBe('one');
+  });
+
+  it('detaches only the removed row on a contiguous middle removal', async () => {
+    const el = await mount();
+    const items = [
+      { id: 1, label: 'one' },
+      { id: 2, label: 'two' },
+      { id: 3, label: 'three' },
+      { id: 4, label: 'four' },
+    ];
+    el.items = items;
+    await nextMicrotask();
+    const before = Array.from(el.querySelectorAll('li'));
+    expect(before.length).toBe(4);
+
+    // Remove the second item: the surviving rows must keep their exact DOM
+    // nodes and the row function must not run at all.
+    rowSpy.mockClear();
+    el.items = [items[0], items[2], items[3]];
+    await nextMicrotask();
+
+    const after = Array.from(el.querySelectorAll('li'));
+    expect(after.length).toBe(3);
+    expect(rowSpy).not.toHaveBeenCalled();
+    expect(after[0]).toBe(before[0]);
+    expect(after[1]).toBe(before[2]);
+    expect(after[2]).toBe(before[3]);
+    expect(after.map((li) => li.textContent)).toEqual(['one', 'three', 'four']);
+
+    // A later unrelated update still works with the spliced bookkeeping.
+    el.items = [items[0], { id: 9, label: 'nine' }, items[3]];
+    await nextMicrotask();
+    expect(Array.from(el.querySelectorAll('li')).map((li) => li.textContent)).toEqual([
+      'one',
+      'nine',
+      'four',
+    ]);
+  });
+
+  it('grows, shrinks, and fast-clears mapped lists', async () => {
+    const el = await mount();
+    const items = [
+      { id: 1, label: 'one' },
+      { id: 2, label: 'two' },
+      { id: 3, label: 'three' },
+    ];
+    el.items = items;
+    await nextMicrotask();
+    expect(el.querySelectorAll('li').length).toBe(3);
+
+    // Shrink: first item kept by identity, rest removed.
+    rowSpy.mockClear();
+    el.items = [items[0]];
+    await nextMicrotask();
+    expect(el.querySelectorAll('li').length).toBe(1);
+    expect(rowSpy).not.toHaveBeenCalled();
+
+    // Grow again.
+    el.items = [items[0], { id: 9, label: 'nine' }];
+    await nextMicrotask();
+    const grown = el.querySelectorAll('li');
+    expect(grown.length).toBe(2);
+    expect(grown[1].textContent).toBe('nine');
+
+    // Clear to empty, then repopulate.
+    el.items = [];
+    await nextMicrotask();
+    expect(el.querySelectorAll('li').length).toBe(0);
+
+    el.items = [{ id: 5, label: 'five' }];
+    await nextMicrotask();
+    expect(el.querySelectorAll('li').length).toBe(1);
+    expect(el.querySelector('li')!.textContent).toBe('five');
+  });
+});
+
+@CustomElement({
+  tag: 'shallow-state-element',
+  shadow: false,
+})
+class ShallowStateElement extends HTMLElement {
+  @State({ deep: false }) data: Item[] = [];
+  renderCount = 0;
+
+  render(): TemplateResult {
+    this.renderCount++;
+    return html`<p>${this.data.length ? this.data[0].label : 'empty'}</p>`;
+  }
+}
+
+describe('@State({ deep: false })', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('does not proxy values and only rerenders on reassignment', async () => {
+    const el = document.createElement('shallow-state-element') as ShallowStateElement;
+    document.body.appendChild(el);
+    await nextMicrotask();
+
+    const raw = [{ id: 1, label: 'one' }];
+    el.data = raw;
+    await nextMicrotask();
+    // Shallow state stores the value as-is (no proxy wrapper).
+    expect(el.data).toBe(raw);
+    expect(el.querySelector('p')!.textContent).toBe('one');
+    const renders = el.renderCount;
+
+    // Nested mutation must not schedule a render.
+    el.data[0].label = 'mutated';
+    await nextMicrotask();
+    expect(el.renderCount).toBe(renders);
+    expect(el.querySelector('p')!.textContent).toBe('one');
+
+    // Reassignment rerenders.
+    el.data = el.data.slice();
+    await nextMicrotask();
+    expect(el.renderCount).toBe(renders + 1);
+    expect(el.querySelector('p')!.textContent).toBe('mutated');
+  });
+});

package/tests/prop.spec.ts

@@ -0,0 +1,118 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { CustomElement, Prop } from 'custom-elements-ts';
+
+@CustomElement({
+  tag: 'prop-element',
+  template: '<span>my element</span>',
+  style: ':host{border:0}',
+})
+class PropElement extends HTMLElement {
+  @Prop() name: any;
+  @Prop() maxFileSize: any;
+
+  @Prop() objectProp: any;
+  @Prop() init = 'blue';
+
+  @Prop() kebabCase = 'kebab';
+
+  @Prop() fnProp: any;
+  @Prop() classProp: any;
+
+  @Prop() zero = 0;
+  @Prop() enabled = false;
+  @Prop() empty = '';
+}
+
+describe('prop decorator', () => {
+  let myElementInstance: any;
+
+  beforeEach(() => {
+    const myElement = document.createElement('prop-element');
+    myElementInstance = document.body.appendChild(myElement);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should reflect as property', () => {
+    myElementInstance.setAttribute('name', 'Mario');
+    expect(myElementInstance.getAttribute('name')).toEqual('Mario');
+    myElementInstance.setAttribute('name', 'Luigi');
+    expect(myElementInstance.name).toEqual('Luigi');
+  });
+
+  it('should reflect as attribute', () => {
+    myElementInstance.name = 'Aivan';
+    expect(myElementInstance.getAttribute('name')).toEqual('Aivan');
+    myElementInstance.name = 'Custom Elements';
+    expect(myElementInstance.getAttribute('name')).toEqual('Custom Elements');
+  });
+
+  it('should not reflect as attribute', () => {
+    myElementInstance.name = {};
+    expect(myElementInstance.getAttribute('name')).toBeFalsy();
+  });
+
+  it('should properly set camelcase properties', () => {
+    myElementInstance.maxFileSize = 1;
+    expect(myElementInstance.maxFileSize).toEqual(1);
+  });
+
+  it('should properly get camelcase properties as kebabcase attributes', () => {
+    myElementInstance.maxFileSize = 1;
+    expect(myElementInstance.getAttribute('max-file-size')).toEqual('1');
+  });
+
+  it('should properly set kebabcase attributes as camelcase properties', () => {
+    myElementInstance.setAttribute('max-file-size', 2);
+    expect(myElementInstance.maxFileSize).toEqual(2);
+  });
+
+  it('should evaluate property', () => {
+    myElementInstance.objectProp = { name: 'Name' };
+    expect(myElementInstance.objectProp.name).toEqual('Name');
+  });
+
+  it('should change attribute on attribute change', () => {
+    myElementInstance.setAttribute('init', 'red');
+    expect(myElementInstance.init).toEqual('red');
+    expect(myElementInstance.getAttribute('init')).toEqual('red');
+  });
+
+  it('should change property via kebab attribute', () => {
+    myElementInstance.setAttribute('kebab-case', 'shawarma');
+    expect(myElementInstance.kebabCase).toEqual('shawarma');
+  });
+
+  it('should not reflect function values as attributes and preserve reference', () => {
+    const fn = () => 42;
+    myElementInstance.fnProp = fn;
+    expect(myElementInstance.getAttribute('fn-prop')).toBeFalsy();
+    expect(typeof myElementInstance.fnProp).toEqual('function');
+    expect(myElementInstance.fnProp()).toEqual(42);
+  });
+
+  it('should not reflect class/constructor values as attributes and preserve reference', () => {
+    class Foo {}
+    myElementInstance.classProp = Foo;
+    expect(myElementInstance.getAttribute('class-prop')).toBeFalsy();
+    expect(myElementInstance.classProp).toBe(Foo);
+  });
+
+  it('should initialize falsy default property values', () => {
+    expect(myElementInstance.zero).toBe(0);
+    expect(myElementInstance.enabled).toBe(false);
+    expect(myElementInstance.empty).toBe('');
+  });
+
+  it('should preserve boolean prop type when reflected through attributes', () => {
+    myElementInstance.enabled = true;
+    expect(myElementInstance.enabled).toBe(true);
+    expect(myElementInstance.getAttribute('enabled')).toBe('true');
+
+    myElementInstance.enabled = false;
+    expect(myElementInstance.enabled).toBe(false);
+    expect(myElementInstance.getAttribute('enabled')).toBe('false');
+  });
+});

package/tests/signal.spec.ts

@@ -0,0 +1,117 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { CustomElement, Signal, State, TemplateResult, html, signal } from 'custom-elements-ts';
+
+const nextMicrotask = () => Promise.resolve();
+
+interface Row {
+  id: number;
+  label: Signal<string>;
+  selected: Signal<string | null>;
+}
+
+@CustomElement({
+  tag: 'signal-row-element',
+  shadow: false,
+})
+class SignalRowElement extends HTMLElement {
+  @State({ deep: false }) rows: Row[] = [];
+  renderCount = 0;
+
+  render(): TemplateResult {
+    this.renderCount++;
+    return html`<ul>
+      ${this.rows.map(
+        (row) => html`<li class=${row.selected} .title=${row.label}>${row.label}</li>`
+      )}
+    </ul>`;
+  }
+}
+
+describe('signal bindings', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('updates text, attribute, and property directly without re-rendering', async () => {
+    const el = document.createElement('signal-row-element') as SignalRowElement;
+    document.body.appendChild(el);
+    await nextMicrotask();
+
+    const row: Row = { id: 1, label: signal('one'), selected: signal<string | null>(null) };
+    el.rows = [row];
+    await nextMicrotask();
+
+    const li = el.querySelector('li')!;
+    expect(li.textContent).toBe('one');
+    expect(li.hasAttribute('class')).toBe(false);
+    expect(li.title).toBe('one');
+    const renders = el.renderCount;
+
+    // Signal writes go straight to the DOM — no render pass.
+    row.label.value = 'uno';
+    row.selected.value = 'danger';
+    expect(el.renderCount).toBe(renders);
+    expect(li.textContent).toBe('uno');
+    expect(li.getAttribute('class')).toBe('danger');
+    expect(li.title).toBe('uno');
+
+    // Null removes the attribute again.
+    row.selected.value = null;
+    expect(li.hasAttribute('class')).toBe(false);
+  });
+
+  it('keeps bindings across re-renders with the same signal and rebinds on a new one', async () => {
+    const el = document.createElement('signal-row-element') as SignalRowElement;
+    document.body.appendChild(el);
+    await nextMicrotask();
+
+    const row: Row = { id: 1, label: signal('a'), selected: signal<string | null>(null) };
+    el.rows = [row];
+    await nextMicrotask();
+
+    // Re-render with the same signal instances: binding must survive.
+    el.rows = [row];
+    await nextMicrotask();
+    row.label.value = 'b';
+    expect(el.querySelector('li')!.textContent).toBe('b');
+
+    // Re-render with a different signal: old one must be detached.
+    const oldLabel = row.label;
+    const replacement: Row = { id: 1, label: signal('fresh'), selected: row.selected };
+    el.rows = [replacement];
+    await nextMicrotask();
+    const li = el.querySelector('li')!;
+    expect(li.textContent).toBe('fresh');
+    oldLabel.value = 'stale write';
+    expect(li.textContent).toBe('fresh');
+    replacement.label.value = 'newer';
+    expect(li.textContent).toBe('newer');
+  });
+
+  it('unsubscribes disposed parts and skips notifications with equal values', async () => {
+    const el = document.createElement('signal-row-element') as SignalRowElement;
+    document.body.appendChild(el);
+    await nextMicrotask();
+
+    const label = signal('x');
+    const row: Row = { id: 1, label, selected: signal<string | null>(null) };
+    el.rows = [row];
+    await nextMicrotask();
+    expect(el.querySelector('li')).not.toBeNull();
+
+    let calls = 0;
+    label.subscribe(() => calls++);
+    label.value = 'x'; // equal value: no notification
+    expect(calls).toBe(0);
+    label.value = 'y';
+    expect(calls).toBe(1);
+
+    // Clearing the list disposes parts; writes afterwards must not throw.
+    el.rows = [];
+    await nextMicrotask();
+    expect(el.querySelector('li')).toBeNull();
+    expect(() => {
+      label.value = 'z';
+    }).not.toThrow();
+  });
+});