fix(applet): make sure a.b property displays/edits as expected (#353)

Author: Azurewarth0920

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

@@ -46,7 +46,7 @@ const buttonClass = computed(() => ({
 
 function quickEdit(v: unknown, remove: boolean = false) {
   editInspectorState({
-    path: props.data.key.split('.'),
+    path: props.data.path || [props.data.key],
     inspectorId: state.value.inspectorId,
     type: props.data.stateType!,
     nodeId: state.value.nodeId,

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

@@ -45,15 +45,9 @@ const fieldsCount = computed(() => {
   else
     return 0
 })
-
+const normalizedPath = computed(() => props.data.path || [props.data.key])
 // normalized display key
-const normalizedDisplayedKey = computed(() => {
-  const key = props.data.key
-  const lastDotIndex = key.lastIndexOf('.')
-  if (lastDotIndex === -1)
-    return key
-  return key.slice(lastDotIndex + 1)
-})
+const normalizedDisplayedKey = computed(() => normalizedPath.value[normalizedPath.value.length - 1])
 
 // normalized display value
 const normalizedDisplayedValue = computed(() => {
@@ -90,7 +84,8 @@ const normalizedDisplayedChildren = computed(() => {
   if (isArray(value)) {
     const sliced = value.slice(0, limit.value)
     return sliced.map((item, i) => ({
-      key: `${props.data.key}.${i}`,
+      key: i.toString(),
+      path: [...normalizedPath.value, i.toString()],
       value: item,
       ...inherit,
       editable: props.data.editable && !isUneditableType,
@@ -99,7 +94,8 @@ const normalizedDisplayedChildren = computed(() => {
   }
   else if (isObject(value)) {
     displayedChildren = Object.keys(value).slice(0, limit.value).map(key => ({
-      key: `${props.data.key}.${key}`,
+      key,
+      path: [...normalizedPath.value, key],
       value: value[key],
       ...inherit,
       editable: props.data.editable && !isUneditableType,
@@ -137,7 +133,7 @@ watch(() => editing.value, (v) => {
 function submit() {
   const data = props.data
   editInspectorState({
-    path: data.key.split('.'),
+    path: normalizedPath.value,
     inspectorId: state.value.inspectorId,
     type: data.stateType!,
     nodeId,
@@ -163,10 +159,8 @@ function addNewProp(type: EditorAddNewPropType) {
 
 function submitDrafting() {
   const data = props.data
-  const path = data.key.split('.')
-  path.push(draftingNewProp.value.key)
   editInspectorState({
-    path,
+    path: [...normalizedPath.value, draftingNewProp.value.key],
     inspectorId: state.value.inspectorId,
     type: data.stateType!,
     nodeId,

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

@@ -17,6 +17,7 @@ export interface InspectorState {
   key: string
   value: string | number | boolean | null | Record<string, unknown> | InspectorCustomState | Array<unknown>
   type: string
+  path: string[]
   stateType?: string
   stateTypeName?: string
   meta?: Record<string, boolean | string>

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

@@ -3,14 +3,15 @@ import { computed, ref } from 'vue'
 
 export const useAppStore = defineStore('app', () => {
   const count = ref(120)
-  const map = ref(new Map([['a', 1], ['b', 2]]))
+  const map = ref(new Map([['a', 1], ['b', 2], ['c.test', 3]]))
   const set = ref(new Set([1, 2, 3]))
+  const obj = ref({ 'foo.test': 1 })
   function increment() {
     count.value++
   }
   const doubledCount = computed(() => count.value * 2)
 
-  return { count, doubledCount, increment, map, set }
+  return { count, doubledCount, increment, map, set, obj }
 })
 
 export const useCounterStore = defineStore('counter', () => {