@webqit/playui-element
v0.0.18
Published
Modern UI suite and web component library.
Downloads
21
Readme
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!
<!-- 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;
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 );