BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Contribute

Topics

Choose your language

InfoQ Homepage News Minze, a Minimalistic JS Library for Creating Web Components

Minze, a Minimalistic JS Library for Creating Web Components

This item in japanese

Bookmarks

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.

About the Author

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • Missing element

    by Rogerio Amorim,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    In your counter example there's a click event tied to the class button, but there's no element with this class in the html template.

  • Re: Missing element

    by Guy Nesher,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Your right, I was just trying to avoid having too much code and may have been a tad too eager.

    It would look something like:

    <button class="button">
    Click Me
    <button>

    and you can see a working example by installing the Minze demo</button></button>

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT