|
| 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