Web Components

This is a simple Custom Element base that uses TypeScript decorators to build custom web components.

Core

This is where the CustomElement abstract class as well as where the @Component('tag-name') decorator is found.

You can create a new custom element like so:

import { Component, CustomElement, html } from 'web-comps';

@Component('tag-name')
export class TagName extends CustomElement {

  @Attribute() count;

  get css() {
    return `
      h1 {
        color: red;
      }

      .container {
        width: ${this.containerWidth};
      }
    `
  }

  public handleClick(e: Event) {
    e.preventDefault();
    this.count++;
  }

  public render() {
    return html`
      <div class="container">
        <h1>Count: ${this.count}</h1>
        <button @click=${this.handleClick.bind(this)}>Increase Count</button>
      </div>
    `;
  }
}

Lifecycle methods

Render

public render(): TemplateResult This returns the TemplateResult generated by the call to the html function

Mounting

componentWillMount(): Promise<void> | void componentDidMount(): Promise<void> | void These functions run before and then after the HTML elements are rendered

Unmounting

componentWillUnmount(): Promise<void> | void componentDidUnmount(): Promise<void> | void These functions run before and then after the HTML elements are removed

Updating

componentDidUpdate(name: string, oldValue: string, newValue: string): void This runs when an element's attributes updated

Router

This is a web-component based Router that looks for the dummy element called <app-route></app-route>

You can use it like so:

<main class="container--main">
  <app-router>
    <app-route path="/" title="Home" component="app-home-view"></app-route>

    <app-route path="/auth/signup" title="Sign Up" component="signup-view"></app-route>
    <app-route path="/auth/login" title="Log In" component="login-view"></app-route>

    <app-route path="/post/create" title="Create new Post" component="create-post-view"></app-route>
    <app-route path="/posts" title="Post List" component="all-posts-view"></app-route>
    <app-route path="/posts/:postid" title="Post" component="single-post-view"></app-route>


    <!-- This is the 404 Route ... Must be last -->
    <app-route path="*" title="404 Not Found" component="not-found-view"></app-route>
  </app-router>
</main>

State

Basic pub-sub state management that is a watered-down redux. It follows the state-action-reducer workflow where you can dispatch an action that gets sent to a reducer that creates a new state object and publishes the changes to any subscribed functions.