feat: support inspect component

Author: tazyong

README.md

@@ -97,6 +97,12 @@ interface VitePluginInspectorOptions {
   */
   vue?: 2 | 3
 
+  /**
+   * Inspect with vue component
+   * @default true
+   */
+  withComponent?: boolean
+
   /**
   * Default enable state
   * @default false

package.json

@@ -19,6 +19,7 @@
   "files": [
     "dist",
     "src/load.js",
+    "src/console.js",
     "src/Overlay.vue"
   ],
   "exports": {

src/compiler/template.ts

@@ -13,9 +13,10 @@ interface CompileSFCTemplateOptions {
   code: string
   id: string
   type: "template" | "jsx"
+  withComponent: boolean
 }
 export async function compileSFCTemplate(
-  { code, id, type }: CompileSFCTemplateOptions,
+  { code, id, type, withComponent }: CompileSFCTemplateOptions,
 ) {
   const s = new MagicString(code)
   const { base } = path.parse(id)
@@ -28,7 +29,7 @@ export async function compileSFCTemplate(
           nodeTransforms: [
             (node) => {
               if (node.type === 1) {
-                if (node.tagType === 0 && !EXCLUDE_TAG.includes(node.tag)) {
+                if ((withComponent ? node.tagType < 2 : node.tagType === 0) && !EXCLUDE_TAG.includes(node.tag)) {
                   if (node.loc.source.includes("data-v-inspector-file")) return
 
                   const insertPosition = node.loc.start.offset + node.tag.length + 1

src/console.js

@@ -0,0 +1,20 @@
+const warn = console.warn
+console.warn = function (...data) {
+  const skipMsgPrefix = "[Vue warn]: Extraneous non-props attributes "
+  let msg = data[0] || ""
+  if (msg.startsWith(skipMsgPrefix)) {
+    msg = msg.replace(/\([^)]+\)/, function (match) {
+      const attributes = match
+        .slice(1, -1)
+        .split(', ')
+        .filter(function (item) {
+          return !/^data-v-inspector-(file|line|column|title)$/.test(item)
+        })
+        .join(', ')
+      return '(' + attributes + ')'
+    })
+    if (msg.slice(skipMsgPrefix.length).startsWith('()')) return
+    if (msg) data[0] = msg
+  }
+  warn(...data)
+}

src/index.ts

@@ -20,6 +20,12 @@ export interface VitePluginInspectorOptions {
   */
   vue?: 2 | 3
 
+  /**
+   * Inspect with vue component
+   * @default true
+   */
+  withComponent?: boolean
+
   /**
   * Default enable state
   * @default false
@@ -60,6 +66,7 @@ export interface VitePluginInspectorOptions {
 
 const DEFAULT_INSPECTOR_OPTIONS: VitePluginInspectorOptions = {
   vue: 3,
+  withComponent: true,
   enabled: false,
   toggleComboKey: process.platform === "win32" ? "control-shift" : "meta-shift",
   toggleButtonVisibility: "active",
@@ -104,10 +111,15 @@ function VitePluginInspector(options: VitePluginInspectorOptions = DEFAULT_INSPE
       const isTpl = filename.endsWith(".vue") && query.type !== "style"
 
       if (isJsx || isTpl)
-        return compileSFCTemplate({ code, id: filename, type: isJsx ? "jsx" : "template" })
+        return compileSFCTemplate({ code, id: filename, type: isJsx ? "jsx" : "template", withComponent: normalizedOptions.withComponent })
 
-      if (normalizedOptions.appendTo && filename.endsWith(normalizedOptions.appendTo))
-        return { code: `${code}\nimport 'virtual:vue-inspector-path:load.js'` }
+      if (normalizedOptions.appendTo && filename.endsWith(normalizedOptions.appendTo)) {
+        const libs = ["import 'virtual:vue-inspector-path:load.js'"]
+        if (normalizedOptions.withComponent) {
+          libs.push("import 'virtual:vue-inspector-path:console.js'")
+        }
+        return `${code}\n${libs.join('\n')}`
+      }
 
       return code
     },
@@ -124,19 +136,27 @@ function VitePluginInspector(options: VitePluginInspectorOptions = DEFAULT_INSPE
     transformIndexHtml(html) {
       if (normalizedOptions.appendTo)
         return
-      return {
-        html,
-        tags: [
-          {
-            tag: "script",
-            injectTo: "body",
-            attrs: {
-              type: "module",
-              src: "/@id/virtual:vue-inspector-path:load.js",
-            },
+      const tags = [
+        {
+          tag: "script",
+          injectTo: "body" as const,
+          attrs: {
+            type: "module",
+            src: "/@id/virtual:vue-inspector-path:load.js",
+          },
+        },
+      ]
+      if (normalizedOptions.withComponent) {
+        tags.push({
+          tag: "script",
+          injectTo: "body",
+          attrs: {
+            type: "module",
+            src: "/@id/virtual:vue-inspector-path:console.js",
           },
-        ],
+        })
       }
+      return { html, tags }
     },
   }
 }