Reactive JSX view base class.
Components with memoized render:
/** @jsx $mol_jsx */
class Title extends $mol_jsx_view {
// constant as default
value() {
return ''
}
// render dom
render() {
return <h1>{ this.value() }</h1>
}
}
class Button extends $mol_jsx_view {
// empty handler
activate( event: Event ) { }
// render dom
render() {
return (
<button onclick={ event => this.activate( event ) } >
{ ... this.childNodes }
</button>
)
}
}
class App extends $mol_jsx_view {
// reactive state
@ $mol_mem
title( next = 'Hello' ) {
return next
}
// reactive action
@ $mol_action
change( event: Event ) {
this.title( 'World' )
}
// render bound components
render() {
return (
<div>
<Button
id="/change"
activate={ event => this.change( event ) }
>
<Title
id="/word"
value={ ()=> this.title() }
/>
</Button>
</div>
)
}
}Base html document:
<body id="/app"></body>Attach component to the document by id:
$mol_jsx_attach( document, ()=> <App id="/app" /> )Document after attach:
<body id="/app">
<button id="/app/change">
<h1 id="/app/word">Hello</h1>
</button>
</body>Take component instance for element:
const button = Button.of( document.getElementById( '/app/change' ) )Enforce click event:
button.activate( new PointerEvent( 'click' ) )Document after click:
<body id="/app">
<button id="/app/change">
<h1 id="/app/word">World</h1>
</button>
</body>