[Bug] Does not recognize a component unless it has a root element

[martinszeltins]

It seems that it does not recognize a component unless I add a root element wrapper like a <div> and then it works.

For example, if my component looks like this, then it does not recognize it:

<template>
  <PrimeDropdown
     v-model="appStore.locale"
     :options="locales"
  />
</template>

But if I add a root <div> then it is recognized:

<template>
+  <div>
     <PrimeDropdown
        v-model="appStore.locale"
        :options="locales"
      />
+  </div>
</template>

vue: 3.2.37
vite: 3.0.7
vite-plugin-vue-inspector: 3.3.0

Here is a screencast demo where you can see that as I hover over the Language Switcher it does not recognize it:

Kazam_screencast_00047.mp4

[webfansplz]

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)

[TechAkayy]

@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.

[TechAkayy]

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.

[webfansplz]

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.

[TechAkayy]

Curious to know the outcome, thanks :-)

[ken1691]

+1