Writing Plugins

Plugins can hook into any of the component lifecycle steps and run side-effects or modify the component.

import { Plugins } from '@li3/web';

Plugins.use({
  setup(state) {
    // right after component state is created
  },
  dom($el, domTree) {
    // when all elements are created, but not appended yet
  },
  element($el, domNode) {
    // for each node in the new dom tree (element or text node)
  },
  attribute($el, element, attribute, value) {
    // when an attribute is being applied to an HTMLElement
  },
  init({ element }) {
    // when all bindings are ready
  },
  update($el, property, oldValue, newValue) {
    // a prop has changed
  },
  destroy({ element }) {
    // right before a node is detached from DOM and destroyed
    // only works with custom elements using `disconnectedCallback` hook
  },
});
Copy

All the aspects of Lithium, from template conditionals to property bindings and events, are implemented as plugins.

That is not by coincidence: Lithium was designed in a generic way, to allow extensions in every step of a component.

One thinh you might be thinking now is: how can I create directives like other frameworks do?

Here's an example: autofocus on an element when the component initializes.

import { Plugins, onInit } from '@li3/web';

Plugins.use({
  attribute($el, element, attribute, value) {
    if (attribute === 'autofocus' && element.focus) {
      onInit(() => element.focus());
    }
  },
});
Copy