https://github.com/fatalxiao/vivy-async-component

A Vivy plugin which loading async component and async Vivy model to easily split chunks by route.
https://github.com/fatalxiao/vivy-async-component

react react-router redux router vivy

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/fatalxiao/vivy-async-component
• Owner: fatalxiao
• License: mit
• Created: 2021-07-12T08:49:40.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-17T23:46:18.000Z (about 1 year ago)
• Last Synced: 2024-10-26T11:48:35.422Z (20 days ago)
• Topics: react, react-router, redux, router, vivy
• Language: TypeScript
• Homepage:
• Size: 160 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[npm-image]: https://img.shields.io/npm/v/vivy-async-component.svg?style=flat-square

[npm-url]: https://npmjs.org/package/vivy-async-component

[license-image]: https://img.shields.io/npm/l/vivy-async-component.svg?style=flat-square

[vivy-url]: https://github.com/fatalxiao/vivy

[with-async-component-plugin-example-url]: https://github.com/fatalxiao/vivy-async-component/tree/main/examples/withAsyncComponentPlugin

[labor-analgesia-frontend-url]: https://github.com/fatalxiao/labor-analgesia-frontend

# vivy-async-component

[![NPM Version][npm-image]][npm-url]

[![License][license-image]][npm-url]

A [Vivy][vivy-url] plugin to load async component and async Vivy model to easily split chunks by route.

## Docs

* [Installation](#installation)

* [Examples](#examples)

    * [Examples in repository](#examples-in-repository)

    * [Complete and real project example](#complete-and-real-project-example)

* [Documentation](#documentation)

    * [Basic usage](#basic-usage)

    * [Methods](#methods)

    * [Hooks](#hooks)

        * [useAsyncComponent](#useAsyncComponent)

        * [useAsyncComponentLoading](#useAsyncComponentLoading)

## Installation

Using npm:

```shell

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

```

## Examples

### Examples in repository

```shell

$ cd ./examples/[EXAMPLE_NAME]

$ npm run start

```

**Example names**:

* [withAsyncComponentPlugin][with-async-component-plugin-example-url]

### Complete and real project example

* [labor-analgesia-frontend][labor-analgesia-frontend-url]

## Documentation

### Basic usage

configureRoutes.js

```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

```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(

    

        

            {renderRoutes(configureRoutes(store))}

        

    ,

    document.getElementById('app-container')

);

```

### Methods

#### AsyncComponent

`AsyncComponent(getComponent, VivyStoreInstance, getModels)`

Example:

```js

// 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`

```js

import {useAsyncComponent} from 'vivy-async-component';

const [asyncComponentLoading, {start, complete}] = useAsyncComponent();

```

#### `useAsyncComponentLoading`

```js

import {useAsyncComponentLoading} from 'vivy-async-component';

const asyncComponentLoading = useAsyncComponentLoading();

```