feat: inspect external component (#91)

Author: JianJroh

packages/core/src/Overlay.vue

@@ -8,7 +8,13 @@ const KEY_IGNORE = 'data-v-inspector-ignore'
 const KEY_PROPS_DATA = '__v_inspector'
 
 function getData(el) {
-  return el?.__vnode?.props?.[KEY_PROPS_DATA] ?? el?.getAttribute?.(KEY_DATA)
+  return el?.__vnode?.props?.[KEY_PROPS_DATA] ?? getComponentData(el) ?? el?.getAttribute?.(KEY_DATA)
+}
+
+function getComponentData(el) {
+  const ctxVNode = el?.__vnode?.ctx?.vnode
+  if (ctxVNode?.el === el)
+    return ctxVNode?.props?.[KEY_PROPS_DATA]
 }
 
 export default {

packages/core/src/compiler/template.ts

@@ -30,7 +30,7 @@ export async function compileSFCTemplate(
           nodeTransforms: [
             (node) => {
               if (node.type === 1) {
-                if (node.tagType === 0 && !EXCLUDE_TAG.includes(node.tag)) {
+                if ((node.tagType === 0 || node.tagType === 1) && !EXCLUDE_TAG.includes(node.tag)) {
                   if (node.loc.source.includes(KEY_DATA))
                     return
 

packages/core/src/index.ts

@@ -259,7 +259,7 @@ function VitePluginInspector(options: VitePluginInspectorOptions = DEFAULT_INSPE
         const fn = new Set<string>()
         const s = new MagicString(code)
 
-        s.replace(/(createElementVNode|createVNode|createElementBlock) as _\1,?/g, (_, name) => {
+        s.replace(/(createElementVNode|createVNode|createElementBlock|createBlock) as _\1,?/g, (_, name) => {
           fn.add(name)
           return ''
         })

packages/playground/vue3/src/App.vue

@@ -1,11 +1,14 @@
 <script lang="ts">
 import Hi from './Hi.vue'
 import Welcome from './Welcome'
+import ExternalComp from './ExternalComp.vue'
+
 export default {
   name: 'App',
   components: {
     Hi,
     Welcome,
+    ExternalComp,
   },
 }
 </script>
@@ -15,6 +18,7 @@ export default {
     <div>
       <Hi />
       <Welcome />
+      <ExternalComp />
       <!--  -->
       <!--  -->
       <!--  -->

packages/playground/vue3/src/ExternalComp.vue

@@ -0,0 +1,36 @@
+<!-- eslint-disable vue/one-component-per-file -->
+<script lang="ts" setup>
+import { defineComponent, h } from 'vue'
+
+// Mock external import like this: import { Card, Title,Content } from '@ui-lib'
+const Card = defineComponent({
+  render() {
+    return h('div', {
+      style: 'border: 1px solid #eee;padding: 32px',
+    }, this.$slots)
+  },
+})
+
+const Title = defineComponent({
+  render() {
+    return h('div', {
+      style: 'color: darkolivegreen',
+    }, this.$slots)
+  },
+})
+
+const Content = defineComponent({
+  render() {
+    return h('p', {
+      style: 'color: darkseagreen',
+    }, this.$slots)
+  },
+})
+</script>
+
+<template>
+  <Card>
+    <Title>External component</Title>
+    <Content>content</Content>
+  </Card>
+</template>