Loses class and other passed attributes

[OEvgeny]

I've noticed that createHOC looses data.attributes in produced components which leads to loosing class and other attributes in actual DOM.
E.g.

 export const BackBtn = createHOC(IconBtn, {
  name: 'BackBtn',
  functional: true,
  // render (h, ctx) {
  //   return h(IconBtn, { ...ctx.data, props: { ...ctx.props, icon: 'arrow_back' } })
  // }
}, {
  props: { icon: 'arrow_back' }
})

When using in template like

<back-btn class="green--text"></back-btn>

Does not include class green-text
But when defined like:

export const BackBtn = createHOC({}, {
  name: 'BackBtn',
  functional: true,
  render (h, ctx) {
    return h(IconBtn, { ...ctx.data, props: { ...ctx.props, icon: 'arrow_back' } })
  }
})

It does.

[jackmellis]

Ah the unstable world of functional Vue components!

I haven't yet found a way to inherit attributes/classes/etc. between functional hocs. I'd love it anyone could come up with a solution.

If you try the same with non-functional components it should work, so it depends whether you'd consider that as a workaround. Luckily, functional components in Vue aren't quite as essential as in React.

[OEvgeny]

@jackmellis Wow good to know. I'll think on a fix too. Should I leave it opened?

[jackmellis]

Yeah I'd like to keep this issue open for now, HOCs and Functional components feel like they belong together (thanks React) so if anyone can put forward a solution it'd be greatly appreciated!

[LinusBorg]

Hope I find the time to take a look. At first sight, the createRenderFn does recognize context, so this should be achievable ...

[adamchenwei]

same here, pretty headachy.

[adamchenwei]

what's the work around that does not involve adding new param into the wrapped component, just for appending class name and other cust params with values?

[adamchenwei]

just realize this has been A WHOLE YEAR already lol wow.... boy....

[jackmellis]

Yep, no progress I'm afraid. The workaround mentioned above is that if you use createHOC({ functional: true }) classes and styles should still find there way into the wrapped component.

[adamchenwei]

@LinusBorg ^^^ any hope? blockers?

[LinusBorg]

Sorry but I haven't really been working on this ever since, and won't have time to get back into it.

[adamchenwei]

saw your discussion there in vue main repo, thought helpful for anyone else jump in here, as its top result in google search...

vuejs/vue#6201