fix(client): resolve nested custom object (#167)

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

@@ -0,0 +1,71 @@
+import * as format from '../format'
+import { INFINITY, NAN, NEGATIVE_INFINITY, UNDEFINED } from '../constants'
+
+describe('format: displayText and rawValue can be calculated by formatInspectorStateValue, getRawValue', () => {
+ describe('type: literals', () => {
+ // eslint-disable-next-line test/consistent-test-it
+ test.each([
+ { literal: 'test-string', displayText: 'test-string' },
+ { literal: 123, displayText: 123 },
+ { literal: true, displayText: true },
+ { literal: null, displayText: 'null' },
+ // Tokenlized values
+ { literal: INFINITY, displayText: 'Infinity' },
+ { literal: NAN, displayText: 'NaN' },
+ { literal: NEGATIVE_INFINITY, displayText: '-Infinity' },
+ { literal: UNDEFINED, displayText: 'undefined' },
+ ])('type: %s', (value) => {
+ const displayText = format.formatInspectorStateValue(value.literal)
+ const rawValue = format.getRawValue(value.literal).value
+
+ expect(displayText).toBe(value.displayText)
+ expect(rawValue).toBe(value.literal)
+ })
+ })
+
+ it('type: plain object', () => {
+ const value = { foo: 'bar' }
+ const displayText = format.formatInspectorStateValue(value)
+ const rawValue = format.getRawValue(value).value
+
+ expect(displayText).toBe('Object')
+ expect(rawValue).toEqual(value)
+ })
+
+ it('type: array', () => {
+ const value = ['foo', { bar: 'baz' }]
+ const displayText = format.formatInspectorStateValue(value)
+ const rawValue = format.getRawValue(value).value
+
+ expect(displayText).toBe('Array[2]')
+ expect(rawValue).toEqual(value)
+ })
+
+ describe('type: custom', () => {
+ it('type: common custom', () => {
+ const value = { _custom: { displayText: 'custom-display', value: Symbol(123) } }
+ const displayText = format.formatInspectorStateValue(value)
+ const rawValue = format.getRawValue(value).value
+
+ expect(displayText).toBe(value._custom.displayText)
+ expect(rawValue).toEqual(value._custom.value)
+ })
+
+ it('type: nested custom', () => {
+ const value = {
+ _custom: {
+ displayText: 'custom-display',
+ value: {
+ _custom: { displayText: 'nested-custom-display', value: Symbol(123) },
+ },
+ },
+ }
+
+ const displayText = format.formatInspectorStateValue(value)
+ const rawValue = format.getRawValue(value).value
+
+ expect(displayText).toBe(value._custom.value._custom.displayText)
+ expect(rawValue).toEqual(value._custom.value._custom.value)
+ })
+ })
+})

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

@@ -56,7 +56,9 @@ export function formatInspectorStateValue(value, quotes = false) {
  return result
  }
  else if (type === 'custom') {
- return value._custom.displayText ?? value._custom.display
+ // For digging out nested custom name.
+ const nestedName = value._custom.value?._custom && formatInspectorStateValue(value._custom.value)
+ return nestedName || value._custom.displayText || value._custom.display
  }
  else if (type === 'array') {
  return `Array[${value.length}]`
@@ -89,8 +91,11 @@ export function getRawValue(value: InspectorState['value']) {
  let inherit = {}
  if (isCustom) {
  const data = value as InspectorCustomState
- inherit = data._custom?.fields || {}
- value = data._custom?.value as string
+ const nestedCustom = typeof data._custom?.value === 'object' && '_custom' in data._custom.value
+ ? getRawValue(data._custom?.value)
+ : { inherit: undefined, value: undefined }
+ inherit = nestedCustom.inherit || data._custom?.fields || {}
+ value = nestedCustom.value || data._custom?.value as string
  }
  // @ts-expect-error @TODO: type
  if (value && value._isArray)

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

@@ -5,7 +5,7 @@ export interface InspectorCustomState {
  type?: string
  displayText?: string
  tooltipText?: string
- value?: string
+ value?: string | InspectorCustomState
  stateTypeName?: string
  fields?: {
  abstract?: boolean
@@ -15,7 +15,7 @@ export interface InspectorCustomState {
 
 export interface InspectorState {
  key: string
- value: string | number | Record<string, unknown> | InspectorCustomState | Array<unknown>
+ value: string | number | boolean | null | Record<string, unknown> | InspectorCustomState | Array<unknown>
  type: string
  stateType?: string
  stateTypeName?: string