feat(applet): improve long-string display in components panel (#419)

Author: alexzhang1030

packages/applet/src/components/state/StateFieldViewer.vue

@@ -23,7 +23,11 @@ const props = defineProps<{
 const STATE_FIELDS_LIMIT_SIZE = 30
 const limit = ref(STATE_FIELDS_LIMIT_SIZE)
 // display value
-const displayedValue = computed(() => formatInspectorStateValue(props.data.value))
+const displayedValue = computed(() => formatInspectorStateValue(props.data.value, false, {
+  customClass: {
+    string: 'max-w-120 truncate',
+  },
+}))
 const type = computed(() => getInspectorStateValueType(props.data.value))
 const raw = computed(() => getRaw(props.data.value))
 const { expanded, toggleExpanded } = useToggleExpanded()

packages/devtools-kit/__tests__/component/format.test.ts

@@ -124,3 +124,16 @@ describe('format: toSubmit', () => {
     expect(serialized).toStrictEqual(value.target)
   })
 })
+
+describe('format: customClass', () => {
+  it.each([
+    { value: 'string-value', target: '<span class="custom-class">string-value</span>' },
+  ])('value: $value should be serialized to target with custom class', (value) => {
+    const serialized = format.formatInspectorStateValue(value.value, false, {
+      customClass: {
+        string: 'custom-class',
+      },
+    })
+    expect(serialized).toStrictEqual(value.target)
+  })
+})

packages/devtools-kit/src/core/component/state/format.ts

@@ -46,7 +46,11 @@ export function getInspectorStateValueType(value, raw = true) {
   }
 }
 
-export function formatInspectorStateValue(value, quotes = false) {
+export function formatInspectorStateValue(value, quotes = false, options?: {
+  // Support more types if needed
+  customClass?: Partial<Record<'string', string>>
+}) {
+  const { customClass } = options ?? {}
   let result
   const type = getInspectorStateValueType(value, false)
   if (type !== 'custom' && value?._custom)
@@ -58,7 +62,7 @@ export function formatInspectorStateValue(value, quotes = false) {
   }
   else if (type === 'custom') {
     // For digging out nested custom name.
-    const nestedName = value._custom.value?._custom && formatInspectorStateValue(value._custom.value)
+    const nestedName = value._custom.value?._custom && formatInspectorStateValue(value._custom.value, quotes, options)
     return nestedName || value._custom.displayText || value._custom.display
   }
   else if (type === 'array') {
@@ -72,21 +76,30 @@ export function formatInspectorStateValue(value, quotes = false) {
   }
   else if (typeof value === 'string') {
     const typeMatch = value.match(rawTypeRE)
-    if (typeMatch)
-      value = escape(typeMatch[1])
-
-    else if (quotes)
-      value = `<span>"</span>${escape(value)}<span>"</span>`
+    if (typeMatch) {
+      value = escapeString(typeMatch[1])
+    }
 
-    else
-      value = escape(value)
+    else if (quotes) {
+      value = `<span>"</span>${
+        customClass?.string ? `<span class=${customClass.string}>${escapeString(value)}</span>` : escapeString(value)
+      }<span>"</span>`
+    }
 
-    value = value.replace(/ /g, '&nbsp;')
-      .replace(/\n/g, '<span>\\n</span>')
+    else {
+      value = customClass?.string
+        ? `<span class="${customClass?.string ?? ''}">${escapeString(value)}</span>`
+        : escapeString(value)
+    }
   }
   return value
 }
 
+function escapeString(value: string) {
+  return escape(value).replace(/ /g, '&nbsp;')
+    .replace(/\n/g, '<span>\\n</span>')
+}
+
 export function getRaw(value: InspectorState['value']): {
   value: object | string | number | boolean | null
   inherit: {} | { abstract: true }

packages/playground/applet/src/stores/index.ts

@@ -15,7 +15,7 @@ export const useAppStore = defineStore('app', () => {
 
 export const useCounterStore = defineStore('counter', () => {
   const count = ref(10)
-  const name = ref('webfansplz!!!')
+  const name = ref('webfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplzwebfansplz!!!')
   function increment() {
     count.value++
   }