This is a simple Custom Element base that uses TypeScript decorators to build custom web components.
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>
`;
}
}
public render(): TemplateResult
This returns the TemplateResult generated by the call to the html
function
componentWillMount(): Promise<void> | void
componentDidMount(): Promise<void> | void
These functions run before and then after the HTML elements are rendered
componentWillUnmount(): Promise<void> | void
componentDidUnmount(): Promise<void> | void
These functions run before and then after the HTML elements are removed
componentDidUpdate(name: string, oldValue: string, newValue: string): void
This runs when an element's attributes updated
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>
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.