as-web-component

as-web-component

Web Components from functions

UI as a function of state pattern for Web Components.

Supports;

• Components from pure functions
• Components from Async functions
• Stateful/Lifecycle components from Async Generator functions
• Render DOM using any library; Preact, lit-html etc, with or without JSX
• Global name clash resolution
• ESM first
• Zero build tools required (for modern browsers)
• Easy DOM testing using data-component attribute

Live Demo

Basic Usage

Pure Function (lit-html)

import { html, render } from 'https://unpkg.com/lit-html';
import asWebComponent from 'https://unpkg.com/as-web-component/standalone.js';

function Header(name) {
  return html`
    <style>
      h1 {
        color: darkred;
      }
    </style>

    <header>
      <h1>${name}</h1>
    </header>
  `;
}

export default asWebComponent(Header, render);

Async Function (Preact)

import { render } from 'preact';
import asWebComponent from 'as-web-component';

async function GeolocationState() {
  const result = await navigator.permissions.query({
    name: 'geolocation'
  });

  return (
    <span>
      Geolocation Permission: <strong>${result.state}</strong>
    </span>
  );
}

export default asWebComponent(GeolocationState, render);

Async Generator function (Preact)

import { render } from 'preact';
import asWebComponent from 'as-web-component';

async function* Counter() {
  this.count = 0;

  const inc = () => {
    this.count++;
  };

  const dec = () => {
    this.count--;
  };

  for await (const { count } of this) {
    yield (
      <>
        <style>
          {`
            :host {
              display: inline-flex;
            }

            span {
              margin: 0 1rem;
            }
          `}
        </style>

        <button type="button" onClick={dec}>
          -
        </button>
        <span>{count}</span>
        <button type="button" onClick={inc}>
          +
        </button>
      </>
    );
  }
}

export default asWebComponent(Counter, render);

Using a Component

Reference from static HTML

import SomeComponent from '../SomeComponent.js';

// Reference as <some-component></some-component> in HTML
// Note: If the name does not contain a "-" or is already taken, then a "-{UID}" will be added to the name

// or, optionally define a name to reference in HTML, must contain a "_" and be unique in the page
SomeComponent.define('another-name');

Use auto unique name in a renderer

import SomeComponent from '../SomeComponent.js';
import { render } from 'preact';

render(<SomeComponent />, document.body); // Will render in the DOM as <some-component></some-component>

Install

npm install as-web-component --save

Or, import directly in the browser

import asWebComponent from 'https://unpkg.com/as-web-component/standalone.js';