Minze, a Minimalistic JS Library for Creating Web Components

Minze is a modern JavaScript library that abstracts many of the difficulties of writing Web Components with a minimal overhead (2kb minified and compressed) and good developer ergonomics.

Web Components enable developers to create reusable custom HTML elements that encapsulate their design (CSS) and functionality (JavaScript) from the rest of the application.

Since Web Components are framework-agnostic, libraries like Ionic can easily support multiple frameworks (Angular, Vue.js, React) without rewriting their components numerous times.

Minze comes with a simple setup script that takes the developer through a quick installation process:

npm init minze@latest

The initial project contains three simple Web Components that provide a good starting point and show off the significant capabilities of the library.

We will look at a simplified version of the MinzeCounter example to explore how Web Components can be created using Minze.

export class MinzeCounter extends MinzeElement {

  html = () => `
    <div class="count">
      <span>Count is:</span>
      ${this.count}
    </div>
  `

  css = () => `
    .count {
      text-align: center;
    }
  `

  reactive = [['count', 0]]

  increaseCount = () => this.count++

  eventListeners = [['.button', 'click', this.increaseCount]]
}

The "html" and "css" methods return a string containing the component HTML and CSS. Since components should be pretty small, returning template string straight away works well.

Properties defined on a MinzeElement class are considered "non-reactive," meaning that changing them will not cause the element to re-render.

Reactive properties are defined using the "reactive" property that accepts an array of strings or tuples. Any change to the values defined within the reactive property will trigger a component redraw.

In order, to accept external attributes, developers must use the "attrs" property that works similarly to the "reactive" property with two important caveats:

1. "attrs" properties must use dash-case notation
2. Developers can use the "observedAttributes" property in combination with the "onAttributeChange" method to track attribute changes. i.e:

attrs = [
    'example-attribute'
]

static observedAttributes = ['example-attribute']

onAttributeChange(name, oldValue, newValue) {
    console.log(this.exampleAttribute)
}

For developers using TypeScript, accessing properties that were defined as either "reactive" or "attrs" will require an interface that includes these property definitions, as TypeScript does not recognize properties that were not defined directly on the class.

Finally, Minze.define is used to define the new custom elements created. Developers should remember that Custom component names should always consist of at least two words.

Minze is an open-source project published under the MIT license. The source code is available on Minze Github repository, and developers are encouraged to contribute by following the contribution guidelines.