Vite Plugins

chowbea-axios/vite ships two optional plugins that scan your repo for component files and emit typed barrel exports. They have nothing to do with your OpenAPI client — orthogonal concern, same toolchain.

• surfacesCodegen() — finds *.surface.tsx, emits surface-definitions.gen.ts
• sidepanelsCodegen() — finds *.panel.tsx, emits panel-definitions.gen.ts

Most projects skip these entirely. They exist for a specific UI pattern: defineSurface / definePanel registries where you want a generated index of every surface and panel without maintaining a hand-written manifest that goes stale by Thursday.

Setup

Fastest path — let the scaffolder do the boring parts:

chowbea-axios plugins --setup

This:

1. Creates _registry/ under src/components/surfaces/ and src/components/side-panels/ (or your chosen directories)
2. Writes registry plumbing — defineSurface, definePanel, container/header/title/layout components, useSidepanel
3. Adds both plugins to vite.config.ts

Or opt in during initial setup:

chowbea-axios init --with-vite-plugins

Manual configuration

Prefer wiring it yourself? Respectable.

import { defineConfig } from 'vite';
import { surfacesCodegen, sidepanelsCodegen } from 'chowbea-axios/vite';

export default defineConfig({
  plugins: [
    surfacesCodegen(),
    sidepanelsCodegen(),
  ],
});

Override scan directories:

surfacesCodegen({ directory: 'app/ui/surfaces' });
sidepanelsCodegen({ directory: 'app/ui/panels' });

What gets generated at build time

Each plugin watches its directory. Add, remove, or rename a file — the barrel regenerates on the next Vite cycle:

src/components/surfaces/
├── _registry/
│   ├── index.ts                       # import from here
│   ├── surface-definitions.gen.ts     # generated — do not edit
│   ├── define-surface.ts
│   └── ... (container, header, etc.)
├── edit-user.surface.tsx
└── user/
    └── delete-user.surface.tsx

Import the barrel:

import { Surface } from '@/components/surfaces/_registry';

Surface (or Panel from the side-panels barrel) is a discriminated union of every discovered component. Autocomplete on ids, typed props, no stringly-typed registry keys.

Adding a new surface or panel

Scaffold in the right shape:

chowbea-axios plugins --add surface:edit-user
chowbea-axios plugins --add surface:user/edit-user      # nested under a group
chowbea-axios plugins --add panel:user/staff-profile

Or create the file yourself — the plugin picks it up on the next dev-server tick. No ceremony required.

Listing what's discovered

chowbea-axios plugins

Lists every surface and panel in the configured directories, grouped by folder, with id, variant, and metadata. Useful when someone asks "what surfaces do we even have?" and nobody wants to grep.

When not to use these

No defineSurface / definePanel registry? No plan to add one? Skip this page. These plugins won't make your API types better, your interceptors smarter, or your Monday shorter.

They're for teams that already committed to the surface/panel pattern and want the index file maintained by something with fewer opinions than a human.

Next Steps