mol_jsx_view
TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published

$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 Sidebar

Install

npm i mol_jsx_view

Weekly Downloads

0

Version

0.0.1

License

none

Unpacked Size

1.22 MB

Total Files

24

Last publish

Collaborators

  • jin