Skip to content

Commit 673b02b

Browse files
authored
docs: refine Vite DevTools integration plans (#1030)
1 parent 03b7a1a commit 673b02b

9 files changed

Lines changed: 1041 additions & 950 deletions

‎plans/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ honor its STOP conditions, run the drift check first, and update your row below
77
when done.
88

99
> **Related plan set:** the numbered plans below are `improve`-skill audit fixes.
10-
> The Vite DevTools 0.4 / devframe 0.6 *integration* RFCs (compat foundation,
11-
> messages/terminals reuse, dock groups, ecosystem dogfooding) live in
10+
> The Vite DevTools Kit 0.4.2 / Devframe 0.7.5 integration plans (dock
11+
> foundation, platform-service cleanup, Code Server, and Data Inspector) live in
1212
> [`vite-devtools-integration/`](./vite-devtools-integration/README.md).
1313
1414
## Execution order & status
Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
# Plan 01 - Establish the Nuxt dock foundation
2+
3+
**Status:** ready to execute; **Risk:** medium; **Depends on:** the v4 ready-hook
4+
and diagnostics foundation already on main
5+
**Outcome:** Nuxt DevTools consistently connects its RPC surface to the
6+
browser-serving Nuxt Vite context and appears as the default child of a stable,
7+
public `Nuxt` framework group.
8+
9+
## Why this plan exists
10+
11+
`packages/devtools/src/module-main.ts` installs the Nuxt dock plugin into both
12+
Nuxt Vite contexts. `connectDevToolsKit()` in
13+
`packages/devtools/src/server-rpc/index.ts` currently keeps whichever context
14+
calls it first. The comment assumes that is the client context; the code does
15+
not verify it. If setup order changes, the server context can win despite having
16+
no browser RPC peers.
17+
18+
Kit 0.4.2 exposes `ctx.viteConfig` and `ctx.viteServer`, so selection can be
19+
based on the resolved Vite context rather than callback order. This is required
20+
before mounting more Devframes onto `devtools:ready`.
21+
22+
`packages/devtools/src/integrations/vite-inspect.ts` separately reads
23+
`meta.instances[0]`. Vite Inspect 12.0.2 does not expose a discriminator that can
24+
map those instances back to a Nuxt client/SSR config: both report client and SSR
25+
environment names. Do not reuse the context classifier there or claim to fix
26+
that ordering in this plan.
27+
28+
## Drift check
29+
30+
Before editing, verify all of the following:
31+
32+
1. `pnpm-lock.yaml` resolves `@vitejs/devtools-kit` to 0.4.2 and Devframe hub to
33+
0.7.5.
34+
2. `module-main.ts` still calls `connectDevToolsKit(ctx)` from the
35+
`nuxt:devtools` plugin's `devtools.setup` callback.
36+
3. `server-rpc/index.ts` still has `if (devtoolsKitCtx) return` with a
37+
first-client comment.
38+
4. The context type still exposes required `viteConfig` and optional
39+
`viteServer`.
40+
5. Nuxt's Vite 8 client and SSR resolved configs differ through `build.ssr`,
41+
even though both expose `client` and `ssr` environment names.
42+
43+
**STOP:** if Kit no longer supplies enough resolved-config information to tell
44+
Nuxt's client and SSR contexts apart, do not invent another timing heuristic.
45+
Capture the observed context metadata in a fixture and revise this plan or fix
46+
the upstream integration first.
47+
48+
## Scope
49+
50+
This plan includes:
51+
52+
- deterministic client-context selection;
53+
- narrowing `@nuxt/devtools`' peer contract to Vite 8;
54+
- the `Nuxt` group and hub membership;
55+
- a public group ID constant;
56+
- focused unit and e2e coverage.
57+
58+
This plan does not mount Code Server or Data Inspector, promote Nuxt pages,
59+
change the SideNav, add `dock: true` to custom tabs, or guess which Vite Inspect
60+
metadata instance is the client. File or link an upstream Vite Inspect issue for
61+
the missing discriminator.
62+
63+
## Implementation
64+
65+
### 1. Add and export the group constant
66+
67+
In `packages/devtools-kit/src/index.ts`, export:
68+
69+
```ts
70+
export const NUXT_DEVTOOLS_GROUP_ID = 'nuxt'
71+
```
72+
73+
Use this constant everywhere Nuxt-owned code registers a group member. Do not
74+
add a second constants module or duplicate the string in later integrations.
75+
Add a short TSDoc example showing `ctx.docks.register({ groupId:
76+
NUXT_DEVTOOLS_GROUP_ID, ... })` so module authors have a native extension path.
77+
78+
### 2. Select the browser-serving Vite context
79+
80+
Replace the first-context guard in `connectDevToolsKit()` with a small,
81+
unit-testable Vite 8 classifier for `ctx.viteConfig`. Check `build.ssr` before
82+
looking at environment names because Vite 8 exposes both names on each config.
83+
Lock this truth table:
84+
85+
| Signal | Classification |
86+
|---|---|
87+
| `config.build.ssr` is truthy | SSR |
88+
| `config.command === 'serve'` and `config.build.ssr` is falsy | client |
89+
| missing config or any other combination | unknown |
90+
91+
Do not classify from `config.environments`, WebSocket client count, or callback
92+
order.
93+
94+
Ignore the SSR candidate without assigning `devtoolsKitCtx`. Connect exactly
95+
once when the client candidate arrives, then register RPC, diagnostics, flush
96+
broadcasts, and fire `devtools:ready` as today.
97+
98+
An unknown candidate must not assign `devtoolsKitCtx`. Emit one actionable
99+
diagnostic/log that includes the available command, environment names, and SSR
100+
marker. If every supported fixture is unknown, hit the STOP condition rather
101+
than reconnecting first-wins.
102+
103+
Put the classifier near `connectDevToolsKit()` unless tests require exporting it
104+
from a small internal utility. Do not introduce a general context registry.
105+
106+
### 3. Make the Vite 8 requirement explicit
107+
108+
Change `packages/devtools/package.json` from `vite: ">=6.0"` to `vite:
109+
"~8.0.14"`, matching the root override that deliberately excludes Vite 8.1
110+
until its WebSocket regression is fixed. Update compatibility documentation. Do
111+
not narrow
112+
`@nuxt/devtools-kit` unless its own API now requires Vite 8; the plugin peer
113+
constraint belongs to the package that installs the Devframe plugins.
114+
115+
Leave `integrations/vite-inspect.ts` unchanged and record its index-zero behavior
116+
as a residual risk with an upstream discriminator prerequisite.
117+
118+
### 4. Register the group and hub member
119+
120+
In `module-main.ts`'s existing `devtools.setup(ctx)` callback, register the group
121+
before the hub iframe:
122+
123+
```ts
124+
ctx.docks.register({
125+
id: NUXT_DEVTOOLS_GROUP_ID,
126+
type: 'group',
127+
title: 'Nuxt',
128+
icon: '/__nuxt_devtools__/client/nuxt.svg',
129+
category: 'framework',
130+
defaultOrder: -900,
131+
defaultChildId: 'nuxt:devtools',
132+
})
133+
```
134+
135+
Add `groupId: NUXT_DEVTOOLS_GROUP_ID` to the existing `nuxt:devtools` iframe and
136+
change its `defaultOrder` to `-300`. Keep its ID, URL, icon, and title unchanged.
137+
Existing calls that activate or look up `nuxt:devtools`, including the single
138+
Vue DevTools iframe bridge, must continue to target the hub member directly.
139+
140+
Guard **both** registrations with the same client classifier from Step 2: only
141+
call `ctx.docks.register(...)` for the group and the `nuxt:devtools` member when
142+
`ctx` is the selected client candidate. Today's code registers `nuxt:devtools`
143+
unconditionally in `devtools.setup(ctx)`, so it already runs once per Vite
144+
instance (client and SSR); adding the group without the same guard would create
145+
a second, inert `Nuxt` group + hub member on the SSR context. Skip registration
146+
entirely (do not register a disabled/hidden placeholder) when `ctx` classifies
147+
as SSR or unknown.
148+
149+
The lower `defaultOrder` values sort earlier in Vite DevTools 0.4.2. Verify the
150+
result visually rather than relying only on the stale type comment.
151+
152+
### 5. Update documentation and tests
153+
154+
- Document the group constant and native membership example in
155+
`docs/content/2.module/1.utils-kit.md`.
156+
- Add unit coverage for client, SSR, unknown/missing-config, and repeated connection
157+
candidates. Assert `devtools:ready` fires once for the selected client.
158+
- Update `tests/e2e/fixtures/devtools.ts` comments from Devframe 0.6 to 0.7 where
159+
still applicable. Keep the exact hub target `nuxt:devtools`; do not broaden the
160+
iframe selector.
161+
- Add an e2e assertion that `nuxt` is a group, its default child is
162+
`nuxt:devtools`, and opening the hub still hydrates the SideNav.
163+
164+
## Acceptance criteria
165+
166+
- Reversing client/SSR setup order in a unit fixture still connects the client
167+
context and fires `devtools:ready` once.
168+
- `@nuxt/devtools` declares Vite 8 compatibility instead of Vite 6+.
169+
- Vite DevTools renders one `Nuxt` group in the framework category.
170+
- Clicking the group opens `nuxt:devtools` by default.
171+
- The hub keeps its full current SideNav, and Pinia/Render Tree retain the single
172+
Vue DevTools bridge without a `Connecting...` regression.
173+
- A module can import `NUXT_DEVTOOLS_GROUP_ID` from `@nuxt/devtools-kit`.
174+
- No `dock` field is added to custom-tab or page-meta types.
175+
- The SSR Vite context never registers the `Nuxt` group or the `nuxt:devtools`
176+
member; only the selected client context does.
177+
178+
## Verification
179+
180+
Run, using pnpm 11 (this repo's pinned `packageManager`, not npm or yarn):
181+
182+
```sh
183+
pnpm lint
184+
pnpm build # or `pnpm prepare` — either must run before `pnpm typecheck`
185+
pnpm typecheck
186+
pnpm test:unit
187+
pnpm test:e2e:dev
188+
```
189+
190+
Manually run one playground, open Vite DevTools, and verify the group popover,
191+
default child, framework placement, and Vue-backed tabs.
192+
193+
## STOP conditions
194+
195+
- The selected client context has no active RPC path while another candidate
196+
does. Record both contexts instead of weakening selection to first-wins.
197+
- Group registration creates duplicate Nuxt groups across environments. Fix the
198+
context/plugin registration boundary before adding deduplication flags.
199+
- `build.ssr` does not distinguish the two supported Vite 8 Nuxt contexts.
200+
Capture both resolved configs and revise the classifier; do not fall back to
201+
environment names or setup order.

0 commit comments

Comments
 (0)