open-consul/ui/packages/consul-ui/app/components/custom-element/index.js

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { assert } from '@ember/debug';

const ATTRIBUTE_CHANGE = 'custom-element.attributeChange';
const elements = new Map();
const proxies = new WeakMap();

const typeCast = (attributeInfo, value) => {
  let type = attributeInfo.type;
  const d = attributeInfo.default;
  value = value == null ? attributeInfo.default : value;
  if(type.indexOf('|') !== -1) {
    assert(`"${value} is not of type '${type}'"`, type.split('|').map(item => item.replaceAll('"', '').trim()).includes(value));
    type = 'string';
  }
  switch(type) {
    case '<length>':
    case '<percentage>':
    case '<dimension>':
    case 'number': {
      const num = parseFloat(value);
      if(isNaN(num)) {
        return typeof d === 'undefined' ? 0 : d;
      } else {
        return num;
      }
    }
    case '<integer>':
      return parseInt(value);
    case '<string>':
    case 'string':
      return (value || '').toString();
  }
}

const attributeChangingElement = (name, Cls = HTMLElement, attributes = {}, cssprops = {}) => {
  const attrs = Object.keys(attributes);

  const customClass = class extends Cls {
    static get observedAttributes() {
      return attrs;
    }

    attributeChangedCallback(name, oldValue, newValue) {
      const prev = typeCast(attributes[name], oldValue);
      const value = typeCast(attributes[name], newValue);

      const cssProp = cssprops[`--${name}`];
      if(typeof cssProp !== 'undefined' && cssProp.track === `[${name}]`) {
        this.style.setProperty(
          `--${name}`,
          value
        );
      }

      if(typeof super.attributeChangedCallback === 'function') {
        super.attributeChangedCallback(name, prev, value);
      }

      this.dispatchEvent(
        new CustomEvent(
          ATTRIBUTE_CHANGE,
          {
            detail: {
              name: name,
              previousValue: prev,
              value: value
            }
          }
        )
      );

    }
  }
  customElements.define(name, customClass);
  return () => {};
}

const infoFromArray = (arr, keys) => {
  return (arr || []).reduce((prev, info) => {
    let key;
    const obj = {};
    keys.forEach((item, i) => {
      if(item === '_') {
        key = i;
        return;
      }
      obj[item] = info[i]
    });
    prev[info[key]] = obj;
    return prev;
  }, {});
}
const debounceRAF = (cb, prev) => {
  if(typeof prev !== 'undefined') {
    cancelAnimationFrame(prev);
  }
  return requestAnimationFrame(cb);
}
const createElementProxy = ($element, component) => {
  return new Proxy($element, {
    get: (target, prop, receiver) => {
      switch(prop) {
        case 'attrs':
          return component.attributes;
        default:
          if(typeof target[prop] === 'function') {
            // need to ensure we use a MultiWeakMap here
            // if(this.methods.has(prop)) {
            //   return this.methods.get(prop);
            // }
            const method = target[prop].bind(target);
            // this.methods.set(prop, method);
            return method;
          }

      }
    }
  });
}

export default class CustomElementComponent extends Component {

  @tracked $element;
  @tracked _attributes = {};

  __attributes;
  _attchange;


  constructor(owner, args) {
    super(...arguments);
    if(!elements.has(args.element)) {
      const cb = attributeChangingElement(
        args.element,
        args.class,
        infoFromArray(args.attrs, ['_', 'type', 'default', 'description']),
        infoFromArray(args.cssprops, ['_', 'type', 'track', 'description'])
      )
      elements.set(args.element, cb);
    }
  }

  get attributes() {
    return this._attributes;
  }

  get element() {
    if(this.$element) {
      if(proxies.has(this.$element)) {
        return proxies.get(this.$element);
      }
      const proxy = createElementProxy(this.$element, this);
      proxies.set(this.$element, proxy);
      return proxy;
    }
    return undefined;
  }

  @action
  setHost(attachShadow, $element) {
    attachShadow($element);
    this.$element = $element;
    this.$element.addEventListener(ATTRIBUTE_CHANGE, this.attributeChange);

    (this.args.attrs || []).forEach(entry => {
      const value = $element.getAttribute(entry[0]);
      $element.attributeChangedCallback(entry[0], value, value)
    });
  }

  @action
  disconnect() {
    this.$element.removeEventListener(ATTRIBUTE_CHANGE, this.attributeChange);
  }

  @action
  attributeChange(e) {
    e.stopImmediatePropagation();
    // currently if one single attribute changes
    // they all change
    this.__attributes = {
      ...this.__attributes,
      [e.detail.name]: e.detail.value
    };
    this._attchange = debounceRAF(() => {
      // tell glimmer we changed the attrs
      this._attributes = this.__attributes;
    }, this._attchange);
  }
}