[WIP] Fix named functional text slots

[manniL]

After #733, default text-slots work quite well. But named slots are awkwardly merged in the default slot variable. I'm working on a fix.

[manniL]

I've looked into template compilation with Vue.compile.

If you want to achieve the same in template mode (without a render function), you'd do:

<template>
  <template slot='hey'>
    Hi
  </template>
<template>

This will be compiled to

with(this){return [_c('template',{slot:"hey"},[_v("Hi")])]}

So we could leverage the _c and _v method to achieve it, but I'm unsure if we should do this 🤔

[eddyerburgh]

Yes we could use _v, but it would be better if we could construct with h.

[eddyerburgh]

We could compile the slot using that template:

compileToFunctions(`<template slot="${name}">${slotValue}</template>`) (https://github.com/vuejs/vue-test-utils/blob/dev/packages/create-instance/add-slots.js#L15)

[manniL]

Nice idea but I've realized that we can use neither template nor slot as root element:

Cannot use template as component root element because it may contain multiple nodes.

I've tried it with text only but this also fails:

Component template requires a root element, rather than just text.

[eddyerburgh]

Ok, we could render it in a parent div, then use the child vNode when we call h

const node  = compileToFunctions(`<template slot="${name}">${slotValue}</template>`)
h(node).children[0]

[eddyerburgh]

@manniL did you try the suggested approach ^^

[manniL]

@eddyerburgh Not yet. Will look into it in the next days!

[eddyerburgh]

After thinking about this, I don't think we should add this feature.

Since named slots cannot take root text nodes, we shouldn't support them. Instead you can wrap them in a template:

mount(TestComponent, {
  slots: {
    footer: '<template>hey</template>'
  }  
})