Open ptmkenny opened 2 months ago
I dont think it is a lot of work to generate svelte components wrapping ionic (there are definition files in the ionic package you could use for that), but it is not a great idea as you lose two way binding and you cannot style the components directly with css anymore (encapsulation). I considered that in the beginning and it does not work for me.
I dont think there is anything else - webcomponents, for what I know, live in the browser as some sort of native thing. So your question is similar to asking if you can make a HOC of a div or a button.
Why do you want this?
Hmm. Is there a way to make both ion-button (as a web component) and IonButton (as a Svelte component) available?
In my React app, I use HOC for ion-button, ion-toggle, ion-range, ion-icon, and several others in conjunction with a "handedness" setting. Users can select if they are right- or left-handed, and then all the UI moves to the appropriate side of the screen. Because this can get pretty complicated (submit buttons should be on the same side as the user's dominant hand, whereas delete buttons should be on the reverse side), I did this by using my own components that wrap the Ionic components, which works really well and prevents me from setting the wrong value. So I was trying to do something similar in Svelte but it has turned out to be more complicated than React.
I'm trying to make an Ionic Svelte app, coming from Ionic React.
In React, I wrapped the
ion-button
component like this:Here, I restricted the number of props that can be provided to
ion-button
by adding theCustomIonButtonWrapper
type, and then set the button size to small.This allows me to use the
<ButtonStandard>
component to control theion-button
component, ensuring I only use the specified props throughout my app.How can I do something similar in Svelte? Specifically,
ion-button
in a Svelte componentButtonStandard
component (do not accept all the props thation-button
does).I came up with the following but it seems verbose compared to React. Is there a better way?
Related to https://github.com/Tommertom/svelte-ionic-app/issues/93 and https://github.com/Tommertom/svelte-ionic-app/issues/88.
This is an issue because this project offers
ion-button
as a web component rather than a Svelte component. I imagine it would be a lot of work (and painful maintenance) to make Svelte components for all the Ionic components. So I'm wondering if there's another way to wrap the web components to use them as HOC without creating Svelte components?