fix(devtools-kit): support JSX/TSX components in component inspector#1101
Closed
NikhilVerma wants to merge 3 commits into
Closed
fix(devtools-kit): support JSX/TSX components in component inspector#1101NikhilVerma wants to merge 3 commits into
NikhilVerma wants to merge 3 commits into
Conversation
Two bugs prevented the click-to-inspect picker from working with JSX/TSX components: 1. `inspectFn` only checked `e.target.__vueParentComponent` on the exact clicked element. JSX and functional components often only set this property on their root element, not on every inner child, so clicking a child element produced no match. Fixed by walking up the DOM tree until a component instance is found. 2. `getComponentFileName` only stripped the `.vue` extension when deriving a display name from `__file`. Components in `.jsx`/`.tsx` files showed up with the raw filename (e.g. `MyButton.jsx` instead of `MyButton`). Fixed by handling all three extensions. Also suppresses the `index` name for `index.jsx` and `index.tsx` barrel files, matching the existing behaviour for `index.vue`. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
✅ Deploy Preview for vue-devtools-docs canceled.
|
@vitejs/plugin-vue-jsx marks every Vue component it finds with __hmrId but never sets __file, so the devtools "Open in Editor" button was hidden for all JSX/TSX components (the button is gated on instance.type.__file). Add a post-enforce Vite transform that piggybacks on those __hmrId assignments: for each `LocalName.__hmrId = ...` the plugin has already injected, we prepend `LocalName.__file = "/abs/path/to/file.tsx"`. This makes JSX/TSX components behave identically to SFCs in the component tree panel. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Two follow-up fixes for JSX/TSX component support: 1. Open in Editor did nothing when clicking the icon (devtools-kit) When the Vite plugin is active, __VUE_INSPECTOR__ is already set up with the correct launch-editor-middleware. The chrome-extension branch was bypassing it and falling back to a raw fetch that often failed silently. Now __VUE_INSPECTOR__ is preferred whenever vitePluginDetected is true, regardless of the devtools host. The fetch fallback is kept for cases where no Vite plugin is present, with a clearer console error message. 2. Plain function/arrow TSX components had no file icon (vite) The previous __hmrId piggyback only worked for defineComponent-based components. Plain exports like `export function HomeKpiGrid()` don't get __hmrId from @vitejs/plugin-vue-jsx. Added a second injection that derives the component name from the file name (PascalCase convention) and injects __file on it as a safe guard expression. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Author
|
Closing to reopen from a clean branch — follow-up open-in-editor work that was pushed to this branch is unverified and belongs in a separate PR. |
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
1 participant
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.
Summary
The component inspector had two bugs that broke JSX/TSX support:
Click-to-select picker didn't work for JSX/TSX components (
component-highlighter/index.ts)inspectFnonly checkede.target.__vueParentComponenton the exact hovered element. JSX and functional components typically only set__vueParentComponenton their root DOM element, not every descendant. Fixed by walking up the DOM tree until a component instance is found."Open in Editor" button missing for JSX/TSX components (
packages/vite/src/vite.ts)@vitejs/plugin-vue-jsxinjects__hmrIdon Vue components it identifies but never injects__file. The devtools "Open in Editor" button is gated oninstance.type.__file, so it was always hidden for JSX/TSX. Fixed by adding apost-enforce Vite transform that piggybacks on the__hmrIdassignments already injected by the vue-jsx plugin: for eachLocalName.__hmrId = ..., we prependLocalName.__file = "/abs/path/to/file.tsx".Component names mangled for JSX/TSX files (
component/utils/index.ts)getComponentFileNameonly stripped.vuefrom__filepaths, so.jsx/.tsxcomponents showed their raw filename (e.g.MyButton.jsxinstead ofMyButton). Fixed by handling all three extensions. Also extends theindexname suppression toindex.jsx/index.tsxbarrel files.Changes
packages/vite/src/vite.ts— post-transform plugin to inject__fileon JSX/TSX components recognised by@vitejs/plugin-vue-jsxpackages/devtools-kit/src/core/component-highlighter/index.ts— walk up the DOM tree ininspectFnpackages/devtools-kit/src/core/component/utils/index.ts— handle.jsx/.tsxextensions in name resolutionTests
__tests__/component/utils.test.ts— unit tests forgetComponentName/getInstanceNamewith.jsx/.tsxfiles__tests__/component/highlighter.test.ts— DOM-level tests verifying the highlight overlay is created when__vueParentComponentis only on a parent element (the JSX case)Test plan
pnpm test— all tests pass