Skip to content

Commit

Permalink
feat(applet): improve long-string display in components panel (#419)
Browse files Browse the repository at this point in the history
  • Loading branch information
alexzhang1030 authored Jun 5, 2024
1 parent 064a411 commit b702a92
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 13 deletions.
6 changes: 5 additions & 1 deletion packages/applet/src/components/state/StateFieldViewer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
13 changes: 13 additions & 0 deletions packages/devtools-kit/__tests__/component/format.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})
})
35 changes: 24 additions & 11 deletions packages/devtools-kit/src/core/component/state/format.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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') {
Expand All @@ -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 }
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/applet/src/stores/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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++
}
Expand Down

0 comments on commit b702a92

Please sign in to comment.