Mofon Design WC Core

Web components core of Mofon Design.

With JSX

See mofon-design/wc-jsx repo.

Examples

See example directory.

Or visit preview site.

Basic

import { CoreElement, property, tag } from '@mofon-design/wc-core';

@tag('input-content')
class InputContent extends HTMLElement implements CoreElement {
  @property.string<InputContent>({ watcher: InputContent.prototype.onValueChange })
  value: string | undefined;

  button = document.createElement('button');

  input = document.createElement('input');

  paragraph = document.createElement('p');

  constructor() {
    super();
    this.paragraph.innerText = this.value || '';
    this.button.innerText = 'Remove Attribute';
    this.input.addEventListener('input', this.onInput);
    this.button.addEventListener('click', this.onClickButton);

    console.log(`constructed, \`this.value\` = \`${this.value}\``);
  }

  initialize() {
    this.appendChild(this.input);
    this.appendChild(this.button);
    this.appendChild(this.paragraph);

    console.log(`initialized, \`this.value\` = \`${this.value}\``);
  }

  onInput = () => {
    this.value = this.input.value;
  };

  onClickButton = () => {
    this.value = null!;
  };

  onValueChange(oldValue: string | undefined, newValue: string = '') {
    this.paragraph.innerText = newValue;

    console.log(`property \`value\` changed from \`${oldValue}\` to \`${newValue}\``);
  }
}

Custom Attribute Name

import { CoreElement, property, tag } from '@mofon-design/wc-core';

@tag('check-box')
class CheckBox extends HTMLElement implements CoreElement {
  @property.boolean<CheckBox>({
    watcher(oldValue, newValue) {
      this.onValueChange(oldValue, newValue);
    },
  })
  checked: boolean | undefined;

  @(property('default-checked').boolean<CheckBox>({ enumerable: false }))
  defaultChecked: boolean | undefined;

  div = document.createElement('div');

  constructor() {
    super();
    this.div.style.cssText = 'width: 16px; height: 16px; border: 1px solid grey;';
    console.log(`constructed, \`this.checked\` = \`${this.checked}\``);
  }

  initialize() {
    if (!this.checked) {
      this.checked = this.defaultChecked;
    }

    this.div.addEventListener('click', () => {
      this.checked = !this.checked;
    });

    this.appendChild(this.div);

    console.log(`initialized, \`this.checked\` = \`${this.checked}\``);
  }

  onValueChange(oldValue: boolean | undefined, newValue: boolean = false) {
    this.div.style.background = newValue ? 'grey' : '';

    console.log(`property \`checked\` changed from \`${oldValue}\` to \`${newValue}\``);
  }
}

Extend Custom Element

@tag('extended-check-box')
class ExtendedCheckBox extends CheckBox {
  constructor() {
    super();
    this.div.style.border = '1px solid #d9d9d9';
  }

  // eslint-disable-next-line class-methods-use-this
  initialize() {
    tag.getUndecoratedLifecycles(CheckBox).initialize?.call(this);

    console.log('this is child class.');
  }

  onValueChange(oldValue: boolean | undefined, newValue: boolean = false) {
    this.updateStyle();

    console.log(`property \`checked\` changed from \`${oldValue}\` to \`${newValue}\``);
  }

  updateStyle() {
    if (this.checked) {
      this.div.style.background = '#1890ff';
      this.div.style.borderColor = '#1890ff';
    } else {
      this.div.style.background = '';
      this.div.style.borderColor = '#d9d9d9';
    }
  }
}