@ic-reactor/vite-plugin 0.7.0 → 0.7.1

package/README.md

@@ -38,12 +38,12 @@ pnpm add @ic-reactor/react @tanstack/react-query @icp-sdk/core
 // vite.config.ts
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
-import { icReactor } from "@ic-reactor/vite-plugin"
+import { icReactorPlugin } from "@ic-reactor/vite-plugin"
 
 export default defineConfig({
   plugins: [
     react(),
-    icReactor({
+    icReactorPlugin({
       canisters: [
         {
           name: "backend",
@@ -87,23 +87,6 @@ function MyComponent() {
 }
 ```
 
-### Reactor Mode (per canister)
-
-By default, generated hooks use `DisplayReactor` (backward compatible). Set `mode` on a canister to choose the generated reactor class (`Reactor`, `DisplayReactor`, `CandidReactor`, `CandidDisplayReactor`, or `MetadataDisplayReactor`).
-
-```ts
-icReactor({
-  canisters: [
-    { name: "backend", didFile: "./backend/backend.did" },
-    {
-      name: "workflow_engine",
-      mode: "Reactor",
-      didFile: "./workflow/workflow_engine.did",
-    },
-  ],
-})
-```
-
 ## Configuration
 
 ### Plugin Options
@@ -117,14 +100,13 @@ icReactor({
 
 ### Canister Config
 
-| Option              | Type                                                                                                     | Description                                     | Required |
-| :------------------ | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------- | :------- |
-| `name`              | `string`                                                                                                 | Name of the canister (used for variable names). | Yes      |
-| `didFile`           | `string`                                                                                                 | Path to the `.did` file.                        | Yes      |
-| `outDir`            | `string`                                                                                                 | Override output directory for this canister.    | No       |
-| `clientManagerPath` | `string`                                                                                                 | Override client manager path.                   | No       |
-| `mode`              | `"Reactor" \| "DisplayReactor" \| "CandidReactor" \| "CandidDisplayReactor" \| "MetadataDisplayReactor"` | Reactor class for generated hooks.              | No       |
-| `canisterId`        | `string`                                                                                                 | Optional fixed canister ID.                     | No       |
+| Option              | Type     | Description                                     | Required |
+| :------------------ | :------- | :---------------------------------------------- | :------- |
+| `name`              | `string` | Name of the canister (used for variable names). | Yes      |
+| `didFile`           | `string` | Path to the `.did` file.                        | Yes      |
+| `outDir`            | `string` | Override output directory for this canister.    | No       |
+| `clientManagerPath` | `string` | Override client manager path.                   | No       |
+| `canisterId`        | `string` | Optional fixed canister ID.                     | No       |
 
 ## Local Development (Environment Injection)
 

package/dist/index.cjs

@@ -30,7 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  icReactor: () => icReactor
+  icReactorPlugin: () => icReactorPlugin
 });
 module.exports = __toCommonJS(index_exports);
 var import_node_path = __toESM(require("path"), 1);
@@ -78,7 +78,7 @@ function buildIcEnvCookie(canisterIds, rootKey) {
 }
 
 // src/index.ts
-function icReactor(options) {
+function icReactorPlugin(options) {
   const {
     canisters,
     outDir = "src/declarations",
@@ -89,6 +89,10 @@ function icReactor(options) {
     outDir,
     clientManagerPath
   };
+  const projectRoot = process.cwd();
+  const resolveDidPath = (didFile) => import_node_path.default.normalize(
+    import_node_path.default.isAbsolute(didFile) ? didFile : import_node_path.default.resolve(projectRoot, didFile)
+  );
   const plugin = {
     name: "ic-reactor-plugin",
     enforce: "pre",
@@ -129,8 +133,11 @@ function icReactor(options) {
         }
       };
     },
+    configureServer(server) {
+      const didFiles = canisters.map((c) => resolveDidPath(c.didFile));
+      server.watcher.add(didFiles);
+    },
     async buildStart() {
-      const projectRoot = process.cwd();
       console.log(
         `[ic-reactor] Generating hooks for ${canisters.length} canisters...`
       );
@@ -158,14 +165,13 @@ function icReactor(options) {
     handleHotUpdate({ file, server }) {
       if (file.endsWith(".did")) {
         const affectedCanister = canisters.find((c) => {
-          const configPath = import_node_path.default.resolve(process.cwd(), c.didFile);
-          return configPath === file;
+          const configPath = resolveDidPath(c.didFile);
+          return configPath === import_node_path.default.normalize(file);
         });
         if (affectedCanister) {
           console.log(
             `[ic-reactor] .did file changed: ${affectedCanister.name}. Regenerating...`
           );
-          const projectRoot = process.cwd();
           (0, import_codegen.runCanisterPipeline)({
             canisterConfig: affectedCanister,
             projectRoot,
@@ -185,5 +191,5 @@ function icReactor(options) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  icReactor
+  icReactorPlugin
 });

package/dist/index.d.cts

@@ -31,6 +31,6 @@ interface IcReactorPluginOptions {
      */
     injectEnvironment?: boolean;
 }
-declare function icReactor(options: IcReactorPluginOptions): any;
+declare function icReactorPlugin(options: IcReactorPluginOptions): any;
 
-export { type IcReactorPluginOptions, icReactor };
+export { type IcReactorPluginOptions, icReactorPlugin };

package/dist/index.d.ts

@@ -31,6 +31,6 @@ interface IcReactorPluginOptions {
      */
     injectEnvironment?: boolean;
 }
-declare function icReactor(options: IcReactorPluginOptions): any;
+declare function icReactorPlugin(options: IcReactorPluginOptions): any;
 
-export { type IcReactorPluginOptions, icReactor };
+export { type IcReactorPluginOptions, icReactorPlugin };

package/dist/index.js

@@ -46,7 +46,7 @@ function buildIcEnvCookie(canisterIds, rootKey) {
 }
 
 // src/index.ts
-function icReactor(options) {
+function icReactorPlugin(options) {
   const {
     canisters,
     outDir = "src/declarations",
@@ -57,6 +57,10 @@ function icReactor(options) {
     outDir,
     clientManagerPath
   };
+  const projectRoot = process.cwd();
+  const resolveDidPath = (didFile) => path.normalize(
+    path.isAbsolute(didFile) ? didFile : path.resolve(projectRoot, didFile)
+  );
   const plugin = {
     name: "ic-reactor-plugin",
     enforce: "pre",
@@ -97,8 +101,11 @@ function icReactor(options) {
         }
       };
     },
+    configureServer(server) {
+      const didFiles = canisters.map((c) => resolveDidPath(c.didFile));
+      server.watcher.add(didFiles);
+    },
     async buildStart() {
-      const projectRoot = process.cwd();
       console.log(
         `[ic-reactor] Generating hooks for ${canisters.length} canisters...`
       );
@@ -126,14 +133,13 @@ function icReactor(options) {
     handleHotUpdate({ file, server }) {
       if (file.endsWith(".did")) {
         const affectedCanister = canisters.find((c) => {
-          const configPath = path.resolve(process.cwd(), c.didFile);
-          return configPath === file;
+          const configPath = resolveDidPath(c.didFile);
+          return configPath === path.normalize(file);
         });
         if (affectedCanister) {
           console.log(
             `[ic-reactor] .did file changed: ${affectedCanister.name}. Regenerating...`
           );
-          const projectRoot = process.cwd();
           runCanisterPipeline({
             canisterConfig: affectedCanister,
             projectRoot,
@@ -152,5 +158,5 @@ function icReactor(options) {
   return plugin;
 }
 export {
-  icReactor
+  icReactorPlugin
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ic-reactor/vite-plugin",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Vite plugin for zero-config IC reactor generation from Candid files",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -37,7 +37,7 @@
     "url": "https://github.com/B3Pay/ic-reactor/issues"
   },
   "dependencies": {
-    "@ic-reactor/codegen": "0.7.0"
+    "@ic-reactor/codegen": "0.7.1"
   },
   "peerDependencies": {
     "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"

package/src/index.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from "vitest"
-import { icReactor, type IcReactorPluginOptions } from "./index"
+import { icReactorPlugin, type IcReactorPluginOptions } from "./index"
 import path from "path"
 import { execFileSync } from "child_process"
 import { runCanisterPipeline } from "@ic-reactor/codegen"
@@ -24,7 +24,7 @@ vi.mock("fs", () => ({
   },
 }))
 
-describe("icReactor", () => {
+describe("icReactorPlugin", () => {
   const mockOptions: IcReactorPluginOptions = {
     canisters: [
       {
@@ -50,6 +50,9 @@ describe("icReactor", () => {
     ws: {
       send: vi.fn(),
     },
+    watcher: {
+      add: vi.fn(),
+    },
   }
 
   beforeEach(() => {
@@ -60,7 +63,7 @@ describe("icReactor", () => {
   })
 
   it("should return correct plugin structure", () => {
-    const plugin = icReactor(mockOptions)
+    const plugin = icReactorPlugin(mockOptions)
     expect(plugin.name).toBe("ic-reactor-plugin")
     expect(plugin.buildStart).toBeDefined()
     expect(plugin.handleHotUpdate).toBeDefined()
@@ -89,7 +92,7 @@ describe("icReactor", () => {
         }
       )
 
-      const plugin = icReactor(mockOptions)
+      const plugin = icReactorPlugin(mockOptions)
       const config = (plugin as any).config({}, { command: "serve" })
 
       expect(config.server.headers["Set-Cookie"]).toContain("ic_env=")
@@ -107,7 +110,7 @@ describe("icReactor", () => {
         throw new Error("Command not found")
       })
 
-      const plugin = icReactor(mockOptions)
+      const plugin = icReactorPlugin(mockOptions)
       const config = (plugin as any).config({}, { command: "serve" })
 
       expect(config.server.headers).toBeUndefined()
@@ -115,7 +118,7 @@ describe("icReactor", () => {
     })
 
     it("should return empty config for build command", () => {
-      const plugin = icReactor(mockOptions)
+      const plugin = icReactorPlugin(mockOptions)
       const config = (plugin as any).config({}, { command: "build" })
 
       expect(config).toEqual({})
@@ -124,7 +127,7 @@ describe("icReactor", () => {
 
   describe("buildStart", () => {
     it("should generate declarations and reactor file", async () => {
-      const plugin = icReactor(mockOptions)
+      const plugin = icReactorPlugin(mockOptions)
       await (plugin.buildStart as any)()
 
       expect(runCanisterPipeline).toHaveBeenCalledWith({
@@ -147,7 +150,7 @@ describe("icReactor", () => {
         error: "Failed to generate",
       })
 
-      const plugin = icReactor(mockOptions)
+      const plugin = icReactorPlugin(mockOptions)
       await (plugin.buildStart as any)()
 
       expect(consoleErrorSpy).toHaveBeenCalledWith(
@@ -156,37 +159,20 @@ describe("icReactor", () => {
 
       consoleErrorSpy.mockRestore()
     })
+  })
 
-    it("should pass canister mode through to codegen via canister config", async () => {
-      const plugin = icReactor({
-        canisters: [
-          {
-            ...mockOptions.canisters[0],
-            mode: "Reactor",
-          },
-        ],
-        outDir: mockOptions.outDir,
-      })
-
-      await (plugin.buildStart as any)()
+  describe("handleHotUpdate", () => {
+    it("should register configured .did files with the watcher", () => {
+      const plugin = icReactorPlugin(mockOptions)
+      ;(plugin.configureServer as any)(mockServer)
 
-      expect(runCanisterPipeline).toHaveBeenCalledWith({
-        canisterConfig: {
-          ...mockOptions.canisters[0],
-          mode: "Reactor",
-        },
-        projectRoot: expect.any(String),
-        globalConfig: {
-          outDir: "src/declarations",
-          clientManagerPath: "../../clients",
-        },
-      })
+      expect(mockServer.watcher.add).toHaveBeenCalledWith([
+        expect.stringContaining("src/declarations/test.did"),
+      ])
     })
-  })
 
-  describe("handleHotUpdate", () => {
     it("should restart server when .did file changes", async () => {
-      const plugin = icReactor(mockOptions)
+      const plugin = icReactorPlugin(mockOptions)
       const ctx = {
         file: "/absolute/path/to/src/declarations/test.did",
         server: mockServer,
@@ -207,7 +193,7 @@ describe("icReactor", () => {
     })
 
     it("should ignore other files", () => {
-      const plugin = icReactor(mockOptions)
+      const plugin = icReactorPlugin(mockOptions)
       const ctx = {
         file: "/some/other/file.ts",
         server: mockServer,

package/src/index.ts

@@ -39,7 +39,7 @@ export interface IcReactorPluginOptions {
   injectEnvironment?: boolean
 }
 
-export function icReactor(options: IcReactorPluginOptions): any {
+export function icReactorPlugin(options: IcReactorPluginOptions): any {
   const {
     canisters,
     outDir = "src/declarations",
@@ -52,6 +52,11 @@ export function icReactor(options: IcReactorPluginOptions): any {
     outDir,
     clientManagerPath,
   }
+  const projectRoot = process.cwd()
+  const resolveDidPath = (didFile: string) =>
+    path.normalize(
+      path.isAbsolute(didFile) ? didFile : path.resolve(projectRoot, didFile)
+    )
 
   const plugin: Plugin = {
     name: "ic-reactor-plugin",
@@ -105,10 +110,15 @@ export function icReactor(options: IcReactorPluginOptions): any {
       }
     },
 
+    configureServer(server) {
+      // Explicitly watch configured DID files so HMR works even when they are not in the module graph.
+      const didFiles = canisters.map((c) => resolveDidPath(c.didFile))
+      server.watcher.add(didFiles)
+    },
+
     async buildStart() {
       // ── Code Generation ──────────────────────────────────────────────────
 
-      const projectRoot = process.cwd()
       console.log(
         `[ic-reactor] Generating hooks for ${canisters.length} canisters...`
       )
@@ -148,8 +158,8 @@ export function icReactor(options: IcReactorPluginOptions): any {
         const affectedCanister = canisters.find((c) => {
           // Check if changed file matches configured didFile
           // Cast is safe because didFile is required in CanisterConfig
-          const configPath = path.resolve(process.cwd(), c.didFile)
-          return configPath === file
+          const configPath = resolveDidPath(c.didFile)
+          return configPath === path.normalize(file)
         })
 
         if (affectedCanister) {
@@ -158,7 +168,6 @@ export function icReactor(options: IcReactorPluginOptions): any {
           )
 
           // Re-run pipeline for this canister
-          const projectRoot = process.cwd()
           runCanisterPipeline({
             canisterConfig: affectedCanister,
             projectRoot,