I read the renderless article linked to in the README (https://adamwathan.me/renderless-components-in-vuejs/) and it seems like an absolute nightmare in Vue. Lots of cognitive overhead for something that's completely natural in React.
I didn't downvote your comment, but it seems you've misunderstood the core concepts under discussion here. Renderless isn't inherent to Vue in any way — the problems it addresses are equally present in React-based libraries. You can easily override render functions and the given bindings in both Vue and React, but given libraries that aren't built to be easily extendible, this can often lead to maintenance nightmares. Renderless seeks to counteract that, giving guidelines to architect libraries in a way that doesn't introduce considerable complexity on the library side but makes it a lot more extensible on the consumer side.
I think you've misunderstood my post. I'm saying renderless components come "for free" in React -- there's no cognitive overhead or new concepts to learn. It's something that comes very naturally as you develop React components to the point where I've been writing renderless components for years without ever really thinking about it. From reading the article linked above it feels very clumsy in Vue based on the fact that there's a whole feature (slots) which not only feels fairly magical but requires a rather meaty article to explain it's usage.
I guess what I'm saying is if you're really interested in renderless components it's probably easier to just use React.
I still don't really see what you mean — the functionalities are practically identical between the two frameworks, Vue uses slots, React uses props children. The only difference is naming and minor semantics differences. The same principles apply for both, and the discussion is just as relevant for both. Personally I prefer the Vue approach over the React one since React components are usually build more black-box style in this architecture, but that is mainly a preference argument. The "cost" of the approach is the same in both libraries.
> The only difference is naming and minor semantics differences
I don't agree at all. There are no naming/semantics for doing renderless in React. React has no analogue for "slots" because it's just naturally part of the framework. It's as simple as doing:
That's a basic example which doesn't address the topics discussed in the article at all. The same is just as easy in Vue, even with identical property names if you like.
<link-list :render-link="(props) => ..." />
The whole idea of renderless is to move beyond this very limited and crude approach for library code where you might need to override only small bits of the logic or all of the logic, depending on your use case. At the moment I can't help but feel you've missed the core ideas of the article and we're discussing completely different points.
Why would you want to use slots, then? It's just extra steps for the same functionality.
> The whole idea of renderless is to move beyond this very limited and crude approach for library code where you might need to override only small bits of the logic or all of the logic, depending on your use case
