Vite Plugin Demo

This example demonstrates the @ic-reactor/vite-plugin in action. It shows how the plugin transforms your .did files into fully typed React hooks automatically, with zero manual configuration.

Features Demonstrated

Zero Config: No manual declaration generation needed.
Hot Module Replacement: Modify your .did file and watch the hooks update instantly.
Automatic Client Manager: The plugin ensures your ClientManager is correctly configured for the canister.
Local Dev Proxy: Seamless communication with local replica via Vite’s proxy.

Links

Open in StackBlitzEdit and run in your browser

View on GitHubBrowse the source code

Live Preview

Implementation

The core of this example is the vite.config.ts setup:

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import { icReactor } from "@ic-reactor/vite-plugin"

export default defineConfig({
  plugins: [
    react(),
    icReactor({
      outDir: "./frontend/lib/canisters",
      canisters: [
        {
          name: "backend",
          didFile: "./frontend/declarations/backend.did",
          clientManagerPath: "../../clients",
        },
      ],
    }),
  ],
})

outDir defaults to src/declarations and clientManagerPath to ../../clients; this example overrides outDir so the generated code sits next to the rest of the frontend. For each canister the plugin writes <outDir>/backend/index.generated.ts plus a stable <outDir>/backend/index.ts wrapper. The generated hooks are named after the canister, so you import them as:

import { useBackendQuery, useBackendMutation } from "./lib/canisters/backend"

function App() {
  const { data: greeting, isPending: greetingPending } = useBackendQuery({
    functionName: "greet",
    args: ["Vite Plugin"],
  })

  const {
    data: count,
    isPending: countPending,
    refetch: refetchCount,
  } = useBackendQuery({
    functionName: "getCount",
  })

  const { mutate: increment, isPending: incrementing } = useBackendMutation({
    functionName: "increment",
    onSuccess: () => refetchCount(),
  })

  return (
    <div>
      <p>{greetingPending ? "Loading..." : greeting}</p>
      <p>Current Count: {countPending ? "..." : count?.toString()}</p>
      <button onClick={() => increment([])} disabled={incrementing}>
        Increment
      </button>
    </div>
  )
}