After stumbling over the lack of interop between react and web components, I’m now seriously considering to move to preact (or even vue, but there I have no experience yet).
As far as I understand, this should be pretty much seamless. Ionic components are web components and preact should be compatible.
Apparently when using more complicated components, like IonModal, there are problems.
But what surprises me is, why use the react components at all?
Won’t they try to set up specifically react virtual dom entries?
And the react system of virtual events is incompatible with the dom, and preact, right ?
So I thought the right way to go would be to do import "@ionic/core" and then to use elements like .
Is ionic ready for usage with preact?
Basically I would only want to use the neat library of Ionic components and the ionic cli to bundle to capacitor.
The largest deficiencies that React currently has when it comes to working with standard HTML Custom Elements is that properties that contain non-scalar data (that is, data that is not a string or number) are not passed properly and custom events are not handled properly. The solution to both of these problems is to wrap the Custom Element in a React component, obtain a ref to the Custom Element, and use the ref in order to set the non-scalar properties and add event listeners via addEventListener
Wrapping the web component in a custom react element is not possible in my case.
I would like to use the web component to have custom elements in dynamic html markup. That’s not possible with react, you have to use dangerouslySetInnerHTML.
And for that reason it’s also not possible to wrap it in a react element.
It is really not clear to me why a preact project would use react components instead of web components?
@aaronksaunders is this maybe because of the ionic events, that fire ionEvents instead of core events?
I guess preact/compat can serve as a wrapper around this event system?
I’ve taken the liberty to open a corresponding issue here, too:
@lhk I hacked this Ionic Preact Example together based on the documentation, it doesn’t require you to use Ionic React Components, just use the web component and you get similar results
BTW… the explanation you cut and pasted from the stencil documentation still doesn’t explain to me what you are trying to accomplish… Are you trying to solve a business problem or are you making a point, I am honestly confused
@aaronksaunders, many thanks for this example. I had tried to set up something similar, but didn’t import the css properly.
For some reason, I had set my mind to letting the bundler import the css and this didn’t work.
Your code (which simply adds imports to index.html) is a huge help.
Thanks !
I’m trying to solve an actual problem that my app faces.
Sorry if it seemed as if I’m just stubbornly making some weird point.
I’ve tried to summarize what my problem is, but then realized that this would be entirely off-topic for the headline here.
Instead I’ll mark this question as solved, your sample is a perfect starting point on how to use ionic components with preact.
And I’ll try to come up with a more precise description of what I’m trying to solve by switching to preact, in a separate post.
It was in interesting challenge, I originally tried to get the bundled to load everything and then decide to model the project as a plain JavaScript project and that seemed to work fine, planning on digging into the routing and some other aspects, but pretty certain it should be good to go.
It would be nice to have this in an ionic app though, and then I think it’s back to relying on the bundler.
Currently I’m trying to figure out how react does this.
Ionic serve is just a wrapper… you can use capacitor with any web framework… this sample I wrote can be packaged in to a capacitor mobile app… that is exactly what the purpose of creating components and capacitor.
I have done it with vuejs and it can be done with preact, I will throw something together