Configuration#

A configuration with examples for all possible properties.

{
  el: '#app',
  tagName: 'hello-world',
  template: `Hello {this.world} {this.prop.name}!`,
  shadowDOM: false,
  $store: Litestate(),
  data: {
    world: 'World',
    helloWorld(state) {
      return `Hello {this.data.world}!`;
    }
  },
  created() {
    console.log(`Component created with ${this.prop}`);
  },
  updated() {
    console.log(`Component updated with ${this.data}`);
  },
  removed() {
    console.log(`Component removed: ${this.el}`);
  },
  sayHello(name) {
    console.log(`Hello ${name}`);
  },
}

Properties#

el#

[string | HTMLElement]

The element where the view instance will be created and rendered. The innerHTML of the element will be used as the template.

This can be an HTML selector (e.g. #someId, [some-data-attribute]) or a query selector (e.g. document.querySelector('#myId')).

Required for in-place elements.

tagName#

[string]

Name for the custom element.

Note

Custom element names must contain a hyphen. my-counter will be used as <my-counter></my-counter>

Required for custom elements.

template#

[string]

Markup for the HTML of the component.

Required for custom elements.

data#

[object]

Reactive application state. Whenever a property is added, updated or removed it will trigger a DOM update (if necessary).

Values are expected to be a string, number, object, array, boolean, null, undefined or function.

Computed data#

Computed data is defined as a function in the data object. It is reactive and created based on some other input. Whenever the component state is updated, the computed data will also be updated.

Computed data functions accept the current state as the only argument and must return a value. The value will be assigned in the data with the function’s name.

data: {
  firstName: 'Mardix',
  lastName: 'M.',

  // used in a template with `{this.fullName}` or 'this.data.fullName' in JavaScript
  fullName: (state) => `${state.firstName} ${state.lastName}`,

  // used in a template with '{this.totalChars}' or 'this.data.totalChars' in JavaScript
  totalChars: (state) => state.fullName.length
}

Note

You cannot access the computed data as functions in your code.

Note

You cannot mutate the state or access custom methods in the computed data function.

shadowDOM#

[boolean: false]

By default components are created as normal Custom Elements. To set the Web Component to use the Shadow DOM, set this to true.

$store#

A shared store manager, i.e. reStated, Redux, Litestate. The store instance must have getState and subscribe functions.

Methods#

Lifecycle methods#

created#

Gets called when the component is created.

updated#

Gets called each time the data or the $store updates the component’s state.

removed#

Gets called when the component is removed.

Custom methods#

Dlite({
  ...
  created() {
    this.sayHello('dlite');
  },
  sayHello(name) {
    console.log(`Hello ${name}`)
  },
});

Note

You can use async methods with async and await.

Dlite({
  el: '#app',
  async loadData() {
    this.data.status = 'loading...';
    const res = await fetch('https://some-api.com/data.json');
    const data = await res.data;
    this.data.status = 'loading completed!';
  },
  async created(event) {
    await this.loadData();
  },
});

Warning

Do not use arrow functions such as created: () => this.sayHello(). Arrow functions do not have a this so this will result in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

Access to this#

Inside of lifecycle and custom methods, you have access to the following properties via this.

this.el#

The instance root element of the component.

this.data#

The reactive data defined in the configuration.

Whenever data is updated it will re-render the DOM if necessary.

this.prop#

Props are the attributes of the custom element.

<script type="module">
  import Dlite from '//unpkg.com/dlite';

  Dlite({
    tagName: `my-counter`,
    template: `Counting: {this.count}`,
    data: {
      count: 0,
    },
    created() {
      this.data.count = this.prop.start || 0;

      setTimeout(_ => { 
        this.data.count++;
      }, 1000);
    }
  });
</script>

<my-counter start=5></my-counter>