Instantly share code, notes, and snippets.

Embed
What would you like to do?
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)'
],
}
})
)
)
}
}),
],
),
]
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment