@ic-reactor/vite-plugin 0.1.0 → 0.3.0

package/src/index.test.ts

@@ -0,0 +1,273 @@
+import { describe, it, expect, vi, beforeEach } from "vitest"
+import { icReactorPlugin, type IcReactorPluginOptions } from "./index"
+import fs from "fs"
+import path from "path"
+import { execFileSync } from "child_process"
+import {
+  generateDeclarations,
+  generateReactorFile,
+  generateClientFile,
+} from "@ic-reactor/codegen"
+
+// Mock internal dependencies
+vi.mock("@ic-reactor/codegen", () => ({
+  generateDeclarations: vi.fn(),
+  generateReactorFile: vi.fn(),
+  generateClientFile: vi.fn(),
+}))
+
+// Mock child_process
+vi.mock("child_process", () => ({
+  execFileSync: vi.fn(),
+}))
+
+// Mock fs
+vi.mock("fs", () => ({
+  default: {
+    existsSync: vi.fn(() => true),
+    readFileSync: vi.fn(),
+    mkdirSync: vi.fn(),
+    writeFileSync: vi.fn(),
+  },
+}))
+
+describe("icReactorPlugin", () => {
+  const mockOptions: IcReactorPluginOptions = {
+    canisters: [
+      {
+        name: "test_canister",
+        didFile: "src/declarations/test.did",
+        outDir: "src/declarations/test_canister",
+      },
+    ],
+    outDir: "src/declarations",
+  }
+
+  const mockServer: any = {
+    config: {
+      root: "/mock/root",
+      logger: {
+        info: vi.fn(),
+      },
+    },
+    middlewares: {
+      use: vi.fn(),
+    },
+    restart: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.resetAllMocks()
+    ;(generateDeclarations as any).mockResolvedValue({
+      success: true,
+      declarationsDir: "/mock/declarations",
+    })
+    ;(generateReactorFile as any).mockReturnValue("export const reactor = {}")
+    ;(generateClientFile as any).mockReturnValue("export const client = {}")
+  })
+
+  it("should return correct plugin structure", () => {
+    const plugin = icReactorPlugin(mockOptions)
+    expect(plugin.name).toBe("ic-reactor-plugin")
+    expect(plugin.buildStart).toBeDefined()
+    expect(plugin.handleHotUpdate).toBeDefined()
+    expect((plugin as any).config).toBeDefined()
+    // configureServer is no longer used for middleware
+    expect(plugin.configureServer).toBeUndefined()
+  })
+
+  describe("config", () => {
+    it("should set up API proxy and headers when icp-cli is available", () => {
+      ;(execFileSync as any).mockImplementation(
+        (command: string, args: string[], options: any) => {
+          if (
+            command === "icp" &&
+            args.includes("network") &&
+            args.includes("status")
+          ) {
+            return JSON.stringify({ root_key: "mock-root-key", port: 4943 })
+          }
+          if (
+            command === "icp" &&
+            args.includes("canister") &&
+            args.includes("status")
+          ) {
+            return "mock-canister-id"
+          }
+          return ""
+        }
+      )
+
+      const plugin = icReactorPlugin(mockOptions)
+      const config = (plugin as any).config({}, { command: "serve" })
+
+      expect(config.server.headers["Set-Cookie"]).toContain("ic_env=")
+      expect(config.server.headers["Set-Cookie"]).toContain(
+        "PUBLIC_CANISTER_ID%3Atest_canister%3Dmock-canister-id"
+      )
+      expect(config.server.headers["Set-Cookie"]).toContain(
+        "ic_root_key%3Dmock-root-key"
+      )
+      expect(config.server.proxy["/api"].target).toBe("http://127.0.0.1:4943")
+    })
+
+    it("should fallback to default proxy when icp-cli fails", () => {
+      ;(execFileSync as any).mockImplementation(() => {
+        throw new Error("Command not found")
+      })
+
+      const plugin = icReactorPlugin(mockOptions)
+      const config = (plugin as any).config({}, { command: "serve" })
+
+      expect(config.server.headers).toBeUndefined()
+      expect(config.server.proxy["/api"].target).toBe("http://127.0.0.1:4943")
+    })
+
+    it("should return empty config for build command", () => {
+      const plugin = icReactorPlugin(mockOptions)
+      const config = (plugin as any).config({}, { command: "build" })
+
+      expect(config).toEqual({})
+    })
+  })
+
+  describe("buildStart", () => {
+    it("should generate declarations and reactor file", async () => {
+      const plugin = icReactorPlugin(mockOptions)
+      await (plugin.buildStart as any)()
+
+      expect(generateDeclarations).toHaveBeenCalledWith({
+        didFile: "src/declarations/test.did",
+        outDir: "src/declarations/test_canister",
+        canisterName: "test_canister",
+      })
+
+      expect(generateReactorFile).toHaveBeenCalledWith({
+        canisterName: "test_canister",
+        didFile: "src/declarations/test.did",
+        clientManagerPath: undefined,
+      })
+
+      expect(fs.writeFileSync).toHaveBeenCalledWith(
+        path.join("src/declarations/test_canister", "index.ts"),
+        "export const reactor = {}"
+      )
+    })
+
+    it("should download candid if not specified", async () => {
+      const optionsWithMissingDid: IcReactorPluginOptions = {
+        canisters: [
+          {
+            name: "missing_did",
+            outDir: "src/declarations/missing_did",
+          },
+        ],
+        outDir: "src/declarations",
+      }
+
+      ;(execFileSync as any).mockImplementation(
+        (command: string, args: string[]) => {
+          if (command === "icp" && args.includes("metadata")) {
+            return "service : { greet: (text) -> (text) query }"
+          }
+          return ""
+        }
+      )
+
+      const plugin = icReactorPlugin(optionsWithMissingDid)
+      await (plugin.buildStart as any)()
+
+      expect(execFileSync).toHaveBeenCalledWith(
+        "icp",
+        expect.arrayContaining([
+          "canister",
+          "metadata",
+          "missing_did",
+          "candid:service",
+        ]),
+        expect.any(Object)
+      )
+
+      expect(fs.writeFileSync).toHaveBeenCalledWith(
+        path.join(
+          "src/declarations/missing_did/declarations",
+          "missing_did.did"
+        ),
+        "service : { greet: (text) -> (text) query }"
+      )
+
+      expect(generateDeclarations).toHaveBeenCalledWith({
+        didFile: path.join(
+          "src/declarations/missing_did/declarations",
+          "missing_did.did"
+        ),
+        outDir: "src/declarations/missing_did",
+        canisterName: "missing_did",
+      })
+
+      expect(generateReactorFile).toHaveBeenCalledWith({
+        canisterName: "missing_did",
+        didFile: path.join(
+          "src/declarations/missing_did/declarations",
+          "missing_did.did"
+        ),
+        clientManagerPath: undefined,
+      })
+    })
+
+    it("should handle generation errors", async () => {
+      const consoleErrorSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {})
+
+      ;(generateDeclarations as any).mockResolvedValue({
+        success: false,
+        error: "Failed to generate",
+      })
+
+      const plugin = icReactorPlugin(mockOptions)
+      await (plugin.buildStart as any)()
+
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        expect.stringContaining("Failed to generate declarations")
+      )
+      expect(generateReactorFile).not.toHaveBeenCalled()
+
+      consoleErrorSpy.mockRestore()
+    })
+  })
+
+  describe("handleHotUpdate", () => {
+    it("should restart server when .did file changes", () => {
+      const plugin = icReactorPlugin(mockOptions)
+      const ctx = {
+        file: "/absolute/path/to/src/declarations/test.did",
+        server: mockServer,
+      }
+
+      // Mock path.resolve to match the test case
+      const originalResolve = path.resolve
+      vi.spyOn(path, "resolve").mockImplementation((...args) => {
+        if (args.some((a) => a.includes("test.did"))) {
+          return "/absolute/path/to/src/declarations/test.did"
+        }
+        return originalResolve(...args)
+      })
+      ;(plugin.handleHotUpdate as any)(ctx)
+
+      expect(mockServer.restart).toHaveBeenCalled()
+    })
+
+    it("should ignore other files", () => {
+      const plugin = icReactorPlugin(mockOptions)
+      const ctx = {
+        file: "/some/other/file.ts",
+        server: mockServer,
+      }
+
+      ;(plugin.handleHotUpdate as any)(ctx)
+
+      expect(mockServer.restart).not.toHaveBeenCalled()
+    })
+  })
+})

package/src/index.ts

@@ -0,0 +1,267 @@
+/**
+ * IC-Reactor Vite Plugin
+ *
+ * A Vite plugin that generates ic-reactor hooks from Candid .did files.
+ * Uses @ic-reactor/codegen for all code generation logic.
+ *
+ * Usage:
+ * ```ts
+ * import { icReactorPlugin } from "@ic-reactor/vite-plugin"
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     icReactorPlugin({
+ *       canisters: [
+ *         {
+ *           name: "backend",
+ *           didFile: "../backend/backend.did",
+ *           clientManagerPath: "../lib/client"
+ *         }
+ *       ]
+ *     })
+ *   ]
+ * })
+ * ```
+ */
+
+import type { Plugin } from "vite"
+import fs from "fs"
+import path from "path"
+import { execFileSync } from "child_process"
+import {
+  generateDeclarations,
+  generateReactorFile,
+  generateClientFile,
+} from "@ic-reactor/codegen"
+
+// ═══════════════════════════════════════════════════════════════════════════
+// TYPES
+// ═══════════════════════════════════════════════════════════════════════════
+export interface CanisterConfig {
+  name: string
+  outDir?: string
+  didFile?: string
+  clientManagerPath?: string
+}
+
+export interface IcReactorPluginOptions {
+  /** List of canisters to generate hooks for */
+  canisters: CanisterConfig[]
+  /** Base output directory (default: ./src/lib/canisters) */
+  outDir?: string
+  /**
+   * Path to import ClientManager from (relative to generated file).
+   * Default: "../../clients"
+   */
+  clientManagerPath?: string
+  /**
+   * Automatically inject the IC environment (canister IDs and root key)
+   * into the browser using an `ic_env` cookie. (default: true)
+   *
+   * This is useful for local development with `icp`.
+   */
+  injectEnvironment?: boolean
+}
+
+function getIcEnvironmentInfo(canisterNames: string[]) {
+  const environment = process.env.ICP_ENVIRONMENT || "local"
+
+  try {
+    const networkStatus = JSON.parse(
+      execFileSync("icp", ["network", "status", "-e", environment, "--json"], {
+        encoding: "utf-8",
+      })
+    )
+    const rootKey = networkStatus.root_key
+    const proxyTarget = `http://127.0.0.1:${networkStatus.port}`
+
+    const canisterIds: Record<string, string> = {}
+    for (const name of canisterNames) {
+      try {
+        const canisterId = execFileSync(
+          "icp",
+          ["canister", "status", name, "-e", environment, "-i"],
+          {
+            encoding: "utf-8",
+          }
+        ).trim()
+        canisterIds[name] = canisterId
+      } catch {
+        // Skip if canister not found
+      }
+    }
+
+    return { environment, rootKey, proxyTarget, canisterIds }
+  } catch {
+    return null
+  }
+}
+
+function buildIcEnvCookie(
+  canisterIds: Record<string, string>,
+  rootKey: string
+): string {
+  const envParts = [`ic_root_key=${rootKey}`]
+
+  for (const [name, id] of Object.entries(canisterIds)) {
+    envParts.push(`PUBLIC_CANISTER_ID:${name}=${id}`)
+  }
+
+  return encodeURIComponent(envParts.join("&"))
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// VITE PLUGIN
+// ═══════════════════════════════════════════════════════════════════════════
+
+export function icReactorPlugin(options: IcReactorPluginOptions): Plugin {
+  const baseOutDir = options.outDir ?? "./src/lib/canisters"
+
+  return {
+    name: "ic-reactor-plugin",
+
+    config(_config, { command }) {
+      if (command !== "serve" || !(options.injectEnvironment ?? true)) {
+        return {}
+      }
+
+      const canisterNames = options.canisters.map((c) => c.name)
+      const icEnv = getIcEnvironmentInfo(canisterNames)
+
+      if (!icEnv) {
+        return {
+          server: {
+            proxy: {
+              "/api": {
+                target: "http://127.0.0.1:4943",
+                changeOrigin: true,
+              },
+            },
+          },
+        }
+      }
+
+      const cookieValue = buildIcEnvCookie(icEnv.canisterIds, icEnv.rootKey)
+
+      return {
+        server: {
+          headers: {
+            "Set-Cookie": `ic_env=${cookieValue}; Path=/; SameSite=Lax;`,
+          },
+          proxy: {
+            "/api": {
+              target: icEnv.proxyTarget,
+              changeOrigin: true,
+            },
+          },
+        },
+      }
+    },
+
+    async buildStart() {
+      // Step 0: Ensure central client manager exists (default: src/lib/clients.ts)
+      const defaultClientPath = path.resolve(
+        process.cwd(),
+        "src/lib/clients.ts"
+      )
+      if (!fs.existsSync(defaultClientPath)) {
+        console.log(
+          `[ic-reactor] Default client manager not found. Creating at ${defaultClientPath}`
+        )
+        const clientContent = generateClientFile()
+        fs.mkdirSync(path.dirname(defaultClientPath), { recursive: true })
+        fs.writeFileSync(defaultClientPath, clientContent)
+      }
+
+      for (const canister of options.canisters) {
+        let didFile = canister.didFile
+        const outDir = canister.outDir ?? path.join(baseOutDir, canister.name)
+
+        if (!didFile) {
+          const environment = process.env.ICP_ENVIRONMENT || "local"
+
+          console.log(
+            `[ic-reactor] didFile not specified for "${canister.name}". Attempting to download from canister...`
+          )
+          try {
+            const candidContent = execFileSync(
+              "icp",
+              [
+                "canister",
+                "metadata",
+                canister.name,
+                "candid:service",
+                "-e",
+                environment,
+              ],
+              { encoding: "utf-8" }
+            ).trim()
+
+            const declarationsDir = path.join(outDir, "declarations")
+            if (!fs.existsSync(declarationsDir)) {
+              fs.mkdirSync(declarationsDir, { recursive: true })
+            }
+            didFile = path.join(declarationsDir, `${canister.name}.did`)
+            fs.writeFileSync(didFile, candidContent)
+            console.log(
+              `[ic-reactor] Candid downloaded and saved to ${didFile}`
+            )
+          } catch (error) {
+            console.error(
+              `[ic-reactor] Failed to download candid for ${canister.name}: ${error}`
+            )
+            continue
+          }
+        }
+
+        console.log(
+          `[ic-reactor] Generating hooks for ${canister.name} from ${didFile}`
+        )
+
+        // Step 1: Generate declarations via @ic-reactor/codegen
+        const result = await generateDeclarations({
+          didFile: didFile,
+          outDir,
+          canisterName: canister.name,
+        })
+
+        if (!result.success) {
+          console.error(
+            `[ic-reactor] Failed to generate declarations: ${result.error}`
+          )
+          continue
+        }
+
+        // Step 2: Generate the reactor file using shared codegen
+        const reactorContent = generateReactorFile({
+          canisterName: canister.name,
+          didFile: didFile,
+          clientManagerPath:
+            canister.clientManagerPath ?? options.clientManagerPath,
+        })
+
+        const reactorPath = path.join(outDir, "index.ts")
+        fs.mkdirSync(outDir, { recursive: true })
+        fs.writeFileSync(reactorPath, reactorContent)
+
+        console.log(`[ic-reactor] Reactor hooks generated at ${reactorPath}`)
+      }
+    },
+
+    handleHotUpdate({ file, server }) {
+      // Watch for .did file changes and regenerate
+      if (file.endsWith(".did")) {
+        const canister = options.canisters.find((c) => {
+          if (!c.didFile) return false
+          return path.resolve(c.didFile) === file
+        })
+        if (canister) {
+          console.log(
+            `[ic-reactor] Detected change in ${file}, regenerating...`
+          )
+          server.restart()
+        }
+      }
+    },
+  }
+}