Wctk-JS

An SSR friendly (w)eb(c)omponent (t)ool (k)it without dependencies.

About

There are no base classes, decorators, or mixins.

All features are compositional and designed for SSR and declarative shadow dom.

Four (4) controllers help developers:

• manage shadow dom and form values
• render on the microtask queue
• listen for events
• cache selector queries

Controllers are flexible and not restricted to webcomponents. The can be used on any HTMLElement.

Install

Install directly from github.

npm install --save-dev https://github.com/w-lfpup/wctk-js/

Install with npm.

npm install --save-dev @w-lfpup/wctk

Create a webcomponent

Add a Wc controller to a custom element with only one line

import { Wc } from "wctk";

class MyElement extends HTMLElement {
	#wc = new Wc({ host: this });
}

customElements.define("my-element", MyElement);

Examples

SSR (server side rendering)

The following examples demonstrate several common SSR use cases:

• a counter with initial state in the DOM (code).
• a stopwatch with initial state in the Shadow DOM (code).
• a form associated element (code).

Design Goals

The wctk is a collection of bare-metal facades over vanilla browser apis. They provide the basics for events, reactivity, and forms.

If you know vanilla javascript and the DOM you are good to go.

The wctk is designed with SSR and declarative shadow dom in mind. Developers can pick up what the HTML threw down with interactive SSR friendly webcomponents.

Templating is not provided. You can use lit-html or react or vue. But first consider the majority of components only have a few moving pieces. Do you really need templating for that custom button? Do you really need a flux-pattern for that checkbox?

License

Wctk-js is released under the BSD-3 Clause License.