feat(devtools): add the a11y inspector plugin - #1
Closed
antfubot wants to merge 33 commits into
Closed
Conversation
…compat foundation + dock groups + terminals/messages + ecosystem) (nuxt#1011)
…dation (nuxt#1021) Co-authored-by: Anthony Fu <github@antfu.me>
…ient; fix client RPC registration (nuxt#1023) * fix(devtools): force-register client RPC functions and deprecate extendClientRpc The legacy client RPC proxy registered its event functions (refresh, callHook, onTerminalData, onTerminalExit, navigateTo) via a has()->update()/register() dance that could throw DF0022 ("not registered"). Force-register instead so it is an idempotent override, fixing the errors and making registration robust across (re)connect and integration overrides. `extendClientRpc` now overrides by default (via the forced upsert) and is deprecated in favour of registering on the devframe client context (`getDevToolsRpcClient()` / `getDevToolsClientContext()` from `@vitejs/devtools-kit/client`). Created with the help of an agent. * feat(devtools): expose the Vite DevTools client on NuxtDevtoolsClient Mirror the server-side `nuxt.devtools.devtoolsKit` on the client: the injected `client.devtools` now carries `devtoolsKit`, the connected Vite DevTools RPC client, giving module authors full devframe-native access (register client RPC functions, call server functions, shared state, streaming, scoping) without importing from `@vitejs/devtools-kit/client` themselves. `extendClientRpc`'s deprecation now points at `client.devtools.devtoolsKit?.client.register(...)`. Created with the help of an agent. * feat(devtools): add client-side onDevtoolsReady hook Mirror the server's `onDevtoolsReady` on the client: exported from `@nuxt/devtools-kit/iframe-client`, it runs once the Vite DevTools client is connected and hands back the `DevToolsRpcClient` (`client.devtools.devtoolsKit`), the recommended entry point for client-side integration (register client RPC, call server functions, shared state, streaming, ...). `extendClientRpc`'s deprecation now points at this hook. Created with the help of an agent. * docs(devtools): explain the devframe force-param type-gap cast
…uxt#1022) Co-authored-by: opencode <noreply@opencode.ai> Co-authored-by: Anthony Fu <github@antfu.me>
…gin (nuxt#1034) Co-authored-by: Anthony Fu <github@antfu.me>
Mount @devframes/plugin-a11y into the Nuxt dock group so DevTools surfaces an axe-core accessibility inspector for the running app, gated behind a new devtools.a11y option (enabled by default). Aligns the whole devframe stack on the 0.7.11 / 0.4.5 line, which the plugin's exact devframe peer requires.
Owner
Author
|
Superseded by nuxt#1038 (retargeted to upstream). |
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
3 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.
What
Integrate the
@devframes/plugin-a11yaccessibility inspector into Nuxt DevTools. It mounts a panel in the Nuxt dock group that runs axe-core against the running app, lists WCAG A/AA violations, and highlights the offending element in the page on hover.The panel is enabled by default and can be turned off with
devtools.a11y.enabled = false.Why
DevTools now hosts devframe plugins directly (Data Inspector, Code Server). Accessibility feedback is a natural next panel, and the upstream plugin already provides the scanner, panel, and in-page agent — this wires it into the Nuxt dock group following the same integration pattern.
Notes
setup(ctx)module that builds the devframe definition andmountDevframes it into thenuxtgroup. The plugin's in-page agent (a11yAgentBundlePath) is attached as the dock'sclientScriptso the panel can actually scan the host page.devframepeer requires realigning the whole devframe stack on one line:devframe/@devframes/hub/sibling plugins →0.7.11,@vitejs/devtools(-kit)→0.4.5. The Vite~8.0.16pin is unaffected (@vitejs/devtools@0.4.5keepsvite: "*").This PR was created with the help of an agent.