vivy-async-component
A Vivy plugin to load async component and async Vivy model to easily split chunks by route.
Docs
Installation
Using npm:
$ npm install vivy vivy-router vivy-async-componentExamples
Examples in repository
$ cd ./examples/[EXAMPLE_NAME]
$ npm run startExample names:
Complete and real project example
Documentation
Basic usage
configureRoutes.js
// Import AsyncComponent from plugin
import {AsyncComponent} from 'vivy-async-component';
export default function configureRoutes(store) {
return [{
path: '/',
component: AsyncComponent(() => import('path_to_your_component'), store, [
() => import('path_to_your_vivy_model_1'),
() => import('path_to_your_vivy_model_2')
])
}];
}index.js
import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-vivy';
import {createBrowserHistory} from 'history';
import {renderRoutes} from 'react-router-config';
// Import Vivy
import Vivy from 'vivy';
// Import VivyRouter and ConnectedRouter
import VivyRouter, {ConnectedRouter} from 'vivy-router';
// Import
import VivyAsyncComponent from 'vivy-async-component';
// Routes config
import configureRoutes from 'path_to_your_configure_routes';
// Create browser history
const history = createBrowserHistory();
// Create vivy
const vivy = Vivy();
// Apply router plugin
vivy.use(VivyRouter({
history
}));
// Apply async component plugin
vivy.use(VivyAsyncComponent());
// Create store after configuration
const store = vivy.createStore();
render(
<Provider store={store}>
<ConnectedRouter history={history}>
{renderRoutes(configureRoutes(store))}
</ConnectedRouter>
</Provider>,
document.getElementById('app-container')
);Methods
AsyncComponent
AsyncComponent(getComponent, VivyStoreInstance, getModels)
Example:
// Import AsyncComponent from plugin
import {AsyncComponent} from 'vivy-async-component';
export default function configureRoutes(store) {
return [{
path: 'route_path',
component: AsyncComponent(() => import('path_to_your_component'), store, [
() => import('path_to_your_vivy_model_1'),
() => import('path_to_your_vivy_model_2')
])
}];
}Hooks
useAsyncComponent
import {useAsyncComponent} from 'vivy-async-component';
const [asyncComponentLoading, {start, complete}] = useAsyncComponent();useAsyncComponentLoading
import {useAsyncComponentLoading} from 'vivy-async-component';
const asyncComponentLoading = useAsyncComponentLoading();