Ionic preact, ion-button or IonButton?

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.

After searching the forums, I found this thread : @ionic/react has issues with Preact + preact/compat, @ionic/preact?

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 .

After searching the web, I found this demo project https://github.com/elylucas/ionic-preact-app
It also uses the react components.

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.

1 Like

What does that statement even mean?? Just looking for clarity on why you think that there isn’t interoperability?

From the stencil docs:

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:

it would be helpful to see a small example of what you are trying to do because I am a bit confused

@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

1 Like

@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.

I think having an index.html is the key to it.

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.

Have what in an ionic app? What is your definition of an “ionic App”

A codebase that can be served with ionic serve and published with capacitor, written in preact.

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

@aaronksaunders I’ve now created a clean new forum post that describes why I’m interested in preact and the usage of web components: Use events with web components and react