DEV Community

Kiran Mantha
Kiran Mantha

Posted on • Updated on

PlumeJS - No fuss web-components framework

Hello Everyone.

Have you considered writing HTML in this manner?

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

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>`;
  }
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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>`;
  }
}
Enter fullscreen mode Exit fullscreen mode

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:

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

Addon package:

  1. @plumejs/ui : This scoped package contains a collection of UI components like dialogs, multi-select, notifications, toggles.

PlumeJS has a user-friendly Yeoman generator to ease project setup based on either vite or webpack.

For more info on usage docs, please visit PlumeJS Wiki.

I hope you like my attempt to make web-components great.

Drop a star or contribute a pull request if you like ๐Ÿ˜Š.

Hoping to see your feedback,
See you again,
Kiran ๐Ÿ‘‹ ๐Ÿ‘‹

Top comments (2)

Collapse
 
artydev profile image
artydev

Well done, thnak you :-)

Collapse
 
kiranmantha profile image
Kiran Mantha

Very happy that you liked my work. Thankyou @artydev