Separate react package (#83)

* Moved React files out of compiler folder

* Got compiler building

* Shared now lints itself

* Removed redundant actions tasks

* Unified package commands

* Cleaned up scripts

* Don't double install

* Explicit build order of packages

* Got react compiling

* Fixed formatting

* Cleaned up compiler

* Got examples working

* Fixed more scripts

* Build script fixes

* CI fix

* Another fix

* Import fixes

* Small fix

* package fixes

* Implemented much easier to extend mechanism

* Bug fixes

* Updated examples

* Build fixes

* README updates

* Explicitly list swc as a dep

Author: nebrius

.github/workflows/examples.yaml

@@ -1,4 +1,4 @@
-name: Example Builds
+name: Examples
 
 on:
   push:
@@ -9,7 +9,7 @@ on:
 
 jobs:
   build-and-test:
-    name: Example Build and Test
+    name: Example Build Verification
     runs-on: ubuntu-latest
 
     steps:
@@ -22,11 +22,10 @@ jobs:
         with:
           node-version: "24"
       - name: Install dependencies
-        run: npm ci && npm install --workspaces
-      - name: Build Docs MD
-        working-directory: ./packages/docs-md
-        run: npm run build
-      # We have to run npm install again to link the newly built docs-md binary
+        run: npm ci
+      - name: Build Packages
+        run: make build-packages
+      # We have to run npm install again to link the newly built compiler binary
       - name: Link workspace binaries
         run: npm install --workspaces
       - name: Verify example builds

.github/workflows/docs-md.yaml renamed to .github/workflows/packages.yaml

@@ -1,4 +1,4 @@
-name: Docs MD
+name: Packages
 
 on:
   push:
@@ -9,7 +9,7 @@ on:
 
 jobs:
   build-and-test:
-    name: Docs MD Build and Test
+    name: Packages Build and Lint
     runs-on: ubuntu-latest
 
     steps:
@@ -23,15 +23,11 @@ jobs:
           node-version: "24"
       - name: Install dependencies
         run: npm ci
-      - name: Lint
-        working-directory: ./packages/docs-md
-        run: npm run lint
+      - name: Build packages
+        run: make build-packages
       - name: Type check
-        working-directory: ./packages/docs-md
-        run: npm run type-check
-      - name: Test
-        working-directory: ./packages/docs-md
-        run: npm run test
-      - name: Build
-        working-directory: ./packages/docs-md
-        run: npm run build
+        run: make type-check-packages
+      - name: Lint
+        run: make lint-packages
+      - name: Check formatting
+        run: make check-formatting-packages

.vscode/launch.json

@@ -11,7 +11,7 @@
       "skipFiles": [
         "<node_internals>/**"
       ],
-      "program": "${workspaceFolder}/packages/docs-md/src/compiler/cli/cli.ts",
+      "program": "${workspaceFolder}/packages/compiler/src/cli/cli.ts",
       "runtimeArgs": ["--experimental-strip-types"],
       "args": ["--verbose"],
       "cwd": "${workspaceFolder}/examples/docusaurus/mistral"
@@ -23,7 +23,7 @@
       "skipFiles": [
         "<node_internals>/**"
       ],
-      "program": "${workspaceFolder}/packages/docs-md/src/compiler/cli/cli.ts",
+      "program": "${workspaceFolder}/packages/compiler/src/cli/cli.ts",
       "runtimeArgs": ["--experimental-strip-types"],
       "args": ["--verbose"],
       "cwd": "${workspaceFolder}/examples/docusaurus/pokeapi"
@@ -35,7 +35,7 @@
       "skipFiles": [
         "<node_internals>/**"
       ],
-      "program": "${workspaceFolder}/packages/docs-md/src/compiler/cli/cli.ts",
+      "program": "${workspaceFolder}/packages/compiler/src/cli/cli.ts",
       "runtimeArgs": ["--experimental-strip-types"],
       "args": ["--verbose"],
       "cwd": "${workspaceFolder}/examples/nextra/mistral"
@@ -47,46 +47,34 @@
       "skipFiles": [
         "<node_internals>/**"
       ],
-      "program": "${workspaceFolder}/packages/docs-md/src/compiler/cli/cli.ts",
+      "program": "${workspaceFolder}/packages/compiler/src/cli/cli.ts",
       "runtimeArgs": ["--experimental-strip-types"],
       "args": ["--verbose"],
       "cwd": "${workspaceFolder}/examples/nextra/pokeapi"
     },
     {
       "type": "node",
       "request": "launch",
-      "name": "Mistral (External)",
+      "name": "Mistral (Custom)",
       "skipFiles": [
         "<node_internals>/**"
       ],
-      "program": "${workspaceFolder}/packages/docs-md/src/compiler/cli/cli.ts",
+      "program": "${workspaceFolder}/packages/compiler/src/cli/cli.ts",
       "runtimeArgs": ["--experimental-strip-types"],
       "args": ["--verbose"],
-      "cwd": "${workspaceFolder}/../mistral-docs"
+      "cwd": "${workspaceFolder}/examples/custom/mistral"
     },
     {
       "type": "node",
       "request": "launch",
-      "name": "Redis",
+      "name": "PokeAPI (Custom)",
       "skipFiles": [
         "<node_internals>/**"
       ],
-      "program": "${workspaceFolder}/packages/docs-md/src/compiler/cli/cli.ts",
+      "program": "${workspaceFolder}/packages/compiler/src/cli/cli.ts",
       "runtimeArgs": ["--experimental-strip-types"],
       "args": ["--verbose"],
-      "cwd": "${workspaceFolder}/../redis-demo-docs"
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Castle",
-      "skipFiles": [
-        "<node_internals>/**"
-      ],
-      "program": "${workspaceFolder}/packages/docs-md/src/compiler/cli/cli.ts",
-      "runtimeArgs": ["--experimental-strip-types"],
-      "args": ["--verbose"],
-      "cwd": "${workspaceFolder}/../castle-docs-demo"
+      "cwd": "${workspaceFolder}/examples/custom/pokeapi"
     }
   ]
 }

Makefile

@@ -1,43 +1,55 @@
-type-check:
-	npm run type-check --workspaces
+EXAMPLES_WORKSPACES = --workspace examples/docusaurus --workspace examples/custom --workspace examples/nextra
 
-lint:
-	npm run lint --workspaces
+install:
+	npm install
 
-test: type-check lint
-	npm test --workspaces
+type-check: type-check-packages type-check-examples
 
-format:
-	npm run format --workspaces
+type-check-packages:
+	npm run type-check --workspace packages
 
-install:
-	npm install
-	npm install --workspaces
+type-check-examples:
+	npm run type-check $(EXAMPLES_WORKSPACES)
+
+lint: lint-packages lint-examples
+
+lint-packages:
+	npm run lint --workspace packages
+
+lint-examples:
+	npm run lint $(EXAMPLES_WORKSPACES)
+
+format: format-packages format-examples
+
+format-packages:
+	npm run format --workspace packages
+
+format-examples:
+	npm run format $(EXAMPLES_WORKSPACES)
+
+check-formatting: check-formatting-packages check-formatting-examples
+
+check-formatting-packages:
+	npm run check-formatting --workspace packages
+
+check-formatting-examples:
+	npm run check-formatting $(EXAMPLES_WORKSPACES)
+
+build: build-packages build-examples
+
+build-packages:
+	npm run build --workspace packages/react
+	npm run build --workspace packages/compiler
+
+build-examples:
+	npm run build $(EXAMPLES_WORKSPACES)
 
 build-api-docs:
-	npm run build-api-docs --workspaces -- --clean
+	npm run build-api-docs $(EXAMPLES_WORKSPACES) -- --clean
 
 verify-api-docs: build-api-docs
 	@if ! (git diff --exit-code --quiet examples/ && git diff --cached --exit-code --quiet examples/); then \
 		git status examples/; \
 		echo "Example build out of date. Please run make build-api-docs and commit the results"; \
 		exit 1; \
 	fi
-
-build: install
-	npm run build --workspaces
-
-start:
-	npx concurrently \
-	"npm run dev --workspace=server" \
-	"npm run dev --workspace=client/web" \
-	"npm run dev --workspace=demos" \
-	"npm run dev --workspace=asset-proxy"
-
-add-demo:
-	npm run add-demo --workspace="@speakeasy-api/codewords-demos"
-
-.PHONY: interactive
-
-interactive:
-	npm run interactive --workspace=server -- --spec=$(spec) --lang=$(lang) --token=$(token) --command=$(command)

eslint.config.mjs

@@ -0,0 +1,43 @@
+import { resolve } from "node:path";
+
+import { getDirname } from "cross-dirname";
+
+// Import workspace-specific configs
+import compilerConfig from "./packages/compiler/eslint.config.mjs";
+import reactConfig from "./packages/react/eslint.config.mjs";
+import sharedConfig from "./packages/shared/eslint.config.mjs";
+
+const rootDir = getDirname();
+const gitignorePath = resolve(rootDir, ".gitignore");
+
+export default [
+  // Global ignores for the entire monorepo
+  {
+    ignores: [
+      "**/node_modules/**",
+      "**/dist/**",
+      "**/build/**",
+      "**/.next/**",
+      "scaffold-templates/**",
+      "examples/**",
+    ],
+  },
+  
+  // Apply compiler config to compiler package
+  ...compilerConfig.map(config => ({
+    ...config,
+    files: config.files ? config.files.map(f => `packages/compiler/${f}`) : ["packages/compiler/**/*"],
+  })),
+  
+  // Apply react config to react package
+  ...reactConfig.map(config => ({
+    ...config,
+    files: config.files ? config.files.map(f => `packages/react/${f}`) : ["packages/react/**/*"],
+  })),
+  
+  // Apply shared config to shared package
+  ...sharedConfig.map(config => ({
+    ...config,
+    files: config.files ? config.files.map(f => `packages/shared/${f}`) : ["packages/shared/**/*"],
+  })),
+];

examples/custom/mistral/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/custom/mistral/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev -p 3005",
     "build-api-docs": "docs-md",
-    "prebuild": "cd ../../../packages/docs-md && npm run build",
+    "prebuild": "cd ../../../ && make build-packages",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -16,13 +16,14 @@
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.4.5",
     "@speakeasy-api/docs-md": "*",
+    "@speakeasy-api/docs-md-react": "*",
     "@types/mdx": "^2.0.13",
     "http-server": "^14.1.1",
-    "next": "15.4.5",
+    "next": "^15.5.3",
     "nextra": "^4.3.0",
     "nextra-theme-docs": "^4.3.0",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "remark-heading-id": "^1.0.1"

examples/custom/mistral/speakeasy.config.mjs

@@ -1,59 +1,41 @@
 import { join, resolve } from "node:path";
 import { writeFileSync } from "node:fs";
 
-import {
-  getSettings,
-  MdxRenderer,
-  MdxSite,
-} from "@speakeasy-api/docs-md/compiler";
+import { getSettings } from "@speakeasy-api/docs-md";
+
+/**
+ * @type {import("@speakeasy-api/docs-md").FrameworkConfig}
+ */
+const framework = {
+  rendererType: "mdx",
+  componentPackageName: "@/components/speakeasy-custom",
+  elementIdSeparator: "_",
 
-export class MistralSite extends MdxSite {
   buildPagePath(slug) {
     const settings = getSettings();
     return resolve(join(settings.output.pageOutDir, `${slug}/page.mdx`));
-  }
+  },
 
-  getRenderer(options) {
-    return new MistralRenderer({ ...options });
-  }
+  buildPagePreamble() {
+    return `import "@/app/speakeasy.css";`;
+  },
 
-  // This method is called after all pages have been rendered. It contains
-  // metadata about the pages that were rendered and can be used to construct a
-  // left navigation sidebar.
-  processPageMetadata(metadata) {
+  postProcess(metadata) {
     // Note: the format for this data is very much a quick and dirty
     // implementation. It's shape will almost certainly change and become easier
     // to work with in the future.
     writeFileSync(
       "./src/components/sidebarMetadata.json",
       JSON.stringify(metadata, null, "  ")
     );
-  }
-}
-
-class MistralRenderer extends MdxRenderer {
-  constructor(args) {
-    super(args);
-    this.insertPackageImport("@/app/speakeasy.css");
-  }
-
-  insertComponentImport(symbol) {
-    this.insertNamedImport("@/components/speakeasy-custom", symbol);
-  }
-
-  getIdSeparator() {
-    return "_";
-  }
-}
+  },
+};
 
 export default {
   spec: "../../specs/mistral.yaml",
   output: {
     pageOutDir: "./src/app/api",
-    framework: "custom",
-    createSite() {
-      return new MistralSite();
-    },
+    framework,
     singlePage: true,
   },
   display: {