bow-web v0.1.1

bow-web

Bow is a minimal library for building reusable web components without getting in your way.

Example component:

import { Component, componentFactoryBatch } from "bow-web";

/** A greeter component instance. */
export class Greeter extends Component {
  /** Input element for the person's name. */
  private nameInput: HTMLInputElement;

  /** Element for displaying the greeting result. */
  private resultArea: HTMLElement;

  /**
   * Setup the greeter.
   */
  mounted(): void {
    this.nameInput = this.element("name") as HTMLInputElement;
    this.resultArea = this.element("result");
    this.nameInput.addEventListener("keyup", () => this.renderResult());
    this.renderResult();
  }

  /**
   * Populate the result.
   */
  renderResult(): void {
    this.resultArea.innerText = `Hey, ${this.greetingName}!`;
  }

  /**
   * Determine the greeting name.
   */
  get greetingName(): string {
    return this.nameInput.value || "stranger";
  }
}

export default componentFactoryBatch(Greeter) as Greeter[];

<div class="js-greeter">
  <input class="js-greeter-name" type="text">
  <span class="js-greeter-result"></span>
</div>