You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
docs: add a canonical Terms page and terminology rules, renumber the guide
One name per concept: a new guide-leading Terms page fixes the vocabulary
(a devframe, built-in devframe, host framework, host page, user app,
node side / browser side, client runtime, page script, in-page channel,
viewer, dock entry/rail/panel, storage scopes), AGENTS.md gains the
matching regulation, and the guide pages shift up one number to lead
with it. Stale numbered-path comments in code follow the renumber.
description: 'The canonical vocabulary of these docs: one name per concept, the API or package that anchors it, and how the pieces talk to each other.'
4
+
---
5
+
6
+
Every concept in these docs has exactly one name. This page fixes that vocabulary — when a term below appears anywhere in the documentation, it carries the meaning defined here.
7
+
8
+
## Core
9
+
10
+
| Term | Meaning | Anchor |
11
+
|------|---------|--------|
12
+
|**Devframe**| The product: a framework-neutral foundation for building a devtool once and running it everywhere. | — |
13
+
|`devframe`| The npm package the foundation ships as. |`devframe`|
14
+
|**a devframe**| One tool: a definition plus its SPA, mountable anywhere. |`defineDevframe()`, `DevframeDefinition`|
15
+
|**built-in devframe**| A ready-to-run devframe shipped from this repo (data inspector, inspect, OG, a11y, git, terminals, code-server, assets). The `plugin-` npm prefix only sets these packages apart from core packages — Devframe has no plugin concept. |`@devframes/plugin-*`|
16
+
|**adapter**| A deployment entry point under `devframe/adapters/*`: cli (cac), dev, build, vite, embedded, mcp. |`devframe/adapters/*`|
17
+
|**framework kit**| Framework conventions over the standard handler, each split into a `/single` and a `/hub` scope. |`@devframes/vite`, `@devframes/nuxt`, `@devframes/next`|
18
+
|**opt-in package**| A capability shipped as its own package and added when needed. |`@devframes/json-render`|
19
+
|**hub**| The composition layer that puts many devframes behind one handler; *a hub* is one `initHub()` instance. |`@devframes/hub`, `initHub()`|
20
+
|**viewer**| A hub UI implementation: the node-side `ui` slot plus the browser-side context contract. `@devframes/hub-ui` is the reference viewer. |`initHub({ ui })`|
21
+
22
+
## Node side
23
+
24
+
A devframe has two halves: the **node side** registers RPC functions and owns state; the **browser side** renders and calls them.
25
+
26
+
| Term | Meaning | Anchor |
27
+
|------|---------|--------|
28
+
|**node side**| The half of a devframe running in the Node process. |`setup(ctx)`|
29
+
|**host framework**| The environment a devframe or hub mounts into: a Vite dev server, a Next.js app, a Hono server. Named forms — *the Vite host*, *a Next.js host* — refer to a specific one. |`DevframeHost`|
30
+
|**dev server**| The standalone HTTP server the dev adapter starts. |`createDevServer()`|
31
+
|**side-car server**| The separate RPC/WebSocket process used when a host framework's handlers never see upgrade requests. | — |
32
+
|**hosted / standalone**| The two mount contexts: hosted adapters (vite, embedded) default the base path to `/__<id>/`; standalone adapters (cli, build) default to `/`. |`resolveBasePath()`|
|**browser side**| The half of a devframe running in a page. |`devframe/client`|
42
+
|**user app**| The application being developed and inspected. | — |
43
+
|**host page**| The browser document where the client runtime boots — in dev, usually the user app's own page. | — |
44
+
|**client runtime**| The headless runtime booted once per host page: it connects RPC, assembles the client context, and imports client scripts. |`createDevframeClientHost()`|
|**client script**| A dock entry's script, imported into the host page by the client runtime. |`clientScript`|
47
+
|**page script**| A devframe's script running in the user app's page — loaded as a client script or standalone. The a11y page script runs axe-core. | — |
48
+
|**RPC client**| The typed connection a browser surface gets. |`connectDevframe()`|
49
+
|**SPA**| A devframe's built web interface; `clientAssets` says where it lives. |`clientAssets`|
50
+
|**panel**| A devframe's SPA as a rendered surface — in a dock panel or standalone. | — |
51
+
|**surface**| Any rendered browser view: a panel, a dock iframe, a standalone SPA. | — |
52
+
|**coding agent**| An agent consuming a devframe over MCP — the only agent in these docs. |`createMcpServer()`|
53
+
54
+
## Hub
55
+
56
+
| Term | Meaning | Anchor |
57
+
|------|---------|--------|
58
+
|**mounted devframe**| A devframe served inside a hub under `<base><id>/`. |`initHub({ devframes })`|
59
+
|**dock entry**| A registry item: iframe, launcher, custom-render, group, or json-render. |`ctx.docks`|
60
+
|**dock rail**| The bar listing every mounted tool. | — |
61
+
|**dock panel**| The open drawer rendering the active dock entry. | — |
62
+
63
+
## Communication paths
64
+
65
+
Three distinct paths connect the pieces; each has its own name.
66
+
67
+
| Path | Between | Transport |
68
+
|------|---------|-----------|
69
+
|**RPC**| browser side ↔ node side | WebSocket or static snapshot, via `connectDevframe()`|
70
+
|**client context**| client scripts ↔ client runtime | a shared object inside the host page |
Copy file name to clipboardExpand all lines: docs/content/1.guide/11.when-clauses.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,9 +1,9 @@
1
1
---
2
2
title: 'When Clauses'
3
-
description: 'When clauses gate visibility and executability of docks, commands, and UI surfaces via VS Code''s when-clause contexts. The evaluator whenexpr re-exports at devframe/utils/when.'
3
+
description: 'When clauses gate visibility and executability of docks, commands, and custom UI via VS Code''s when-clause contexts. The evaluator whenexpr re-exports at devframe/utils/when.'
4
4
---
5
5
6
-
When clauses gate visibility and executability of docks, commands, and UI surfaces via [VS Code's when-clause contexts](https://code.visualstudio.com/api/references/when-clause-contexts). The evaluator [`whenexpr`](https://github.com/antfu/whenexpr) re-exports at `devframe/utils/when`.
6
+
When clauses gate visibility and executability of docks, commands, and custom UI via [VS Code's when-clause contexts](https://code.visualstudio.com/api/references/when-clause-contexts). The evaluator [`whenexpr`](https://github.com/antfu/whenexpr) re-exports at `devframe/utils/when`.
7
7
8
8
## Usage
9
9
@@ -22,7 +22,7 @@ ctx.commands.register({
22
22
23
23
### On dock entries
24
24
25
-
Gates dock-bar visibility.
25
+
Gates dock-rail visibility.
26
26
27
27
```ts
28
28
ctx.docks.register({
@@ -37,7 +37,7 @@ ctx.docks.register({
37
37
38
38
### Render-only visibility on dock entries
39
39
40
-
A dock entry also takes `visibility`, a second expression that hides only its dock-bar button while keeping the entry registered and reachable (e.g. a `subTabs` anchor).
40
+
A dock entry also takes `visibility`, a second expression that hides only its dock-rail button while keeping the entry registered and reachable (e.g. a `subTabs` anchor).
41
41
42
42
```ts
43
43
ctx.docks.register({
@@ -89,21 +89,21 @@ when: 'false' // never visible
89
89
when: 'clientType == embedded'// only embedded
90
90
when: 'dockOpen && !paletteOpen'// dock open and palette closed
Copy file name to clipboardExpand all lines: docs/content/1.guide/12.standalone-cli.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -131,7 +131,7 @@ defineDevframe({
131
131
132
132
Call `connectDevframe()` in a Client Component — see [Client](/guide/client) and [`examples/next-runtime-snapshot`](https://github.com/devframes/devframe/tree/main/examples/next-runtime-snapshot).
133
133
134
-
## Connecting from the client
134
+
## Connecting from the browser side
135
135
136
136
With the Nuxt helper, use `$rpc`:
137
137
@@ -207,7 +207,7 @@ It's the no-args fallback for any deployed `rpc.call('my-tool:get-payload', …)
207
207
208
208
## On-disk caching
209
209
210
-
Persistence is the app's job ([`unstorage`](https://unstorage.unjs.io/) recommended); keep cache paths under `node_modules/.cache/<your-devtool-id>/` to rotate with `pnpm install`.
210
+
Persistence is your tool's job ([`unstorage`](https://unstorage.unjs.io/) recommended); keep cache paths under `node_modules/.cache/<your-devtool-id>/` to rotate with `pnpm install`.
211
211
212
212
```ts
213
213
import { resolve } from'pathe'
@@ -238,7 +238,7 @@ defineDevframe({
238
238
239
239
## Live-reload on config changes
240
240
241
-
Filesystem watching is the app's job — wire chokidar, signal the client via shared state.
241
+
Filesystem watching is your tool's job — wire chokidar, signal the browser side via shared state.
242
242
243
243
```ts [src/cli.ts]
244
244
defineDevframe({
@@ -267,7 +267,7 @@ defineDevframe({
267
267
})
268
268
```
269
269
270
-
On the client:
270
+
On the browser side:
271
271
272
272
```ts
273
273
const my = (awaitconnectDevframe()).scope('my-tool')
Copy file name to clipboardExpand all lines: docs/content/1.guide/13.client.md
+20-20Lines changed: 20 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,9 +1,9 @@
1
1
---
2
2
title: 'Client'
3
-
description: 'The browser client connects any surface — dock iframe, remote page, standalone SPA — to the Devframe server with type-safe RPC, shared state, and a trust handshake.'
3
+
description: 'The RPC client connects any surface — dock iframe, remote page, standalone SPA — to a devframe''s node side with type-safe RPC, shared state, and a trust handshake.'
4
4
---
5
5
6
-
The browser client connects any surface — dock iframe, remote page, standalone SPA — to the Devframe server with type-safe RPC, shared state, and a trust handshake.
6
+
The RPC client connects any surface — dock iframe, remote page, standalone SPA — to a devframe's node side with type-safe RPC, shared state, and a trust handshake.
7
7
8
8
## Connecting
9
9
@@ -43,9 +43,9 @@ import { connectDevframe } from 'devframe/client'
43
43
const rpc =awaitconnectDevframe({ connection })
44
44
```
45
45
46
-
The client retains it as `rpc.connection`; cross-realm viewers read it via `getDevframeConnection()` or `DEVFRAME_CONNECTION_KEY` (`devframe/constants`).
46
+
The RPC client retains it as `rpc.connection`; cross-realm viewers read it via `getDevframeConnection()` or `DEVFRAME_CONNECTION_KEY` (`devframe/constants`).
47
47
48
-
An external viewer registers its origin before the WebSocket opens (needs `viewerOriginToken` in the host's connection metadata; see [External viewer origins](/guide/security#external-viewer-origins)):
48
+
An external viewer registers its origin before the WebSocket opens (needs `viewerOriginToken` in the host framework's connection metadata; see [External viewer origins](/guide/security#external-viewer-origins)):
@@ -77,12 +77,12 @@ Per the `__devframe/__connection.json` backend:
77
77
78
78
## Trust & auth (WebSocket mode)
79
79
80
-
`ensureTrusted()` resolves once the server trusts the client's stored token:
80
+
`ensureTrusted()` resolves once the node side trusts the RPC client's stored token:
81
81
82
82
```ts
83
83
const rpc =awaitconnectDevframe()
84
84
85
-
// Blocks until the server trusts this client (default timeout 60s)
85
+
// Blocks until the node side trusts this RPC client (default timeout 60s)
86
86
const trusted =awaitrpc.ensureTrusted()
87
87
88
88
if (!trusted) {
@@ -100,7 +100,7 @@ The dev server prints a single-use 6-digit code (expires in five minutes, rotate
100
100
const ok =awaitrpc.requestTrustWithCode('047204')
101
101
```
102
102
103
-
A host can embed the code in a link (`buildOtpAuthUrl(origin)`); `connectDevframe` reads the `devframe_otp` fragment, exchanges it, and strips the URL. Rename it with `otpParam`, or set `otpParam: false` to drive it yourself via `authenticateWithUrlOtp(rpc)` / `consumeOtpFromUrl()`.
103
+
A host framework can embed the code in a link (`buildOtpAuthUrl(origin)`); `connectDevframe` reads the `devframe_otp` fragment, exchanges it, and strips the URL. Rename it with `otpParam`, or set `otpParam: false` to drive it yourself via `authenticateWithUrlOtp(rpc)` / `consumeOtpFromUrl()`.
104
104
105
105
### Re-using an existing token
106
106
@@ -112,7 +112,7 @@ const ok = await rpc.requestTrustWithToken('a1b2c3…')
112
112
113
113
### Broadcast-channel sync
114
114
115
-
`connectDevframe` listens on a shared `BroadcastChannel` (`devframe-auth`) for `auth-update` messages; one tab authenticating trusts every open client.
115
+
`connectDevframe` listens on a shared `BroadcastChannel` (`devframe-auth`) for `auth-update` messages; one tab authenticating trusts every open RPC client.
See [Cross-Plugin Services](/guide/services#wire-services).
182
+
See [Cross-Devframe Services](/guide/services#wire-services).
183
183
184
184
## Settings
185
185
186
-
A scoped client exposes a persisted `settings` store, per-user (`global`) or per-workspace (`project`):
186
+
A scoped client exposes a persisted `settings` store, per-user (`global`) or per-checkout (`project`):
187
187
188
188
```ts
189
189
awaitmy.settings.project.set('theme', 'dark')
@@ -213,7 +213,7 @@ Devframe writes a JSON descriptor at `<base>/__connection.json`. The socket shar
213
213
}
214
214
```
215
215
216
-
The client resolves it against its origin (`http`→`ws` / `https`→`wss`). The field also accepts a `number` (port on the page's host), a full `ws://`/`wss://` URL, or `{ port }` / `{ host }` for a cross-origin side-car.
216
+
The RPC client resolves it against its origin (`http`→`ws` / `https`→`wss`). The field also accepts a `number` (port on the page's host), a full `ws://`/`wss://` URL, or `{ port }` / `{ host }` for a cross-origin side-car server.
217
217
218
218
For static mode:
219
219
@@ -231,7 +231,7 @@ await connectDevframe({
231
231
232
232
## Remote docks
233
233
234
-
Supporting hosts (Vite DevTools; see [its remote-client docs](https://devtools.vite.dev/kit/remote-client)) inject a connection descriptor into the iframe URL that `connectDevframe` auto-detects:
234
+
Supporting host frameworks (Vite DevTools; see [its remote-client docs](https://devtools.vite.dev/kit/remote-client)) inject a connection descriptor into the iframe URL that `connectDevframe` auto-detects:
235
235
236
236
```ts
237
237
import { connectDevframe } from'devframe/client'
@@ -261,7 +261,7 @@ Emitted over `rpc.events`:
261
261
|`rpc:is-trusted:updated`| Trust granted, denied, or revoked. Carries the new `isTrusted` boolean. |
262
262
|`connection:status`| The [connection status](#handling-connection-and-auth-errors) changes. Carries `(status, previous)`. |
263
263
|`connection:error`| A connection-level failure — socket error or trust refused. Carries the `Error`. |
264
-
|`rpc:error`| An `rpc.call` rejects, from the server or a down connection. Carries `(error, method)`. |
264
+
|`rpc:error`| An `rpc.call` rejects, from the node side or a down connection. Carries `(error, method)`. |
0 commit comments