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/observerimport { 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 );