Files
Danny White 31046e7a7f perf(design-system): improve local dev content reload (#50069)
## What kind of change does this PR introduce?

Performance improvement for design-system doc page reload in local dev.

## What is the current behavior?

Doc pages import all compiled MDX from a single `.velite/allDocs.json`
bundle (~27MB for 105 docs). Velite rebuilds are fast, but every MDX
save forces Next to re-parse that entire file.

## What is the new behavior?

- Writes each doc's compiled MDX to `.velite/codes/{codeId}.json`;
`allDocs.json` keeps metadata only (~367KB)
- Loads doc code on demand in `lib/docs.ts` via `readFile`, with
`connection()` + dynamic `import('@/.velite')` in dev so pages re-read
fresh output after Velite rebuilds
- Skips `generateStaticParams` in dev
- Velite `output.clean` only in production
- README notes the per-doc output and adds commented getting-started
commands

Dev workflow is unchanged: `pnpm dev` still runs `velite dev` alongside
Next.js.

## To test

Local-only:

1. `cd apps/design-system && pnpm dev`
2. Open http://localhost:3003/design-system/docs/components/button
3. Edit `content/docs/components/button.mdx`, wait for `[VELITE] rebuild
finished`, refresh: change should land in ~200ms, not multi-second

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Documentation**
- Updated design-system setup instructions for environment
configuration, installation, development, and the local browser URL.
- Added guidance for building documentation content and regenerating
components.
  - Updated alternative command examples.
  - Removed the previous “Hot reload” section.

- **Improvements**
- Improved documentation page loading during development and production
builds.
- Documentation pages now reliably display their associated code
examples.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-14 09:40:17 +10:00

45 lines
1.1 KiB
TypeScript

import 'server-only'
/* eslint-disable turbo/no-undeclared-env-vars */
import { readFile } from 'node:fs/promises'
import path from 'node:path'
import { connection } from 'next/server'
import type { Doc as DocMeta } from '@/.velite'
export type { DocMeta }
export type Doc = DocMeta & { code: string }
const CODE_DIR = path.join(process.cwd(), '.velite/codes')
async function loadDocCode(codeId: string): Promise<string> {
const raw = await readFile(path.join(CODE_DIR, `${codeId}.json`), 'utf8')
return JSON.parse(raw) as string
}
export async function getAllDocs(): Promise<DocMeta[]> {
if (process.env.NODE_ENV === 'development') {
await connection()
}
const { allDocs } = await import('@/.velite')
return allDocs
}
export async function getDocMetaBySlug(slug: string): Promise<DocMeta | null> {
const allDocs = await getAllDocs()
return allDocs.find((doc) => doc.slugAsParams === slug) ?? null
}
export async function getDocBySlug(slug: string): Promise<Doc | null> {
const doc = await getDocMetaBySlug(slug)
if (!doc) {
return null
}
const code = await loadDocCode(doc.codeId)
return { ...doc, code }
}