An SSR friendly (w)eb(c)omponent (t)ool (k)it without dependencies.
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 with npm.
npm install --save-dev @w-lfpup/wctkOr install directly from github.
npm install --save-dev https://github.com/w-lfpup/wctk-js/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);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).
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.
Wctk-js is released under the BSD-3 Clause License.