vite-multi-spa 0.0.0 → 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+import { type Connect, type IndexHtmlTransformHook } from 'vite';
+export type ViteMultiSpaOptions = {
+    /**
+     * Where your pages are located. Only `.html` files are recognized.
+     * @default 'src/pages'
+     */
+    pagesRoot?: string;
+    /**
+     * Transform the HTML of your pages.
+     * @see https://vite.dev/guide/api-plugin#transformindexhtml
+     */
+    transformPageHtml?: IndexHtmlTransformHook | readonly IndexHtmlTransformHook[];
+};
+export default function viteMultiSpa(options?: ViteMultiSpaOptions): ({
+    readonly name: "vite-multi-spa";
+    readonly configResolved: (config: {
+        root: string;
+    }) => void;
+    readonly configureServer: {
+        readonly order: "pre";
+        readonly handler: (server: {
+            middlewares: Connect.Server;
+        }) => void;
+    };
+    readonly transformIndexHtml: {
+        order: "pre";
+        handler: IndexHtmlTransformHook;
+    } | undefined;
+    readonly buildStart: (this: {
+        environment: {
+            name: string;
+        };
+    } & {
+        emitFile: (file: {
+            type: "chunk";
+            id: string;
+        }) => void;
+    }) => void;
+    readonly generateBundle: {
+        order: "post";
+        handler(this: {
+            environment: {
+                name: string;
+            };
+        }, _options: import("rollup").NormalizedOutputOptions, bundle: import("rollup").OutputBundle): void;
+    };
+} | {
+    name: string;
+    transformIndexHtml: {
+        order: "pre";
+        handler: IndexHtmlTransformHook;
+    };
+})[] | {
+    readonly name: "vite-multi-spa";
+    readonly configResolved: (config: {
+        root: string;
+    }) => void;
+    readonly configureServer: {
+        readonly order: "pre";
+        readonly handler: (server: {
+            middlewares: Connect.Server;
+        }) => void;
+    };
+    readonly transformIndexHtml: {
+        order: "pre";
+        handler: IndexHtmlTransformHook;
+    } | undefined;
+    readonly buildStart: (this: {
+        environment: {
+            name: string;
+        };
+    } & {
+        emitFile: (file: {
+            type: "chunk";
+            id: string;
+        }) => void;
+    }) => void;
+    readonly generateBundle: {
+        order: "post";
+        handler(this: {
+            environment: {
+                name: string;
+            };
+        }, _options: import("rollup").NormalizedOutputOptions, bundle: import("rollup").OutputBundle): void;
+    };
+};

package/dist/index.js

@@ -0,0 +1,125 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { normalizePath, } from 'vite';
+export default function viteMultiSpa(options = {}) {
+    let root;
+    const pagesRoot = options.pagesRoot
+        ? normalizePath(options.pagesRoot).replace(/(^\/|\/$)/g, '')
+        : 'src/pages';
+    // Given a request URL, return the corresponding page URL. This is used to
+    // serve documents (and their relative assets) from the pages root.
+    const resolvePageUrl = (url) => {
+        const pageURL = '/' + pagesRoot + url;
+        if (pageURL.endsWith('/')) {
+            const pageFile = path.join(root, pageURL, 'index.html');
+            if (fs.existsSync(pageFile)) {
+                return pageURL;
+            }
+        }
+        else {
+            const pageFile = path.join(root, pageURL + '.html');
+            if (fs.existsSync(pageFile)) {
+                return pageURL;
+            }
+        }
+    };
+    const transforms = Array.isArray(options.transformPageHtml)
+        ? options.transformPageHtml
+        : options.transformPageHtml
+            ? [options.transformPageHtml]
+            : [];
+    // In case another plugin emits HTML files, wrap custom transforms so they
+    // only run on /index.html and those in the pages root.
+    const transformPagesOnly = (transform) => function (html, ctx) {
+        return ctx.path.startsWith('/' + pagesRoot + '/') ||
+            ctx.path === '/index.html'
+            ? transform.call(this, html, ctx)
+            : undefined;
+    };
+    // The main plugin doesn't use the Plugin type directly, as that more easily
+    // leads to assignability errors as the Vite API evolves.
+    const mainPlugin = {
+        name: 'vite-multi-spa',
+        configResolved(config) {
+            root = config.root;
+        },
+        configureServer: {
+            order: 'pre',
+            handler(server) {
+                server.middlewares.use((req, _res, next) => {
+                    const url = req.url;
+                    const secFetchDest = req.headers['sec-fetch-dest'];
+                    if (secFetchDest === 'document') {
+                        // Serve documents from the pages root.
+                        const pageUrl = resolvePageUrl(url);
+                        if (pageUrl) {
+                            req.url = pageUrl;
+                            delete req.originalUrl;
+                        }
+                    }
+                    else if (secFetchDest && req.headers['referer']) {
+                        if (url.startsWith('/@vite/')) {
+                            return next();
+                        }
+                        const referer = new URL(req.headers['referer']);
+                        const pageUrl = resolvePageUrl(referer.pathname);
+                        if (pageUrl && !fs.existsSync(path.join(root, url))) {
+                            // Serve assets relative to the document's filesystem location.
+                            const assetUrl = pageUrl.slice(0, pageUrl.lastIndexOf('/')) + url;
+                            if (fs.existsSync(path.join(root, assetUrl))) {
+                                req.url = assetUrl;
+                                delete req.originalUrl;
+                            }
+                        }
+                    }
+                    next();
+                });
+            },
+        },
+        transformIndexHtml: transforms.length > 0
+            ? { order: 'pre', handler: transformPagesOnly(transforms[0]) }
+            : undefined,
+        buildStart() {
+            if (this.environment.name !== 'client') {
+                return;
+            }
+            fs.globSync(path.join(root, pagesRoot + '/**/*.html')).forEach(file => {
+                this.emitFile({
+                    type: 'chunk',
+                    id: path.relative(root, file),
+                });
+            });
+        },
+        generateBundle: {
+            order: 'post',
+            handler(_options, bundle) {
+                if (this.environment.name !== 'client') {
+                    return;
+                }
+                // Flatten the pages root into the root.
+                for (const filename in bundle) {
+                    const file = bundle[filename];
+                    if (file.type === 'asset' &&
+                        file.fileName.startsWith(pagesRoot + '/')) {
+                        file.fileName = file.fileName.slice(pagesRoot.length + 1);
+                    }
+                }
+            },
+        },
+    };
+    // Is the plugin adherent to Vite's plugin API?
+    mainPlugin;
+    if (transforms.length > 1) {
+        return [
+            mainPlugin,
+            ...transforms.slice(1).map(transform => ({
+                name: 'vite-multi-spa-transform',
+                transformIndexHtml: {
+                    order: 'pre',
+                    handler: transformPagesOnly(transform),
+                },
+            })),
+        ];
+    }
+    return mainPlugin;
+}

package/package.json

@@ -1,13 +1,40 @@
 {
   "name": "vite-multi-spa",
-  "version": "0.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "type": "module",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.js"
   },
-  "keywords": [],
-  "author": "",
+  "version": "1.0.0",
+  "description": "A Vite plugin for building multi-spa applications",
   "license": "MIT",
-  "type": "commonjs"
-}
+  "keywords": [
+    "vite",
+    "multi-spa",
+    "spa",
+    "multi-page",
+    "mpa",
+    "html",
+    "plugin"
+  ],
+  "author": "Alec Larson",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aleclarson/vite-multi-spa.git"
+  },
+  "devDependencies": {
+    "@alloc/prettier-config": "^1.0.0",
+    "@types/node": "^25.0.1",
+    "@typescript/native-preview": "7.0.0-dev.20251212.1",
+    "prettier": "^3.7.4",
+    "vite": "^7.2.7"
+  },
+  "prettier": "@alloc/prettier-config",
+  "files": [
+    "dist",
+    "!*.tsbuildinfo"
+  ],
+  "scripts": {
+    "build": "tsgo -b tsconfig.json"
+  }
+}

package/readme.md

@@ -1 +1,32 @@
-Coming soon...
+# vite-multi-spa
+
+Vite plugin that lets every `.html` in `src/pages` behave like its own SPA entry during dev and build.
+
+## Quick start
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import viteMultiSpa from 'vite-multi-spa'
+
+export default defineConfig({
+  plugins: [
+    viteMultiSpa({
+      pagesRoot: 'src/pages', // optional
+      // transformPageHtml: html => html, // optional, supports array
+    }),
+  ],
+})
+```
+
+## What it does
+
+- Serves documents from `pagesRoot` when the browser requests `/foo` or `/foo/`.
+- Serves page-relative assets when requested from a page (based on the Referer header).
+- Runs `transformPageHtml` only on `/index.html` and pages under `pagesRoot`.
+- Emits every `${pagesRoot}/**/*.html` as a build chunk and flattens outputs to the root of `dist`.
+
+## Options
+
+- `pagesRoot` (`string`, default `src/pages`): Folder scanned for `.html` pages.
+- `transformPageHtml` (`IndexHtmlTransformHook | IndexHtmlTransformHook[]`): Passed through to Vite and scoped to pages. See [Vite's API documentation](https://vite.dev/guide/api-plugin#transformindexhtml).