Neverending Perpetual Motion

    vite-plugin-virtual-entry
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.3 • Public • Published

    vite-plugin-virtual-entry

    vite's MPA needs html file for every entry which makes your project's looks chaotic.

    And if you follow vite's MPA, put other file in other directory, unlike index.html, you need useless middle directory(Ex. from vite's MPA doc http://localhost:3000/nested/nested.html) to located it.

    This plugin to make vite's MPA in serve and build have same behavior.

    This plugin use vite's configureServer Hook to intercept html request and response the html content requested from browser.

    This plugin intercept transform and generateBundle hooks of vite:build-html .

    Note

    1. please DO NOT use this plugin in lib mode

    Features

    • no html file needed
    • webpack entry like
    • auto config build.rollupOptions.input from entry

    Usage

        yarn add vite-plugin-virtual-entry --dev
        // or
        npm install vite-plugin-virtual-entry -D
    

    Add it to vite.config.js

    // vite.config.js
    import virtualEntry from 'vite-plugin-virtual-entry'
    
    //  xxx.html | xxx.js(x) | xxx.ts(x)
    type EntryFile = string;
    type BaseEntry = EntryFile	| {[EntryName: string]: EntryFile;};
    type Entry = BaseEntry | BaseEntry[];
    type RenderOption = {
    	html: string;
    	name: string;
    	entry: string;
    };
    type UserOption = {
        entry?: Entry;
        render?: Render;
        index?: string;
    };
    //  Case Entry As Object
    const entryAsObject: Entry = {
    	// http://localhost:3000/page
    	// http://localhost:3000/page.html
    	page: "/src/index/index.js",
    	// http://localhost:3000/nested/page
    	// http://localhost:3000/nested/page.html
    	"nested/page": "/src/nested/page/index.js",
    	// http://localhost:3000/login
    	// http://localhost:3000/login.html
    	login: "/src/login/login.js",
    };
    
    //  Case Entry As Object Array
    const entryAsObjectArray: Entry[] = [entryAsObject];
    
    //  Case Entry As String
    //  http://localhost:3000/src/login/login
    //  http://localhost:3000/src/login/login.html
    const entryAsString = "/src/login/login.js";
    
    //  Case Entry As String Array
    //  http://localhost:3000/src/login/login
    //  http://localhost:3000/src/login/login.html
    const entryAsStringArray = ["/src/login/login.js"];
    // optional
    const render: UserOption['Render'] = ({ html, name, entry }) => {
    	/*  You can replace or update HTML in your way.
    	  	alternately, by passing `entry`, you can use `ejs` to render your html and return it,eg:
    		var ejsHtml =`
    			<!DOCTYPE html>
    			<html>
    			<head></head>
    			<body><script type="module" src="<%= entry %>"></script></body>
    			</html>
    			`
    		 return ejs.render(ejsHtml, { entry:entry })
    	*/
    	return html
    };
    const entry =
    	entryAsObject | entryAsObjectArray | entryAsStringArray | entryAsString;
    export default {
    	plugins: [virtualEntry({ entry, render }:UserOption)],
    };

    Index (index.html)

    if don't have index.html in your project root, it will render same as 404

    404

    Plugin will intercept request, if the requested path does not exist , plugin will send something like below to browser

        http://localhost:3000/index
        http://localhost:3000/nested/Page
        http://localhost:3000/login
    

    Further Info

    vite-plugin-mpa

    vite-plugin-multipage

    vite-plugin-html-template

    vite-plugin-virtual-html

    @rollup/plugin-virtual

    Install

    npm i vite-plugin-virtual-entry

    DownloadsWeekly Downloads

    8

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    22.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • fizwen