README.md

See here

island-demo.js

import Inline from './Inline'
import Island from './Island'

const frame = () => 
  new Promise(requestAnimationFrame)

m.mount(document.documentElement, () => {
  let key   = 0
  let draws = 0

  return {
    view: () => [
      m('head', 
        m('style', `
          body {
            font-family :sans-serif
          }
        `)
      ),
      
      m('body',
        m('h1', 'Island component demo'),
        
        m('p', 'This is a demonstration of the ', m('code', 'Island'), ' component.'),
        
        m('p', 'We also use the ', m('code', 'Inline'), ' component for the purpose of holding state in a series of nested, single-use components. Please read the source for more information.'),

        m('p', 'External component (drawn ', ++draws, ' times)'),

        m('button', {
          onclick: e => {
            key++

            m.redraw()
          },
        }, 'Re-initialise the Island?'),
        [
          m(Inline, {key}, () => {
            let animation = 0

            return {
              view: () =>
                m(Island, ({redraw, local}) =>
                  m('p', {
                    key,
                    style  : {
                      border    : '1px solid',
                      padding   : '1em',
                      transform : 'scale(' + animation / 100 + ')',
                      opacity   : animation / 100,
                    },
                    oninit : async () => {
                      while(++animation < 101){
                        await frame()

                        redraw()
                      }
                    },
                  },
                    'Island draws: ', animation,

                    m('br'),

                    m(Inline, () => {
                      let draws = 0

                      return {
                        onbeforeupdate : () => local,
                        view           : () => [
                          'Nested component (drawn ', 
                          ++draws, 
                          ' times)'
                        ],
                      }
                    })
                  )
                )
            }
          }),
        ],
      ),
    ]
  }
})