Lazily load views as the router invokes them. Works great with dynamic import or split-require but should work with any promise or callback API.
var lazy = require('choo-lazy-view')
var choo = require('choo')
var app = choo()
app.use(lazy)
app.route('/my-page', lazy(() => import('./views/my-page')))
module.exports = app.mount('body')Hook up lazy view manager to the app. The lazy view store detects jalla and bankai prefetch (_experimental_prefetch) behaviour so that server side rendering works just as you'd expect.
Accepts a callback and an optional loader view. The callback will be invoked
when the view is called upon by the router. The callback, in turn, should load
the required view and relay it's response (or error) back to the caller. This
can be done either with a Promise or with a callback.
// using promise
app.route('/my-page', lazy(() => import('./views/my-page')))
// using a callback
app.route('/another-page', lazy(function (callback) {
fetchView(function (err, view) {
callback(err, view)
})
}))The second argument is optional and should be a function or a DOM node which will be displayed while loading. By default, the node used to mount the app in the DOM is used as loader (meaning the view remains unchanged while loading).
app.route('/a', lazy(
() => import('./my-view'),
(state, emit) => html`<body>Loading view…</body>`
))During server side render, the store will expose the selector used by
app.mount on the app state and use that as the fallback loader view. If you
are not doing server side rendering and exposing the server side rendered state
as initialState on the client, a loader view is required. Note: jalla does
this automatically for you.
Events are namespaced under lazy and emitted when loading views.
When fetching a view. The argument promise resolves to the loaded view.
When the view has been fetched, before the app will render.
When the view fails to load.
MIT