feat(components): display refs

Akryum · Akryum · commit 8b2360e60c21 · 2021-01-30T00:17:08.000+01:00
diff --git a/packages/app-backend-vue3/src/components/data.ts b/packages/app-backend-vue3/src/components/data.ts
@@ -24,7 +24,8 @@ async function getInstanceState (instance) {
     processComputed(instance),
     processAttrs(instance),
     processProvide(instance),
-    processInject(instance)
+    processInject(instance),
+    processRefs(instance)
   )
 }
 
@@ -248,6 +249,15 @@ function processInject (instance) {
   }))
 }
 
+function processRefs (instance) {
+  return Object.keys(instance.refs)
+    .map(key => ({
+      type: 'refs',
+      key,
+      value: instance.refs[key]
+    }))
+}
+
 export function editState ({ componentInstance, path, state }: HookPayloads[Hooks.EDIT_COMPONENT_STATE], ctx: BackendContext) {
   let target: any
   const targetPath: string[] = path.slice()
diff --git a/packages/shell-dev-vue3/src/Nested.vue b/packages/shell-dev-vue3/src/Nested.vue
@@ -11,16 +11,29 @@ export default {
       type: Number,
       default: 4
     }
+  },
+
+  data () {
+    return {
+      childRefs: []
+    }
+  },
+
+  beforeUpdate () {
+    this.childRefs = []
   }
 }
 </script>
 
 <template>
   <div>
-    <h3>Nest children</h3>
+    <h3 ref="title">
+      Nest children
+    </h3>
     <Child
       v-for="i in count"
       :key="i"
+      :ref="target => target && childRefs.push(target)"
     />
     <div>
       <Child
