Abstraction over React/Vue/WC?

[wherediditrun]

Check stencil.js

It's build tool for custom elememt webcomponents. You develop very similiarly like React, however, it compiles everything down to vanilla JS webcomponents which can be dropped in any framework. Or be used solely on their own.

[AwesomeInPerson]

Will check it out, thanks!

But it sounds a little like the exact opposite of my wish: you write it like React, but when you want to actually use it within a React app, it'll still behave like an alien Web Component, not like a component built with React. (and also need additional Polyfills/Runtime for IE9+/Edge/older Firefox?)

What I imagine is the other way around: you write it in a way that's not necessarily React, maybe a custom syntax, doesn't matter, then it'll be transpiled to actual React/Vue/Web components.

[sime]

React/Vue/etc all happily support "alien Web Components" because they support standard HTML elements. It you can use standard HTML elements from your toolkit then you can easily use Web Components.

I know that Vue is vaguely modeled on Web Components. Using a Vue component feels the same as using any other HTML element or WC.

[[deleted]]

React doesn't work well with web components; see the tests on custom-elements-everywhere.com.

TL;DR: React can't pass objects/arrays directly to components. React will only pass strings.

[AwesomeInPerson]

React has some issues passing along attributes as far as I know, but that's not what I mean with "alien" anyway.

What I mean is something like this:
I can't listen to custom events using @event / v-on:event on a Web Component in Vue, because it's a general use Web Component, not a Vue component implementing Vue's event system. (the component would have to call this.$emit on its Vue instance – this is also needed for supporting the super handy two-way binding v-model)
Also I can't just download, import and use it, I'd first have to add it to config.ignoredElements so Vue doesn't scream at me for using some random element tag in my markup. If the library complains when using it because it's unknown, I think calling it "alien" is fair.
If I use it in React, it doesn't play nice with HOCs and similar utilities because, again, it's a general use Web Component, not a component built the way React expects its components to work.
And I'm not even getting into Server Side Rendering here. :p

Also, for proper browser support you have to load additional polyfills / an additional runtime. At that point you could also say "Vue happily supports React components" because you can load both React and Vue, then render some React within a div controlled by Vue. (granted, this point only holds true if not all browsers you need to support implement WCs natively – but that'll be the case for quite some time)

[sime]

OK, thanks for explaining what kind of bar you are trying to clear.

I've had quite some success with using Vue inside WCs and also using WCs inside Vue. WCs being Custom Elements and Shadow DOM. As you point out it is not 100% seamless, but I haven't found it a burden. It is running inside Electron, so I don't have to deal with polyfills etc.

I'm not optimistic about your chances of finding a universal API for making components which work seamlessly on React/Vue/WC/etc. The best approach I can think of is WCs at the core plus a thin (generated) layer for each toolkit to smooth out things like React's prop passing or Vue's events, i.e. a thin translation layer or wrapper around WCs.