vivy-async-component

A Vivy plugin to load async component and async Vivy model to easily split chunks by route.

Docs

• Installation
• Examples
  • Examples in repository
  • Complete and real project example
• Documentation
  • Basic usage
  • Methods
  • Hooks
    • useAsyncComponent
    • useAsyncComponentLoading

Installation

Using npm:

$ npm install vivy vivy-router vivy-async-component

Examples

Examples in repository

$ cd ./examples/[EXAMPLE_NAME]
$ npm run start

Example names:

• withAsyncComponentPlugin

Complete and real project example

• labor-analgesia-frontend

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();