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,6 @@
+const warn = console.warn
+console.warn = function(...data) {
+  const msg = data[0] || ""
+  if (msg.startsWith("[Vue warn]: Extraneous non-props attributes (data-v-inspector-file, data-v-inspector-line, data-v-inspector-column, data-v-inspector-title)")) return
+  warn(...data)
+}

src/index.ts

@@ -2,7 +2,7 @@ import path from "path"
 import { fileURLToPath } from "url"
 import fs from "fs"
 import { yellow, red } from "kolorist"
-import { normalizePath } from "vite"
+import { IndexHtmlTransformResult, normalizePath } from "vite"
 import type { PluginOption } from "vite"
 import { compileSFCTemplate } from "./compiler"
 import { parseVueRequest } from "./utils"
@@ -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,7 +111,7 @@ 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'` }
@@ -124,7 +131,7 @@ function VitePluginInspector(options: VitePluginInspectorOptions = DEFAULT_INSPE
     transformIndexHtml(html) {
       if (normalizedOptions.appendTo)
         return
-      return {
+      const result: IndexHtmlTransformResult = {
         html,
         tags: [
           {
@@ -137,6 +144,17 @@ function VitePluginInspector(options: VitePluginInspectorOptions = DEFAULT_INSPE
           },
         ],
       }
+      if (normalizedOptions.withComponent) {
+        result.tags.push({
+          tag: "script",
+          injectTo: "body",
+          attrs: {
+            type: "module",
+            src: "/@id/virtual:vue-inspector-path:console.js",
+          },
+        })
+      }
+      return result
     },
   }
 }