feat(core): shared-iframe soft navigation (devframe 0.7.11)#464
Merged
Conversation
Implement the Vite DevTools UI contract for devframe's shared-iframe soft-nav feature (devframes/devframe#128). An iframe dock flagged `subTabs` becomes an anchor that owns one live iframe (its `frameId`); each tab the embedded app reports over the `devframe:frame-nav` postMessage protocol surfaces as its own client-only member dock that shares that iframe and switches views without a reload. - Bump the devframe family to 0.7.11 (hub's strict `devframe` peer moves the whole family in lockstep); adapt the kit to json-render dropping `upstreamVersion` from the view ref. - Kit: re-export the hub frame-nav adapter + protocol types under the kit's `DevTools*` names, and the `NavTarget` / `FrameSubTabsConfig` iframe-entry types. - Core: key iframe panes by `frameId` so an anchor and its members share one kept-alive iframe, guarding the switch handoff on `pane.target`; auto-attach the frame-nav adapter for `subTabs` anchors (one per `frameId`, torn down on removal). Client-dock registration now materializes its DockEntryState eagerly so the adapter can subscribe to activation synchronously, and clears the selection when the active member is removed.
@vitejs/devtools
@vitejs/devtools-kit
@vitejs/devtools-oxc
@vitejs/devtools-rolldown
@vitejs/devtools-vite
@vitejs/devtools-vitest
commit: |
Replace the four faked Nuxt group iframes (all pointing at the debug dashboard) with a single `subTabs` anchor dock backed by a real mock Nuxt DevTools SPA. The SPA (`mock-nuxt-devtools.vue`) is a self-contained page with its own internal tab rail that ships the ~40-line `devframe:frame-nav` postMessage shim: it announces its tab manifest, answers `navigate`, and reports `navigated` on in-app clicks. The frame-nav adapter materializes one grouped dock per reported tab (Overview / Pages / Components / Modules), all sharing one live iframe and soft-navigating between views with no reload — dogfooding the shared-iframe soft-navigation feature end to end in the core playground.
antfubot
added a commit
to antfubot/devtools-1
that referenced
this pull request
Jul 23, 2026
Replace the per-tab `/embed/` iframes (which deep-loaded client routes and 404'd) with the shared-iframe soft-navigation model from devframe#128 / vitejs/devtools#464. Register a single `subTabs` anchor iframe under the Nuxt group that loads the client root once; a client-side `devframe:frame-nav` postMessage shim announces one member dock per tab (from useAllTabs, carrying its category as an in-group sub-category) and soft-navigates within that one iframe. No deep-path loads, no Node-side tab list. Upgrades @vitejs/devtools + @vitejs/devtools-kit to ^0.4.5 and the devframe family to ^0.7.11.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Implements the Vite DevTools UI contract for devframe's shared-iframe soft-navigation feature — the downstream half of devframes/devframe#128, which shipped the hub side in devframe v0.7.11 and hands the viewer contract to Vite DevTools (§6 / §11 of the design spec).
A multi-tab integration (e.g. a devtool with its own Modules / Timeline / Plugins views inside one SPA) can now surface each internal tab as its own DevTools dock while all of them share one live iframe and switch views by client-side (soft) navigation, with no reload.
What changed
^0.7.11(hub's strictdevframe: "0.7.11"peer moves the whole family in lockstep). Adapt the kit to json-render 0.7.11 droppingupstreamVersionfrom the view ref (it was vestigial — the client only reads_stateKey).attachDevToolsFrameNavplus its protocol types/constants underDevTools*names, and re-export theNavTarget/FrameSubTabsConfigiframe-entry types.ViewIframe.vuekeys iframe panes byframeId ?? id, so an anchor and its members share one kept-alive iframe (§6.1); the unmount is guarded onpane.targetso the switch handoff is order-independent.state/context.tsauto-attaches the hub frame-nav adapter forsubTabsanchors when their iframe mounts — one adapter perframeId, torn down on removal — replicating hub'smaybeAttachFrameNavsince core runs its own dock machinery (§6.2 / §7). Client-dockregisternow materializes itsDockEntryStateeagerly (the adapter subscribes toentry:activatedsynchronously right after registering), anddisposeclears the selection when the active member vanishes (§7.5).docs/kit/dock-system.md, 7 new tests exercising the adapter attach + bidirectional nav loop, and regenerated API export snapshots.The complementary embedded-app
postMessagenav shim (e.g. for Nuxt DevTools) lives in its own repo per the spec.Gates:
pnpm lint && pnpm test && pnpm typecheck && pnpm buildall pass (314 tests, +7 new).Linked Issues
Implements the downstream contract from devframes/devframe#128 (devframe v0.7.11).
Additional context
Reviewers may want to focus on the pane-keying / unmount-race guard in
ViewIframe.vueand the eager client-dock state creation incontext.ts, which is the seam that lets the hub adapter subscribe to member activation synchronously.This PR was created with the help of an agent.