mithril-stream-router
v0.1.3
Published
An external router for mithril using streams.
Downloads
6
Maintainers
Readme
mithril-stream-router
This is a very early draft at an opinionated router. Use with caution.
Quick Start
const Albums =
({ getState, link, Route }) => {
return m('.albums'
,m('h1', 'Albums')
,m('ul'
,['One', 'Two', 'Three']
.map(
k => m('a', link( Route.of.Album({ album_key: k }) ), k )
)
.map( x => m('li', x) )
)
)
}
const Album =
({ album_key, link, Route }) => {
const base = '/albums/'+album_key+'/photo/'
return m('.album'
,m('h1', 'Album '+album_key )
,m('h2', 'Files')
,m('ul'
,['A', 'B', 'C']
.map( k =>
m('a',
link( Route.of.AlbumFile({ album_key, file_id: k }))
, k
)
)
.map( x => m('li', x) )
)
)
}
const AlbumFile =
({ album_key, file_id }) => {
return m('.file'
,m('h1', 'File ' + file_id +' from ' + album_key )
)
}
const render =
attrs => m('.app'
,m('pre', attrs.Route.toURL(attrs.getState().route))
,m('button', { onclick: () => window.history.back() }, 'Back' )
,attrs.Route.fold({
Albums: () => Albums(attrs),
Album: route => Album({ ...attrs, ...route }),
AlbumFile: route => AlbumFile({ ...attrs, ...route }),
}) (attrs.getState().route)
)
m.mount(document.body, () => {
const Route =
superouter.type('Route', {
'Albums': '/',
'Album': '/albums/:album_key',
'AlbumFile': '/albums/:album_key/photo/:file_id',
})
return {
view: () =>
m(m.stream.router.component, {
m,
stream: m.stream,
fromURL: url => Route.matchOr( () => Route.of.Albums(), url ),
toURL: x => Route.toURL(x),
location: () => window.location,
initial(){
return {
route: Route.of.Albums()
}
},
services(){},
render: attrs => render({ ...attrs, Route })
})
}
})