building docs on the fly is an admittedly terrible idea

packages/docs/package.json

@@ -5,9 +5,12 @@
   "scripts": {
     "prepare": "node ./scripts/fix-heroicons.js",
     "serve": "esmo --experimental-import-meta-resolve --experimental-json-modules --no-warnings --enable-source-maps src/main.tsx | pino-colada",
-    "dev": "nodemon --inspect --exec \"pnpm serve\" --watch src --ext ts,tsx,md,css",
-    "start": "cross-env NODE_ENV=production pnpm serve",
-    "typecheck": "tsc --noEmit"
+    "dev": "npm-run-all --parallel --print-label --race dev-*",
+    "dev-server": "nodemon --inspect --exec \"pnpm serve\" --watch src --ext ts,tsx,md,css",
+    "dev-docs": "typedoc --watch",
+    "start": "pnpm build-docs && cross-env NODE_ENV=production pnpm serve",
+    "typecheck": "tsc --noEmit",
+    "build-docs": "typedoc"
   },
   "dependencies": {
     "@heroicons/react": "^1.0.5",
@@ -52,6 +55,7 @@
     "browser-sync": "^2.27.7",
     "execa": "^6.0.0",
     "nodemon": "^2.0.15",
+    "npm-run-all": "^4.1.5",
     "rxjs": "^7.5.1",
     "tsup": "^5.11.10",
     "type-fest": "^2.8.0",

packages/docs/src/api/serve-api-docs.ts

@@ -1,29 +0,0 @@
-import express, { RequestHandler } from "express"
-import PromiseRouter from "express-promise-router"
-import * as TypeDoc from "typedoc"
-
-let built = false
-const outputDir = "api"
-
-export function serveApiDocs(): RequestHandler {
-  return PromiseRouter()
-    .use(async (_, __, next) => {
-      if (!built) {
-        const app = new TypeDoc.Application()
-        app.options.addReader(new TypeDoc.TSConfigReader())
-        app.options.addReader(new TypeDoc.TypeDocReader())
-        app.bootstrap()
-
-        const project = app.convert()
-
-        if (!project) {
-          throw new Error("Failed to convert project")
-        }
-
-        await app.generateDocs(project, outputDir)
-        built = true
-      }
-      next()
-    })
-    .use(express.static(outputDir))
-}

packages/docs/src/main.tsx

@@ -6,7 +6,6 @@ import httpTerminator from "http-terminator"
 import pino from "pino"
 import pinoHttp from "pino-http"
 import * as React from "react"
-import { serveApiDocs } from "./api/serve-api-docs"
 import { AssetBuilder } from "./asset-builder/asset-builder.js"
 import { fromProjectRoot } from "./constants"
 import { GuidePage } from "./guides/guide-page"
@@ -25,7 +24,7 @@ const router = PromiseRouter()
   .use(pinoHttp({ logger }))
   .use(compression())
   .use(builder.middleware())
-  .use("/api", serveApiDocs())
+  .use("/api", express.static("api"))
 
   .get("/guides/*", async (req: Request<{ 0: string }>, res) => {
     res

packages/docs/typedoc.json

@@ -1,6 +1,6 @@
 {
   "entryPoints": ["../reacord/library/main.ts"],
-  "out": ["public/docs/api"],
+  "out": ["api"],
   "tsconfig": "../reacord/tsconfig.json",
   "excludeInternal": true,
   "excludePrivate": true,
@@ -8,5 +8,15 @@
   "categorizeByGroup": false,
   "preserveWatchOutput": true,
   "githubPages": false,
-  "readme": "none"
+  "readme": "none",
+  "categoryOrder": [
+    "Core",
+    "Embed",
+    "Button",
+    "Link",
+    "Select",
+    "Action Row",
+    "Component Event",
+    "*"
+  ]
 }