Lazy wrapper for Riot.js components
The following examples show how you can lazy load Riot.js components using modern javascript bundlers like Webpack or Rollup.
You can lazy load any component providing a fallback component during the loading process for example:
<app>
<user name={state.name}/>
<sidebar/>
<script>
import lazy from '@riotjs/lazy'
import Loader from './my-loader.riot'
export default {
components: {
// use a fallback loader
user: lazy(Loader, () => import('./user.riot'))
// just lazy load the sidebar
sidebar: lazy(() => import('./sidebar.riot'))
}
}
</script>
</app>
When the component is loaded, Lazy will dispatch a 'load' event from the component root element.
This can be useful e.g. for removing splashscreen on app start:
<app>
<user name={state.name} onload={ removeSplashscreen }/>
<script>
import lazy from '@riotjs/lazy'
import Loader from './my-loader.riot'
export default {
components: {
// use a fallback loader
user: lazy(Loader, () => import('./user.riot'))
},
removeSplashscreen() {
// the splashscreen, in this example, is create in pure html
// in the main page, to avoid blank page loading
const splashscreen = document.querySelector("#splashscreen");
if (!splashscreen) {
return;
}
splashcreen.parentElement.removeChild(splashscreen);
}
}
</script>
</app>
Lazy loading Riot.js components is recommended combined with @riotjs/route
<app>
<router>
<route path="/user/:name">
<!-- this component will be loaded only when the route will be matched -->
<user name={route[0]}/>
</route>
</router>
<script>
import lazy from '@riotjs/lazy'
import Loader from './my-loader.riot'
export default {
components: {
user: lazy(Loader, () => import('./user.riot'))
}
}
</script>
</app>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4