Skip to main content
The frontend uses several code generation scripts to keep TypeScript code in sync with backend sources. These scripts live in frontend/buildSrc/.

​
Running Code Generation

# Generate all code
pnpm run gen

# Generate specific types
pnpm run gen:mxl     # MXL parser and functions
pnpm run gen:routes  # Type-safe routes

​
Generated Code

​
API Clients (Orval)

API clients are generated from OpenAPI specifications using Orval. 
# Generate API clients
pnpm gen
Output: src/api/ - TanStack Query hooks and types for all backend endpoints. See API Integration for usage details.

​
MXL Parser and Functions

The mxl-gen.ts script generates TypeScript code for MXL formula parsing and autocomplete support. Source Files:
  • Grammar: mxl/grammars/formulas.lark
  • Functions: mxl/functions.yaml
Output:
  • Parser: src/gen/formulas/formulas.parser.ts
  • Functions: src/gen/formulas/mxl-functions.ts
Features:
  • Formula parser for syntax highlighting and validation
  • Structured type definitions for all MXL functions
  • Type-safe function signatures with overloads
  • Helper functions for autocomplete and type checking

​
Type-Safe Routes

The typesafe-routes-gen.ts script generates type-safe route definitions for React Router. 
pnpm run gen:routes
Output: src/gen/routes.ts This ensures route parameters are type-checked and autocompleted.

​
Zod Schemas

The orval-zod-client.ts script generates Zod schemas from OpenAPI specifications for runtime validation. These schemas are used for form validation and API response validation.

​
Build System

All generators use vite-node for execution, which provides:
  • TypeScript support without compilation
  • ES modules support
  • Fast execution

​
Adding New Generators

When adding a new generator:
  1. Create the generator script in buildSrc/
  2. Add a corresponding npm script in package.json
  3. If it should run as part of the main generation, update the gen script
  4. Document it in this file

​
Workflow: Backend API Changes

When backend APIs change:
  1. Backend team updates the OpenAPI schema: 
    just codegen schemas
  2. Frontend regenerates clients: 
    cd frontend && pnpm gen
  3. TypeScript will show any breaking changes in your code
Or use the combined command from the repo root: 
just codegen clients
This runs both steps automatically.

​
Troubleshooting

​
Types Out of Sync

If types seem stale: 
# Remove generated files and regenerate
rm -rf src/api/generated
rm -rf src/gen
pnpm gen

​
Schema Fetch Fails

Ensure the backend is running locally or the schema URL is accessible: 
# Check if schema endpoint is available
curl http://localhost:8000/api/schema/

​
Generator Script Errors

Check that all dependencies are installed: 
pnpm install