import { readFile, writeFile } from 'node:fs/promises' import { fileURLToPath } from 'node:url' import { defineConfig } from 'vite' import type { Plugin } from 'vite' import react from '@vitejs/plugin-react' import { clientBuildEnvironmentDefines } from '../../scripts/client-build-environment.ts' const src = (rel: string): string => fileURLToPath(new URL(rel, import.meta.url)) const STANDALONE_ERROR = 'apps/web is not a standalone application: bare Vite cannot inject window.__DSH_BOOT__. ' + 'From a repository checkout, run `pnpm dsh web`; an installed package uses `dsh web`. ' + 'For client-plugin HMR, run `pnpm dsh web` together with `pnpm run dev:web`.' const DEFAULT_CLIENT_TITLE = 'DSH Local Build' /** Escape build-time text before placing it in the HTML title element. */ function escapeHtmlText(value: string): string { return value.replace(/&/g, '&').replace(//g, '>') } /** Project the public build title into the initial HTML document. */ function clientDocumentTitle(): Plugin { const title = escapeHtmlText(process.env.DSH_CLIENT_TITLE ?? DEFAULT_CLIENT_TITLE) return { name: 'dsh-client-document-title', transformIndexHtml(html) { return html.replace('DSH Local Build', `${title}`) }, } } /** Fail before a Vite dev or preview server can expose the boot-manifest-free shell. */ function rejectStandaloneServe(): Plugin { return { name: 'dsh-reject-standalone-web-serve', config(_config, env) { if (env.command === 'serve') throw new Error(STANDALONE_ERROR) }, } } /** * Emit preview.html beside index.html: the built index page with one module * script — the worker bootstrap entry — spliced ahead of its entry tag. Both * pages share every chunk; the extra tag is the only difference, so the * static worker deployment ships the served page verbatim plus its * bootstrap. */ function emitPreviewPage(): Plugin { let bootstrapFile: string | undefined return { name: 'dsh-emit-preview-page', generateBundle(_options, bundle) { for (const item of Object.values(bundle)) { if (item.type === 'chunk' && item.isEntry && item.name === 'bootstrap') bootstrapFile = item.fileName } if (bootstrapFile === undefined) throw new Error('vite: preview bootstrap entry missing from the bundle') }, async closeBundle() { // A build that failed before generateBundle has no page to splice. if (bootstrapFile === undefined) return const page = await readFile(src('./dist/index.html'), 'utf8') const anchor = page.indexOf('` await writeFile(src('./dist/preview.html'), `${page.slice(0, anchor)}${tag}${page.slice(anchor)}`) }, } } /** * Vendor-chunk membership, by exact npm package name — the heavy render * families (math, highlight, markdown) that change only on dependency bumps. * Only packages workspace code imports DIRECTLY need listing: their private * transitive dependencies (oniguruma machinery, character tables, …) are * imported solely by these and rollup's chunk coloring pulls them into * vendor automatically. A dependency shared with index-side code falls back * to index — a few kB of dilution, never a correctness problem. Anything not * listed (react family, the vendored cordis workspace, tiny helpers like * anser/clsx, all workspace code) stays in the default `index` chunk, so * editing shell code re-hashes only index and returning clients keep the * cached vendor chunk. * * Every member must be React-free. A package that * imports react/jsx-runtime must never be listed — rollup folds a module * shared between the entry and a manual chunk into the manual chunk, so one * react-importing member would drag the single shared react copy into * vendor. The React side of markdown/math rendering is workspace code and * rides index. */ const VENDOR_PACKAGES: ReadonlySet = new Set([ // math 'katex', // syntax highlight (@shikijs/langs is handled separately below — // lazy grammars must not land here) 'shiki', // markdown parse pipeline (micromark/mdast; the incremental React renderer // over it is workspace code) 'mdast-util-from-markdown', 'mdast-util-gfm', 'mdast-util-math', 'micromark-core-commonmark', 'micromark-extension-gfm', 'micromark-extension-math', 'micromark-factory-space', 'micromark-util-character', 'micromark-util-classify-character', 'micromark-util-sanitize-uri', 'micromark-util-symbol', 'micromark-util-types', ]) /** * Boot grammars statically imported by ui-primitives' highlight.ts * (`@shikijs/langs/typescript` → `dist/typescript.mjs`, etc.). They live in * the same package as the lazy read-card grammars, but unlike those they are * part of the initial load and belong in the vendor chunk; the lazy ones must * stay unassigned so each keeps its own on-demand chunk. */ const BOOT_GRAMMAR_FILES: readonly string[] = [ 'dist/typescript.mjs', 'dist/shellscript.mjs', 'dist/json.mjs', ] /** Font asset extensions routed to assets/fonts/ (KaTeX's woff2/woff/ttf faces). */ const FONT_EXTENSIONS: readonly string[] = ['.woff2', '.woff', '.ttf'] /** * npm package name of a resolved module id: the segment after the last * `node_modules/`. pnpm nests the real package under an inner node_modules. */ function npmPackageOf(id: string): string | undefined { const parts = id.split('/node_modules/') if (parts.length === 1) return undefined const [first, second] = parts[parts.length - 1].split('/') if (first.startsWith('.')) return undefined // .pnpm store segment, not a package if (first.startsWith('@')) return second === undefined ? undefined : `${first}/${second}` return first } export default defineConfig({ // Relative asset URLs: preview.html mounts the same output under any base // directory, and the served index resolves identically from the site root. base: './', plugins: [rejectStandaloneServe(), clientDocumentTitle(), react(), emitPreviewPage()], build: { // The worker bootstrap holds its page at top-level await; Vite's default // `modules` target (es2020-era) rejects that syntax. target: 'es2022', sourcemap: true, rollupOptions: { input: { index: src('./index.html'), // Standalone entry, not an index.html script tag: Vite folds every // module tag of one page into a single synthetic entry, and only a // separate input keeps the shared page chunks bootstrap-free. bootstrap: src('./src/preview.ts'), }, output: { // The worker-preview surface groups under dist/preview/ (the page // itself stays at dist/preview.html), so the published payload can // exclude it as one directory. entryFileNames(chunk): string { return chunk.name === 'bootstrap' ? 'preview/[name]-[hash].js' : 'assets/[name]-[hash].js' }, // Output layout: the two main chunks stay at assets/ root; lazy // @shikijs/langs grammar chunks group under assets/langs/; fonts // (all KaTeX faces referenced by vendor.css) group under // assets/fonts/. Sourcemaps need no arrangement: rollup writes each // .map next to its js and references it by bare relative filename. chunkFileNames(chunk): string { // Grammar chunks are recognized by their member modules, not the // facade: shared embedded-grammar chunks (e.g. html+javascript, // split out because php/ruby/mdx embed them) have no facade at all. // index and vendor are excluded by name — vendor legitimately // carries the three boot grammars. if (chunk.name === 'index' || chunk.name === 'vendor') return 'assets/[name]-[hash].js' const isLangChunk = chunk.moduleIds.some(id => id.includes('/node_modules/@shikijs/langs/')) return isLangChunk ? 'assets/langs/[name]-[hash].js' : 'assets/[name]-[hash].js' }, assetFileNames(asset): string { const fileName = asset.names[0] ?? '' const isFont = FONT_EXTENSIONS.some(ext => fileName.endsWith(ext)) return isFont ? 'assets/fonts/[name]-[hash][extname]' : 'assets/[name]-[hash][extname]' }, manualChunks(id: string): string | undefined { const pkg = npmPackageOf(id) if (pkg === undefined) return undefined // workspace + vendored cordis: index if (pkg === '@shikijs/langs') { return BOOT_GRAMMAR_FILES.some(file => id.endsWith(`/${file}`)) ? 'vendor' : undefined } return VENDOR_PACKAGES.has(pkg) ? 'vendor' : undefined }, }, }, }, worker: { // The preview worker rides dist/preview/ with the rest of that surface. rollupOptions: { output: { entryFileNames: 'preview/[name]-[hash].js' } }, }, resolve: { // One instance per shared npm identity: a bare specifier otherwise resolves // from the importer's directory, so a diverging range ships a second React // and splits hook and element identity. Entries are package ids — they cover // react/jsx-runtime and react-dom/client — and resolve from this package's // node_modules, so react must stay a devDependency here and any watcher must // run vite from this directory (scripts/dev-web.ts). Workspace packages need // no entry: pnpm links each of them to a single directory. dedupe: ['react', 'react-dom'], // Workspace packages are consumed as built lib products: each resolves // through its own package.json exports from the importer's directory, and // CSS still rides Vite's pipeline because the client build preset emits it // beside the bundle. Plugin packages never enter this graph; they arrive as // runtime bundles through the client module system. The remaining alias // browserizes the vendored Cordis Loader's only Node import. alias: [ { find: /^node:module$/, replacement: src('./src/node-module-stub.ts') }, ], }, define: { ...clientBuildEnvironmentDefines(process.env), // vendored loader internal.ts: fromInternal() probes the Node major — // "0.0.0" takes neither branch, returning undefined (exactly the empty // internal slot the shell boot fills with the client module loader). 'process.versions.node': '"0.0.0"', 'process.execArgv': '[]', // vendored loader index.ts: envData falls to its default branch. 'process.env.CORDIS_SHARED': 'undefined', }, })