custom-elements-ts 0.0.16 → 0.1.0

package/tests/custom-element.spec.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { CustomElement } from 'custom-elements-ts';
+
+@CustomElement({
+  tag: 'ce-a',
+  template: '<div id="t">X</div>',
+  style: ':host{display:block}',
+  shadow: true,
+})
+class A extends HTMLElement {
+  _watchArgs: any = undefined;
+  watched(args: any) {
+    this._watchArgs = args;
+  }
+}
+
+@CustomElement({
+  tag: 'ce-b',
+  template: '<span id="light">L</span>',
+  shadow: false,
+})
+class B extends HTMLElement {}
+
+describe('CustomElement decorator', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('renders template and style into shadowRoot by default', () => {
+    const el = document.createElement('ce-a') as A;
+    document.body.appendChild(el);
+    expect(el.shadowRoot).toBeTruthy();
+    expect(el.shadowRoot!.querySelector('#t')!.textContent).toBe('X');
+  });
+
+  it('renders into light DOM when shadow=false', () => {
+    const el = document.createElement('ce-b') as B;
+    document.body.appendChild(el);
+    expect(el.shadowRoot).toBeNull();
+    expect(el.querySelector('#light')!.textContent).toBe('L');
+  });
+
+  it('observedAttributes are derived from propsInit and kebab-cased', () => {
+    (A as any).propsInit = { myAttr: null, anotherAttr: null };
+    const observed = (A as any).observedAttributes as string[];
+    expect(observed).toContain('my-attr');
+    expect(observed).toContain('another-attr');
+  });
+
+  it('attributeChangedCallback delegates to onAttributeChange and sets camelCase prop', () => {
+    (A as any).propsInit = { fooBar: null };
+    const el = document.createElement('ce-a') as A;
+    const spy = vi.spyOn(el as any, 'onAttributeChange');
+    document.body.appendChild(el);
+    // Simulate platform callback directly since observedAttributes may be empty at define time
+    (el as any).attributeChangedCallback('foo-bar', null as any, 'v1');
+    expect(spy).toHaveBeenCalled();
+    // property should be set via camelCase mapping
+    expect((el as any).fooBar).toBe('v1');
+  });
+
+  it('onAttributeChange triggers watch method only when connected', () => {
+    (A as any).watchAttributes = { 'my-attr': 'watched' };
+    (A as any).propsInit = { myAttr: null };
+    const el = document.createElement('ce-a') as A;
+    // not connected: should not call watched
+    (el as any).onAttributeChange('my-attr', null as any, 'x');
+    expect(el._watchArgs).toBeUndefined();
+
+    // connected: should call watched
+    document.body.appendChild(el);
+    el._watchArgs = undefined;
+    // Simulate platform callback directly to trigger watcher
+    (el as any).onAttributeChange('my-attr', null as any, 'y');
+    expect(el._watchArgs).toEqual({ old: null, new: 'y' });
+  });
+});

package/tests/dispatch.spec.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { CustomElement, Dispatch, DispatchEmitter, Listen } from 'custom-elements-ts';
+@CustomElement({
+  tag: 'btn-dispatch',
+  template: `<button>Test</button>`,
+})
+class DispatchElement extends HTMLElement {
+  @Dispatch() btnClick!: DispatchEmitter;
+  @Dispatch('btn.namedClick') btnClickNamed!: DispatchEmitter;
+
+  constructor() {
+    super();
+  }
+
+  @Listen('click')
+  btnHandler() {
+    this.shadowRoot!.querySelector('button')!.innerHTML = 'Hello';
+    this.btnClick.emit({ detail: 'Hello' });
+    this.btnClickNamed.emit({ detail: 'Hello from named click' });
+  }
+}
+
+describe('dispatch decorators', () => {
+  let element: any;
+
+  beforeEach(() => {
+    const btnElement = document.createElement('btn-dispatch');
+    element = document.body.appendChild(btnElement);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should trigger a btn.click DispatchEmitter', async () => {
+    const eventPromise = new Promise<CustomEvent>((resolve) => {
+      element.addEventListener('btn.click', (e: CustomEvent) => resolve(e));
+    });
+    element.click();
+    const e = await eventPromise;
+    expect(e.detail).toBe('Hello');
+  });
+
+  it('should trigger a btn.namedClick DispatchEmitter', async () => {
+    const eventPromise = new Promise<CustomEvent>((resolve) => {
+      element.addEventListener('btn.namedClick', (e: CustomEvent) => resolve(e));
+    });
+    element.click();
+    const e = await eventPromise;
+    expect(e.detail).toBe('Hello from named click');
+  });
+});

package/tests/init.spec.ts

@@ -0,0 +1,94 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { CustomElement, Toggle, Prop, Watch } from 'custom-elements-ts';
+
+@CustomElement({})
+class InitElement extends HTMLElement {
+  @Toggle() disabled = true;
+  @Prop() color = 'blue';
+  @Prop() icon: any;
+
+  setIcon = false;
+  @Watch('icon')
+  changeIcon(_value: any) {
+    this.setIcon = true;
+  }
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {}
+}
+
+describe('init state', () => {
+  let myElement: any;
+
+  beforeEach(() => {
+    myElement = document.createElement('init-element');
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should set attribute based on default prop value on init', () => {
+    const element = document.body.appendChild(myElement);
+    expect(element.getAttribute('color')).toBe('blue');
+  });
+
+  it('should set default prop value on init', () => {
+    const element = document.body.appendChild(myElement);
+    expect(element.color).toBe('blue');
+  });
+
+  it('should set attribute based on default toggle value on init', () => {
+    const element = document.body.appendChild(myElement);
+    expect(element.hasAttribute('disabled')).toBe(true);
+  });
+
+  it('should set default toggle value on init', () => {
+    const element = document.body.appendChild(myElement);
+    expect(element.disabled).toBe(true);
+  });
+
+  it('should reflect attribute to props on init', () => {
+    myElement.setAttribute('color', 'red');
+    const element = document.body.appendChild(myElement);
+    expect(element.color).toBe('red');
+  });
+
+  it('should not set attribute on second element instance', () => {
+    document.body.innerHTML = `
+      <init-element icon="awesome" disabled="false"></init-element>
+      <init-element></init-element>
+      <init-element></init-element>
+    `;
+    const initElements: any = document.body.querySelectorAll('init-element');
+    expect(initElements[1].icon).toBeFalsy();
+    expect(initElements[2].icon).toBeFalsy();
+  });
+
+  it('should reflect has attribute to toggle on init', () => {
+    myElement.setAttribute('disabled', '');
+    const element = document.body.appendChild(myElement);
+    expect(element.disabled).toBe(true);
+  });
+
+  it('should reflect true attribute to toggle on init', () => {
+    myElement.setAttribute('disabled', 'true');
+    const element = document.body.appendChild(myElement);
+    expect(element.disabled).toBe(true);
+  });
+
+  it('should reflect false attribute to toggle on init', () => {
+    myElement.setAttribute('disabled', 'false');
+    const element = document.body.appendChild(myElement);
+    expect(element.disabled).toBe(false);
+  });
+
+  it('should execute watch of attribute on init', () => {
+    myElement.setAttribute('icon', 'test');
+    const element = document.body.appendChild(myElement);
+    expect(element.setIcon).toBe(true);
+  });
+});

package/tests/listen.spec.ts

@@ -0,0 +1,118 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { CustomElement, Dispatch, DispatchEmitter, Listen } from 'custom-elements-ts';
+
+@CustomElement({
+  tag: 'btn-listen-dispatch',
+  template: `<button>Test</button>`,
+})
+class ButtonElement extends HTMLElement {
+  @Dispatch() btnClick!: DispatchEmitter;
+  @Dispatch('btn.namedClick') btnClickNamed!: DispatchEmitter;
+
+  constructor() {
+    super();
+  }
+
+  @Listen('click')
+  btnHandler() {
+    this.shadowRoot!.querySelector('button')!.innerHTML = 'Hello';
+  }
+
+  @Listen('click', 'button')
+  btnInnerClick() {}
+}
+
+describe('listen decorator', () => {
+  let element: any;
+
+  beforeEach(() => {
+    const btnElement = document.createElement('btn-listen-dispatch');
+    element = document.body.appendChild(btnElement);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should call method decorated @Listen', () => {
+    const btnHandlerSpy = vi.spyOn(element.btnHandler, 'call');
+    element.click();
+    expect(btnHandlerSpy).toHaveBeenCalled();
+  });
+
+  it('should call method decorated @Listen on children element click', () => {
+    const btnHandlerSpy = vi.spyOn(element.btnHandler, 'call');
+    element.shadowRoot.querySelector('button').click();
+    expect(btnHandlerSpy).toHaveBeenCalled();
+  });
+
+  it('should call method decorated @Listen on selector click', () => {
+    const btnInnerSpy = vi.spyOn(element.btnInnerClick, 'call');
+    element.shadowRoot.querySelector('button').click();
+    expect(btnInnerSpy).toHaveBeenCalled();
+  });
+
+  it('should execute inner method decorated @Listen', () => {
+    element.click();
+    expect(element.shadowRoot.querySelector('button').innerHTML).toEqual('Hello');
+  });
+});
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+@CustomElement({
+  tag: 'btn-listen-shadow-false',
+  template: `<button>Test</button>`,
+  shadow: false,
+})
+class ShadowFalseButtonElement extends HTMLElement {
+  @Dispatch() btnClick!: DispatchEmitter;
+  @Dispatch('btn.namedClick') btnClickNamed!: DispatchEmitter;
+
+  constructor() {
+    super();
+  }
+
+  @Listen('click')
+  btnHandler() {
+    this.querySelector('button')!.innerHTML = 'Hello';
+  }
+
+  @Listen('click', 'button')
+  btnInnerClick() {}
+}
+
+describe('listen decorator no shadowroot', () => {
+  let element: any;
+
+  beforeEach(() => {
+    const btnElement = document.createElement('btn-listen-shadow-false');
+    element = document.body.appendChild(btnElement);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should call method decorated @Listen', () => {
+    const btnHandlerSpy = vi.spyOn(element.btnHandler, 'call');
+    element.click();
+    expect(btnHandlerSpy).toHaveBeenCalled();
+  });
+
+  it('should call method decorated @Listen on children element click', () => {
+    const btnHandlerSpy = vi.spyOn(element.btnHandler, 'call');
+    element.querySelector('button').click();
+    expect(btnHandlerSpy).toHaveBeenCalled();
+  });
+
+  it('should call method decorated @Listen on selector click', () => {
+    const btnInnerSpy = vi.spyOn(element.btnInnerClick, 'call');
+    element.querySelector('button').click();
+    expect(btnInnerSpy).toHaveBeenCalled();
+  });
+
+  it('should execute inner method decorated @Listen', () => {
+    element.click();
+    expect(element.querySelector('button').innerHTML).toEqual('Hello');
+  });
+});

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');
+  });
+});