$mol_jsx_view

Reactive JSX view base class.

Usage example

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>

More examples in tests.

Package detail

mol_jsx_view

readme

$mol_jsx_view

Usage example