Exmg Lit Utils @exmg/lit-base

Content

• Links
• Features
• Setup
• Development
• Usage

Links

Repository

NPM Page

Features

The LitBase packages is aimed at providing base element for CMS development

• Redux
  • connectStore
• Elements
  • ExmgElement
  • ConnectedLitElement
• Observer

Setup

git clone the project, then simply run npm i

Development

The development process takes place on dedicated feature or fix branches. Each branch is then merged into master branch.

Please refer to the naming conventions for branches in the good practices section.

Usage

connectStore

The connectStore function allows to connect an existing Redux store to the CMS to then be used in the ConnectedLitElement

/* Magic redux stuff */
connectStore(myStore);

In typical CMS this process is done in the file named store.ts creating the Playtwo instance and the Redux store.

ConnectedLitElement

ConnectedLitElement exposes short hand functions to access the store from a LitElement, it also implements a stateChanged function fired whenever the Redux state is updated.

@customElement('connected-element')
export class ConnectedElement extends ConnectedLitElement<MyReducer> {
  @property({type: String})
  myProp = 'Hello ';

  changeState() {
    this.getStore().dispatch(myAction('world'));
  }

  stateChanged(state: MyReducer) {
    this.myProp = `${this.myProp}${state.value}`;
  }

  render() {
    return html`
      <p>${this.val}</p>
      <button @click=${this.changeState}>Click to add 1</button>
    `;
  }
}

ExmgElement

ExmgElement exposes handy functions used throughout the CMS, note that ConnectedLitElement extends from ExmgElement

fire

fire function is a short hand to emit an event. Parameters:

• event name
• options:
  • bubbles (defaults to false)
  • detail: Any

@customElement('my-element')
export class MyElement extends ExmgElement {
  fireEvent() {
    this.fire('event-name', {
      bubbles: true,
      detail: {
        value: 'Hello World!',
      },
    });
  }

  render() {
    return html` <button @click=${this.fireEvent}>FIRE</button> `;
  }
}

Observer

Observer is a custom decorator allowing to run code on change of a property

@customElement('my-element')
export class MyElement extends ExmgElement {
  @property({type: String})
  @observer(function (this: MyElement, myProp: string) {
    this.doSomethingOnChange();
  })
  myProp?: string;

  doSomethingOnChange() {
    /* Action */
  }

  render() {
    return html`${myProp}`;
  }
}