From 70992d5cf40b832aed1018ac99398d67b0c4dbb2 Mon Sep 17 00:00:00 2001
From: Rahul Kadyan <hi@znck.me>
Date: Wed, 1 Aug 2018 13:02:08 +0200
Subject: [PATCH 1/8] feat: Display functional components in component tree

---
 package.json                                  |  1 +
 src/backend/highlighter.js                    | 15 +++--
 src/backend/index.js                          | 67 ++++++++++++++++---
 .../views/components/ComponentInstance.vue    |  9 +++
 yarn.lock                                     |  4 ++
 5 files changed, 81 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 9dcfe3f14..6a4c55c0c 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@vue/ui": "^0.5.1",
     "autoprefixer": "^9.0.2",
     "circular-json-es6": "^2.0.1",
+    "cuid": "^2.1.1",
     "lodash.debounce": "^4.0.8",
     "lodash.groupby": "^4.6.0",
     "uglifyjs-webpack-plugin": "^1.1.4",
diff --git a/src/backend/highlighter.js b/src/backend/highlighter.js
index a0834f01b..5b0c2430f 100644
--- a/src/backend/highlighter.js
+++ b/src/backend/highlighter.js
@@ -1,4 +1,4 @@
-import { inDoc, classify } from '../util'
+import { inDoc, classify, getComponentName } from '../util'
 import { getInstanceName } from './index'
 import SharedData from 'src/shared-data'
 
@@ -28,10 +28,10 @@ overlay.appendChild(overlayContent)
 
 export function highlight (instance) {
   if (!instance) return
-  const rect = getInstanceRect(instance)
+  const rect = getInstanceOrVnodeRect(instance)
   if (rect) {
     let content = ''
-    let name = getInstanceName(instance)
+    let name = instance.fnContext ? getComponentName(instance.fnOptions) : getInstanceName(instance)
     if (SharedData.classifyComponents) name = classify(name)
     if (name) content = `<span style="opacity: .6;">&lt;</span>${name}<span style="opacity: .6;">&gt;</span>`
     showOverlay(rect, content)
@@ -55,14 +55,15 @@ export function unHighlight () {
  * @return {Object}
  */
 
-export function getInstanceRect (instance) {
-  if (!inDoc(instance.$el)) {
+export function getInstanceOrVnodeRect (instance) {
+  const el = instance.$el || instance.elm
+  if (!inDoc(el)) {
     return
   }
   if (instance._isFragment) {
     return getFragmentRect(instance)
-  } else if (instance.$el.nodeType === 1) {
-    return instance.$el.getBoundingClientRect()
+  } else if (el.nodeType === 1) {
+    return el.getBoundingClientRect()
   }
 }
 
diff --git a/src/backend/index.js b/src/backend/index.js
index f190753de..d12f1a38a 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -1,13 +1,14 @@
 // This is the backend that is injected into the page that a Vue app lives in
 // when the Vue Devtools panel is activated.
 
-import { highlight, unHighlight, getInstanceRect } from './highlighter'
+import { highlight, unHighlight, getInstanceOrVnodeRect } from './highlighter'
 import { initVuexBackend } from './vuex'
 import { initEventsBackend } from './events'
 import { findRelatedComponent } from './utils'
 import { stringify, classify, camelize, set, parse, getComponentName } from '../util'
 import ComponentSelector from './component-selector'
 import SharedData, { init as initSharedData } from 'src/shared-data'
+import cuid from 'cuid'
 
 // hook should have been injected before this executes.
 const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
@@ -15,6 +16,7 @@ const rootInstances = []
 const propModes = ['default', 'sync', 'once']
 
 export const instanceMap = window.__VUE_DEVTOOLS_INSTANCE_MAP__ = new Map()
+export const functionalVnodeMap = window.__VUE_DEVTOOLS_FUNCTIONAL_VNODE_MAP__ = new Map()
 const consoleBoundInstances = Array(5)
 let currentInspectedId
 let bridge
@@ -36,6 +38,7 @@ export function initBackend (_bridge) {
 }
 
 function connect () {
+  console.log('BACKEND: ', hook.Vue)
   initSharedData({
     bridge,
     Vue: hook.Vue
@@ -68,7 +71,7 @@ function connect () {
   })
 
   bridge.on('scroll-to-instance', id => {
-    const instance = instanceMap.get(id)
+    const instance = findInstanceOrVnode(id)
     instance && scrollIntoView(instance)
   })
 
@@ -79,7 +82,7 @@ function connect () {
 
   bridge.on('refresh', scan)
 
-  bridge.on('enter-instance', id => highlight(instanceMap.get(id)))
+  bridge.on('enter-instance', id => highlight(findInstanceOrVnode(id)))
 
   bridge.on('leave-instance', unHighlight)
 
@@ -143,6 +146,15 @@ function connect () {
   scan()
 }
 
+export function findInstanceOrVnode (id) {
+  if (/:functional:/.test(id)) {
+    const [refId] = id.split(':functional:')
+
+    return functionalVnodeMap.get(refId)[id]
+  }
+  return instanceMap.get(id)
+}
+
 /**
  * Scan the page for root level Vue instances.
  */
@@ -292,6 +304,26 @@ function capture (instance, _, list) {
   if (process.env.NODE_ENV !== 'production') {
     captureCount++
   }
+
+  // Functional component.
+  if (instance.fnContext) {
+    const functionalId = instance.fnContext.__VUE_DEVTOOLS_UID__ + ':functional:' + cuid()
+    markFunctional(functionalId, instance)
+    return {
+      id: functionalId,
+      functional: true,
+      name: getComponentName(instance.fnOptions) || 'Anonymous Component',
+      renderKey: getRenderKey(instance.key),
+      children: instance.children ? instance.children.map(
+        child => child.fnContext
+          ? capture(child)
+          : child.componentInstance
+            ? capture(child.componentInstance)
+            : undefined).filter(Boolean) : [],
+      inactive: false, // TODO: Check what is it for.
+      isFragment: false // TODO: Check what is it for.
+    }
+  }
   // instance._uid is not reliable in devtools as there
   // may be 2 roots with same _uid which causes unexpected
   // behaviour
@@ -303,13 +335,19 @@ function capture (instance, _, list) {
     renderKey: getRenderKey(instance.$vnode ? instance.$vnode['key'] : null),
     inactive: !!instance._inactive,
     isFragment: !!instance._isFragment,
-    children: instance.$children
-      .filter(child => !child._isBeingDestroyed)
-      .map(capture)
+    children: [
+      ...(instance._vnode.children ? [] : instance.$children)
+        .filter(child => !child._isBeingDestroyed)
+        .map(capture),
+      ...(instance._vnode.children || [])
+        .map((child, index) => {
+          if (child.fnContext) return capture(child)
+          else if (child.componentInstance) return capture(child.componentInstance)
+        }).filter(Boolean)]
   }
   // record screen position to ensure correct ordering
   if ((!list || list.length > 1) && !instance._inactive) {
-    const rect = getInstanceRect(instance)
+    const rect = getInstanceOrVnodeRect(instance)
     ret.top = rect ? rect.top : Infinity
   } else {
     ret.top = Infinity
@@ -350,6 +388,18 @@ function mark (instance) {
   }
 }
 
+function markFunctional (id, vnode) {
+  const refId = vnode.fnContext.__VUE_DEVTOOLS_UID__
+  if (!functionalVnodeMap.has(refId)) {
+    functionalVnodeMap.set(refId, {})
+    vnode.fnContext.$on('hook:beforeDestroy', function () {
+      functionalVnodeMap.delete(refId)
+    })
+  }
+
+  functionalVnodeMap.get(refId)[id] = vnode
+}
+
 /**
  * Get the detailed information of an inspected instance.
  *
@@ -698,7 +748,7 @@ function processObservables (instance) {
  */
 
 function scrollIntoView (instance) {
-  const rect = getInstanceRect(instance)
+  const rect = getInstanceOrVnodeRect(instance)
   if (rect) {
     window.scrollBy(0, rect.top + (rect.height - window.innerHeight) / 2)
   }
@@ -712,6 +762,7 @@ function scrollIntoView (instance) {
  */
 
 function bindToConsole (instance) {
+  if (!instance) return
   const id = instance.__VUE_DEVTOOLS_UID__
   const index = consoleBoundInstances.indexOf(id)
   if (index > -1) {
diff --git a/src/devtools/views/components/ComponentInstance.vue b/src/devtools/views/components/ComponentInstance.vue
index bb0813336..d1212fe03 100644
--- a/src/devtools/views/components/ComponentInstance.vue
+++ b/src/devtools/views/components/ComponentInstance.vue
@@ -68,6 +68,12 @@
       >
         inactive
       </span>
+      <span
+        v-if="instance.functional"
+        class="info functional"
+      >
+        functional
+      </span>
 
       <span class="spacer" />
 
@@ -263,6 +269,9 @@ export default {
     background-color #b3cbf7
   &.inactive
     background-color #aaa
+  &.functional
+    background-color #f1f1f1
+    color: #aaa
   &:not(.console)
     margin-left 6px
 
diff --git a/yarn.lock b/yarn.lock
index 2972cd198..7b5d139a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1392,6 +1392,10 @@ csso@~2.3.1:
     clap "^1.0.9"
     source-map "^0.5.3"
 
+cuid@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/cuid/-/cuid-2.1.1.tgz#3b0fccbda1089ff123a127320c860b975200d62b"
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"

From cafaaa231c92e841e66b731b84da61c46b05a8e3 Mon Sep 17 00:00:00 2001
From: Rahul Kadyan <hi@znck.me>
Date: Wed, 1 Aug 2018 13:52:45 +0200
Subject: [PATCH 2/8] feat: Functional component inspector

---
 src/backend/index.js                             | 16 +++++++++++++---
 .../views/components/ComponentInspector.vue      |  6 ++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/backend/index.js b/src/backend/index.js
index d12f1a38a..4969f976b 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -64,8 +64,8 @@ function connect () {
 
   bridge.on('select-instance', id => {
     currentInspectedId = id
-    const instance = instanceMap.get(id)
-    bindToConsole(instance)
+    const instance = findInstanceOrVnode(id)
+    if (!/:functional:/.test(id)) bindToConsole(instance)
     flush()
     bridge.send('instance-selected')
   })
@@ -409,7 +409,17 @@ function markFunctional (id, vnode) {
 function getInstanceDetails (id) {
   const instance = instanceMap.get(id)
   if (!instance) {
-    return {}
+    const vnode = findInstanceOrVnode(id)
+
+    if (!vnode) return {}
+
+    return {
+      id,
+      name: getComponentName(vnode.fnOptions),
+      file: vnode.fnOptions.__file || null,
+      state: [],
+      functional: true
+    }
   } else {
     const data = {
       id: id,
diff --git a/src/devtools/views/components/ComponentInspector.vue b/src/devtools/views/components/ComponentInspector.vue
index 2d91ff214..8c48dc635 100644
--- a/src/devtools/views/components/ComponentInspector.vue
+++ b/src/devtools/views/components/ComponentInspector.vue
@@ -42,6 +42,12 @@
       >
         <div>Select a component instance to inspect.</div>
       </section>
+      <section
+        v-else-if="target.functional"
+        class="notice"
+      >
+        <div>Functional components have no instance and therefore no state to be inspected.</div>
+      </section>
       <div
         v-else-if="!target.state || !target.state.length"
         class="notice"

From 8b085d4e2e8822f043f21f6b3fb1a94a4758da6f Mon Sep 17 00:00:00 2001
From: Rahul Kadyan <hi@znck.me>
Date: Wed, 1 Aug 2018 14:38:43 +0200
Subject: [PATCH 3/8] feat: Process props

---
 src/backend/index.js                          | 19 ++++++++++++-------
 .../views/components/ComponentInspector.vue   |  6 ------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/backend/index.js b/src/backend/index.js
index 4969f976b..165d8b900 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -38,7 +38,6 @@ export function initBackend (_bridge) {
 }
 
 function connect () {
-  console.log('BACKEND: ', hook.Vue)
   initSharedData({
     bridge,
     Vue: hook.Vue
@@ -271,25 +270,29 @@ function findQualifiedChildrenFromList (instances) {
  * If the instance itself is qualified, just return itself.
  * This is ok because [].concat works in both cases.
  *
- * @param {Vue} instance
+ * @param {Vue|Vnode} instance
  * @return {Vue|Array}
  */
 
 function findQualifiedChildren (instance) {
   return isQualified(instance)
     ? capture(instance)
-    : findQualifiedChildrenFromList(instance.$children)
+    : findQualifiedChildrenFromList(instance.$children).concat(
+      instance._vnode && instance._vnode.children
+        ? instance._vnode.children.filter(child => child.fnContext).map(capture)
+        : []
+    )
 }
 
 /**
  * Check if an instance is qualified.
  *
- * @param {Vue} instance
+ * @param {Vue|Vnode} instance
  * @return {Boolean}
  */
 
 function isQualified (instance) {
-  const name = classify(getInstanceName(instance)).toLowerCase()
+  const name = classify(instance.fnContext ? getComponentName(instance) : getInstanceName(instance)).toLowerCase()
   return name.indexOf(filter) > -1
 }
 
@@ -413,13 +416,15 @@ function getInstanceDetails (id) {
 
     if (!vnode) return {}
 
-    return {
+    const data = {
       id,
       name: getComponentName(vnode.fnOptions),
       file: vnode.fnOptions.__file || null,
-      state: [],
+      state: processProps({ $options: vnode.fnOptions, ...(vnode.devtoolsMeta && vnode.devtoolsMeta.props) }),
       functional: true
     }
+
+    return data
   } else {
     const data = {
       id: id,
diff --git a/src/devtools/views/components/ComponentInspector.vue b/src/devtools/views/components/ComponentInspector.vue
index 8c48dc635..2d91ff214 100644
--- a/src/devtools/views/components/ComponentInspector.vue
+++ b/src/devtools/views/components/ComponentInspector.vue
@@ -42,12 +42,6 @@
       >
         <div>Select a component instance to inspect.</div>
       </section>
-      <section
-        v-else-if="target.functional"
-        class="notice"
-      >
-        <div>Functional components have no instance and therefore no state to be inspected.</div>
-      </section>
       <div
         v-else-if="!target.state || !target.state.length"
         class="notice"

From cfc7c7c48a7826cb61d6581ce9151640d179bd76 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Wed, 1 Aug 2018 16:53:55 +0200
Subject: [PATCH 4/8] chore: functional components example

---
 shells/dev/target/Functional.vue |  5 +++++
 shells/dev/target/Target.vue     | 13 ++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 shells/dev/target/Functional.vue

diff --git a/shells/dev/target/Functional.vue b/shells/dev/target/Functional.vue
new file mode 100644
index 000000000..3fbc65fac
--- /dev/null
+++ b/shells/dev/target/Functional.vue
@@ -0,0 +1,5 @@
+<template functional>
+  <div>
+    Hello {{ props.name }}
+  </div>
+</template>
diff --git a/shells/dev/target/Target.vue b/shells/dev/target/Target.vue
index 9598db6ff..6240ab3e2 100644
--- a/shells/dev/target/Target.vue
+++ b/shells/dev/target/Target.vue
@@ -18,14 +18,25 @@
       >Inspect component</button>
       <span v-if="over" class="over">Mouse over</span>
     </div>
+    <div>
+      <Functional
+        v-for="n in 5"
+        :key="n"
+        :name="`Row ${n}`"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import Other from './Other.vue'
 import MyClass from './MyClass.js'
+import Functional from './Functional.vue'
 export default {
-  components: { Other },
+  components: {
+    Other,
+    Functional
+  },
   props: {
     msg: String,
     obj: null,

From d34470df99e9dcd7c5d2604f894274fa884397af Mon Sep 17 00:00:00 2001
From: Rahul Kadyan <hi@znck.me>
Date: Wed, 1 Aug 2018 21:14:15 +0200
Subject: [PATCH 5/8] fix: Recursively find component in vnodes

---
 src/backend/index.js | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/backend/index.js b/src/backend/index.js
index 165d8b900..767c3de2b 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -279,7 +279,7 @@ function findQualifiedChildren (instance) {
     ? capture(instance)
     : findQualifiedChildrenFromList(instance.$children).concat(
       instance._vnode && instance._vnode.children
-        ? instance._vnode.children.filter(child => child.fnContext).map(capture)
+        ? flatten(instance._vnode.children.filter(child => !child.componentInstance).map(captureChild))
         : []
     )
 }
@@ -296,6 +296,25 @@ function isQualified (instance) {
   return name.indexOf(filter) > -1
 }
 
+function flatten (items) {
+  return items.reduce((acc, item) => {
+    if (item instanceof Array) acc.push(...flatten(item))
+    else if (item) acc.push(item)
+
+    return acc
+  }, [])
+}
+
+function captureChild (child) {
+  if (child.fnContext) {
+    return capture(child)
+  } else if (child.componentInstance) {
+    if (!child._isBeingDestroyed) return capture(child.componentInstance)
+  } else if (child.children) {
+    return flatten(child.children.map(captureChild))
+  }
+}
+
 /**
  * Capture the meta information of an instance. (recursive)
  *
@@ -338,15 +357,9 @@ function capture (instance, _, list) {
     renderKey: getRenderKey(instance.$vnode ? instance.$vnode['key'] : null),
     inactive: !!instance._inactive,
     isFragment: !!instance._isFragment,
-    children: [
-      ...(instance._vnode.children ? [] : instance.$children)
-        .filter(child => !child._isBeingDestroyed)
-        .map(capture),
-      ...(instance._vnode.children || [])
-        .map((child, index) => {
-          if (child.fnContext) return capture(child)
-          else if (child.componentInstance) return capture(child.componentInstance)
-        }).filter(Boolean)]
+    children: instance._vnode.children
+      ? flatten((instance._vnode.children).map(captureChild))
+      : instance.$children.filter(child => !child._isBeingDestroyed).map(capture)
   }
   // record screen position to ensure correct ordering
   if ((!list || list.length > 1) && !instance._inactive) {

From 467be7efe196a72a6bdbea305f4ab6cccfa1c8c2 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Thu, 2 Aug 2018 13:24:20 +0200
Subject: [PATCH 6/8] fix: select functional component + style

---
 package.json                                  |  1 -
 src/backend/index.js                          | 15 ++++++++--
 .../views/components/ComponentInstance.vue    | 30 ++++++++++++-------
 .../views/components/ComponentTree.vue        |  1 +
 yarn.lock                                     |  4 ---
 5 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 6a4c55c0c..9dcfe3f14 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,6 @@
     "@vue/ui": "^0.5.1",
     "autoprefixer": "^9.0.2",
     "circular-json-es6": "^2.0.1",
-    "cuid": "^2.1.1",
     "lodash.debounce": "^4.0.8",
     "lodash.groupby": "^4.6.0",
     "uglifyjs-webpack-plugin": "^1.1.4",
diff --git a/src/backend/index.js b/src/backend/index.js
index 767c3de2b..141edcedb 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -8,7 +8,6 @@ import { findRelatedComponent } from './utils'
 import { stringify, classify, camelize, set, parse, getComponentName } from '../util'
 import ComponentSelector from './component-selector'
 import SharedData, { init as initSharedData } from 'src/shared-data'
-import cuid from 'cuid'
 
 // hook should have been injected before this executes.
 const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
@@ -24,6 +23,7 @@ let filter = ''
 let captureCount = 0
 let isLegacy = false
 let rootUID = 0
+let functionalIds = new Map()
 
 export function initBackend (_bridge) {
   bridge = _bridge
@@ -233,6 +233,7 @@ function walk (node, fn) {
 
 function flush () {
   let start
+  functionalIds.clear()
   if (process.env.NODE_ENV !== 'production') {
     captureCount = 0
     start = window.performance.now()
@@ -322,14 +323,22 @@ function captureChild (child) {
  * @return {Object}
  */
 
-function capture (instance, _, list) {
+function capture (instance, index, list) {
   if (process.env.NODE_ENV !== 'production') {
     captureCount++
   }
 
   // Functional component.
   if (instance.fnContext) {
-    const functionalId = instance.fnContext.__VUE_DEVTOOLS_UID__ + ':functional:' + cuid()
+    const contextUid = instance.fnContext.__VUE_DEVTOOLS_UID__
+    let id = functionalIds.get(contextUid)
+    if (id == null) {
+      id = 0
+    } else {
+      id++
+    }
+    functionalIds.set(contextUid, id)
+    const functionalId = contextUid + ':functional:' + id
     markFunctional(functionalId, instance)
     return {
       id: functionalId,
diff --git a/src/devtools/views/components/ComponentInstance.vue b/src/devtools/views/components/ComponentInstance.vue
index d1212fe03..da4e1848f 100644
--- a/src/devtools/views/components/ComponentInstance.vue
+++ b/src/devtools/views/components/ComponentInstance.vue
@@ -2,14 +2,18 @@
   <div
     :class="{
       inactive: instance.inactive,
-      selected: selected
+      selected
     }"
     class="instance"
   >
     <div
       ref="self"
-      :class="{ selected: selected }"
-      :style="{ paddingLeft: depth * 15 + 'px' }"
+      :class="{
+        selected
+      }"
+      :style="{
+        paddingLeft: depth * 15 + 'px'
+      }"
       class="self selectable-item"
       @click.stop="select"
       @dblclick.stop="toggle"
@@ -97,6 +101,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import { classify, scrollIntoView, UNDEFINED } from '../../../util'
 
 export default {
@@ -114,16 +119,18 @@ export default {
   },
 
   computed: {
-    scrollToExpanded () {
-      return this.$store.state.components.scrollToExpanded
-    },
+    ...mapState('components', [
+      'expansionMap',
+      'inspectedInstance',
+      'scrollToExpanded'
+    ]),
 
     expanded () {
-      return !!this.$store.state.components.expansionMap[this.instance.id]
+      return !!this.expansionMap[this.instance.id]
     },
 
     selected () {
-      return this.instance.id === this.$store.state.components.inspectedInstance.id
+      return this.instance.id === this.inspectedInstance.id
     },
 
     sortedChildren () {
@@ -270,8 +277,11 @@ export default {
   &.inactive
     background-color #aaa
   &.functional
-    background-color #f1f1f1
-    color: #aaa
+    background-color rgba($md-black, .06)
+    color: rgba($md-black, .5)
+    .vue-ui-dark-mode &
+      background-color rgba($md-white, .06)
+      color rgba($md-white, .5)
   &:not(.console)
     margin-left 6px
 
diff --git a/src/devtools/views/components/ComponentTree.vue b/src/devtools/views/components/ComponentTree.vue
index 709e99ddb..ea3f81baa 100644
--- a/src/devtools/views/components/ComponentTree.vue
+++ b/src/devtools/views/components/ComponentTree.vue
@@ -183,6 +183,7 @@ export default {
         }
       }
     },
+
     updateAutoDensity () {
       if (this.$shared.displayDensity === 'auto') {
         this.$nextTick(() => {
diff --git a/yarn.lock b/yarn.lock
index 7b5d139a9..2972cd198 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1392,10 +1392,6 @@ csso@~2.3.1:
     clap "^1.0.9"
     source-map "^0.5.3"
 
-cuid@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/cuid/-/cuid-2.1.1.tgz#3b0fccbda1089ff123a127320c860b975200d62b"
-
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"

From 5d7d96462bfa937fc49443262ae514766310fb93 Mon Sep 17 00:00:00 2001
From: Rahul Kadyan <hi@znck.me>
Date: Thu, 2 Aug 2018 13:37:52 +0200
Subject: [PATCH 7/8] test: Update tests for functional components in tree

---
 cypress/integration/components-tab.js | 8 ++++----
 src/backend/index.js                  | 7 +++++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/cypress/integration/components-tab.js b/cypress/integration/components-tab.js
index 3e7f98436..e65f590d0 100644
--- a/cypress/integration/components-tab.js
+++ b/cypress/integration/components-tab.js
@@ -46,25 +46,25 @@ suite('components tab', () => {
 
   it('should expand child instance', () => {
     cy.get('.instance .instance:nth-child(2) .arrow-wrapper').click()
-    cy.get('.instance').should('have.length', baseInstanceCount + 2)
+    cy.get('.instance').should('have.length', baseInstanceCount + 7)
   })
 
   it('should add/remove component from app side', () => {
     cy.get('#target').iframe().then(({ get }) => {
       get('.add').click({ force: true })
     })
-    cy.get('.instance').should('have.length', baseInstanceCount + 5)
+    cy.get('.instance').should('have.length', baseInstanceCount + 10)
     cy.get('#target').iframe().then(({ get }) => {
       get('.remove').click({ force: true })
     })
-    cy.get('.instance').should('have.length', baseInstanceCount + 4)
+    cy.get('.instance').should('have.length', baseInstanceCount + 9)
   })
 
   it('should filter components', () => {
     cy.get('.left .search input').clear().type('counter')
     cy.get('.instance').should('have.length', 1)
     cy.get('.left .search input').clear().type('target')
-    cy.get('.instance').should('have.length', 5)
+    cy.get('.instance').should('have.length', 10)
     cy.get('.left .search input').clear()
   })
 
diff --git a/src/backend/index.js b/src/backend/index.js
index 00d8ad3de..6fdc8f39f 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -283,7 +283,10 @@ function findQualifiedChildren (instance) {
     ? capture(instance)
     : findQualifiedChildrenFromList(instance.$children).concat(
       instance._vnode && instance._vnode.children
+        // Find functional components in recursively in non-functional vnodes.
         ? flatten(instance._vnode.children.filter(child => !child.componentInstance).map(captureChild))
+          // Filter qualified children.
+          .filter(({ name }) => name.indexOf(filter) > -1)
         : []
     )
 }
@@ -296,7 +299,7 @@ function findQualifiedChildren (instance) {
  */
 
 function isQualified (instance) {
-  const name = classify(instance.fnContext ? getComponentName(instance) : getInstanceName(instance)).toLowerCase()
+  const name = classify(getInstanceName(instance)).toLowerCase()
   return name.indexOf(filter) > -1
 }
 
@@ -514,7 +517,7 @@ export function reduceStateList (list) {
  */
 
 export function getInstanceName (instance) {
-  const name = getComponentName(instance.$options)
+  const name = getComponentName(instance.$options || instance.fnOptions)
   if (name) return name
   return instance.$root === instance
     ? 'Root'

From ee9add8eba1ca0ffd89556eeaadc9f457053b5af Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Thu, 2 Aug 2018 15:45:23 +0200
Subject: [PATCH 8/8] fix: selected style

---
 src/devtools/views/components/ComponentInstance.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/devtools/views/components/ComponentInstance.vue b/src/devtools/views/components/ComponentInstance.vue
index da4e1848f..89e9b41a8 100644
--- a/src/devtools/views/components/ComponentInstance.vue
+++ b/src/devtools/views/components/ComponentInstance.vue
@@ -344,4 +344,6 @@ export default {
     opacity 1
   .attr-title
     color lighten($purple, 70%)
+  .info.functional
+    color $md-white
 </style>