Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dingff/vite-plugin-react-mpa
Mpa plugin for Vite.
https://github.com/dingff/vite-plugin-react-mpa
vite-plugin
Last synced: about 2 months ago
JSON representation
Mpa plugin for Vite.
- Host: GitHub
- URL: https://github.com/dingff/vite-plugin-react-mpa
- Owner: dingff
- License: mit
- Created: 2023-03-31T13:56:53.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-05-22T08:32:42.000Z (about 1 year ago)
- Last Synced: 2024-02-26T11:22:36.424Z (3 months ago)
- Topics: vite-plugin
- Language: TypeScript
- Homepage:
- Size: 175 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-vite - vite-plugin-react-mpa - An out-of-the-box MPA. (Plugins / Framework-agnostic Plugins)
README
# vite-plugin-react-mpa
[](https://npmjs.org/package/vite-plugin-react-mpa)
## How it works
It will collect `*/index.[jt]sx?` files under `src/pages` directory as entries, and generate corresponding HTML file for each entry.
## Install
```bash
npm install --save-dev vite-plugin-react-mpa
```
## Usage
```js
import { defineConfig } from 'vite';
import mpa from 'vite-plugin-react-mpa'
export default defineConfig({
plugins: [mpa()],
});
```
It generates temporary files when it runs, so you need to add `.mpa` to the `.gitignore`.
## Options
```js
export type Options = {
/**
* The path of the template file, note that the file needs to be ejs.
*/
template?: string;
/**
* ID of the node to be mounted during page rendering.
* @default 'root'
*/
mountElementId?: string;
/**
* The paths of the global dependencies.
*/
globalImport?: string[];
/**
* Whether to lower case the output html file name.
* @default false
*/
lowerCase?: boolean;
/**
* The path of the layout component.
*/
layout?: string;
/**
* The directory where temporary files are stored.
* @default '.mpa'
*/
tempDir?: string;
}
```
### The page-level template
Create `html.ejs` at the same level as the page component to declare the page-level template. Note that the `mountElementId` is required.
```html
```
### Layout
The page component will be passed as a child component to the `Layout` component.
```js
export default function Layout({ children }) {
return children
}
```