chowbea-axios
Commands

plugins

Manage the optional Vite codegen plugins for Surfaces and Side Panels.

The plugins command scaffolds and inspects the optional Vite codegen plugins shipped under chowbea-axios/vitesurfacesCodegen (for *.surface.tsx) and sidepanelsCodegen (for *.panel.tsx). It is opt-in; you only need it if you want chowbea-axios to discover and barrel-export those component files for you.

See the Vite plugins guide for what each plugin generates at build time.

Usage

chowbea-axios plugins [flags]

With no flags, plugins runs in list mode — scanning your project for *.surface.tsx and *.panel.tsx files and printing what it finds, grouped by folder.

Flags

FlagDescription
--setupRun the plugin setup wizard. Scaffolds the _registry/ folder, sample components, and adds the plugins to vite.config.ts.
--listExplicitly list discovered surfaces and panels (the default when no flag is given).
--add <type:name>Scaffold a new surface or panel file. type is surface or panel. Supports a group prefix — e.g. surface:user/edit-user writes to <surfacesDir>/user/edit-user.surface.tsx.
--surfaces-dir <dir>Override the surfaces directory (default src/components/surfaces).
--panels-dir <dir>Override the side panels directory (default src/components/side-panels).
--quiet, -qSuppress non-error output.
--verbose, -vShow detailed output.

Examples

List discovered surfaces and panels

chowbea-axios plugins

Output is grouped by folder, with each surface's id, variant, and closeOnAction setting alongside each panel's context params and route params.

Set up the plugins from scratch

chowbea-axios plugins --setup

The wizard:

  1. Creates src/components/surfaces/_registry/ and src/components/side-panels/_registry/ if they don't already exist
  2. Writes the registry files (defineSurface, definePanel, container/layout components, hooks)
  3. Adds surfacesCodegen() and sidepanelsCodegen() to your vite.config.ts

You can also opt into this during chowbea-axios init with the --with-vite-plugins flag.

Scaffold a new surface

# Top-level surface → src/components/surfaces/edit-user.surface.tsx
chowbea-axios plugins --add surface:edit-user

# Grouped surface → src/components/surfaces/user/edit-user.surface.tsx
chowbea-axios plugins --add surface:user/edit-user

Scaffold a new panel

chowbea-axios plugins --add panel:user/staff-profile

Use custom directories

chowbea-axios plugins --list \
  --surfaces-dir app/ui/surfaces \
  --panels-dir app/ui/panels

What gets generated at build time

When surfacesCodegen() or sidepanelsCodegen() runs as part of Vite, each plugin writes a barrel file (surface-definitions.gen.ts / panel-definitions.gen.ts) inside _registry/. The barrel re-exports every *.surface.tsx / *.panel.tsx it finds and types them via the plugin's Surface / Panel export name. You import from _registry, not from the generated file directly.

The plugins command never edits a file you wrote — it only creates new scaffolds and updates the generated _registry/ artifacts. Customizing defineSurface / definePanel metadata is safe and survives re-scans.

Next Steps

On this page