Rewrite in Stencil to be compliant with all vdom framework

[nicolidin]

Hi!

So firstly many thanks for this awesome library! We use it in our projects! Tiptap is a library that contributes a lot to the Vuejs ecosystem, however, today angular, for example, does not have such a library (based on top of prose-mirror), which's why it could be interesting to rewrite it in Stencil.

So why Stencil?

Stencil is a typescript vdom framework allowing to write agnostic component -> that means you write components in Stencil and they will be compliant with all the other VDom framework (vue, react, angular, ember). Furthermore, Stencil has awesome typescript support, and it is today the only one that has good decorator support (with tsx) -> the props decorator @Props is totally compliant with Tsx, cause they "generate typescript definition allowing to not repeat (as in React) the props definition.

Today vue3 can't afford the decorator usage cause they would not be anymore able to be compliant with tsx:

• From Ktsn (the main maintainer of the vue-class-component library): "In addition, there is no way to expose the types of props declared with decorators on this.$props, which breaks TSX support. This is similar to the first problem. The Vue component type has Props type parameter that TSX uses for checking available props type. For example, let's say your component has a type { value: number } as the props type, then the component type is Component<{ value: number }> (this is different from the actual Vue type but you can get the idea from it). TSX knows what kind of value should be passed for the component:" -> https://github.com/vuejs/vue-class-component/issues/447#issue-700259187

• From yyx990803 (Evan You main maintainer of vuejs): "In addition, there is no way to expose the types of props declared with decorators on this.$props, which breaks TSX support." -> https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121

React suffers from the same problem and needs a duplicate type declaration!

Angular is the only one that has great typescript and decorator support, however, it suffers from other problems such as its reactivity system caused by zonejs. (and angular would not be able to have tsx support cause of the same problem that React and Vuejs have).

Stencil is a new coherent vdom framework and has the whole Ionic team behind! While vue is mainly maintained just by yyx990803.

All that to say:

Stencil could be the future of vdom framework, cause it has the best support of typescript + tsx and especially cause it is compliant with all the other vdom framework

Conclusion

So why not for the next major version of tiptap, rewrite it and offer the possibility of tiptap fans to go on any other vdom framework they want. Indeed a lot of developers (such as me) get totally stuck into vue, especially cause tiptap is just awesome and angular for example doe not have any equivalents. Moreover, such a rewrite would allow tiptap to be the main prose-mirror-based framework-agnostic library and so be used by more and more people!

Thanks and Thanks again for this great library!

[LifeIsStrange]

My company products are all using Angular and as @nicolidin said and despite angular having a much more significant number of users than Vue, there is no decent WYSIWYG prose-mirror based editor on the Angular ecosystem. Hence there is a market opportunity here, to answer a real need that I and many have. But while Angular is currenlty the biggest opportunity market, other rising Vdoms would benefit from it too (Svelte, lit-element, blazor) and also eventually react. I also think that Stencil has one of the cleanest API out there and is probably the best candidate for cross frameworks interop, moreover there is prior art as the whole Ionic framework is written in Stencil and interop with all famous frameworks instead of having the need to be written in N different variants.

Framework agnostic libraries are the future and can already be achieved in the present, moreover I believe that bringing wider framework support (especially angular) would help bring perennity to the project, as it would bring 1) much more end users and therefore more contributors to the project 2) more donations to the project

[hanspagel]

Thanks for bringing this up @nicolidin! There is already a (currently private) beta version of tiptap 2, which is framework-agnostic and can be used with any framework. https://github.com/ueberdosis/tiptap/issues/547

For the components we’re providing, we’ll focus on Vue and React. That won’t change too soon. Don’t forget it’s an open-source package, not a paid product, and providing support for those two is already plenty of unpaid work. That said, we’re sure community members will step up and add support for other popular frameworks for tiptap 2. It’s what happend with tiptap 1 already, though it was tightly coupled with Vue.

Writing components in Stencil could make sense for interface components, like the toolbar, but those are written easily in any framework anyway. The components we provide to make nodes work with Vue and React are very specific for every framework and I doubt it’s technically possible to write that code once and have it work in any framwork. We just added support for Vue 3 and depend on internal APIs to make it work like we want. I don’t think Stencil is able to provide that level of detail for those components.