JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <div>
    <my-container>
      <p>
        <my-functional k="A"></my-functional>
      </p>
      <my-container>
        <my-functional k="B"></my-functional>
      </my-container>
    </my-container>
  </div>
  <my-functional k="C"></my-functional>
</div>

JavaScript

const MyContainer = {
  template: `
    <div>
      <slot/>
    </div>
  `
}

const MyFunctional = {
  functional: true,
  props: ['k'],
  render (h, context) {
    return h('div', ['hi ', context.props.k])
  }
}

Vue.component('my-container', MyContainer)
Vue.component('my-functional', MyFunctional)

const vm = new Vue({})

vm.$mount('#app')

const findFunctionalComponents = (vm) => {
  const vnodes = []
    
  const gatherVNodes = (vnode) => {
  	vnodes.push(vnode)
    
    if (vnode.children) {
      for (const child of vnode.children) {
        gatherVNodes(child)
      }
    }
    
    if (vnode.componentInstance && vnode.componentInstance._vnode) {
      gatherVNodes(vnode.componentInstance._vnode)
    }
  }
  
  gatherVNodes(vm._vnode)
  
  const fnCmps = vnodes.filter(node => node.devtoolsMeta && node.devtoolsMeta.renderContext)
  
  return fnCmps.map(vnode => {
    return {
      element: vnode.elm,
      context: vnode.devtoolsMeta.renderContext
    }
  })
}

const functionals = findFunctionalComponents(vm)

console.log(functionals)