feat: Svelte support

[g5becks]

Feature Request

Ionic version: 5.x

Describe the Feature Request Official support for Svelte framework

Describe Preferred Solution Official support for Svelte framework from the ionic team. Describe Alternatives

Svelte can already be used with ionic without official support, but there are a few caveats.

Related Code https://github.com/Tommertom/svelte-ionic-app https://ionicsvelte.firebaseapp.com/ionic/Slides

[PatrickG]

I was trying to use the @ionic/core components in svelte (and maybe build Svelte components around them), but I am not able to configure rollup to import the components.

I've tried every possible combination of rollup output options and tsconfig options, but the defineCustomElements function from @ionic/core/loader tries to import the components from the directory where my rollup-bundle is (e.g.: /<my-bundle-dir>/ion-app-8.entry.js).

Does anybody have a solution for that? I do not want to use the cdn version.

[g5becks]

I’ve personally switched to using framework7 for now, which has official svelte support.

[vladrusu]

+1

Please add Svelte support.

[Zerotask]

Are there any plans about supporting Svelte in the (near) future yet?

[willmartian]

Hey everyone! We are well aware of how much folks want official Svelte framework support. We need to do some more research, so we’re going to make this ticket the primary Svelte ticket. Please try to react and share your perspective on this ticket for this feature.

We have a few questions as well:

1. Could folks look at the most recent Framework 6 beta in Svelte and let us know if the lazy loading issue still exists? Any documentation and updates to the reproduction repo will help.
2. Please help us by sharing more about what “caveats” the issue’s description is referring to.

The more signal we get on this, and the more information folks can provide to us, the sooner we may be able to give you a heads up on timing and plans for Framework support. Right now, we’re focused on releasing Framework v6.

[raymondboswel]

@willmartian I tried using 6.0.0-rc.3 in a test project here: https://github.com/raymondboswel/svelte-capacitor.

The project uses vite 2.2.3 to build.

When I build the project I get: ​[vite]: Rollup failed to resolve import "node_modules/@ionic/core/dist/ionic/ionic.esm.js" from "index.html".

I have also encountered the same error when running, which I could "solve" by only adding in the ionic references in index.html after the project is running.

I'm not sure if I used the correct approach to instantiate Ionic, there isn't much guidance on how to do it when not using a supported framework / CDN. Hope this helps!

[yuliankarapetkov]

It's been more than a year since the issue was opened. When are we going to see support for Svelte?

[raymondboswel]

I wrote a short piece about my experience with Ionic v6 in Svelte. All in all I'd say it's quite usable at this stage, although the documentation hasn't caught up quite yet.

https://medium.com/@raymondboswel/ionic-6-svelte-ae904caa82df

[akvadrako]

It looks like stencil can already output svelte components ^1, so couldn't a ionic-svelte package be created fairly easily?

[Tommertom]

I started working on ionic 6 & svelte integration, using vite (so using npm create vite@latest).

https://github.com/Tommertom/svelte-ionic-app

With a nice demo app to showcase how cool Ionic is as an framework - https://ionicsvelte.firebaseapp.com/components/Splash

Hopefully this will inspire Ionic's team to create official one :)

[Tommertom]

See comment by Rich Harris on integration of Ionic with SvelteKIT (not svelte) - https://github.com/sveltejs/kit/issues/5143 Would we need to raise on "hydration" support by Ionic?

Reloading in onMount -> how done? import of @ionic/core gives error on mjs. "Ugly" reload using dynamics script load (add child to head) - also does not give result

@MarianDabrowski you have an idea?

[MarianDabrowski]

@Tommertom thanks for asking! First of all I must say that ionic has big problems with SSR/SSG #25100. I do not see any easy way to combine Ionic with any SSR/SSG solutions until this issue is resolved. You have suggested "hydration" support and that is 100% correct.

[Tommertom]

@Tommertom thanks for asking!

First of all I must say that ionic has big problems with SSR/SSG #25100. I do not see any easy way to combine Ionic with any SSR/SSG solutions until this issue is resolved.

You have suggested "hydration" support and that is 100% correct.

Thx @MarianDabrowski for the reference to the issue you raised as well as good to see there has been some investigation going on

Now this really excites me to work on some workaround nevertheless - even if it is monkey patching node-modules until it has been resolved

Of the two issues mentioned in the last post, I believe point 1 can be monkey patched or even I can create my own initialise function. Point two - is this a next.js thing or u believe it also happens in sveltekit.

As a workaround I could try to force an early initialise even in index.html - even though being ugly

Any thoughts before I dive into this rabbithole?

[MarianDabrowski]

@Tommertom

Regarding 1: I am not an expert, so I cannot give any advice. Regarding 2: I have not verified if it works well with other SSR/SSG tools. I guess it may help if I provide a Gatsby or Nuxt example. I will inform my when i have any more examples but Nextjs

[liamdebeasi]

Hi everyone,

The team has had many discussions around an official Ionic Svelte integration. At the moment, we do not have any plans to add support for this. While outputting Svelte components is fairly easy, adding support for a Svelte-based router in Ionic requires a great deal of resources. We are a small team with limited resources, and we feel those resources are best directed at improving the existing features and experiences inside of Ionic.

There are some great community-driven Ionic Svelte integrations that are worth looking at such as https://github.com/Tommertom/svelte-ionic-app.

We plan on re-evaluating this decision as Svelte continues to grow. Thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.