mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
31046e7a7f
## 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 -->
45 lines
1.1 KiB
TypeScript
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 }
|
|
}
|