custom-elements-ts 0.0.17 → 0.2.0

package/src/toggle.ts

@@ -0,0 +1,66 @@
+import { toKebabCase } from './util';
+
+export const Toggle = (): any => {
+  return (target: any, propName: any) => {
+    function get(this: any) {
+      const getAttribute = (attrName: string) => {
+        if (this.hasAttribute(attrName)) {
+          const attrValue = this.getAttribute(attrName);
+          if (/^(true|false|^$)$/.test(attrValue)) {
+            return attrValue === 'true' || attrValue === '';
+          } else {
+            return false;
+          }
+        }
+        return false;
+      };
+      return getAttribute(propName);
+    }
+    function set(this: any, value: any) {
+      const oldValue = value;
+      if (value !== null && value !== undefined) {
+        switch (typeof value) {
+          case 'boolean':
+            break;
+          case 'string':
+            if (/^(true|false|^$)$/.test(value)) {
+              value = oldValue === 'true' || oldValue === '';
+            } else {
+              console.warn(
+                `TypeError: Cannot set boolean toggle property '${propName}' to '${value}'`
+              );
+              value = false;
+            }
+            break;
+          default:
+            throw new TypeError(`Cannot set boolean toggle property '${propName}' to '${value}'`);
+        }
+      }
+      if (this.__connected) {
+        const previous = this.props[propName];
+        this.props[propName] = value || false;
+        if (oldValue !== '' && oldValue !== null) {
+          this.setAttribute(propName, value);
+        } else {
+          if (value) {
+            this.setAttribute(propName, '');
+          } else {
+            this.removeAttribute(propName);
+          }
+        }
+        if (!Object.is(previous, this.props[propName])) {
+          this.__scheduleRender?.();
+        }
+      } else {
+        if (!this.hasAttribute(toKebabCase(propName))) {
+          this.constructor.propsInit[propName] = value;
+        }
+      }
+    }
+    if (!target.constructor.propsInit) {
+      target.constructor.propsInit = {};
+    }
+    target.constructor.propsInit[propName] = null;
+    Object.defineProperty(target, propName, { get, set });
+  };
+};

package/src/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "declaration": true,
+    "experimentalDecorators": true,
+    "lib": ["es5", "es6", "dom"],
+    "module": "es2015",
+    "moduleResolution": "node",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "outDir": "../dist",
+    "removeComments": true,
+    "target": "es5",
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": [
+    "./*.ts"
+  ]
+}

package/src/util.ts

@@ -0,0 +1,33 @@
+export const toKebabCase = (str: string) => {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase();
+};
+
+export const toCamelCase = (str: string) => {
+  return str.toLowerCase().replace(/(-\w)/g, (m: string) => m[1].toUpperCase());
+};
+
+export const toDotCase = (str: string) => {
+  return str
+    .replace(/(?!^)([A-Z])/g, ' $1')
+    .replace(/[_\s]+(?=[a-zA-Z])/g, '.')
+    .toLowerCase();
+};
+
+export const tryParseInt = (value: unknown) => {
+  if (typeof value === 'number' && Number.isInteger(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (trimmed !== '') {
+      const parsed = Number(trimmed);
+      if (Number.isInteger(parsed) && String(parsed) === trimmed) {
+        return parsed;
+      }
+    }
+  }
+  return value;
+};

package/src/watch.ts

@@ -0,0 +1,14 @@
+import { toKebabCase } from './util';
+
+export const Watch = (attrName: string) => {
+  return (target: any, propertyName: string) => {
+    if (!target.constructor.watchAttributes) {
+      target.constructor.watchAttributes = {};
+    }
+    target.constructor.watchAttributes[toKebabCase(attrName)] = propertyName;
+    if (!target.constructor.propsInit) {
+      target.constructor.propsInit = {};
+    }
+    target.constructor.propsInit[attrName] = null;
+  };
+};

package/tests/basic.spec.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { CustomElement } from 'custom-elements-ts';
+
+@CustomElement({
+  tag: 'basic-element',
+  template: '<span>my element</span>',
+  style: ':host{border:0}',
+})
+class BasicElement extends HTMLElement {}
+
+describe('basic test', () => {
+  let myElementInstance: any;
+
+  beforeEach(() => {
+    const myElement = document.createElement('basic-element');
+    myElementInstance = document.body.appendChild(myElement);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should load html template', () => {
+    expect(myElementInstance.shadowRoot.innerHTML).toContain('<span>my element</span>');
+  });
+
+  it('should load css', () => {
+    expect(myElementInstance.shadowRoot.querySelector('style').innerText).toContain(
+      ':host{border:0}'
+    );
+  });
+
+  it('should have shadowroot', () => {
+    expect(myElementInstance.shadowRoot).toBeTruthy();
+  });
+});
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+@CustomElement({
+  tag: 'shadow-false-element',
+  template: '<span>my element</span>',
+  style: ':host{border:0}',
+  shadow: false,
+})
+class ShadowFalseElement extends HTMLElement {}
+
+describe('basic test no shadowroot', () => {
+  let myElementInstance: any;
+
+  beforeEach(() => {
+    const myElement = document.createElement('shadow-false-element');
+    myElementInstance = document.body.appendChild(myElement);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should load html template', () => {
+    expect(myElementInstance.innerHTML).toContain('<span>my element</span>');
+  });
+
+  it('should have css', () => {
+    expect(myElementInstance.querySelector('style')).toBeTruthy();
+  });
+
+  it('shadow not have a shadowroot', () => {
+    expect(myElementInstance.shadowRoot).toBeFalsy();
+  });
+});

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