Codegen in Action

This example provides a side-by-side comparison of how @ic-reactor/codegen is used by both the CLI and the Vite plugin to generate consistent, type-safe hooks.

Features Demonstrated

• Shared Core: Understand how both tools use the same underlying codegen logic.
• Consistent Output: Verify that hooks generated via CLI match those from the Vite plugin.
• Project Structure: Best practices for organizing generated declarations.
• Generated Factories: factories: true generates a query or mutation object per method, next to the bound hooks.

Links

Open in StackBlitzEdit and run in your browser

View on GitHubBrowse the source code

Live Preview

Implementation

The example is a single Vite app with one Candid file, backend/backend.did, generated twice. The Vite plugin writes src/canisters-vite/backend on every vite run, and pnpm codegen:cli writes src/canisters-cli/backend from ic-reactor.json. The two directories sit side by side so you can diff them. Both come out of the same @ic-reactor/codegen pipeline, and the app imports the Vite plugin’s copy.

Both configs set factories: true, so each directory also holds index.factories.generated.ts. The .did has one query method, get, and two update methods, inc and add, which generate getQuery, incMutation and addMutation. Reading the counter and incrementing it through them looks like this; the mutation names the query it changes, so the count refetches:

import { getQuery, incMutation } from "./canisters-vite/backend"

function Counter() {
  const { data: counter } = getQuery.useQuery()
  const { mutate: inc } = incMutation.useMutation({
    invalidateQueries: [getQuery],
  })

  return <button onClick={() => inc([])}>Count: {counter}</button>
}

See Query and Mutation Factories for what each kind of method generates.

CLI vs Vite Plugin

Feature	Vite Plugin	CLI
Automation	Fully automatic	Manual/Scripted
HMR	Built-in	Requires rebuild
Integration	Vite projects	Any frontend / Node.js
Configuration	vite.config.ts	ic-reactor.json