@barneycarroll/life-cycle

A no-op custom element which exposes lifecycle hooks to consuming view frameworks

Usage no npm install needed!

<script type="module">
  import barneycarrollLifeCycle from 'https://cdn.skypack.dev/@barneycarroll/life-cycle';
</script>

README

<life-cycle/>

<life-cycle/> is a custom element for framework-agnostic lifecycle hooks.

What?

The various view frameworks of the world have different APIs of exposing the underlying DOM nodes & fundamental entity lifecycle (create, update, destroy) - some don't expose any at all. <life-cycle/> forwards each of the DOM lifecycle callbacks to corresponding property methods declared on instantiation, allowing CRUD directives and access to local DOM objects. Meanwhile, it applies a style of display:contents so as not to affect rendering.

How?

Each lifecycle method on the custom element prototype will call corresponding properties on any <life-cycle/> index, with the same signature:

| Custom element method | <life-cycle> property
|-|- |connectedCallback |connected
|disconnectedCallback |disconnected
|adoptedCallback |adopted
|attributeChangedCallback |attributeChanged

Because attributeChanged requires that observed attributes be determined ahead of time, we reserve an attribute called simply attribute to trigger its execution.

Why?

As an example, Hyperapp - a minimal virtual DOM library with a strong remit on functional purity - doesn't expose any API for interfacing with generated DOM; meanwhile, an application written with seview would want to avoid library-specific APIs as far as possible in order to allow the same application view code to run with interchangeable rendering engines. With the <life-cycle/> element, either - or both - of these can be used in a way that allows setup & teardown logic per node, conditional updates, and DOM node exposure.