feat: improved HTMLElement display in inspector

Akryum · Akryum · commit f2ea4997d865 · 2021-05-29T06:37:48.000+02:00
diff --git a/packages/api/src/api/component.ts b/packages/api/src/api/component.ts
@@ -52,20 +52,22 @@ export interface ComponentPropState extends ComponentStateBase {
 export type ComponentBuiltinCustomStateTypes = 'function' | 'map' | 'set' | 'reference' | 'component' | 'component-definition' | 'router' | 'store'
 
 export interface ComponentCustomState extends ComponentStateBase {
-  value: {
-    _custom: {
-      type: ComponentBuiltinCustomStateTypes | string
-      display?: string
-      tooltip?: string
-      value?: any
+  value: CustomState
+}
+
+export type CustomState = {
+  _custom: {
+    type: ComponentBuiltinCustomStateTypes | string
+    display?: string
+    tooltip?: string
+    value?: any
+    abstract?: boolean
+    file?: string
+    uid?: number
+    readOnly?: boolean
+    /** Configure immediate child fields */
+    fields?: {
       abstract?: boolean
-      file?: string
-      uid?: number
-      readOnly?: boolean
-      /** Configure immediate child fields */
-      fields?: {
-        abstract?: boolean
-      }
     }
   }
 }
diff --git a/packages/shared-utils/src/util.ts b/packages/shared-utils/src/util.ts
@@ -1,12 +1,12 @@
 import path from 'path'
+import { CustomState } from '@vue/devtools-api'
 import { stringifyCircularAutoChunks, parseCircularAutoChunks } from './transfer'
 import {
   getInstanceMap,
   getCustomInstanceDetails,
   getCustomRouterDetails,
   getCustomStoreDetails,
-  isVueInstance,
-  backendInjections
+  isVueInstance
 } from './backend'
 import SharedData from './shared-data'
 import { isChrome, target } from './env'
@@ -196,6 +196,8 @@ function replacer (key) {
       return encodeCache.cache(val, () => getCustomComponentDefinitionDetails(val))
     } else if (val.constructor && val.constructor.name === 'VNode') {
       return `[native VNode <${val.tag}>]`
+    } else if (val instanceof HTMLElement) {
+      return encodeCache.cache(val, () => getCustomHTMLElementDetails(val))
     }
   } else if (Number.isNaN(val)) {
     return NAN
@@ -322,6 +324,26 @@ export function getCustomFunctionDetails (func) {
   }
 }
 
+export function getCustomHTMLElementDetails (value: HTMLElement): CustomState {
+  return {
+    _custom: {
+      type: 'HTMLElement',
+      display: `<span class="opacity-30">&lt;</span><span class="text-blue-500">${value.tagName.toLowerCase()}</span><span class="opacity-30">&gt;</span>`,
+      value: namedNodeMapToObject(value.attributes)
+    }
+  }
+}
+
+function namedNodeMapToObject (map: NamedNodeMap) {
+  const result: any = {}
+  const l = map.length
+  for (let i = 0; i < l; i++) {
+    const node = map.item(i)
+    result[node.name] = node.value
+  }
+  return result
+}
+
 export function getCustomRefDetails (instance, key, ref) {
   let value
   if (Array.isArray(ref)) {
diff --git a/packages/shell-dev-vue3/src/NativeTypes.vue b/packages/shell-dev-vue3/src/NativeTypes.vue
@@ -5,6 +5,8 @@
     <div
       id="aDiv"
       ref="someDiv"
+      class="foo bar"
+      data-testid="some-div"
     />
 
     <p>
@@ -112,7 +114,8 @@ export default {
       multiLineParameterFunction: function (a,
         b,
         c) {},
-      veryLongText
+      veryLongText,
+      someElement: null
     }
   },
 
@@ -125,6 +128,7 @@ export default {
 
   mounted () {
     this.testComponent = this.$refs.component
+    this.someElement = this.$refs.someDiv
   },
 
   methods: {
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -84,7 +84,8 @@ module.exports = {
       path.resolve(__dirname, './packages/app-backend-core/src/**/*.{js,jsx,ts,tsx,vue}'),
       path.resolve(__dirname, './packages/app-backend-vue1/src/**/*.{js,jsx,ts,tsx,vue}'),
       path.resolve(__dirname, './packages/app-backend-vue2/src/**/*.{js,jsx,ts,tsx,vue}'),
-      path.resolve(__dirname, './packages/app-backend-vue3/src/**/*.{js,jsx,ts,tsx,vue}')
+      path.resolve(__dirname, './packages/app-backend-vue3/src/**/*.{js,jsx,ts,tsx,vue}'),
+      path.resolve(__dirname, './packages/shared-utils/src/**/*.{js,jsx,ts,tsx,vue}')
     ]
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -84,7 +84,8 @@ module.exports = {`
`84`	`84`	`path.resolve(__dirname, './packages/app-backend-core/src/*/.{js,jsx,ts,tsx,vue}'),`
`85`	`85`	`path.resolve(__dirname, './packages/app-backend-vue1/src/*/.{js,jsx,ts,tsx,vue}'),`
`86`	`86`	`path.resolve(__dirname, './packages/app-backend-vue2/src/*/.{js,jsx,ts,tsx,vue}'),`
`87`		`- path.resolve(__dirname, './packages/app-backend-vue3/src/*/.{js,jsx,ts,tsx,vue}')`
	`87`	`+ path.resolve(__dirname, './packages/app-backend-vue3/src/*/.{js,jsx,ts,tsx,vue}'),`
	`88`	`+ path.resolve(__dirname, './packages/shared-utils/src/*/.{js,jsx,ts,tsx,vue}')`
`88`	`89`	`]`
`89`	`90`	`}`
`90`	`91`	`}`