import * as L from "lonna" ; import { h , mount , componentScope } from "../../src/index" ; const scrollPos = L . fromEvent ( window , "scroll" ) . pipe ( L . toStatelessProperty ( ( ) => Math . floor ( window . scrollY ) ) ) ; const randomColor = ( ) => "#" + Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) ; const Item = ( { text } ) => { return < div style = { { background : randomColor ( ) , minHeight : "100px" } } > { text } < /div>; } ; const items = ( function ( ) { const count = 100 ; const xs = [ ] ; for ( var i = 0 ; i < count ; i ++ ) { xs . push ( i . toString ( ) ) ; } return xs ; } ) ( ) ; const ScrollingThing = ( ) => { return ( < div > { items . map ( i => < Item text = { i } / > ) } < /div>); } ; const ScrollPosDisplay = ( ) => { const mapped = L . view ( scrollPos , x => { console . log ( "Scrollpos subscription active" , x ) ; return x ; } ) ; mapped . pipe ( L . applyScope ( componentScope ( ) ) , L . changes ) . forEach ( value => { console . log ( "Performing side-effects for value" , value ) ; } ) ; return < div style = { { position : "fixed" , right : "20px" , background : "black" , color : "white" , padding : "10px" } } > { scrollPos } < /div>; } ; const App = ( ) => { const showScroller = L . atom ( true ) ; return < div > < button onClick = { ( ) => showScroller . modify ( x => ! x ) } style = { { position : "fixed" , right : "80px" } } > Toggle visibility < /button> { L . view ( showScroller , show => show ? < ScrollPosDisplay /> : null)} < ScrollingThing / > < /div>; } ; mount ( < App />, document.getElementById("root")!);