site/vite.config.ts

Functions

Imports

It imports bin/states.mjs. No module of this repo imports it.

Source

1import { readdirSync, existsSync } from "node:fs";
2import { resolve } from "node:path";
3import { fileURLToPath } from "node:url";
4import { defineConfig } from "vite";
5import react from "@vitejs/plugin-react";
6import { generateStates } from "../bin/states.mjs";
7import { writeHeadersFile } from "../scripts/security-headers.ts";
8
9// One build for the site and every component's states page. The root is the repo, so a
10// states page sits at /components/<name>/states.html beside its component. The site is
11// served at the root of https://capsomer.dustinedwards.info (rulings.md, rule 16), by a
12// static Cloudflare Worker; CAPSOMER_BASE overrides the base for another host.
13const root = fileURLToPath(new URL("..", import.meta.url));
14// The states pages are generated from each component's examples.html, so they are written
15// first: Vite finds its inputs by the file existing (build and preview both load this).
16generateStates(root);
17const outDir = resolve(root, "site-dist");
18const states = Object.fromEntries(
19  readdirSync(resolve(root, "components"), { withFileTypes: true })
20    .filter((d) => d.isDirectory() && existsSync(resolve(root, "components", d.name, "states.html")))
21    .map((d) => [`states-${d.name}`, resolve(root, "components", d.name, "states.html")]),
22);
23
24export default defineConfig({
25  root,
26  base: process.env.CAPSOMER_BASE ?? "/",
27  publicDir: resolve(root, "site/public"),
28  plugins: [
29    react(),
30    // The site's page is site/index.html in the repo and the root of the published site.
31    {
32      name: "capsomer-site-root",
33      enforce: "post",
34      generateBundle(_, bundle) {
35        const page = bundle["site/index.html"];
36        if (page) page.fileName = "index.html";
37      },
38    },
39    // The security headers and the assets' cache rule, generated from scripts/security-headers.ts
40    // into site-dist/_headers, which Workers static assets reads.
41    {
42      name: "capsomer-site-headers",
43      apply: "build",
44      writeBundle() {
45        writeHeadersFile(outDir);
46      },
47    },
48  ],
49  build: {
50    outDir,
51    // Every asset a file, never a data: URL: the site's CSP allows fonts and images from
52    // its own origin only.
53    assetsInlineLimit: 0,
54    emptyOutDir: true,
55    rollupOptions: { input: { site: resolve(root, "site/index.html"), ...states } },
56  },
57  preview: { port: 4319, strictPort: true },
58});