custom-elements-ts 0.0.17 → 0.1.0

package/package.json

@@ -1,24 +1,73 @@
-{
-  "name": "custom-elements-ts",
-  "version": "0.0.17",
-  "description": "Create native Custom Elements using Typescript without using any third party libraries",
-  "main": "./bundles/custom-elements-ts.umd.js",
-  "module": "./esm2015/custom-elements-ts.js",
-  "esm5": "./esm5/custom-elements-ts.js",
-  "esm2015": "./esm2015/custom-elements-ts.js",
-  "typings": "index.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/geocine/custom-elements-ts.git"
-  },
-  "keywords": [
-    "components",
-    "custom",
-    "dom",
-    "elements",
-    "web",
-    "typescript"
-  ],
-  "license": "MIT",
-  "homepage": "https://geocine.github.io/custom-elements-ts/"
-}
+{
+  "name": "custom-elements-ts",
+  "version": "0.1.0",
+  "description": "Create native Custom Elements using Typescript without using any third party libraries",
+  "main": "index.js",
+  "module": "custom-element.js",
+  "scripts": {
+    "build": "node tools/build.js",
+    "start": "node tools/start.js",
+    "bundle": "node tools/bundle.js",
+    "publish:dist": "npm run bundle && npm publish dist --access public",
+    "publish:dry-run": "npm run bundle && npm publish dist --dry-run",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage --coverage.reporter=lcov",
+    "coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
+    "lint": "eslint \"{src,tests}/**/*.ts\"",
+    "lint:fix": "eslint \"{src,tests}/**/*.ts\" --fix"
+  },
+  "keywords": [
+    "components",
+    "custom",
+    "dom",
+    "elements",
+    "web",
+    "typescript"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@typescript-eslint/eslint-plugin": "^8.5.0",
+    "@typescript-eslint/parser": "^8.5.0",
+    "@vitest/coverage-v8": "2.1.9",
+    "@webcomponents/custom-elements": "1.2.2",
+    "coveralls": "^3.0.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "event-stream": "3.3.4",
+    "express": "^4.17.1",
+    "glob": "^7.1.6",
+    "happy-dom": "^14.12.3",
+    "magic-string": "0.25.3",
+    "prettier": "^3.0.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^4.18.0",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.5.4",
+    "vitest": "^2.0.5"
+  },
+  "typings": "index.d.ts",
+  "contributors": [
+    "Aivan Monceller",
+    "Arjay Elbore",
+    "Martin Llaneza"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/geocine/custom-elements-ts.git"
+  },
+  "homepage": "https://geocine.github.io/custom-elements-ts/",
+  "overrides": {
+    "handlebars": "4.7.8",
+    "tar": "6.2.1",
+    "minimist": "1.2.8",
+    "follow-redirects": "1.15.9",
+    "elliptic": "6.6.1",
+    "axios": "1.8.4",
+    "lodash": "4.17.21",
+    "set-value": "4.1.0"
+  }
+}

package/src/custom-element.ts

@@ -0,0 +1,206 @@
+import { addEventListeners, ListenerMetadata } from './listen';
+import { initializeProps } from './prop';
+import { isStateAttributeName } from './state';
+import { renderIntoAnchor, RenderState, TemplateValue } from './template-runtime';
+import { toKebabCase, toCamelCase } from './util';
+
+export interface CustomElementMetadata {
+  tag?: string;
+  template?: string;
+  templateUrl?: string;
+  styleUrl?: string;
+  style?: string;
+  shadow?: boolean;
+}
+
+export interface KeyValue {
+  [key: string]: any;
+}
+
+export const CustomElement = (args: CustomElementMetadata) => {
+  return (target: any) => {
+    const tag: string = args.tag || toKebabCase(target.prototype.constructor.name);
+    const customElement: any = class extends (target as { new (): any }) {
+      private __connected: boolean = false;
+      private __hasMountedStatic: boolean = false;
+      private __renderAnchor?: Comment;
+      private __renderQueued: boolean = false;
+      private __renderState: RenderState = {};
+      private __suppressRender: boolean = false;
+
+      props: KeyValue = {};
+      __stateValues!: KeyValue;
+      __stateProxyCaches!: KeyValue;
+      protected static propsInit: KeyValue;
+      protected static stateInit: KeyValue;
+
+      protected static watchAttributes: KeyValue;
+      protected static listeners: ListenerMetadata[];
+
+      showShadowRoot: boolean;
+
+      static get observedAttributes() {
+        const stateInit = this.stateInit || {};
+        return Object.keys(this.propsInit || {})
+          .filter((x) => stateInit[x] === undefined)
+          .map((x) => toKebabCase(x));
+      }
+
+      constructor() {
+        super();
+        this.__stateValues ||= {};
+        this.__stateProxyCaches ||= {};
+        this.showShadowRoot =
+          args.shadow === undefined || args.shadow === null ? true : args.shadow;
+        if (!this.shadowRoot && this.showShadowRoot) {
+          this.attachShadow({ mode: 'open' });
+        }
+      }
+
+      attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+        this.onAttributeChange(name, oldValue, newValue);
+      }
+
+      onAttributeChange(name: string, oldValue: string, newValue: string, set: boolean = true) {
+        if (oldValue !== newValue) {
+          if (set && !isStateAttributeName(this, name)) {
+            const propName = toCamelCase(name);
+            (this as any)[propName] = newValue;
+          }
+          const watchAttributes: KeyValue = (this.constructor as any).watchAttributes;
+          if (watchAttributes && watchAttributes[name]) {
+            const methodToCall: string = watchAttributes[name];
+            if (this.__connected) {
+              if (typeof (this as any)[methodToCall] === 'function') {
+                (this as any)[methodToCall]({ old: oldValue, new: newValue });
+              }
+            }
+          }
+          this.__scheduleRender();
+        }
+      }
+
+      connectedCallback() {
+        if (this.__connected) return;
+
+        this.__connected = true;
+        if (!this.__hasRender()) {
+          this.__renderStaticTemplate();
+        }
+
+        this.__suppressRender = true;
+        initializeProps(this);
+        this.__suppressRender = false;
+
+        if (this.__hasRender()) {
+          this.__mountStaticStyle();
+          this.__performRender();
+        }
+
+        const parentProto =
+          (Object.getPrototypeOf(Object.getPrototypeOf(this)) as {
+            connectedCallback?: () => void;
+          }) || null;
+        if (parentProto && typeof parentProto.connectedCallback === 'function') {
+          parentProto.connectedCallback.call(this);
+        }
+
+        addEventListeners(this);
+      }
+
+      disconnectedCallback() {
+        if (!this.__connected) return;
+        this.__connected = false;
+        this.__renderQueued = false;
+        this.__renderState.instance?.dispose();
+        this.__renderState.part?.dispose();
+        this.__renderState = {};
+
+        const parentProto =
+          (Object.getPrototypeOf(Object.getPrototypeOf(this)) as {
+            disconnectedCallback?: () => void;
+          }) || null;
+        if (parentProto && typeof parentProto.disconnectedCallback === 'function') {
+          parentProto.disconnectedCallback.call(this);
+        }
+      }
+
+      __renderStaticTemplate() {
+        if (this.__hasMountedStatic) return;
+        const template = document.createElement('template');
+        const style = `${args.style ? `<style>${args.style}</style>` : ''}`;
+        template.innerHTML = `${style}${args.template ? args.template : ''}`;
+        (this.showShadowRoot ? this.shadowRoot : this).appendChild(
+          document.importNode(template.content, true)
+        );
+        this.__hasMountedStatic = true;
+      }
+
+      __mountStaticStyle() {
+        if (this.__hasMountedStatic) return;
+        if (args.style) {
+          const style = document.createElement('style');
+          style.textContent = args.style;
+          (this.showShadowRoot ? this.shadowRoot : this).appendChild(style);
+        }
+        this.__renderAnchor = document.createComment('custom-elements-ts-render');
+        (this.showShadowRoot ? this.shadowRoot : this).appendChild(this.__renderAnchor);
+        this.__hasMountedStatic = true;
+      }
+
+      __notifyPropertyChange(propName: string, oldValue: any, newValue: any) {
+        const watchAttributes: KeyValue = (this.constructor as any).watchAttributes;
+        const watchName = toKebabCase(propName);
+        const methodToCall: string | undefined = watchAttributes?.[watchName];
+        if (methodToCall && this.__connected && typeof (this as any)[methodToCall] === 'function') {
+          (this as any)[methodToCall]({ old: oldValue, new: newValue });
+        }
+        this.__scheduleRender();
+      }
+
+      __scheduleRender() {
+        if (!this.__connected || this.__suppressRender || !this.__hasRender()) {
+          return;
+        }
+        if (this.__renderQueued) {
+          return;
+        }
+        this.__renderQueued = true;
+        queueMicrotask(() => {
+          if (!this.__connected || !this.__renderQueued) {
+            return;
+          }
+          this.__performRender();
+        });
+      }
+
+      __performRender() {
+        if (!this.__hasRender()) {
+          return;
+        }
+        this.__mountStaticStyle();
+        this.__renderQueued = false;
+        try {
+          const output = (this as any).render() as TemplateValue;
+          this.__renderState = renderIntoAnchor(
+            output,
+            this.__renderAnchor!,
+            this.__renderState,
+            this
+          );
+        } finally {
+          this.__renderQueued = false;
+        }
+      }
+
+      __hasRender() {
+        return typeof (this as any).render === 'function';
+      }
+    };
+
+    if (!customElements.get(tag)) {
+      customElements.define(tag, customElement);
+    }
+    return customElement;
+  };
+};

package/{esm5/index.d.ts → src/index.ts}

@@ -1,5 +1,7 @@
-export * from './custom-element';
-export * from './watch';
-export * from './prop';
-export * from './toggle';
-export * from './listen';
+export * from './custom-element';
+export * from './watch';
+export * from './prop';
+export * from './toggle';
+export * from './listen';
+export { State } from './state';
+export { html, TemplateResult, TemplateValue } from './template-runtime';

package/src/listen.ts

@@ -0,0 +1,70 @@
+import { toDotCase } from './util';
+interface ListenerMetadata {
+  eventName: string;
+  handler: (e: Event) => void;
+  selector?: string;
+}
+
+interface CustomEventOptions {
+  bubbles?: boolean;
+  composed?: boolean;
+  detail?: any;
+}
+
+interface DispatchEmitter {
+  emit(options?: CustomEventOptions): void;
+}
+
+const Listen = (eventName: string, selector?: string) => {
+  return (target: any, methodName: string) => {
+    if (!target.constructor.listeners) {
+      target.constructor.listeners = [];
+    }
+    target.constructor.listeners.push({
+      selector: selector,
+      eventName: eventName,
+      handler: target[methodName],
+    });
+  };
+};
+
+const addEventListeners = (target: any) => {
+  if (target.constructor.listeners) {
+    const targetRoot: any = target.shadowRoot || target;
+    for (const listener of target.constructor.listeners as Array<ListenerMetadata>) {
+      let eventTarget: Element | EventTarget | null = target;
+      if (listener.selector) {
+        eventTarget = targetRoot.querySelector(listener.selector);
+      }
+      if (eventTarget) {
+        eventTarget.addEventListener(listener.eventName, (e: Event) => {
+          listener.handler.call(target, e);
+        });
+      }
+    }
+  }
+};
+
+const Dispatch = (eventName?: string) => {
+  return (target: HTMLElement, propertyName: string) => {
+    function get(this: EventTarget) {
+      const self: EventTarget = this as EventTarget;
+      return {
+        emit(options?: CustomEventOptions) {
+          const evtName = eventName ? eventName : toDotCase(propertyName);
+          self.dispatchEvent(new CustomEvent(evtName, options));
+        },
+      };
+    }
+    Object.defineProperty(target, propertyName, { get });
+  };
+};
+
+export {
+  Listen,
+  addEventListeners,
+  DispatchEmitter,
+  Dispatch,
+  CustomEventOptions,
+  ListenerMetadata,
+};

package/src/prop.ts

@@ -0,0 +1,92 @@
+import { toKebabCase, tryParseInt } from './util';
+
+export const Prop = (): any => {
+  return (target: any, propName: any) => {
+    const attrName = toKebabCase(propName);
+    function get(this: any) {
+      const hasOwn = Object.prototype.hasOwnProperty.call(this.props, propName);
+      if (hasOwn) {
+        return this.props[propName];
+      }
+      return this.getAttribute(attrName);
+    }
+    function set(this: any, value: any) {
+      if (this.__connected) {
+        const oldValue = this.props[propName];
+        this.props[propName] = coercePropValue(
+          value,
+          oldValue,
+          this.constructor.propsInit[propName]
+        );
+        const changed = !Object.is(oldValue, this.props[propName]);
+        const valueType = typeof value;
+        const shouldReflect =
+          valueType === 'string' || valueType === 'number' || valueType === 'boolean';
+        if (shouldReflect) {
+          this.setAttribute(attrName, value);
+        } else {
+          this.onAttributeChange(attrName, oldValue, value, false);
+        }
+        if (changed) {
+          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 });
+  };
+};
+
+const getProps = (target: any) => {
+  const watchAttributes = target.constructor.watchAttributes;
+  const plainAttributes = { ...watchAttributes };
+  Object.keys(plainAttributes).forEach((v) => (plainAttributes[v] = ''));
+  const cycleProps = { ...plainAttributes, ...target.constructor.propsInit };
+  const stateInit = target.constructor.stateInit || {};
+  return Object.keys(cycleProps).filter((prop) => stateInit[prop] === undefined);
+};
+
+export const initializeProps = (target: any) => {
+  const watchAttributes = target.constructor.watchAttributes;
+  for (const prop of getProps(target)) {
+    const attrName = toKebabCase(prop);
+    if (watchAttributes) {
+      const methodName = watchAttributes[attrName];
+      if (methodName === null || methodName === undefined) {
+        watchAttributes[attrName] = '';
+      } else {
+        const hasOwn = Object.prototype.hasOwnProperty.call(target.props, prop);
+        const attribValue = hasOwn ? target.props[prop] : target.getAttribute(attrName);
+        if (typeof target[methodName] === 'function') {
+          target[methodName]({ new: attribValue });
+        }
+      }
+    }
+    const defaultValue = target.constructor.propsInit[prop];
+    if (defaultValue !== null && defaultValue !== undefined) {
+      if (!target.hasAttribute(attrName)) {
+        target[prop] = defaultValue;
+      }
+    }
+  }
+};
+
+const coercePropValue = (value: any, oldValue: any, defaultValue: any): any => {
+  const expectedType = typeof (oldValue === undefined ? defaultValue : oldValue);
+  if (expectedType === 'boolean' && typeof value === 'string') {
+    if (value === '' || value === 'true') {
+      return true;
+    }
+    if (value === 'false') {
+      return false;
+    }
+  }
+  return tryParseInt(value);
+};

package/src/state.ts

@@ -0,0 +1,129 @@
+import { toKebabCase } from './util';
+
+export interface StateMetadata {
+  [key: string]: null;
+}
+
+const proxyToRaw = new WeakMap<object, object>();
+
+export const State = (): any => {
+  return (target: any, propName: string) => {
+    if (!target.constructor.stateInit) {
+      target.constructor.stateInit = {};
+    }
+    target.constructor.stateInit[propName] = null;
+
+    function get(this: any) {
+      return this.__stateValues ? this.__stateValues[propName] : undefined;
+    }
+
+    function set(this: any, value: any) {
+      if (!this.__stateValues) {
+        this.__stateValues = {};
+      }
+      if (!this.__stateProxyCaches) {
+        this.__stateProxyCaches = {};
+      }
+
+      const oldValue = this.__stateValues[propName];
+      const proxyCache = (this.__stateProxyCaches[propName] ||= new WeakMap<object, unknown>());
+      const newValue = createStateProxy(value, proxyCache, () => {
+        this.__notifyPropertyChange?.(
+          propName,
+          this.__stateValues[propName],
+          this.__stateValues[propName]
+        );
+      });
+
+      if (Object.is(oldValue, newValue)) {
+        return;
+      }
+
+      this.__stateValues[propName] = newValue;
+      if (this.__connected) {
+        this.__notifyPropertyChange?.(propName, oldValue, newValue);
+      }
+    }
+
+    Object.defineProperty(target, propName, { get, set });
+  };
+};
+
+const createStateProxy = (
+  value: unknown,
+  cache: WeakMap<object, unknown>,
+  notify: () => void
+): unknown => {
+  if (!isProxyable(value)) {
+    return value;
+  }
+
+  if (proxyToRaw.has(value)) {
+    return value;
+  }
+
+  const cached = cache.get(value);
+  if (cached) {
+    return cached;
+  }
+
+  const proxy = new Proxy(value, {
+    get(target, property, receiver) {
+      const result = Reflect.get(target, property, receiver);
+      return createStateProxy(result, cache, notify);
+    },
+    set(target, property, nextValue, receiver) {
+      const previous = Reflect.get(target, property, receiver);
+      const proxiedValue = createStateProxy(nextValue, cache, notify);
+      const changed = !Object.is(previous, proxiedValue);
+      const didSet = Reflect.set(target, property, proxiedValue, receiver);
+      if (didSet && changed) {
+        notify();
+      }
+      return didSet;
+    },
+    deleteProperty(target, property) {
+      const hadProperty = Object.prototype.hasOwnProperty.call(target, property);
+      const deleted = Reflect.deleteProperty(target, property);
+      if (deleted && hadProperty) {
+        notify();
+      }
+      return deleted;
+    },
+  });
+
+  proxyToRaw.set(proxy, value);
+  cache.set(value, proxy);
+  return proxy;
+};
+
+const isProxyable = (value: unknown): value is object => {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+  if (typeof Node !== 'undefined' && value instanceof Node) {
+    return false;
+  }
+  if (
+    value instanceof Date ||
+    value instanceof Map ||
+    value instanceof Set ||
+    value instanceof WeakMap ||
+    value instanceof WeakSet
+  ) {
+    return false;
+  }
+  return Array.isArray(value) || Object.getPrototypeOf(value) === Object.prototype;
+};
+
+export const isStateName = (target: any, propName: string): boolean => {
+  return Boolean(target.constructor.stateInit?.[propName] !== undefined);
+};
+
+export const isStateAttributeName = (target: any, attrName: string): boolean => {
+  const stateInit: StateMetadata | undefined = target.constructor.stateInit;
+  if (!stateInit) {
+    return false;
+  }
+  return Object.keys(stateInit).some((propName) => toKebabCase(propName) === attrName);
+};