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

All controllers (aside from the WC controller) are extremely flexible and not restricted to web components. The can be used on any HTMLElement.

Install

Install with npm.

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

Or install directly from github.

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

Create a Web Component

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

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

The majority of components only have a few moving pieces. Do you really need templating or flux-patterns or tree-walks for your super cool custom button? Do you really need a framework for that checkbox?

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

AFAIK wctk is the ONLY web component library built with SSR and declarative shadow dom in mind. Developers can pick-up what the HTML threw down and immediately create interactive SSR friendly web components.

License

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