From d4f7bbea47ced96a61aa488653ae87707c00ea2c Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Tue, 26 Mar 2024 23:23:08 +0800
Subject: [PATCH] fix(kit/applet): parse state field types, closes #295

---
 packages/applet/src/components/state/StateFieldViewer.vue | 6 ++++--
 packages/applet/uno.config.ts                             | 2 ++
 packages/devtools-kit/src/core/component/state/format.ts  | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/applet/src/components/state/StateFieldViewer.vue b/packages/applet/src/components/state/StateFieldViewer.vue
index 3eb4bc03..16f87cc8 100644
--- 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
index 46cb866e..007e5138 100644
--- 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
index 6d63702b..3306f467 100644
--- 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 (