feat(kit): editable component props (#674)

Author: alexzhang1030

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

@@ -160,14 +160,22 @@ export async function editComponentState(payload: InspectorStateEditorPayload, s
 
   let target: Record<string, unknown> | undefined
 
-  // TODO: props
-
-  // 1. check if is setup
-  if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0]))
+  // 1. check if is props
+  if (Object.keys(instance.props).includes(path[0])) {
+    target = instance.props
+  }
+  // 2. check if is setup
+  else if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0])) {
     target = instance.devtoolsRawSetupState
-  // 2. check if is options
-  if (instance.data && Object.keys(instance.data).includes(path[0]))
+  }
+  // 3. check if is options
+  else if (instance.data && Object.keys(instance.data).includes(path[0])) {
     target = instance.data
+  }
+  else {
+    // 4. fallback
+    target = instance.proxy
+  }
 
   if (target && targetPath) {
     if (state.type === 'object' && type === 'reactive') {

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

@@ -70,6 +70,7 @@ function processProps(instance: VueAppInstance) {
       type: 'props',
       key: camelizeKey,
       value: returnError(() => instance.props[key]),
+      editable: true,
       meta: propDefinition
         ? {
             type: propDefinition.type ? getPropType(propDefinition.type) : 'any',

packages/playground/basic/src/App.vue

@@ -26,6 +26,12 @@
           /hey/123123
         </span>
       </RouterLink>
+      |
+      <RouterLink to="/prop-mutation">
+        <span>
+          Prop mutation
+        </span>
+      </RouterLink>
     </div>
   </div>
 </template>

packages/playground/basic/src/components/PropChild.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = defineProps<{
+  bool: boolean
+  num: number
+  str: string
+  obj: Record<string, any>
+}>()
+</script>
+
+<template>
+  <div>
+    <div>bool: {{ props.bool }}</div>
+    <div>num: {{ props.num }}</div>
+    <div>str: {{ props.str }}</div>
+    <div>obj: {{ props.obj }}</div>
+  </div>
+</template>

packages/playground/basic/src/main.ts

@@ -66,6 +66,11 @@ const routes: RouteRecordRaw[] = [
     component: () => import('./pages/IntervalUpdate.vue'),
     name: 'interval-update',
   },
+  {
+    path: '/prop-mutation',
+    component: () => import('./pages/PropMutation.vue'),
+    name: 'prop-mutation',
+  },
 ]
 
 const router = createRouter({

packages/playground/basic/src/pages/PropMutation.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import PropChild from '../components/PropChild.vue'
+
+const props = {
+  bool: ref(false),
+  num: ref(0),
+  str: ref('hey'),
+  obj: ref({
+    foo: 'bar',
+  }),
+}
+</script>
+
+<template>
+  <div>
+    <div>Prop Page</div>
+    <PropChild
+      v-bind="{
+        bool: props.bool.value,
+        num: props.num.value,
+        str: props.str.value,
+        obj: props.obj.value,
+      }"
+    />
+  </div>
+</template>