PlumeJS - No fuss web-components framework

#javascript #html #programming #opensource

Hello Everyone.

Have you considered writing HTML in this manner?

`<button onclick=${() => { alert('hello world'); }}>click me</button>`

unlike any other framework out there (upto my broad knowledge. i may miss one), binding events don't require any special syntax. It's just plain string interpolation. Wondering how? I would like to introduce you to a new kid in Framework Town: PlumeJS.

PlumeJS is a framework that relies on web components. As you are all aware, the browser defines and regulates the life cycle of a web component. PlumeJS is a lightweight framework out there due to this.

This framework provides the ability to create reusable web components, routing and dependency injection for sharing data across components all in a ~27kb package (~8kb when brotli compressed) which includes routing and forms support.

PlumeJS has very few to zero external dependencies. That means, you can make use of the latest importmaps to include PlumeJS and use just like that. Sounds exiting right??

So how a typical component declaration looks like in PlumeJS?

import { Component } from '@plumejs/core';

@Component({
  selector: 'app-root'
})
class AppComponent {
  render() {
     return `<h1>hello world</h1>`;
  }
}

Looks familiar? Yes, it adopts angular-like component declarations and react-like HTML in JS coding style.

You can re-write the above code in another way too..

import { Component } from '@plumejs/core';

class AppComponent {
  render() {
     return `<h1>hello world</h1>`;
  }
}
Component({
  selector: 'app-root'
})(AppComponent)

This helps to reduce the bundle size by not including decorator snippets at the beginning of the files benefiting the final build size.

Just like angular, any change in class variables trigger change detection. PlumeJS uses queueMicroTask to re-render the component upon any changes.

For example, this is how a simple counter component looks like:

import { Component, html } from '@plumejs/core';

@Component({
  selector: 'app-counter'
})
class Counter {
  count = 0;

  render() {
    return html`<h1>Hello world</h1>
    <button onclick=${() => {
      this.count--;
    }}>
      -
    </button>
      <span>${this.count}</span>
    <button onclick=${() => {
      this.count++;
    }}>
      +
    </button>`;
  }
}

Components can talk to each other either by parent-child relation or by services or by routing.

We all know that web-components excel at scoping html, javascript and css. PlumeJS extends one helping hand to this by incorporating CSSStyleSheet Constructor and adoptedStyleSheets for true css encapsulation and sharing global styles. If incase CSSStyleSheet is not supported by your browser, PlumeJS automatically resorts to css emulation.

The entire framework is available as a single file from cdn in either IIFE / ES Module / UMD formats if you want to use it via importmaps or it is also availble on npm as scoped-packages.

Yes for better maintainability, PlumeJS has 4 main scoped packages and 1 addon scoped package

Main packages:

@plumejs/core : This is the main and core package that helps us to create components / services.
@plumejs/router : As the name implies, this scoped package helps us to enable routing.
@plumejs/forms : This scoped package helps us to create robust forms.
@plumejs/testing : A scoped package for wrting unit tests based on vitest and JSDom.