[Bug] Does not recognize a component unless it has a root element about vite-plugin-vue-inspector HOT 6 OPEN

I was studying the source-dom mapping techniques and noticed Johnson's vue-preview (previously @volar/preview) https://twitter.com/johnsoncodehk/status/1507024137901916161 is also using a similar solution of using vNode* events https://github.com/johnsoncodehk/vue-preview/blob/master/packages/core/bin/vite.js#L35, so this approach is promising.

from vite-plugin-vue-inspector.

I was studying the source-dom mapping techniques and noticed Johnson's vue-preview (previously @volar/preview) https://twitter.com/johnsoncodehk/status/1507024137901916161 is also using a similar solution of using vNode* events https://github.com/johnsoncodehk/vue-preview/blob/master/packages/core/bin/vite.js#L35, so this approach is promising.

Thanks for the reference and suggestion· We actually discussed it with the team before, I think we need to rehash this and resolve it.

from vite-plugin-vue-inspector.

This is a current implementation limitation. We injected a data-v-inspector attribute into the element.If we turn on injection for the component nodes, it'll affects the injection of root element inside the component.This is a point of conflict, i'll thinking about and choose one, it depends on which one is more helpful to the developer.

By default, everything in $attrs will be automatically inherited on the component's root element if there is only a single root element. (https://vuejs.org/api/component-instance.html#attrs)

from vite-plugin-vue-inspector.

@webfansplz , how about using onVnodeMounted instead, I guess it doesn't fall-through, in fact, in the rendered dom, the attributes won't show up at all (and shall be clean) if the mapping is maintained elsewhere, for eg, a windows object.

<template>
  <PrimeDropdown
     v-model="appStore.locale"
     :options="locales"
     :onVnodeMounted="pgUpdateElCache(/* file, line no, pos */)" // Maintain the source-dom mapping on some windows object
  />
</template>

Usage references:
https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html#_3-x-syntax
vuejs/core#5219 (comment)
https://juejin.cn/post/7174568239903539236
vuejs/core#2969 (comment)
vuejs/core#4345 (comment)

If this is a potential solution, then the next challenge is how to handle & avoid duplicate usage of onVnodeMounted (or @vue:mounted), if the user by any chance have already used it.

from vite-plugin-vue-inspector.

Curious to know the outcome, thanks :-)

from vite-plugin-vue-inspector.

+1

from vite-plugin-vue-inspector.