Yuzu Async Component Loader
npm install yuzu-loadable> async component initializer for yuzu
Yuzu components rely on pre-existing HTML used as baseline to enhance the user experience. But in some scenarios the HTML you need is not rendered, or you have to wait for data coming from a remote API before you can initialize a component.
This is where Yuzu Loadable comes in hand.
Yuzu Loadable lets you define an async function and use its returned data to instantiate a component and its HTML template.
- Installation
- As NPM Package
- CDN Delivered
Yuzu Loadable will be available in the global scope under YZ.Loadable.
To provide maximum compatibility with every development environment, packages are transpiled to ES5. When used with a bundler like Webpack or rollup the module resolution system will automatically pick either the Commonjs or ESM version based on your configuration.
If you want to import the ES2017 version of a package you can do so by setting an alias on the bundler's configuration file:
#### Webpack
`diff
// webpack.config.js
module.exports = {
// ...
+ resolve: {
+ alias: {
+ 'yuzu-loadable': 'yuzu-loadable/dist/index.next.js'
+ }
+ }
}
`
#### Rollup
`diff
// rollup.config.js
+ import path from 'path';
+ import alias from 'rollup-plugin-alias';
export default {
input: './src/index.js',
plugins: [
// ...
+ alias({
+ 'yuzu-loadable': path.resolve(__dirname, 'node_modules/yuzu-loadable/dist/index.next.js')
+ })
],
};
`
Yuzu works in all modern browsers. In order to make it work in browsers that don't support ES2015+ features (like IE11) you need to include the yuzu-polyfills package before any other yuzu* package.
If you're using a package bundler add this line at the very top of your entry point:
`js`
import 'yuzu-polyfills';
Learn more about Yuzu Loadable! Read the full documentation or browse the API.
1. Fork it or clone the repo
1. Install dependencies yarn install
1. Code your changes and write new tests in the folder.yarn build`
1. Ensure everything is fine by running
1. Push it or submit a pull request :D