Vite Plugins

chowbea-axios/vite ships two optional Vite plugins that auto-discover and barrel-export component files in your project:

• surfacesCodegen() — discovers *.surface.tsx and emits a typed surface-definitions.gen.ts barrel
• sidepanelsCodegen() — discovers *.panel.tsx and emits a typed panel-definitions.gen.ts barrel

They're opt-in. Most projects won't need them — they exist to support a specific component pattern (defineSurface / definePanel registries) where you want a generated index of every surface/panel without writing it by hand.

Setup

The fastest way is the scaffolder:

chowbea-axios plugins --setup

This:

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

You can also opt into the same flow during initial setup:

chowbea-axios init --with-vite-plugins

Manual configuration

If you'd rather wire it up yourself:

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

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

Both plugins accept an options object for overriding their directory:

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

What gets generated at build time

Each plugin watches its directory and, whenever a matching file is added, removed, or renamed, regenerates a barrel inside _registry/:

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

You import the barrel via _registry:

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

Surface (or Panel from the side-panels barrel) is a discriminated union of every surface/panel found at build time, so you get autocomplete on ids and fully-typed props.

Adding a new surface or panel

The plugins command scaffolds new files 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

You can also just create the file yourself — the plugin will pick it up on the next Vite cycle.

Listing what's discovered

chowbea-axios plugins

Lists every surface and panel found in the configured directories, grouped by folder, with each one's id, variant, and metadata.

When not to use these

These plugins exist for a fairly specific UI pattern. If you don't have a defineSurface/definePanel registry — or any plan to add one — you can skip this section entirely. The plugins don't touch the OpenAPI client; they're orthogonal.

Next Steps