fix(devtools-kit): support JSX/TSX components in component inspector

[NikhilVerma]

Summary

The "Click on a component to select it" picker did not work for JSX/TSX components. Two separate bugs caused this:

Bug 1 — DOM tree walking (component-highlighter/index.ts)

inspectFn only checked e.target.__vueParentComponent on the exact element the cursor was over. JSX and functional components typically only set __vueParentComponent on their root DOM element, not every descendant. Hovering over a child element found nothing and the highlight never appeared.

Fixed by walking up the DOM tree until an element with __vueParentComponent is found.

Bug 2 — Component name resolution (component/utils/index.ts)

getComponentFileName used basename(file, '.vue') unconditionally, so components whose __file pointed to a .jsx or .tsx path kept the raw extension in their display name (e.g. MyButton.jsx instead of MyButton).

Fixed by handling .jsx and .tsx alongside .vue. Also extends the existing index.vue suppression to index.jsx / index.tsx barrel files.

Changes

• packages/devtools-kit/src/core/component-highlighter/index.ts — walk up the DOM tree in inspectFn
• packages/devtools-kit/src/core/component/utils/index.ts — strip .jsx/.tsx extensions in getComponentFileName; suppress index name for JSX/TSX barrel files

Tests

• __tests__/component/utils.test.ts — unit tests for getComponentName / getInstanceName with .jsx and .tsx files
• __tests__/component/highlighter.test.ts — DOM-level tests verifying the highlight overlay is created when __vueParentComponent is only on a parent element (the JSX case)

Test plan

• pnpm test — all existing tests pass, 18 new tests added
• Verified the component picker highlights JSX/TSX components on hover and selects on click
• Verified existing SFC component behaviour is unaffected

[netlify]

✅ Deploy Preview for vue-devtools-docs canceled.

Name	Link
🔨 Latest commit	ad51a07
🔍 Latest deploy log	https://app.netlify.com/projects/vue-devtools-docs/deploys/6a0a77477242930008773b47

[skirtles-code]

I've been struggling to reproduce the original problem that this PR fixes. In my testing it seems that JSX/TSX and functional components all work as expected.

Could you give some guidance on how to reproduce the problem? I probably just need an example of a component that fails.

JSX and functional components typically only set __vueParentComponent on their root DOM element, not every descendant.

I've not been able to observe this myself.

__vueParentComponent is set by Vue core when mounting an element for a VNode. It's not clear to me why this wouldn't work for descendant elements in JSX and functional components.

There is an edge case involving v-html/innerHTML not setting __vueParentComponent, but that applies to .vue components too, so that doesn't seem to be the same issue you're describing.

so components whose __file pointed to a .jsx or .tsx

I'm unclear how this would happen. __file is set by the SFC compiler, so it should only be relevant to .vue files. When working with .jsx or .tsx this wouldn't normally be set.

For what it's worth, I was testing with a project created using create-vue. Maybe there's something related to project setup that impacts this.

Hopefully this will become clear once you've shared an example.

Thanks.