fix(kit/applet): parse state field types, closes #295

vuejs · Mar 26, 2024 · d4f7bbe · d4f7bbe
1 parent ad832b7
commit d4f7bbe
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/packages/applet/src/components/state/StateFieldViewer.vue b/packages/applet/src/components/state/StateFieldViewer.vue
@@ -68,8 +68,10 @@ const normalizedDisplayedValue = computed(() => {
   }
 
   else {
-    const _value = type.value === 'custom' && !(props.data.value as InspectorCustomState)._custom?.type ? `"${displayedValue.value}"` : (displayedValue.value === '' ? `""` : displayedValue.value)
-    const result = `<span class="${type.value}-state-type">${_value}</span>`
+    const _type = (props.data.value as InspectorCustomState)._custom?.type
+    const _value = type.value === 'custom' && !_type ? `"${displayedValue.value}"` : (displayedValue.value === '' ? `""` : displayedValue.value)
+    const normalizedType = type.value === 'custom' && _type === 'ref' ? getInspectorStateValueType(_value) : type.value
+    const result = `<span class="${normalizedType}-state-type">${_value}</span>`
 
     if (extraDisplayedValue)
       return `${result} <span class="text-gray-500">(${extraDisplayedValue})</span>`

diff --git a/packages/applet/uno.config.ts b/packages/applet/uno.config.ts
@@ -52,10 +52,12 @@ export default defineConfig(mergeConfigs([unoConfig, {
     'string-state-type': 'text-#e74c3c dark:(text-#c41a16)',
     'literal-state-type': 'text-#03c dark:(text-#997fff)',
     'boolean-state-type': 'text-#27ae60 dark:(text-#abebc6)',
+    'null-state-type': 'text-#999',
   }, [/^theme-card-(\w+)$/, $ => `p2 flex gap2 border border-base bg-base items-center rounded min-w-40 min-h-25 justify-center transition-all saturate-0 op50 shadow hover:(op100 bg-${$[1]}/10 text-${$[1]}6 saturate-100)`]],
   safelist: [
     'string-state-type',
     'literal-state-type',
     'boolean-state-type',
+    'null-state-type',
   ],
 }])) as any
diff --git a/packages/devtools-kit/src/core/component/state/format.ts b/packages/devtools-kit/src/core/component/state/format.ts
@@ -6,7 +6,7 @@ import { reviver } from './reviver'
 
 export function getInspectorStateValueType(value, raw = true) {
   const type = typeof value
-  if (value == null || value === UNDEFINED) {
+  if (value == null || value === UNDEFINED || value === 'undefined') {
     return 'null'
   }
   else if (