Easier-to-use HOC method

[yaodingyd]

What problem does this feature solve?

Currently I can't find anything official Vue document to create HOC. The closest thing I can find on the web is this post https://medium.com/tldr-tech/higher-order-components-in-vue-js-38b500c6d49f and spreading all the properties seem verbose.

I think the popular way to achieve composition in Vue component is to use mixins, and there are some common problems for minxins:

1. Mixins introduce implicit dependencies
2. Mixins cause name clashes
3. Mixins cause snowballing complexity
   I know for 2 Vue handles conflicting pretty well and for 3, I personally think it would be developer's own fault to using an "escape hatch" to finish complex composition. but still 1 could be a problem. So my next question is, does Vue promotes the use of mixin?

What does the proposed API look like?

Maybe something like Vue.composite(wrappedComponents, addedProperties)

[yyx990803]

It's the same as React when using render functions:

function HoC (Comp) {
  return {
    render (h) {
      return h(Comp, { props: ... })
    }
  }
}

Regardless this is fully implementable in userland and doesn't need to be part of core.

[yaodingyd]

@yyx990803 thanks.

[blocka]

The annoying this about this is that the HoC must declare all the props of the wrapped components. There are two annoying things about this:

1. The props have to be "normalized" because sometime's they're an array, and sometimes a string. I have to keep reimplementing this function in every project (maybe it's in the core somewhere?)

2. A "Component" can either be a typeof Vue or an object literal. So I have to do more work to figure out what kind of component I'm dealing with, and branch accordingly to get the props.

In react you just have this.props and you get all the props sent to the HoC and directed for the wrapped component.

[jkzing]

@blocka If I'm understanding correctly, situation you are facing has been discussing in #5983, FYI.

[yyx990803]

@blocka there's already https://vuejs.org/v2/api/#vm-props

[blocka]

@jkzing @yyx990803
I skimmed through the discussion in #5983 but I didn't see any directly relevant to the situation I'm referring to. If it is, I apologize in advance.

Here is my contrived example: https://jsfiddle.net/4cc6mrs0/

As you can see, in order for this.$props to work, those props need to be defined on the component returned from the HoC.

In this example it's pretty simple: WrappedComponent.props. But once you're dealing with mixing HoC props, and WrappedComponent props, things get pretty hairy, for the reasons I've explained earlier.

[blocka]

From peeking around, it seems all undeclared props hangout at this.$vnode.data.attrs. Still a little awkward, but seems to work. Is that considered a "stable" api?

[jkzing]

Oh...sorry, I was wrong, it's not relevant with #5983...😅