Wuse NPM | npm.io

WUSE

Wuse (Web Using Shadow Elements) is a Web Components library that encapsulates the usage of the Custom Elements Registry and the Shadow DOM features of ES6. Additionally, it offers an IoC event-driven lifecycle, a pure javascript approach to markup and styles generation, optional reactivity for fields, and much more.

This is a work in progress, with a lot of things in an experimental stage. More documentation, tests and examples to come.

MOTIVATION

"If you want more effective programmers, you will discover that they should not waste their time debugging, they should not introduce the bugs to starth with."
Edger Dijkstra, The Humble Programmer, 1972

CHARACTERISTICS

no external dependencies (none in runtime and only esbuild if you want to build from source)
self-documenting api (descriptive "long" function names)
full unit testing (630+ tests cases)
markdown documentation (public api in minimallistic style, inspired by decades of repeating RTFM)
extensive example library (39 demos: 16 simple samples and 23 with third party libraries)

FEATURES

#NATURAL-WAY

Wuse exposes a more natural way of working with the browser instead of hiding the way it works:

- wraps the Custom Element Registry usage: just create your class extending from a Wuse HTML Element class, register it and then instantiate it as you need (class names are converted into valid custom elements, ex: 'My_Element' class is converted into 'my-element' tag)
- creates a functional structure over the Shadow DOM: a root element, a style element and a main element
- does not block nor interfere with direct DOM access (for example, this is good when dealing with legacy webs, allowing progressive migrations)

#FULL-CONTROL

Wuse gives you the power to control everything in your web development:

- allows all-in-one markup, styles and scripting definitions: you can define your custom element in a single ES6 class file
- allows to retain control on the Element lifecycle: you can hook up to 14 different events
- allows optional field reactivity with free control on the behaviour: you can structure the code the way you want

#NO-BUILDS

Wuse does not require any build step to be performed.