ayo/wcb: Web Components in Easy Mode - Ayo's Forge: Just keep building.

ayo/wcb

Web Components in Easy Mode https://webcomponent.io

Find a file

Ayo ed393fb617 chore: update publish script		2023-09-19 16:35:14 +02:00
.vscode	chore: formatting; add sample	2023-09-17 01:36:58 +02:00
assets	chore: update examples	2023-09-16 23:08:52 +02:00
demo	feat: publish type definitions	2023-09-18 22:52:38 +02:00
src	feat: publish type definitions	2023-09-18 22:52:38 +02:00
.gitignore	feat: publish type definitions	2023-09-18 22:52:38 +02:00
package-lock.json	1.6.8	2023-09-19 16:30:26 +02:00
package.json	chore: update publish script	2023-09-19 16:35:14 +02:00
README.md	chore: update readme import instructions & examples	2023-09-19 16:30:18 +02:00

README.md

>>> TLDR; See the Quick Start Example you can just copy, refactor, and modify

Web Component Base

This provides a very minimal base class for creating reactive custom elements easily.

When you extend the WebComponent class for your component, you only have to define the template and properties. Any change in any property value will automatically cause just the component UI to render.

The result is a reactive UI on property changes.

Import via unpkg
Installation via npm
Usage
Quick Start Example
Life-Cycle Hooks
1. onInit - the component is connected to the DOM, before view is initialized
2. afterViewInit - after the view is first initialized
3. onChanges - every time an attribute value changes

Import via unpkg

Import using unpkg in your vanilla JS component. We will use this in the rest of our usage examples.

import WebComponent from "https://unpkg.com/web-component-base/index.js";

Installation via npm

Usable for projects using typescript, or with bundlers, or using import maps.

npm i web-component-base

Usage

In your component class:

// HelloWorld.mjs
import WebComponent from "https://unpkg.com/web-component-base/index.js";

class HelloWorld extends WebComponent {
  name = "World";
  emotion = "excited";

  static properties = ["name", "emotion"];

  get template() {
    return `
        <h1>Hello ${this.name}${this.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`;
  }
}

customElements.define('hello-world', HelloWorld);

In your HTML page:

<head>
  <script type="module" src="HelloWorld.mjs"></script>
</head>
<body>
  <hello-world name="Ayo" emotion="sad">
  <script>
      const helloWorld = document.querySelector('hello-world');

      setTimeout(() => {
        helloWorld.setAttribute('emotion', 'excited');
      }, 2500)
  </script>
</body>

The result is a reactive UI that updates on attribute changes:

UI showing feeling toward Web Components changing from SAD to EXCITED

Quick Start Example

Here is an example of using a custom element in a single .html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WC Base Test</title>
    <script type="module">

      // import from unpkg
      import WebComponent from "https://unpkg.com/web-component-base/index.js";

      class HelloWorld extends WebComponent {
        static properties = ["name"];

        get template() {
          return `<h1>Hello ${this.name || 'World'}!</h1>`;
        }
      }

      customElements.define("hello-world", HelloWorld);

    </script>
  </head>
  <body>
    <hello-world name="Ayo"></hello-world>
    <script>
        const helloWorld = document.querySelector('hello-world');
        setTimeout(() => {
            helloWorld.setAttribute('name', 'Ayo zzzZzzz');
        }, 2500);
    </script>
  </body>
</html>

Life-Cycle Hooks

Define behavior when certain events in the component's life cycle is triggered by providing hook methods

onInit()

triggered when the component is connected to the DOM
best for setting up the component

import WebComponent from "https://unpkg.com/web-component-base/index.js";

class ClickableText extends WebComponent {
  // gets called when the component is used in an HTML document
  onInit() {
    this.onclick = () => console.log(">>> click!");
  }

  get template() {
    return `<span style="cursor:pointer">Click me!</span>`;
  }
}

afterViewInit()

triggered after the view is first initialized

class ClickableText extends WebComponent {
  // gets called when the component's innerHTML is first filled
  afterViewInit() {
    const footer = this.querySelector('footer');
    // do stuff to footer after view is initialized
  }

  get template() {
    return `<footer>Awesome site &copy; 2023</footer>`;
  }
}

onChanges()

triggered when an attribute value changed

import WebComponent from "https://unpkg.com/web-component-base/index.js";

class ClickableText extends WebComponent {
  // gets called when an attribute value changes
  onChanges(changes) {
      const {property, previousValue, currentValue} = changes;
      console.log('>>> ', {property, previousValue, currentValue})
  }

  get template() {
    return `<span style="cursor:pointer">Click me!</span>`;
  }
}