Echo JS 0.11.0



xat 674 days ago. link 1 point
I'm aware of that HOC is not React specific. But it works really nicely in React.

I'm not sure if the example code in that medium article even is a higher order component? Looks more like it's just'n component inheriting stuff from another component?

A HOC is component which gets another component passed in as argument or prop and then returns a new component which wraps that input component somehow.
xat 674 days ago. link 1 point
Those concepts exist in pretty much any programming language.

@sylvainpv I'm searching the web for Vue.JS examples where a component gets passed in as prop to another component. Not finding anything so far. Do you know if that is even possible? Doesn't this conflict with the reactive data-structure stuff going on in Vue.JS?

To give you a more concrete example:

In the last project we needed inline-editing functionality. The goal was to support different input elements like text, select, etc. and the view could also be different from case to case. This was pretty nice and elegant to solve using a higher order component, which basicly looked like this in React:

<InlineEdit editComponent={SomeInputComponent} viewComponent={SomeViewComponent} value={val} onChange={(newVal) => { /* do something */}} />

How would you approach that in Vue.JS?
xat 673 days ago. link 1 point
Nice! Thanks for the code snippet :-)
You are right, that's not any less elegant than in React.

Is there also a nice solution for these kind of constructs in Vue.JS?

function createComponentWithDefaultProps(Component, defaultProps) {
  return function(props) {
    return <Component {...defaultProps} {...props} />
sylvainpv 673 days ago. link 1 point
This is JSX, which is supported by Vue. I already sent you the link to docs in a previous message.
xat 673 days ago. link 1 point
So for the sake of completeness I did some more digging. It turns out that you don't need JSX todo that. In fact it probably doesn't even help you to solve the problem that much.

The main problem is that you have this nested data object in Vue.JS which you pass down, whereas in React you have a flat props object (which also includes children). So you need special logic to merge that complex data object. I'm also not so sure how you would merge stuff like slots, clickHandlers etc.

Here is a demo which works at least for classes, styles, attributes and properties:

However, I don't really think it's a practical solution.
xat 671 days ago. link 1 point
So maybe we can both agree on this statement:

Higher order components are not that well supported in Vue.JS, but you have mixins, which can be used todo some of the things that you would be able todo with higher order components.
sylvainpv 671 days ago. link 1 point
No, I disagree. Higher Order Components is an abstract concept which can be formalized in different ways as we saw earlier. It relies on the functional nature of components, and so is suitable for both Vue and React, among others.

I gave you a clean and elegant solution in Vue for each of your concerns, yet you decide to camp on your positions rather than admit that you may have a few things to learn about Vue. Too bad, but I cannot help you on this.
xat 671 days ago. link 1 point
This is like saying: "Higher order functions" is the same thing as mixins. Those are different concepts.

I never doubted that there are other concepts in Vue.JS which enable you todo some of the same things. In my initial post I was talking explicity about Higher order components.

However, let's just agree to disagree on this topic ;)

PS: Even if you don't seem to enjoy it, I like discussing stuff like this and finding an answer that everyone agrees on. It doesn't have anything todo with who is right or wrong.
xat 673 days ago. link 1 point
Ok, I see. I somehow hoped that there is a better solution :) . This means practically, that you have to pull in JSX into your Vue.JS project, just to have a sane way to create higher order components. I guess otherwise you normally wouldn't use JSX in a common Vue.JS codebase, unless you are doing some fancy stuff.

I still think that React really shines in that discipline compared to the other ones mentioned.