playui-element

PlayUI Element

Build custom elements with no ergonomic or mental overheads! PlayUI Element lets you leverage technologies like OOHTML - which itself brings Reflex Functions and Observer API!

Load from a CDN

<!-- Add the OOHTML dependency -->
<script src="https://unpkg.com/@webqit/oohtml/dist/main.js"></script>
<script src="https://unpkg.com/@webqit/playui-element/dist/main.js"></script>

const { PlayElement, Observer } = window.webqit;

Install from NPM

npm i @webqit/playui-element @webqit/reflex-functions @webqit/observer

import { PlayElementClassFactory } from '@webqit/playui-element';
import { ReflexFunction } from '@webqit/reflex-function';
import Observer from '@webqit/observer';
// Define PlayElement
function PlayElement( HTMLElement ) {
    return PlayElementClassFactory( HTMLElement, ReflexFunction, Observer );
}

Build Custom elements with it:

// Anatomy
const localVar = { content: 'Initial value' };
window.globalVar = 'Initial value';
customElements.define( 'my-element', class extends PlayElement( HTMLElement ) {

    // List of methods that should be transformed to "reflex" functions
    static get reflexFunctions() {
        return [ 'render' ];
    }

    // How to make the render() function see local variables.
    static get reflexFunctionsEnv() {
        return { localVar };
    }

    prop = 'Initial value';
    render() {
        console.log( 'Global variable:', globalVar );
        console.log( 'Local variable:', localVar.content );
        console.log( 'Instance prop:', this.prop );
    }

} );

<my-element></my-element>

// The automatic reactivity part
const elem = document.querySelector( 'my-element' );
setTimeout( () => {
    Observer.set( globalThis, 'globalVar', 'New value' );
    Observer.set( localVar, 'content', 'New value' );
    Observer.set( elem, 'prop', 'New value' );
}, 5000 );

The PlayUI project

• Project Home