Mikrom

Dead simple js-components for next to nothing.

What is this?

Sometimes all you need are some damn self-initiating components that run instantly, without using a heavy parent-library that kills performance and has a learning curve spanning months.

Mikrom is a tiny library for the people who jumped off the framework hype-train and like full control over their applications.

It's made with simplicity and flexibility in mind.

Features

Tiny library; tiny footprint
Reusable components; write once and use in multiple projects
Modern browser support
Automatic initiation

Usage

Basic initiation

Mikrom 4.x follows the same pattern as Custom Elements v1, but uses selectors rather than limiting the registration to tag-names.

Note: Mikrom does not fire element constructors, only lifecycle callbacks are usable

<div class="special-button" data-some-attribute="I am an attribute">
  Click me!
</div>

class SpecialButton extends HTMLElement {
  connectedCallback () {
    this._onClick = this._onClick.bind(this)

    this.addEventListener('click', this._onClick)
  }

  disconnectedCallback () {
    this.removeEventListener('click', this._onClick)
  }

  _onClick () {
    alert(this.dataset.someAttribute)
  }
}
mikrom.component('.special-button', SpecialButton)

Mikrom uses MutationObserver to automatically handle components as they are added, changed, and removed from the DOM.

Mikrom can be used as a basic non-standard Custom Element-polyfill. But it's lacking any features outside of the element lifecycle callbacks.

if (!window.customElements) window.customElements = {define: mikrom.component}

Component lifecycle

class MyCustomElement extends HTMLElement {
  connectedCallback () {
    // Fired when the element is attached to the DOM
  }
  attributeChangedCallback () {
    // Fired when an attribute has changed on the element
  }
  disconnectedCallback () {
    // Fired when the element has been removed from the DOM
  }
}

Method overview

mikrom.component(selector:String, definition:Class)

Examples

For examples on how to use Mikrom, please check out the examples folder.

License

MIT

AbrilMagenta / mikrom