findComponent not working as expected for components defined with `<template>`

[lmiller1990]

it.only('works', () => {
    const ComponentA = {
      name: 'ComponentA',
      template: `<div class="comp-a"><slot /></div>`
    }
    const ComponentB = {
      name: 'ComponentB',
      template: `<div class="comp-b"><slot /></div>`
    }
    const Main = {
      components: { ComponentA, ComponentB },
      template: `
        <ComponentA>
          <ComponentB>1</ComponentB>
          <ComponentB>2</ComponentB>
          <ComponentB>3</ComponentB>
        </ComponentA>
      `
    }

    const App = {
      components: { Main },
      template: '<Main />'
    }

    const wrapper = mount(App)

    wrapper.getComponent(ComponentB)

Cannot find ComponentB. If you do mount(Main) instead, it works.

@dobromir-hristov do you have some ideas? I spent some time but I still am not super clear on how everything is stored in the subTree property 🤔

[dobromir-hristov]

I will check later today

[lmiller1990]

Spent a few hours on this, recursion hurts my head. TS also makes this someway annoying to work on (probably because I am bad at it, haha).

Let me know if you come up with anything.

[lmiller1990]

Edit: seems like node.component.subTree.children contains a mysterious default entry which is a render function and nothing else. I guess Vue realizes <App> is just rendering another component and is doing something (converting to a functional component maybe?) I have not seen the default entry in subTree before. Run the below example to see what I mean. This might the be code we need to understand to figure this out.

Edit: it only happens if you use template I think. I wrote a render function and it was fine. Hm.

[lmiller1990]

So... seems something is different with render functions vs templates.

  it('works', () => {
    const ComponentA = {
      name: 'ComponentA',
      template: `<div class="comp-a"><slot /></div>`
    }
    const ComponentB = {
      name: 'ComponentB',
      template: `<div class="comp-b"><slot /></div>`
    }
    const Main = {
      name: 'Main',
      components: { ComponentA, ComponentB },

      /** 
         *Works with render function. Does NOT work with template 
         */
      render() {
        return h(ComponentA, h(ComponentB, '1'))
      }
      // template: `
      //   <component-a>
      //     <component-b>1</component-b>
      //   </component-a>
      // `
    }

    const App = {
      components: { Main },
      name: 'App',
      render() {
        return h(Main)
      }
    }

    const wrapper = mount(App)

    expect(wrapper.getComponent(ComponentB).html()).toBe('<div class="comp-b">1</div>')

[lmiller1990]

Hm. I think we may need to also consider checking node.component.subTree.children._ctx in the traversal. I will continue hacking for a bit. findComponent feature, it's so damn complicated!

[lmiller1990]

No sure if anyone knows the answer to this but worth a shot. When you do findComponent(Foo) for example, we traverse the subTree until we find the matching component. Eg:

const ParentRenderFn = {
  name: 'ParentRenderFn',
  render() {
    return h('span', { id: 'Parent' }, this.$slots.default())
  }
}

const ChildRenderFn = {
  name: 'ChildRenderFn',
  render() {
    return h('p', { id: 'child' }, 'Text node')
  }
}

const App = {
  name: 'App',
  render() {
    return h(ParentRenderFn, () => h(ChildRenderFn))
  }
}

In this snippet you can get to ChildRenderFn in the subtree by doing something like

createApp(App).$.subTree.component.vnode.component.subTree.component.subTree.children[0].type

(for example). In the codebase we use some recursive function to find all the components. This works fine for render functions or components imported from .vue files (since those are converted to render functions, anyway).

The problem is you do not appear to be able to traverse (at least with the same function) for this use case:

const ParentRenderTemplate = {
  name: 'ParentRenderTemplate',
  template: '<div id="parent"><slot /></div>'
}

const ChildRenderTemplate = {
  name: 'ChildRenderTemplate',
  template: '<div id="child">Text node</div>'
}

const App = {
  name: 'App',
  components: { ParentRenderTemplate, ChildRenderTemplate },
  template: '<ParentRenderTemplate><ChildRenderTemplate /></ParentRenderTemplate>'
}

If you use template instead of render functions, since we don't run this through the compiler first, you get a different subTree where a component that is just defined as { default: defaultRenderFn } or something like that. Is this just Vue putting off compiling the template for as long as possible I wonder? In this case, for this feature do we need to compile those inline templates recursively, too?

This is quite complex, I wonder if writing tests for inline templates is even a thing we need to support?

[Jokcy]

So... seems something is different with render functions vs templates.

  it('works', () => {
    const ComponentA = {
      name: 'ComponentA',
      template: `<div class="comp-a"><slot /></div>`
    }
    const ComponentB = {
      name: 'ComponentB',
      template: `<div class="comp-b"><slot /></div>`
    }
    const Main = {
      name: 'Main',
      components: { ComponentA, ComponentB },

      /** 
         *Works with render function. Does NOT work with template 
         */
      render() {
        return h(ComponentA, h(ComponentB, '1'))
      }
      // template: `
      //   <component-a>
      //     <component-b>1</component-b>
      //   </component-a>
      // `
    }

    const App = {
      components: { Main },
      name: 'App',
      render() {
        return h(Main)
      }
    }

    const wrapper = mount(App)

    expect(wrapper.getComponent(ComponentB).html()).toBe('<div class="comp-b">1</div>')

I test this code, but it still not work...

[lmiller1990]

This is passing for me:

test('render functions', () => {
  const ComponentA = {
    name: 'ComponentA',
    template: `<div class="comp-a"><slot /></div>`
  }
  const ComponentB = {
    name: 'ComponentB',
    template: `<div class="comp-b"><slot /></div>`
  }
  const Main = {
    name: 'Main',
    components: { ComponentA, ComponentB },

    render() {
       return h(ComponentA, {}, h(ComponentB, () => '1'))
    }
  }
  const App = {
    components: { Main },
    name: 'App',
    render() {
      return h(Main)
    }
  }

  const wrapper = mount(App)
  console.log(wrapper.html())
  expect(wrapper.getComponent(ComponentB).html()).toBe('<div class="comp-b">1</div>')
})

This fails.

test('render functions', () => {
  const ComponentA = {
    name: 'ComponentA',
    template: `<div class="comp-a"><slot /></div>`
  }
  const ComponentB = {
    name: 'ComponentB',
    template: `<div class="comp-b"><slot /></div>`
  }
  const Main = {
    name: 'Main',
    components: { ComponentA, ComponentB },

    render() {
       return h(ComponentA, {}, h(ComponentB, () => '1'))
    }
  }
  const App = {
    components: { Main },
    name: 'App',
    template: `
      <component-a>
        <component-b>1</component-b>
      </component-a>
    `
  }

  const wrapper = mount(App)
  console.log(wrapper.html())
  expect(wrapper.getComponent(ComponentB).html()).toBe('<div class="comp-b">1</div>')
})

They both render the exact same HTML. I notice when we try to traverse the render tree, when using template, you get some nested components that are just defined as { default: [Function: renderFnWithContext] } or something like that. I think we need to add a check for that and call the function to continue the traversal. I will work on this more soon.

Edit: ok yes it works, we can continue the traversal. We need to check if there is a default render function and call that. I will work on this on the weekend.

[lmiller1990]

@Jokcy can you please post your exact component and test code? I can use that to debug more, thanks.

[Jokcy]

it('should work', () => {
      const ComponentA = defineComponent({
        name: 'ComponentA',
        template: `<div class="comp-a"><slot /></div>`,
      })
      const ComponentB = defineComponent({
        name: 'ComponentB',
        template: `<div class="comp-b"><slot /></div>`,
      })
      const Main = defineComponent({
        name: 'Main',
        components: { ComponentA, ComponentB },
        template: `
          <ComponentA>
            <ComponentB>1</ComponentB>
            <ComponentB>2</ComponentB>
            <ComponentB>3</ComponentB>
          </ComponentA>
        `,
      })

      const App = {
        components: { Main },
        name: 'App',
        // template: '<Main />',
        // render() {
        //   return h(Main)
        // },
        setup() {
          return () => <Main />
        },
      }

      const wrapper = mount(App)

      expect(wrapper.getComponent(ComponentB)).not.toBe(undefined)
    })

no matter I use setup\render\template, App won't work. I also tried setup in Main\ComponantA\ComponentB, if I render Main, they all work, but render App, all fails