@ic-reactor/vite-plugin 0.1.0

package/README.md

@@ -0,0 +1,323 @@
+# @ic-reactor/vite-plugin
+
+<div align="center">
+  <strong>Zero-config Vite plugin for auto-generating IC reactor hooks from Candid files.</strong>
+  <br><br>
+  
+  [![npm version](https://img.shields.io/npm/v/@ic-reactor/vite-plugin.svg)](https://www.npmjs.com/package/@ic-reactor/vite-plugin)
+  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+  [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
+</div>
+
+---
+
+Automatically generate type-safe React hooks for your Internet Computer canisters. This plugin watches your `.did` files and generates ready-to-use hooks with full TypeScript support.
+
+## Features
+
+- ⚡ **Zero Config** — Point to your `.did` file and get hooks instantly
+- 🔄 **Hot Reload** — Automatically regenerates hooks when `.did` files change
+- 📦 **TypeScript Declarations** — Full type safety with auto-generated types
+- 🎯 **Display Types** — Optional `DisplayReactor` support for React-friendly types
+- 🔌 **Flexible** — Works with any `ClientManager` configuration
+
+## Installation
+
+```bash
+# With npm
+npm install -D @ic-reactor/vite-plugin
+
+# With pnpm
+pnpm add -D @ic-reactor/vite-plugin
+
+# Required peer dependencies
+npm install @ic-reactor/react @tanstack/react-query @icp-sdk/core
+npm install -D @icp-sdk/bindgen
+```
+
+## Quick Start
+
+### 1. Configure the Plugin
+
+```typescript
+// vite.config.ts
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import { icReactorPlugin } from "@ic-reactor/vite-plugin"
+
+export default defineConfig({
+  plugins: [
+    react(),
+    icReactorPlugin({
+      canisters: [
+        {
+          name: "backend",
+          didFile: "./backend/backend.did",
+        },
+      ],
+    }),
+  ],
+})
+```
+
+### 2. Create Your ClientManager
+
+The plugin expects you to have a `ClientManager` exported from a file. By default, it looks for `./src/lib/client.ts`:
+
+```typescript
+// src/lib/client.ts
+import { ClientManager } from "@ic-reactor/react"
+import { QueryClient } from "@tanstack/react-query"
+
+export const queryClient = new QueryClient()
+
+export const clientManager = new ClientManager({
+  queryClient,
+  withCanisterEnv: true, // Enable environment-based canister ID resolution
+})
+```
+
+### 3. Use Generated Hooks
+
+The plugin generates hooks in `./src/canisters/<name>/index.ts`:
+
+```tsx
+// Generated at: ./src/canisters/backend/index.ts
+import {
+  backendReactor,
+  useBackendQuery,
+  useBackendMutation,
+  useBackendSuspenseQuery,
+} from "./canisters/backend"
+
+function MyComponent() {
+  // Query data
+  const { data, isPending } = useBackendQuery({
+    functionName: "get_message",
+  })
+
+  // Mutate data
+  const { mutate } = useBackendMutation({
+    functionName: "set_message",
+    onSuccess: () => console.log("Message updated!"),
+  })
+
+  return (
+    <div>
+      <p>{isPending ? "Loading..." : data}</p>
+      <button onClick={() => mutate(["Hello IC!"])}>Update</button>
+    </div>
+  )
+}
+```
+
+## Configuration
+
+### Plugin Options
+
+```typescript
+interface IcReactorPluginOptions {
+  /** List of canisters to generate hooks for */
+  canisters: CanisterConfig[]
+  /** Base output directory (default: "./src/canisters") */
+  outDir?: string
+  /** Path to import ClientManager from (default: "../../lib/client") */
+  clientManagerPath?: string
+}
+
+interface CanisterConfig {
+  /** Name of the canister (used for variable naming) */
+  name: string
+  /** Path to the .did file */
+  didFile: string
+  /** Output directory (default: ./src/canisters/<name>) */
+  outDir?: string
+  /** Use DisplayReactor for React-friendly types (default: true) */
+  useDisplayReactor?: boolean
+  /** Path to import ClientManager from (relative to generated file) */
+  clientManagerPath?: string
+}
+```
+
+### Example: Multiple Canisters
+
+```typescript
+// vite.config.ts
+import { icReactorPlugin } from "@ic-reactor/vite-plugin"
+
+export default defineConfig({
+  plugins: [
+    icReactorPlugin({
+      clientManagerPath: "@/lib/client", // Global default
+      canisters: [
+        {
+          name: "backend",
+          didFile: "./backend/backend.did",
+        },
+        {
+          name: "ledger",
+          didFile: "./ledger/ledger.did",
+          useDisplayReactor: true, // BigInt → string, etc.
+        },
+        {
+          name: "nft",
+          didFile: "./nft/nft.did",
+          outDir: "./src/services/nft", // Custom output
+          clientManagerPath: "@/lib/nft-client", // Custom client
+        },
+      ],
+    }),
+  ],
+})
+```
+
+## Advanced Plugin
+
+For more granular control, use `icReactorAdvancedPlugin` which generates individual hooks per method:
+
+```typescript
+import { icReactorAdvancedPlugin } from "@ic-reactor/vite-plugin"
+
+export default defineConfig({
+  plugins: [
+    icReactorAdvancedPlugin({
+      canisters: [
+        {
+          name: "backend",
+          didFile: "./backend/backend.did",
+        },
+      ],
+    }),
+  ],
+})
+```
+
+This generates method-specific hooks:
+
+```tsx
+import {
+  useGetMessageQuery,
+  useSetMessageMutation,
+  getMessageQuery, // Static query for no-arg methods
+} from "./canisters/backend"
+
+function MyComponent() {
+  // Method-specific hook
+  const { data } = useGetMessageQuery([], { staleTime: 5000 })
+
+  // Static query usage
+  const { data: cached } = getMessageQuery.useQuery()
+
+  const { mutate } = useSetMessageMutation()
+
+  return <div>{data}</div>
+}
+```
+
+## Generated File Structure
+
+```
+src/
+├── canisters/
+│   └── backend/
+│       ├── index.ts          # Reactor + hooks
+│       └── declarations/
+│           └── backend.did.ts  # Type declarations
+├── lib/
+│   └── client.ts             # Your ClientManager (not generated)
+```
+
+## How It Works
+
+1. **Build Start**: The plugin reads your `.did` files and uses `@icp-sdk/bindgen` to generate TypeScript declarations
+2. **Code Generation**: Creates a reactor instance and typed hooks for each canister
+3. **Hot Reload**: Watches for `.did` file changes and regenerates hooks automatically
+
+## DisplayReactor vs Reactor
+
+By default, the plugin uses `DisplayReactor` which transforms Candid types into React-friendly formats:
+
+| Candid Type | Reactor      | DisplayReactor |
+| ----------- | ------------ | -------------- |
+| `nat`       | `bigint`     | `string`       |
+| `int`       | `bigint`     | `string`       |
+| `principal` | `Principal`  | `string`       |
+| `vec nat8`  | `Uint8Array` | `string` (hex) |
+
+To use raw Candid types:
+
+```typescript
+icReactorPlugin({
+  canisters: [
+    {
+      name: "backend",
+      didFile: "./backend/backend.did",
+      useDisplayReactor: false, // Use Reactor instead
+    },
+  ],
+})
+```
+
+## Integration with ICP CLI
+
+If you're using [icp-cli](https://github.com/AstroxNetwork/icp-cli), configure your `vite.config.ts` to pass canister IDs via the `ic_env` cookie:
+
+```typescript
+// vite.config.ts
+import { icReactorPlugin } from "@ic-reactor/vite-plugin"
+import fs from "fs"
+import path from "path"
+
+function loadCanisterIds(): Record<string, string> {
+  const idsPath = path.resolve(__dirname, ".icp/cache/mappings/local.ids.json")
+  try {
+    return JSON.parse(fs.readFileSync(idsPath, "utf-8"))
+  } catch {
+    return {}
+  }
+}
+
+const canisterIds = loadCanisterIds()
+
+export default defineConfig({
+  plugins: [
+    icReactorPlugin({
+      canisters: [
+        {
+          name: "backend",
+          didFile: "./backend/backend.did",
+        },
+      ],
+    }),
+  ],
+  server: {
+    headers: {
+      "Set-Cookie": `ic_env=${encodeURIComponent(
+        Object.entries(canisterIds)
+          .map(([name, id]) => `PUBLIC_CANISTER_ID:${name}=${id}`)
+          .join("&")
+      )}; SameSite=Lax;`,
+    },
+  },
+})
+```
+
+## Requirements
+
+- **Vite 5.x, 6.x, or 7.x**
+- **Node.js 18+**
+- **TypeScript 5.0+**
+
+## Related Packages
+
+- [@ic-reactor/react](https://www.npmjs.com/package/@ic-reactor/react) — React hooks for IC
+- [@ic-reactor/core](https://www.npmjs.com/package/@ic-reactor/core) — Core reactor functionality
+- [@icp-sdk/bindgen](https://www.npmjs.com/package/@icp-sdk/bindgen) — Candid binding generator
+
+## Documentation
+
+For comprehensive guides and API reference, visit the [documentation site](https://b3pay.github.io/ic-reactor/v3).
+
+## License
+
+MIT © [Behrad Deylami](https://github.com/b3hr4d)

package/dist/index.cjs

@@ -0,0 +1,422 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  icReactorAdvancedPlugin: () => icReactorAdvancedPlugin,
+  icReactorPlugin: () => icReactorPlugin
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/simple.ts
+var import_core2 = require("@icp-sdk/bindgen/core");
+var import_fs2 = __toESM(require("fs"), 1);
+var import_path2 = __toESM(require("path"), 1);
+
+// src/advanced.ts
+var import_fs = __toESM(require("fs"), 1);
+var import_path = __toESM(require("path"), 1);
+var import_core = require("@icp-sdk/bindgen/core");
+function toPascalCase(str) {
+  return str.split(/[-_]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+function toCamelCase(str) {
+  const pascal = toPascalCase(str);
+  return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+}
+function extractMethods(didContent) {
+  const methodRegex = /([a-zA-Z0-9_]+)\s*:\s*(?:func\s*)?\(([\s\S]*?)\)\s*->\s*\(([\s\S]*?)\)\s*(query|composite_query)?/g;
+  const methods = [];
+  let match;
+  while ((match = methodRegex.exec(didContent)) !== null) {
+    const name = match[1];
+    const args = match[2].trim();
+    const isQuery = !!match[4];
+    methods.push({
+      name,
+      type: isQuery ? "query" : "mutation",
+      hasArgs: args.length > 0
+    });
+  }
+  return methods;
+}
+function generateAdvancedReactorFile(canisterName, useDisplayReactor, clientManagerPath, didContent) {
+  const pascalName = toPascalCase(canisterName);
+  const camelName = toCamelCase(canisterName);
+  const reactorType = useDisplayReactor ? "DisplayReactor" : "Reactor";
+  const methods = extractMethods(didContent);
+  const hooks = methods.map(({ name, type, hasArgs }) => {
+    const pascalMethod = toPascalCase(name);
+    const camelMethod = toCamelCase(name);
+    if (type === "query") {
+      const hook = `
+export const use${pascalMethod}Query = (
+  args: Parameters<${pascalName}Service["${name}"]>,
+  options?: any
+) => 
+  useActorQuery({
+    functionName: "${name}",
+    args,
+    ...options,
+  })
+`;
+      const staticQuery = !hasArgs ? `
+export const ${camelMethod}Query = createQuery(${camelName}Reactor, {
+  functionName: "${name}",
+})
+` : "";
+      return hook + staticQuery;
+    } else {
+      const hook = `
+export const use${pascalMethod}Mutation = (
+  options?: any
+) =>
+  useActorMutation({
+    functionName: "${name}",
+    ...options,
+  })
+`;
+      const staticMutation = !hasArgs ? `
+export const ${camelMethod}Mutation = createMutation(${camelName}Reactor, {
+  functionName: "${name}",
+})
+` : "";
+      return hook + staticMutation;
+    }
+  });
+  return `/**
+ * AUTO-GENERATED BY @ic-reactor/vite-plugin
+ * DO NOT EDIT MANUALLY
+ *
+ * Canister: ${canisterName}
+ * Generated: ${(/* @__PURE__ */ new Date()).toISOString()}
+ *
+ * This file provides type-safe React hooks for interacting with the
+ * ${canisterName} canister using ic-reactor.
+ */
+
+import {
+  ${reactorType},
+  createActorHooks,
+  createAuthHooks,
+  createQuery,
+  createMutation,
+} from "@ic-reactor/react"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// USER-PROVIDED CLIENT MANAGER
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+import { clientManager } from "${clientManagerPath}"
+
+// Import generated declarations from @icp-sdk/bindgen
+import {
+  idlFactory,
+  type _SERVICE,
+} from "./declarations/${canisterName}.did"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// REACTOR INSTANCE
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+type ${pascalName}Service = _SERVICE
+
+/**
+ * ${pascalName} Reactor with ${useDisplayReactor ? "Display" : "Candid"} type transformations.
+ * ${useDisplayReactor ? "Automatically converts bigint \u2192 string, Principal \u2192 string, etc." : "Uses raw Candid types."}
+ */
+export const ${camelName}Reactor = new ${reactorType}<${pascalName}Service>({
+  clientManager,
+  idlFactory,
+  name: "${canisterName}",
+})
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// ACTOR & AUTH HOOKS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+export const {
+  useActorQuery,
+  useActorMutation,
+  useActorSuspenseQuery,
+  useActorInfiniteQuery,
+  useActorSuspenseInfiniteQuery,
+  useActorMethod,
+} = createActorHooks(${camelName}Reactor)
+
+export const use${pascalName}Query = useActorQuery
+export const use${pascalName}Mutation = useActorMutation
+export const use${pascalName}SuspenseQuery = useActorSuspenseQuery
+export const use${pascalName}InfiniteQuery = useActorInfiniteQuery
+export const use${pascalName}SuspenseInfiniteQuery = useActorSuspenseInfiniteQuery
+export const use${pascalName}Method = useActorMethod
+
+export const { useAuth, useAgentState, useUserPrincipal } = createAuthHooks(
+  clientManager
+)
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// METHOD HOOKS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+${hooks.join("")}
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// RE-EXPORTS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+export { idlFactory }
+export type { ${pascalName}Service }
+`;
+}
+function icReactorAdvancedPlugin(options) {
+  const baseOutDir = options.outDir ?? "./src/canisters";
+  return {
+    name: "ic-reactor-advanced-plugin",
+    async buildStart() {
+      for (const canister of options.canisters) {
+        const outDir = canister.outDir ?? import_path.default.join(baseOutDir, canister.name);
+        if (!import_fs.default.existsSync(outDir)) {
+          import_fs.default.mkdirSync(outDir, { recursive: true });
+        }
+        console.log(
+          `[ic-reactor] Generating advanced hooks for ${canister.name} from ${canister.didFile}`
+        );
+        try {
+          await (0, import_core.generate)({
+            didFile: canister.didFile,
+            outDir,
+            output: {
+              actor: {
+                disabled: true
+              },
+              force: true
+            }
+          });
+          console.log(
+            `[ic-reactor] Declarations generated at ${import_path.default.join(
+              outDir,
+              "declarations"
+            )}`
+          );
+        } catch (error) {
+          console.error(`[ic-reactor] Failed to generate declarations:`, error);
+          continue;
+        }
+        const clientManagerPath = canister.clientManagerPath ?? options.clientManagerPath ?? "../../lib/client";
+        let didContent = "";
+        try {
+          didContent = import_fs.default.readFileSync(canister.didFile, "utf-8");
+        } catch (e) {
+          console.warn(
+            `[ic-reactor] Could not read DID file at ${canister.didFile}, skipping hook generation.`
+          );
+          continue;
+        }
+        const reactorContent = generateAdvancedReactorFile(
+          canister.name,
+          canister.useDisplayReactor ?? true,
+          clientManagerPath,
+          didContent
+        );
+        const reactorPath = import_path.default.join(outDir, "index.ts");
+        import_fs.default.writeFileSync(reactorPath, reactorContent);
+        console.log(
+          `[ic-reactor] Advanced reactor hooks generated at ${reactorPath}`
+        );
+      }
+    },
+    handleHotUpdate({ file, server }) {
+      if (file.endsWith(".did")) {
+        const canister = options.canisters.find(
+          (c) => import_path.default.resolve(c.didFile) === file
+        );
+        if (canister) {
+          console.log(
+            `[ic-reactor] Detected change in ${file}, regenerating...`
+          );
+          server.restart();
+        }
+      }
+    }
+  };
+}
+
+// src/simple.ts
+function toPascalCase2(str) {
+  return str.split(/[-_]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+function toCamelCase2(str) {
+  const pascal = toPascalCase2(str);
+  return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+}
+function generateReactorFile(canisterName, useDisplayReactor, clientManagerPath) {
+  const pascalName = toPascalCase2(canisterName);
+  const camelName = toCamelCase2(canisterName);
+  const reactorType = useDisplayReactor ? "DisplayReactor" : "Reactor";
+  return `/**
+ * AUTO-GENERATED BY @ic-reactor/vite-plugin
+ *
+ * Canister: ${canisterName}
+ * Generated: ${(/* @__PURE__ */ new Date()).toISOString()}
+ *
+ * This file provides type-safe React hooks for interacting with the
+ * ${canisterName} canister using ic-reactor.
+ */
+
+import {
+  ${reactorType},
+  createActorHooks,
+} from "@ic-reactor/react"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// USER-PROVIDED CLIENT MANAGER
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// The clientManager is imported from the user's own configuration file.
+// This allows full customization of agent options, network settings, etc.
+import { clientManager } from "${clientManagerPath}"
+
+// Import generated declarations from @icp-sdk/bindgen
+import {
+  idlFactory,
+  type _SERVICE,
+} from "./declarations/${canisterName}.did"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// REACTOR INSTANCE
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+/**
+ * ${pascalName} Reactor with ${useDisplayReactor ? "Display" : "Candid"} type transformations.
+ * ${useDisplayReactor ? "Automatically converts bigint \u2192 string, Principal \u2192 string, etc." : "Uses raw Candid types."}
+ */
+export const ${camelName}Reactor = new ${reactorType}<_SERVICE>({
+  clientManager,
+  idlFactory,
+  name: "${canisterName}",
+})
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// HOOKS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+/**
+ * React hooks for the ${canisterName} canister.
+ */
+const {
+  useActorQuery: use${pascalName}Query,
+  useActorSuspenseQuery: use${pascalName}SuspenseQuery,
+  useActorInfiniteQuery: use${pascalName}InfiniteQuery,
+  useActorSuspenseInfiniteQuery: use${pascalName}SuspenseInfiniteQuery,
+  useActorMutation: use${pascalName}Mutation,
+  useActorMethod: use${pascalName}Method,
+} = createActorHooks(${camelName}Reactor)
+
+export {
+  use${pascalName}Query,
+  use${pascalName}SuspenseQuery,
+  use${pascalName}InfiniteQuery,
+  use${pascalName}SuspenseInfiniteQuery,
+  use${pascalName}Mutation,
+  use${pascalName}Method,
+}
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// RE-EXPORTS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+export { idlFactory }
+export type { _SERVICE as ${pascalName}Service }
+`;
+}
+function icReactorPlugin(options) {
+  const baseOutDir = options.outDir ?? "./src/canisters";
+  return {
+    name: "ic-reactor-plugin",
+    async buildStart() {
+      for (const canister of options.canisters) {
+        const outDir = canister.outDir ?? import_path2.default.join(baseOutDir, canister.name);
+        const declarationsDir = import_path2.default.join(outDir, "declarations");
+        console.log(
+          `[ic-reactor] Generating hooks for ${canister.name} from ${canister.didFile}`
+        );
+        if (import_fs2.default.existsSync(declarationsDir)) {
+          import_fs2.default.rmSync(declarationsDir, { recursive: true, force: true });
+        }
+        import_fs2.default.mkdirSync(declarationsDir, { recursive: true });
+        try {
+          if (!import_fs2.default.existsSync(outDir)) {
+            import_fs2.default.mkdirSync(outDir, { recursive: true });
+          }
+          await (0, import_core2.generate)({
+            didFile: canister.didFile,
+            outDir,
+            // Pass the parent directory; bindgen appends "declarations"
+            output: {
+              actor: {
+                disabled: true
+              },
+              force: true
+            }
+          });
+          console.log(
+            `[ic-reactor] Declarations generated at ${declarationsDir}`
+          );
+        } catch (error) {
+          console.error(`[ic-reactor] Failed to generate declarations:`, error);
+          continue;
+        }
+        const clientManagerPath = canister.clientManagerPath ?? options.clientManagerPath ?? "../../lib/client";
+        const reactorContent = generateReactorFile(
+          canister.name,
+          canister.useDisplayReactor ?? true,
+          clientManagerPath
+        );
+        const reactorPath = import_path2.default.join(outDir, "index.ts");
+        import_fs2.default.mkdirSync(outDir, { recursive: true });
+        import_fs2.default.writeFileSync(reactorPath, reactorContent);
+        console.log(`[ic-reactor] Reactor hooks generated at ${reactorPath}`);
+      }
+    },
+    handleHotUpdate({ file, server }) {
+      if (file.endsWith(".did")) {
+        const canister = options.canisters.find(
+          (c) => import_path2.default.resolve(c.didFile) === file
+        );
+        if (canister) {
+          console.log(
+            `[ic-reactor] Detected change in ${file}, regenerating...`
+          );
+          server.restart();
+        }
+      }
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  icReactorAdvancedPlugin,
+  icReactorPlugin
+});

package/dist/index.d.cts

@@ -0,0 +1,67 @@
+import { Plugin } from 'vite';
+
+declare function icReactorAdvancedPlugin(options: IcReactorPluginOptions): Plugin;
+
+/**
+ * IC-Reactor Vite Plugin
+ *
+ * A Vite plugin that generates ic-reactor hooks from Candid .did files.
+ *
+ * ⚠️ IMPORTANT: This plugin ONLY generates the reactor and hooks.
+ * The user is responsible for creating and configuring:
+ * - ClientManager
+ * - QueryClient
+ *
+ * The generated file will import the clientManager from a user-specified path.
+ *
+ * Usage:
+ * ```ts
+ * import { icReactorPlugin } from "@ic-reactor/vite-plugin"
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     icReactorPlugin({
+ *       canisters: [
+ *         {
+ *           name: "backend",
+ *           didFile: "../backend/backend.did",
+ *           clientManagerPath: "../lib/client" // User provides their own ClientManager
+ *         }
+ *       ]
+ *     })
+ *   ]
+ * })
+ * ```
+ */
+
+interface CanisterConfig {
+    /** Name of the canister (used for variable naming) */
+    name: string;
+    /** Path to the .did file */
+    didFile: string;
+    /** Output directory (default: ./src/canisters/<name>) */
+    outDir?: string;
+    /** Use DisplayReactor for React-friendly types (default: true) */
+    useDisplayReactor?: boolean;
+    /**
+     * Path to import ClientManager from (relative to generated file).
+     * The file at this path should export: { clientManager: ClientManager }
+     * Default: "../../lib/client"
+     */
+    clientManagerPath?: string;
+}
+interface IcReactorPluginOptions {
+    /** List of canisters to generate hooks for */
+    canisters: CanisterConfig[];
+    /** Base output directory (default: ./src/canisters) */
+    outDir?: string;
+    /**
+     * Path to import ClientManager from (relative to generated file).
+     * The file at this path should export: { clientManager: ClientManager }
+     * Default: "../../lib/client"
+     */
+    clientManagerPath?: string;
+}
+declare function icReactorPlugin(options: IcReactorPluginOptions): Plugin;
+
+export { type CanisterConfig, type IcReactorPluginOptions, icReactorAdvancedPlugin, icReactorPlugin };

package/dist/index.d.ts

@@ -0,0 +1,67 @@
+import { Plugin } from 'vite';
+
+declare function icReactorAdvancedPlugin(options: IcReactorPluginOptions): Plugin;
+
+/**
+ * IC-Reactor Vite Plugin
+ *
+ * A Vite plugin that generates ic-reactor hooks from Candid .did files.
+ *
+ * ⚠️ IMPORTANT: This plugin ONLY generates the reactor and hooks.
+ * The user is responsible for creating and configuring:
+ * - ClientManager
+ * - QueryClient
+ *
+ * The generated file will import the clientManager from a user-specified path.
+ *
+ * Usage:
+ * ```ts
+ * import { icReactorPlugin } from "@ic-reactor/vite-plugin"
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     icReactorPlugin({
+ *       canisters: [
+ *         {
+ *           name: "backend",
+ *           didFile: "../backend/backend.did",
+ *           clientManagerPath: "../lib/client" // User provides their own ClientManager
+ *         }
+ *       ]
+ *     })
+ *   ]
+ * })
+ * ```
+ */
+
+interface CanisterConfig {
+    /** Name of the canister (used for variable naming) */
+    name: string;
+    /** Path to the .did file */
+    didFile: string;
+    /** Output directory (default: ./src/canisters/<name>) */
+    outDir?: string;
+    /** Use DisplayReactor for React-friendly types (default: true) */
+    useDisplayReactor?: boolean;
+    /**
+     * Path to import ClientManager from (relative to generated file).
+     * The file at this path should export: { clientManager: ClientManager }
+     * Default: "../../lib/client"
+     */
+    clientManagerPath?: string;
+}
+interface IcReactorPluginOptions {
+    /** List of canisters to generate hooks for */
+    canisters: CanisterConfig[];
+    /** Base output directory (default: ./src/canisters) */
+    outDir?: string;
+    /**
+     * Path to import ClientManager from (relative to generated file).
+     * The file at this path should export: { clientManager: ClientManager }
+     * Default: "../../lib/client"
+     */
+    clientManagerPath?: string;
+}
+declare function icReactorPlugin(options: IcReactorPluginOptions): Plugin;
+
+export { type CanisterConfig, type IcReactorPluginOptions, icReactorAdvancedPlugin, icReactorPlugin };

package/dist/index.js

@@ -0,0 +1,384 @@
+// src/simple.ts
+import { generate as generate2 } from "@icp-sdk/bindgen/core";
+import fs2 from "fs";
+import path2 from "path";
+
+// src/advanced.ts
+import fs from "fs";
+import path from "path";
+import { generate } from "@icp-sdk/bindgen/core";
+function toPascalCase(str) {
+  return str.split(/[-_]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+function toCamelCase(str) {
+  const pascal = toPascalCase(str);
+  return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+}
+function extractMethods(didContent) {
+  const methodRegex = /([a-zA-Z0-9_]+)\s*:\s*(?:func\s*)?\(([\s\S]*?)\)\s*->\s*\(([\s\S]*?)\)\s*(query|composite_query)?/g;
+  const methods = [];
+  let match;
+  while ((match = methodRegex.exec(didContent)) !== null) {
+    const name = match[1];
+    const args = match[2].trim();
+    const isQuery = !!match[4];
+    methods.push({
+      name,
+      type: isQuery ? "query" : "mutation",
+      hasArgs: args.length > 0
+    });
+  }
+  return methods;
+}
+function generateAdvancedReactorFile(canisterName, useDisplayReactor, clientManagerPath, didContent) {
+  const pascalName = toPascalCase(canisterName);
+  const camelName = toCamelCase(canisterName);
+  const reactorType = useDisplayReactor ? "DisplayReactor" : "Reactor";
+  const methods = extractMethods(didContent);
+  const hooks = methods.map(({ name, type, hasArgs }) => {
+    const pascalMethod = toPascalCase(name);
+    const camelMethod = toCamelCase(name);
+    if (type === "query") {
+      const hook = `
+export const use${pascalMethod}Query = (
+  args: Parameters<${pascalName}Service["${name}"]>,
+  options?: any
+) => 
+  useActorQuery({
+    functionName: "${name}",
+    args,
+    ...options,
+  })
+`;
+      const staticQuery = !hasArgs ? `
+export const ${camelMethod}Query = createQuery(${camelName}Reactor, {
+  functionName: "${name}",
+})
+` : "";
+      return hook + staticQuery;
+    } else {
+      const hook = `
+export const use${pascalMethod}Mutation = (
+  options?: any
+) =>
+  useActorMutation({
+    functionName: "${name}",
+    ...options,
+  })
+`;
+      const staticMutation = !hasArgs ? `
+export const ${camelMethod}Mutation = createMutation(${camelName}Reactor, {
+  functionName: "${name}",
+})
+` : "";
+      return hook + staticMutation;
+    }
+  });
+  return `/**
+ * AUTO-GENERATED BY @ic-reactor/vite-plugin
+ * DO NOT EDIT MANUALLY
+ *
+ * Canister: ${canisterName}
+ * Generated: ${(/* @__PURE__ */ new Date()).toISOString()}
+ *
+ * This file provides type-safe React hooks for interacting with the
+ * ${canisterName} canister using ic-reactor.
+ */
+
+import {
+  ${reactorType},
+  createActorHooks,
+  createAuthHooks,
+  createQuery,
+  createMutation,
+} from "@ic-reactor/react"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// USER-PROVIDED CLIENT MANAGER
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+import { clientManager } from "${clientManagerPath}"
+
+// Import generated declarations from @icp-sdk/bindgen
+import {
+  idlFactory,
+  type _SERVICE,
+} from "./declarations/${canisterName}.did"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// REACTOR INSTANCE
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+type ${pascalName}Service = _SERVICE
+
+/**
+ * ${pascalName} Reactor with ${useDisplayReactor ? "Display" : "Candid"} type transformations.
+ * ${useDisplayReactor ? "Automatically converts bigint \u2192 string, Principal \u2192 string, etc." : "Uses raw Candid types."}
+ */
+export const ${camelName}Reactor = new ${reactorType}<${pascalName}Service>({
+  clientManager,
+  idlFactory,
+  name: "${canisterName}",
+})
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// ACTOR & AUTH HOOKS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+export const {
+  useActorQuery,
+  useActorMutation,
+  useActorSuspenseQuery,
+  useActorInfiniteQuery,
+  useActorSuspenseInfiniteQuery,
+  useActorMethod,
+} = createActorHooks(${camelName}Reactor)
+
+export const use${pascalName}Query = useActorQuery
+export const use${pascalName}Mutation = useActorMutation
+export const use${pascalName}SuspenseQuery = useActorSuspenseQuery
+export const use${pascalName}InfiniteQuery = useActorInfiniteQuery
+export const use${pascalName}SuspenseInfiniteQuery = useActorSuspenseInfiniteQuery
+export const use${pascalName}Method = useActorMethod
+
+export const { useAuth, useAgentState, useUserPrincipal } = createAuthHooks(
+  clientManager
+)
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// METHOD HOOKS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+${hooks.join("")}
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// RE-EXPORTS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+export { idlFactory }
+export type { ${pascalName}Service }
+`;
+}
+function icReactorAdvancedPlugin(options) {
+  const baseOutDir = options.outDir ?? "./src/canisters";
+  return {
+    name: "ic-reactor-advanced-plugin",
+    async buildStart() {
+      for (const canister of options.canisters) {
+        const outDir = canister.outDir ?? path.join(baseOutDir, canister.name);
+        if (!fs.existsSync(outDir)) {
+          fs.mkdirSync(outDir, { recursive: true });
+        }
+        console.log(
+          `[ic-reactor] Generating advanced hooks for ${canister.name} from ${canister.didFile}`
+        );
+        try {
+          await generate({
+            didFile: canister.didFile,
+            outDir,
+            output: {
+              actor: {
+                disabled: true
+              },
+              force: true
+            }
+          });
+          console.log(
+            `[ic-reactor] Declarations generated at ${path.join(
+              outDir,
+              "declarations"
+            )}`
+          );
+        } catch (error) {
+          console.error(`[ic-reactor] Failed to generate declarations:`, error);
+          continue;
+        }
+        const clientManagerPath = canister.clientManagerPath ?? options.clientManagerPath ?? "../../lib/client";
+        let didContent = "";
+        try {
+          didContent = fs.readFileSync(canister.didFile, "utf-8");
+        } catch (e) {
+          console.warn(
+            `[ic-reactor] Could not read DID file at ${canister.didFile}, skipping hook generation.`
+          );
+          continue;
+        }
+        const reactorContent = generateAdvancedReactorFile(
+          canister.name,
+          canister.useDisplayReactor ?? true,
+          clientManagerPath,
+          didContent
+        );
+        const reactorPath = path.join(outDir, "index.ts");
+        fs.writeFileSync(reactorPath, reactorContent);
+        console.log(
+          `[ic-reactor] Advanced reactor hooks generated at ${reactorPath}`
+        );
+      }
+    },
+    handleHotUpdate({ file, server }) {
+      if (file.endsWith(".did")) {
+        const canister = options.canisters.find(
+          (c) => path.resolve(c.didFile) === file
+        );
+        if (canister) {
+          console.log(
+            `[ic-reactor] Detected change in ${file}, regenerating...`
+          );
+          server.restart();
+        }
+      }
+    }
+  };
+}
+
+// src/simple.ts
+function toPascalCase2(str) {
+  return str.split(/[-_]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+function toCamelCase2(str) {
+  const pascal = toPascalCase2(str);
+  return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+}
+function generateReactorFile(canisterName, useDisplayReactor, clientManagerPath) {
+  const pascalName = toPascalCase2(canisterName);
+  const camelName = toCamelCase2(canisterName);
+  const reactorType = useDisplayReactor ? "DisplayReactor" : "Reactor";
+  return `/**
+ * AUTO-GENERATED BY @ic-reactor/vite-plugin
+ *
+ * Canister: ${canisterName}
+ * Generated: ${(/* @__PURE__ */ new Date()).toISOString()}
+ *
+ * This file provides type-safe React hooks for interacting with the
+ * ${canisterName} canister using ic-reactor.
+ */
+
+import {
+  ${reactorType},
+  createActorHooks,
+} from "@ic-reactor/react"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// USER-PROVIDED CLIENT MANAGER
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// The clientManager is imported from the user's own configuration file.
+// This allows full customization of agent options, network settings, etc.
+import { clientManager } from "${clientManagerPath}"
+
+// Import generated declarations from @icp-sdk/bindgen
+import {
+  idlFactory,
+  type _SERVICE,
+} from "./declarations/${canisterName}.did"
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// REACTOR INSTANCE
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+/**
+ * ${pascalName} Reactor with ${useDisplayReactor ? "Display" : "Candid"} type transformations.
+ * ${useDisplayReactor ? "Automatically converts bigint \u2192 string, Principal \u2192 string, etc." : "Uses raw Candid types."}
+ */
+export const ${camelName}Reactor = new ${reactorType}<_SERVICE>({
+  clientManager,
+  idlFactory,
+  name: "${canisterName}",
+})
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// HOOKS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+/**
+ * React hooks for the ${canisterName} canister.
+ */
+const {
+  useActorQuery: use${pascalName}Query,
+  useActorSuspenseQuery: use${pascalName}SuspenseQuery,
+  useActorInfiniteQuery: use${pascalName}InfiniteQuery,
+  useActorSuspenseInfiniteQuery: use${pascalName}SuspenseInfiniteQuery,
+  useActorMutation: use${pascalName}Mutation,
+  useActorMethod: use${pascalName}Method,
+} = createActorHooks(${camelName}Reactor)
+
+export {
+  use${pascalName}Query,
+  use${pascalName}SuspenseQuery,
+  use${pascalName}InfiniteQuery,
+  use${pascalName}SuspenseInfiniteQuery,
+  use${pascalName}Mutation,
+  use${pascalName}Method,
+}
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// RE-EXPORTS
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+export { idlFactory }
+export type { _SERVICE as ${pascalName}Service }
+`;
+}
+function icReactorPlugin(options) {
+  const baseOutDir = options.outDir ?? "./src/canisters";
+  return {
+    name: "ic-reactor-plugin",
+    async buildStart() {
+      for (const canister of options.canisters) {
+        const outDir = canister.outDir ?? path2.join(baseOutDir, canister.name);
+        const declarationsDir = path2.join(outDir, "declarations");
+        console.log(
+          `[ic-reactor] Generating hooks for ${canister.name} from ${canister.didFile}`
+        );
+        if (fs2.existsSync(declarationsDir)) {
+          fs2.rmSync(declarationsDir, { recursive: true, force: true });
+        }
+        fs2.mkdirSync(declarationsDir, { recursive: true });
+        try {
+          if (!fs2.existsSync(outDir)) {
+            fs2.mkdirSync(outDir, { recursive: true });
+          }
+          await generate2({
+            didFile: canister.didFile,
+            outDir,
+            // Pass the parent directory; bindgen appends "declarations"
+            output: {
+              actor: {
+                disabled: true
+              },
+              force: true
+            }
+          });
+          console.log(
+            `[ic-reactor] Declarations generated at ${declarationsDir}`
+          );
+        } catch (error) {
+          console.error(`[ic-reactor] Failed to generate declarations:`, error);
+          continue;
+        }
+        const clientManagerPath = canister.clientManagerPath ?? options.clientManagerPath ?? "../../lib/client";
+        const reactorContent = generateReactorFile(
+          canister.name,
+          canister.useDisplayReactor ?? true,
+          clientManagerPath
+        );
+        const reactorPath = path2.join(outDir, "index.ts");
+        fs2.mkdirSync(outDir, { recursive: true });
+        fs2.writeFileSync(reactorPath, reactorContent);
+        console.log(`[ic-reactor] Reactor hooks generated at ${reactorPath}`);
+      }
+    },
+    handleHotUpdate({ file, server }) {
+      if (file.endsWith(".did")) {
+        const canister = options.canisters.find(
+          (c) => path2.resolve(c.didFile) === file
+        );
+        if (canister) {
+          console.log(
+            `[ic-reactor] Detected change in ${file}, regenerating...`
+          );
+          server.restart();
+        }
+      }
+    }
+  };
+}
+export {
+  icReactorAdvancedPlugin,
+  icReactorPlugin
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@ic-reactor/vite-plugin",
+  "version": "0.1.0",
+  "description": "Vite plugin for zero-config IC reactor generation from Candid files",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --tsconfig tsconfig.json",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch --tsconfig tsconfig.json"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "internet-computer",
+    "candid",
+    "ic-reactor",
+    "dfinity",
+    "icp"
+  ],
+  "author": "Behrad Deylami",
+  "license": "MIT",
+  "peerDependencies": {
+    "@icp-sdk/bindgen": "^0.2.0",
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@icp-sdk/bindgen": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "chokidar": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.0",
+    "vite": "^7.3.1"
+  }
+}