feat(vue3): display functional tag (#1698)

Author: konpeki622

packages/app-backend-vue3/src/components/tree.ts

@@ -145,7 +145,15 @@ export class ComponentWalker {
       hasChildren: !!children.length,
       children: [],
       isFragment: isFragment(instance),
-      tags: [],
+      tags: typeof instance.type !== 'function'
+        ? []
+        : [
+            {
+              label: 'functional',
+              textColor: 0x555555,
+              backgroundColor: 0xeeeeee,
+            },
+          ],
     }
 
     // capture children

packages/shell-dev-vue3/src/App.vue

@@ -13,6 +13,7 @@ import Ghost from './Ghost.vue'
 import Other from './Other.vue'
 import SetupRender from './SetupRender.js'
 import Form from './Form.vue'
+import Functional from './Functional.vue'
 import Heavy from './Heavy.vue'
 import Mixins from './Mixins.vue'
 import Animation from './Animation.vue'
@@ -42,6 +43,7 @@ export default {
     Other,
     SetupRender,
     Form,
+    Functional,
     Heavy,
     Mixins,
     Animation,
@@ -104,6 +106,7 @@ export default {
   <Other />
   <SetupRender />
   <Form />
+  <Functional msg="I am functional" />
   <Mixins />
   <SetupScript />
   <SetupDataLike />

packages/shell-dev-vue3/src/Functional.vue

@@ -0,0 +1,14 @@
+<script>
+import { h } from 'vue'
+
+const Functional = (props, context) => {
+  return h('div', context.attrs, props.msg)
+}
+Functional.props = {
+  msg: {
+    type: String,
+  },
+}
+
+export default Functional
+</script>