@ic-reactor/vite-plugin 0.2.0 → 0.3.1

package/README.md

@@ -24,15 +24,11 @@ Automatically generate type-safe React hooks for your Internet Computer canister
 ## 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
+pnpm add @ic-reactor/react @tanstack/react-query @icp-sdk/core
 ```
 
 ## Quick Start
@@ -62,52 +58,30 @@ export default defineConfig({
 
 ### 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`:
+The plugin expects you to have a `ClientManager` exported from a file. By default, it looks for `./src/lib/clients.ts`:
 
 ```typescript
-// src/lib/client.ts
+// src/lib/clients.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
-})
+export const clientManager = new ClientManager({ queryClient })
 ```
 
 ### 3. Use Generated Hooks
 
-The plugin generates hooks in `./src/canisters/<name>/index.ts`:
+The plugin generates an `index.ts` file in your canister folder (default: `./src/lib/canisters/<name>/index.ts`):
 
 ```tsx
-// Generated at: ./src/canisters/backend/index.ts
-import {
-  backendReactor,
-  useBackendQuery,
-  useBackendMutation,
-  useBackendSuspenseQuery,
-} from "./canisters/backend"
+import { useActorQuery, useActorMutation } from "./canisters/backend"
 
 function MyComponent() {
-  // Query data
-  const { data, isPending } = useBackendQuery({
+  const { data, isPending } = useActorQuery({
     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>
-  )
+  return <p>{isPending ? "Loading..." : data}</p>
 }
 ```
 
@@ -115,123 +89,30 @@ function MyComponent() {
 
 ### 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:
+| Option              | Type               | Description                                          | Default                 |
+| :------------------ | :----------------- | :--------------------------------------------------- | :---------------------- |
+| `canisters`         | `CanisterConfig[]` | List of canisters to generate hooks for.             | `[]`                    |
+| `outDir`            | `string`           | Base output directory for generated files.           | `"./src/lib/canisters"` |
+| `injectEnvironment` | `boolean`          | Whether to inject canister IDs into `ic_env` cookie. | `true`                  |
+| `clientManagerPath` | `string`           | Path to a custom `ClientManager` instance.           | `"../../clients"`       |
 
-```typescript
-import { icReactorAdvancedPlugin } from "@ic-reactor/vite-plugin"
+### Canister Config
 
-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)
-```
+| Option              | Type      | Description                                         | Required |
+| :------------------ | :-------- | :-------------------------------------------------- | :------- |
+| `name`              | `string`  | Name of the canister (used in generated code).      | Yes      |
+| `didFile`           | `string`  | Path to the `.did` file.                            | Yes      |
+| `outDir`            | `string`  | Override output directory for this canister.        | No       |
+| `useDisplayReactor` | `boolean` | Use `DisplayReactor` instead of standard `Reactor`. | `true`   |
+| `clientManagerPath` | `string`  | Override client manager path for this canister.     | No       |
 
 ## 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
+1. **Build Start**: The plugin reads your `.did` files and generates TypeScript declarations (`.js` and `.d.ts`).
+2. **Code Generation**: Creates a reactor instance and typed hooks (using `createActorHooks`) for each canister in `index.ts`.
+3. **Hot Reload**: Watches for `.did` file changes and regenerates everything automatically.
+4. **Local Proxy**: Configures a Vite proxy to redirect `/api` calls to your local replica.
+5. **Environment Detection**: Automatically injects canister IDs from `icp-cli` or `dfx` cache into your session.
 
 ## DisplayReactor vs Reactor
 
@@ -299,7 +180,7 @@ If you need to disable this behavior:
 ```typescript
 icReactorPlugin({
   canisters: [...],
-  autoInjectIcEnv: false,
+  injectEnvironment: false,
 })
 ```
 

package/dist/index.cjs

@@ -30,75 +30,141 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  default: () => index_default,
   icReactorPlugin: () => icReactorPlugin
 });
 module.exports = __toCommonJS(index_exports);
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
+var import_child_process = require("child_process");
 var import_codegen = require("@ic-reactor/codegen");
-var ICP_LOCAL_IDS_PATH = ".icp/cache/mappings/local.ids.json";
-var IC_ROOT_KEY_HEX = "308182301d060d2b0601040182dc7c0503010201060c2b0601040182dc7c050302010361008b52b4994f94c7ce4be1c1542d7c81dc79fea17d49efe8fa42e8566373581d4b969c4a59e96a0ef51b711fe5027ec01601182519d0a788f4bfe388e593b97cd1d7e44904de79422430bca686ac8c21305b3397b5ba4d7037d17877312fb7ee34";
-function loadLocalCanisterIds(rootDir) {
-  const idsPath = import_path.default.resolve(rootDir, ICP_LOCAL_IDS_PATH);
+function getIcEnvironmentInfo(canisterNames) {
+  const environment = process.env.ICP_ENVIRONMENT || "local";
   try {
-    return JSON.parse(import_fs.default.readFileSync(idsPath, "utf-8"));
+    const networkStatus = JSON.parse(
+      (0, import_child_process.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 = {};
+    for (const name of canisterNames) {
+      try {
+        const canisterId = (0, import_child_process.execFileSync)(
+          "icp",
+          ["canister", "status", name, "-e", environment, "-i"],
+          {
+            encoding: "utf-8"
+          }
+        ).trim();
+        canisterIds[name] = canisterId;
+      } catch {
+      }
+    }
+    return { environment, rootKey, proxyTarget, canisterIds };
   } catch {
     return null;
   }
 }
-function buildIcEnvCookie(canisterIds) {
-  const envParts = [`ic_root_key=${IC_ROOT_KEY_HEX}`];
+function buildIcEnvCookie(canisterIds, rootKey) {
+  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("&"));
 }
-function addOrReplaceSetCookie(existing, cookie) {
-  const cookieEntries = typeof existing === "string" ? [existing] : Array.isArray(existing) ? existing.filter((value) => typeof value === "string") : [];
-  const nonIcEnvCookies = cookieEntries.filter(
-    (entry) => !entry.trim().startsWith("ic_env=")
-  );
-  return [...nonIcEnvCookies, cookie];
-}
-function setupIcEnvMiddleware(server) {
-  const rootDir = server.config.root || process.cwd();
-  const idsPath = import_path.default.resolve(rootDir, ICP_LOCAL_IDS_PATH);
-  let hasLoggedHint = false;
-  server.middlewares.use((req, res, next) => {
-    const canisterIds = loadLocalCanisterIds(rootDir);
-    if (!canisterIds) {
-      if (!hasLoggedHint) {
-        server.config.logger.info(
-          `[ic-reactor] icp-cli local IDs not found at ${idsPath}. Run \`icp deploy\` to enable automatic ic_env cookie injection.`
-        );
-        hasLoggedHint = true;
-      }
-      return next();
-    }
-    const cookie = `ic_env=${buildIcEnvCookie(canisterIds)}; Path=/; SameSite=Lax;`;
-    const current = res.getHeader("Set-Cookie");
-    res.setHeader("Set-Cookie", addOrReplaceSetCookie(current, cookie));
-    next();
-  });
-}
 function icReactorPlugin(options) {
-  const baseOutDir = options.outDir ?? "./src/canisters";
+  const baseOutDir = options.outDir ?? "./src/lib/canisters";
   return {
     name: "ic-reactor-plugin",
-    configureServer(server) {
-      if (options.autoInjectIcEnv ?? true) {
-        setupIcEnvMiddleware(server);
+    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() {
+      const defaultClientPath = import_path.default.resolve(
+        process.cwd(),
+        "src/lib/clients.ts"
+      );
+      if (!import_fs.default.existsSync(defaultClientPath)) {
+        console.log(
+          `[ic-reactor] Default client manager not found. Creating at ${defaultClientPath}`
+        );
+        const clientContent = (0, import_codegen.generateClientFile)();
+        import_fs.default.mkdirSync(import_path.default.dirname(defaultClientPath), { recursive: true });
+        import_fs.default.writeFileSync(defaultClientPath, clientContent);
+      }
       for (const canister of options.canisters) {
+        let didFile = canister.didFile;
         const outDir = canister.outDir ?? import_path.default.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 = (0, import_child_process.execFileSync)(
+              "icp",
+              [
+                "canister",
+                "metadata",
+                canister.name,
+                "candid:service",
+                "-e",
+                environment
+              ],
+              { encoding: "utf-8" }
+            ).trim();
+            const declarationsDir = import_path.default.join(outDir, "declarations");
+            if (!import_fs.default.existsSync(declarationsDir)) {
+              import_fs.default.mkdirSync(declarationsDir, { recursive: true });
+            }
+            didFile = import_path.default.join(declarationsDir, `${canister.name}.did`);
+            import_fs.default.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 ${canister.didFile}`
+          `[ic-reactor] Generating hooks for ${canister.name} from ${didFile}`
         );
         const result = await (0, import_codegen.generateDeclarations)({
-          didFile: canister.didFile,
+          didFile,
           outDir,
           canisterName: canister.name
         });
@@ -108,28 +174,10 @@ function icReactorPlugin(options) {
           );
           continue;
         }
-        console.log(
-          `[ic-reactor] Declarations generated at ${result.declarationsDir}`
-        );
-        const useAdvanced = canister.advanced ?? options.advanced ?? false;
-        let didContent;
-        if (useAdvanced) {
-          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 advanced hook generation for ${canister.name}.`
-            );
-            continue;
-          }
-        }
         const reactorContent = (0, import_codegen.generateReactorFile)({
           canisterName: canister.name,
-          canisterConfig: canister,
-          globalClientManagerPath: options.clientManagerPath,
-          hasDeclarations: true,
-          advanced: useAdvanced,
-          didContent
+          didFile,
+          clientManagerPath: canister.clientManagerPath ?? options.clientManagerPath
         });
         const reactorPath = import_path.default.join(outDir, "index.ts");
         import_fs.default.mkdirSync(outDir, { recursive: true });
@@ -139,9 +187,10 @@ function icReactorPlugin(options) {
     },
     handleHotUpdate({ file, server }) {
       if (file.endsWith(".did")) {
-        const canister = options.canisters.find(
-          (c) => import_path.default.resolve(c.didFile) === file
-        );
+        const canister = options.canisters.find((c) => {
+          if (!c.didFile) return false;
+          return import_path.default.resolve(c.didFile) === file;
+        });
         if (canister) {
           console.log(
             `[ic-reactor] Detected change in ${file}, regenerating...`
@@ -152,7 +201,6 @@ function icReactorPlugin(options) {
     }
   };
 }
-var index_default = icReactorPlugin;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   icReactorPlugin

package/dist/index.d.cts

@@ -1,6 +1,4 @@
 import { Plugin } from 'vite';
-import { CanisterConfig } from '@ic-reactor/codegen';
-export { CanisterConfig } from '@ic-reactor/codegen';
 
 /**
  * IC-Reactor Vite Plugin
@@ -28,32 +26,30 @@ export { CanisterConfig } from '@ic-reactor/codegen';
  * ```
  */
 
+interface CanisterConfig {
+    name: string;
+    outDir?: string;
+    didFile?: string;
+    clientManagerPath?: string;
+}
 interface IcReactorPluginOptions {
     /** List of canisters to generate hooks for */
-    canisters: (CanisterConfig & {
-        name: string;
-        advanced?: boolean;
-    })[];
-    /** Base output directory (default: ./src/canisters) */
+    canisters: CanisterConfig[];
+    /** Base output directory (default: ./src/lib/canisters) */
     outDir?: string;
     /**
      * Path to import ClientManager from (relative to generated file).
-     * Default: "../../lib/client"
+     * Default: "../../clients"
      */
     clientManagerPath?: string;
     /**
-     * Generate advanced per-method hooks with createQuery/createMutation
-     * instead of generic actor hooks (default: false).
-     * Can be overridden per-canister by setting `advanced` on the individual canister entry.
+     * 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`.
      */
-    advanced?: boolean;
-    /**
-     * Automatically set the `ic_env` cookie in Vite dev server from
-     * `.icp/cache/mappings/local.ids.json` (default: true).
-     */
-    autoInjectIcEnv?: boolean;
+    injectEnvironment?: boolean;
 }
-
 declare function icReactorPlugin(options: IcReactorPluginOptions): Plugin;
 
-export { type IcReactorPluginOptions, icReactorPlugin as default, icReactorPlugin };
+export { type CanisterConfig, type IcReactorPluginOptions, icReactorPlugin };

package/dist/index.d.ts

@@ -1,6 +1,4 @@
 import { Plugin } from 'vite';
-import { CanisterConfig } from '@ic-reactor/codegen';
-export { CanisterConfig } from '@ic-reactor/codegen';
 
 /**
  * IC-Reactor Vite Plugin
@@ -28,32 +26,30 @@ export { CanisterConfig } from '@ic-reactor/codegen';
  * ```
  */
 
+interface CanisterConfig {
+    name: string;
+    outDir?: string;
+    didFile?: string;
+    clientManagerPath?: string;
+}
 interface IcReactorPluginOptions {
     /** List of canisters to generate hooks for */
-    canisters: (CanisterConfig & {
-        name: string;
-        advanced?: boolean;
-    })[];
-    /** Base output directory (default: ./src/canisters) */
+    canisters: CanisterConfig[];
+    /** Base output directory (default: ./src/lib/canisters) */
     outDir?: string;
     /**
      * Path to import ClientManager from (relative to generated file).
-     * Default: "../../lib/client"
+     * Default: "../../clients"
      */
     clientManagerPath?: string;
     /**
-     * Generate advanced per-method hooks with createQuery/createMutation
-     * instead of generic actor hooks (default: false).
-     * Can be overridden per-canister by setting `advanced` on the individual canister entry.
+     * 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`.
      */
-    advanced?: boolean;
-    /**
-     * Automatically set the `ic_env` cookie in Vite dev server from
-     * `.icp/cache/mappings/local.ids.json` (default: true).
-     */
-    autoInjectIcEnv?: boolean;
+    injectEnvironment?: boolean;
 }
-
 declare function icReactorPlugin(options: IcReactorPluginOptions): Plugin;
 
-export { type IcReactorPluginOptions, icReactorPlugin as default, icReactorPlugin };
+export { type CanisterConfig, type IcReactorPluginOptions, icReactorPlugin };