Minze, a Minimalistic JS Library for Creating Web Components

There are a number of new frameworks introduced to the JavaScript ecosystem. This has led to an issue for teams that are exploring all these latest and greatest frameworks. How to do they develop and maintain components for these different framework syntaxes?

Minze was invented in order to reduce this stress. With Minze, you can write a component that is native anywhere. If your team is using React and Vue and HTML, Minze allows your component to behave natively in all of them.

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.

According to their website, Minze is a “dead-simple framework for native web components.” It is a modern tool to build cross-framework component libraries or design systems. The main goal is to improve code reusability without framework barriers, which have been a great problem for JavaScript developers in the past.

Let’s take, for example, Ant Design, which is a design system for React. If a team wants to use Ant Design with Vue, then the developers will have to write the codebase again to support Vue syntax. This is why a lot of component libraries or design systems decide to stick with just one framework, unless they have a large number of developers to work on the project, or it is open source with a robust community of contributors.

Minze gives us the ability to create a shareable component that can be defined once and used everywhere. The components are compressed into tiny file sizes for easy use.

How are components structured in Minze?​​​​​​​

Every JavaScript framework has a specific component structure to follow, and Minze is no exception.

You can see how Minze structures components with the following code:

import { MinzeElement } from 'minze'
export class ComponentName extends MinzeElement {
  //attribute and method declaration section
​
  //html section
  html = () => `
​
  `
​
  css = () => `
​
  `
}

The Minz component structure is divided into three parts: the declaration section, HTML section, and CSS section. The declaration section is where data is managed. It may come in the form of variable declaration or a declaration of methods. The HTML section shows the structure of how the component visuals, while the CSS section adds style to make it more presentable.

Properties

Properties are nonreactive data, or a property added to a component. They serve as a component variable that does not accept dynamic changes.

The code below demonstrates how properties work:

import Minze, { MinzeElement } from 'minze'
​
class Element extends MinzeElement {
  greet = 'Hello World!'
​
  onReady() {
    console.log(this.greet) // Hello World!
  }
}
​
Minze.defineAll([Element])

The syntax above shows how a property can be declared and used with the this method to classify it with its parent element.

Getting started with Minze

To get started, open your terminal and run the following command:

npm i -g minze

Running the command above will show you a template to use either JavaScript or TypeScript. Select the one you would like to work with.

After the selection, it will set up the whole project like this:

Now, follow the command as listed in the response:

cd minze-testing

This will take you to the project directory. Note that minze-testing is just the name I am using for this example, but you can name it whatever you’d like.

Next, run:

npm install

And finally:

npm run dev

After a successful compilation, you will see a response telling you to go to localhost:3000 (or the port that is being used to run the project). The port should show the following:

Head to Minze Docs: Guide for more detailed examples and walkthroughs.

I tried doing a few button components:

You should be able to use this component in all frameworks including React, Vue, Svelte, regular HTML, and many more.

This solution will help in relieving the stress developers will have to go through in converting components from one framework syntax to the other. You can checkout the code in my GitHub here