DISCUSSION - Rebuilding ionic-svelte

[Tommertom]

Hey there,

Looking to rebuild ionic-svelte - I want to get rid of some of the blocking bugs with overlays, remove code that duplicates @ionic/core and make it easier to follow Svelte(Kit) and Ionic release updates.

I want to capture a few design principles for rebuilding ionic-svelte and looking to get feedback from the community:

• we should follow the ionic documentation for components as close as possible
• we wont support ionic cli commands
• in case we cannot follow the ionic documentation we create a customer solution that we document via example code
• we prefer helper functions over creating custom .svelte components (e.g. we don't want to ship Ion*.svelte) - e.g. https://github.com/Tommertom/svelte-ionic-app/issues/91 - where we like to ditch IonTabs and can simplify DX with a helper function
• we pref additional div/etc elements over creating custom .svelte components (e.g https://github.com/Tommertom/svelte-ionic-app/issues/81 - where we need to add div class='ion-page' to assure ion-footers are shown correctly.
• we want to import as much as possible from @ionic/core - so we also do not re-export types and controllers from ionic-svelte
• we will support SvelteKit and non-Kit projects
• if we export functions we prefer JSDOC over Typescript
• we will not rebuild and/or create strong dependencies on the kit router to achieve native transitions

Happy to hear your thoughts on these and other design principles and the consequences for the implemention of for instance:

• dealing with nav stacks - https://github.com/Tommertom/svelte-ionic-app/issues/86 - to remove IonTabs and support further navigation - posted by RingoRohe

Some issues I am not sure yet how to solve

• Ionic safe area on iOS - https://github.com/Tommertom/svelte-ionic-app/issues/92 - need repo to reproduce
• Typings on components - https://github.com/Tommertom/svelte-ionic-app/issues/88 - need to test
• Typings error with importing - https://github.com/Tommertom/svelte-ionic-app/issues/90 - need repo to reproduce
• SwipeToGetBack behaviour - https://github.com/Tommertom/svelte-ionic-app/issues/85 - need to see this happening (positive and negative case)
• Showing correct Event types- https://github.com/Tommertom/svelte-ionic-app/issues/65
• Npm create CLI commands - we need these or not?

Things I plan to remove/or do not return

• PWA stuff - service worker config and API as per Vite plugin
• No modalController and popoverControllers - these create all sorts of issues with CSS code inlines are recommended anyway

Ongoing rebuild with demo app posted on github - https://github.com/Tommertom/ionicsvelterebuild Demo app posted on https://test-cf8eb.web.app/

[keev-studio]

Hi, sorry to say that but after recreating your Demo app I have strange behavior of the tabs, they just randomly appear and disappear. See the video

https://github.com/Tommertom/svelte-ionic-app/assets/24513480/663b4ac6-ccf4-4f48-9c40-113d649beef8

[briznad]

Hi, sorry to say that but after recreating your Demo app I have strange behavior of the tabs, they just randomly appear and disappear. See the video

1705867773-videorecord-2024-1-21-21-9-33.1.mp4

@keev-studio could you share a link to your repo where you're experiencing this issue, and I can take a look?

[Tommertom]

@keev-studio - can you please continue this issue under https://github.com/Tommertom/svelte-ionic-app/issues/86 or a new one, so we have this issue focus on the possible rebuild of ionic-svelte?

[AlexRMU]

Perhaps it makes sense to use svelte 5 right away, so as not to migrate later?

[Tommertom]

Perhaps it makes sense to use svelte 5 right away, so as not to migrate later?

Yes-once stable & released

[ptmkenny]

I'm new to Svelte and this project (currently evaluating migrating a React app to Svelte), and I'm curious about this point:

• if we export functions we prefer JSDOC over Typescript

Why prefer JSDOC to Typescript? Ionic itself uses TypeScript, not JSDOC.

[Tommertom]

Hi

Library authors for svelte might prefer jsdoc as there are many svelte devs who dont use typescript

If the package would be in ts then I would exclude them

Because most editors give intellisense using jsdoc, the experience wont be different to both ts and non ts developers

So unless you are building a package/library for the broader range developers this does not matter and if you like ts, please continue doing so

Fireship has a video on this I believe

Ps ionic source in Stencil is indeed with typescript but the bundle itself isnt. Typings are provided separately