@ic-reactor/vite-plugin 0.15.1 → 4.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/llms.txt DELETED
@@ -1,156 +0,0 @@
1
- # @ic-reactor/vite-plugin
2
-
3
- > Vite plugin that generates typed declarations, a reactor with bound React
4
- > hooks, and optionally one query or mutation object per method from `.did`
5
- > files, regenerates on change, and gives `vite dev` the local canister ids
6
- > and an `/api` proxy to the local replica.
7
-
8
- Applies to `@ic-reactor/vite-plugin` 0.15.1.
9
-
10
- Read this file from `node_modules/@ic-reactor/vite-plugin/llms.txt` when
11
- writing code against the installed version. The complete guide for every
12
- package is https://ic-reactor.b3pay.net/llms-full.txt, and behaviour changes
13
- are in https://github.com/B3Pay/ic-reactor/blob/main/CHANGELOG.md.
14
-
15
- ## Install
16
-
17
- ```bash
18
- pnpm add -D @ic-reactor/vite-plugin
19
- pnpm add @ic-reactor/react @icp-sdk/core @tanstack/react-query
20
- ```
21
-
22
- ## Setup and Usage
23
-
24
- ```ts
25
- // vite.config.ts
26
- import { defineConfig, loadEnv } from "vite"
27
- import { icReactor } from "@ic-reactor/vite-plugin"
28
-
29
- export default defineConfig(({ mode }) => {
30
- const env = loadEnv(mode, process.cwd(), "")
31
- return {
32
- plugins: [
33
- icReactor({
34
- // outDir: "src/declarations" and clientManagerPath: "../../clients"
35
- // by default, so src/clients.ts must export `clientManager`
36
- canisters: [
37
- {
38
- name: "backend",
39
- didFile: "./backend/backend.did",
40
- factories: true, // also a query or mutation object per method
41
- // Used under `vite dev` too, in place of the local id
42
- canisterId: env.CANISTER_ID_BACKEND,
43
- },
44
- ],
45
- }),
46
- ],
47
- }
48
- })
49
- ```
50
-
51
- ```tsx
52
- // src/App.tsx: the generated entry is src/declarations/backend/index.ts
53
- import { getPostsQuery, useBackendMutation } from "./declarations/backend"
54
-
55
- export function Posts() {
56
- const { data: posts } = getPostsQuery.useQuery()
57
- const create = useBackendMutation({
58
- functionName: "create_post",
59
- invalidateQueries: [getPostsQuery],
60
- })
61
- return (
62
- <button onClick={() => create.mutate(["Hello"])}>
63
- {posts?.length ?? 0} posts
64
- </button>
65
- )
66
- }
67
- ```
68
-
69
- `src/clients.ts` is yours:
70
- `export const clientManager = new ClientManager({ queryClient })`, with
71
- `ClientManager` from `@ic-reactor/react` and a `QueryClient` from
72
- `@tanstack/react-query` (set `retry: reactorRetry` in its query defaults).
73
- For Internet Identity sign-in, build
74
- `new AuthenticationManager({ clientManager })` in the same module and export
75
- `useAuth` from `createAuthHooks(authentication)`; every generated reactor on
76
- that `clientManager` then calls as the signed-in user.
77
-
78
- ## When to Use What
79
-
80
- | Need | Use |
81
- | ------------------------------------------------- | ------------------------------------------------------ |
82
- | Vite app, `.did` files in the repo | this plugin |
83
- | No Vite, or generation as a CI step | `@ic-reactor/cli` |
84
- | Query and mutation objects per method | `factories: true` on the canister entry |
85
- | Raw Candid values instead of display values | `mode: "Reactor"` on the canister entry |
86
- | No React | `target: "core"` |
87
- | Local canister ids and `/api` proxy in `vite dev` | `injectEnvironment` (on by default) |
88
- | A project without a local network | `injectEnvironment: false`, so page loads run no `icp` |
89
-
90
- ## Options
91
-
92
- - Plugin level: `canisters` (required), `outDir`, `clientManagerPath`,
93
- `target`, `injectEnvironment`, `failOnError`.
94
- - Per canister: `name` and `didFile` (required), `outDir`,
95
- `clientManagerPath`, `target`, `mode`, `canisterId`, `factories`. Relative
96
- paths resolve against Vite's `root`.
97
- - `failOnError` defaults to `true` under `vite build` and `false` under
98
- `vite dev`, where a failure goes to the terminal and the browser overlay.
99
- - Each entry needs its own output directory: a later entry with the same
100
- `name` and `outDir` as an earlier one fails.
101
-
102
- ## Generated Files
103
-
104
- Per canister, under `<outDir>/<name>/`: `declarations/` (`idlFactory` and
105
- `_SERVICE`), `index.generated.ts` (`<name>Reactor` and six hooks
106
- `use<Name>Query`, `use<Name>Mutation`, ...), `index.factories.generated.ts`
107
- with `factories: true` (`<method>Query`, `<method>Mutation`), and `index.ts`,
108
- which is created once and then yours. Generation runs on startup and on every
109
- `.did` change. An edited `index.ts` gets a terminal warning until it
110
- re-exports `./index.factories.generated`; a warning never fails the build.
111
-
112
- ## Local Environment (`injectEnvironment`)
113
-
114
- - Under `vite dev` and `vite preview` the plugin sets the `ic_env` cookie
115
- (root key, Internet Identity provider, `PUBLIC_CANISTER_ID:<name>`) on each
116
- response and proxies `/api` to the network `icp` reports.
117
- - While `icp` reports no network or a configured canister has no id, each page
118
- load asks `icp` again, so deploying after `vite dev` started needs only a
119
- reload. Once every canister resolves, page loads run no `icp` command, and a
120
- redeploy into a fresh network needs a restart.
121
- - An `/api` proxy set by the Vite config or another plugin is left alone.
122
- - `ClientManager` trusts the cookie only on loopback and `localhost` hosts. A
123
- dev build served over a tunnel, Codespaces, Gitpod or a custom domain needs
124
- `allowEnvConfig: true` on the `ClientManager`; without it a generated
125
- reactor with no `canisterId` throws instead of reading one from the cookie.
126
- - The cookie does not exist in production: set `canisterId` on every entry
127
- whose build is served anywhere else. A set `canisterId` is written into the
128
- generated reactor and wins over the local id under `vite dev` too, so take
129
- it from the environment (`loadEnv`, as above) when the local and production
130
- ids differ, rather than hard-coding the production id.
131
- - Vitest runs `vite.config.ts` unless a `vitest.config.ts` replaces it, so
132
- the plugin generates again when tests run, in mode `test`. Set the
133
- `canisterId` variable for that mode too (for example in `.env.test`), or
134
- the regenerated reactor has no id and importing it in a test throws
135
- `canisterId is required`.
136
-
137
- ## Do Not
138
-
139
- - Edit `index.generated.ts`, `index.factories.generated.ts` or
140
- `declarations/`; edit the `.did` or the plugin options.
141
- - Hand-write per-method `createQuery` / `createMutation` modules; set
142
- `factories: true` and customize in `index.ts`.
143
- - Rely on the `ic_env` cookie outside local development.
144
- - Point two entries at one output directory.
145
- - Import generated modules into a React Server Component, or use them per
146
- request on a server: they are module scope and import hooks.
147
-
148
- ## Docs
149
-
150
- - Vite plugin: https://ic-reactor.b3pay.net/v3/packages/vite-plugin.md
151
- - Quick start: https://ic-reactor.b3pay.net/v3/getting-started/quick-start.md
152
- - Local development: https://ic-reactor.b3pay.net/v3/getting-started/local-development.md
153
- - Codegen (factory naming rules): https://ic-reactor.b3pay.net/v3/packages/codegen.md
154
- - Vite plugin example: https://ic-reactor.b3pay.net/v3/examples/vite-plugin.md
155
- - Index of all docs: https://ic-reactor.b3pay.net/llms.txt
156
- - Full guide: https://ic-reactor.b3pay.net/llms-full.txt