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 ¹, so couldn't a ionic-svelte package be created fairly easily?

Footnotes

1. https://github.com/ionic-team/stencil-ds-output-targets ↩

[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) - sveltejs/kit#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?