@iosio/x

tiny vdom inspired by https://twitter.com/_developit/status/1232891191110389760

import {h, render, Fragment, Host} from '@iosio/x';
import {someSubscription} from './someSubscription';


const Counter = (props, {count}, update) => {
    
    return(
            <Host lifeCycle={() => { //once per instance.

                // call update to rerender this component
                let unsub = someSubscription(update); 
                return () => unsub();   //unsubscribes when unmounted
                
                //or <Host lifeCycle={()=>someSubscription(update)}> ...
            }}>
    
                <h1>
                    {someSubscription.latestValue}
                </h1>

                <button onClick={() => update({count: count + 1})}>
                    inc me!! : {count}
                </button>

            </Host>
        )   
}


const App = (props, {show = false}, update) => {
    
    return (
        <Fragment>
            <button onClick={() => update({show: !show})}>
                toggle
            </button>

            {
                show && <Counter/>
            }   
            <Counter/>
        </Fragment>
    )

}

render(<App/>, document.body);