choo-lazy-view
Advanced tools
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')
app.use(lazy)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.
lazy(callback, loader?)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.
lazy:load(promise)When fetching a view. The argument promise resolves to the loaded view.
lazy:success()When the view has been fetched, before the app will render.
lazy:error(err)When the view fails to load.
MIT
FAQs
Lazily fetch view when needed
The npm package choo-lazy-view receives a total of 5 weekly downloads. As such, choo-lazy-view popularity was classified as not popular.
We found that choo-lazy-view demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.
Security News
CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.
Security News
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.