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

vuejs · Feb 10, 2022 · 89688d5 · 89688d5
1 parent 27d2b50
commit 89688d5
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/packages/app-backend-vue3/src/components/tree.ts b/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

diff --git a/packages/shell-dev-vue3/src/App.vue b/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 />

diff --git a/packages/shell-dev-vue3/src/Functional.vue b/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>