How to setup Svelte.js with Ionic?

Question

I am trying to build a mobile app with Svelte.js and Ionic v4.

1) I got the svelte-template.

2) Installed ionic with npm install @ionic/core@latest --save.

3) Installed postcss and imported @ionic css in global.css

Rollup is extracting the @ionic css but it seems that there maybe something wrong with the way it is doing. The ionic components are acessible, but I cannot see a thing. The css is not being applied properly.

Has anyone managed to make Svelte work with Ionic v4? Or at least, Ionic with some vanilla js?

Sighted

Answer 1

this is how I eventually got it to work pretty nicely

https://ionicsvelte.firebaseapp.com/

The repo:

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

And in REPLs:

https://github.com/Tommertom/svelte-ionic-app/blob/master/REPLS.md

Firstrate

I believe answers on SO are expected to be self-contained, and not just a list of links. Could you at least summarize how the integration works? The demo doesn't seem to work anymore. The REPLs are helpful, thank you for those. – Posture

<script type="module" src='/assets/libs/@ionic/core/dist/ionic/ionic.js'></script> <link rel="stylesheet" href="/assets/libs/@ionic/core/css/ionic.bundle.css" /> in index.html, with ionic assets are in an assets folder. Did not manage to get the webcomponent otherwise integrated. The API was easy to use using import { MenuI, loadingController, toastController, alertController, pickerController, actionSheetController, modalController, popoverController } from "@ionic/core"; See the repo's rollup.config.js, IonicControllers.ts, etc. – Firstrate

Answer 2

I did. Using the CDN was easiest.

1. Scaffold a new app: degit sveltejs/template myapp

2. Add CDN to public/index.html above the ./global.css

<!-- ionic -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

<!-- ionicons -->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

3. Update App.svelte

<script>
const greet = () => alert('hi')
</script>

<ion-app>
  <ion-content>
    <ion-header>
      <ion-toolbar>
        <ion-title>My App</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-content>
  <ion-footer>
    <ion-button color="secondary" expand="block" on:click={greet}>
      Greet
    </ion-button>
  </ion-footer>
</ion-app>

4. Run

yarn && yarn dev

Stoned