import m from 'mithril' ; import { useLayoutEffect , useRef , useState , withHooks } from 'mithril-hooks' ; const DomElementSize = ( ) => { const [ elementSize , setElementSize ] = useState ( 100 ) ; const [ measuredHeight , setMeasuredHeight ] = useState ( 0 ) ; const [ inited , setInited ] = useState ( false ) ; const domElementRef = useRef < HTMLDivElement > ( ) ; useLayoutEffect ( ( ) => { if ( domElementRef . current ) { setMeasuredHeight ( domElementRef . current . offsetHeight ) ; } } , [ elementSize , inited ] ) ; return m ( '[data-test-id=DomElementSize]' , [ m ( 'h2' , 'DomElementSize' ) , m ( 'p' , [ m ( 'span' , 'element size: ' ) , m ( 'span[data-test-id=elementSize]' , elementSize ) , ] ) , m ( 'p' , [ m ( 'span' , 'measured height: ' ) , m ( 'span[data-test-id=measuredHeight]' , measuredHeight ) , ] ) , m ( 'button[data-test-id=clear-button]' , { onclick : ( ) => setMeasuredHeight ( 0 ) } , 'Clear' ) , m ( 'button[data-test-id=button]' , { onclick : ( ) => setElementSize ( s => s + 10 ) } , 'Grow' ) , m ( 'button[data-test-id=render]' , { onclick : ( ) => { } } , 'Trigger render' ) , m ( 'div' , { oncreate : vnode => { domElementRef . current = vnode . dom as HTMLDivElement ; setInited ( true ) ; } , style : { width : `${ elementSize }px` , height : `${ elementSize }px` , backgroundColor : '#333' , } , } ) , ] ) ; } ; const HookedDomElementSize = withHooks ( DomElementSize ) ; export default { view : ( ) => m ( HookedDomElementSize ) , } ;