Bundling Ionic 4 with rollup.js?

#1

Hi, I’m interested in using Ionic 4 web components in a svelte application, treating Ionic as a javascript library (as opposed to Angular/React/etc). Svelte is a new-ish framework that compiles down to pure-javascript.

I have a repo here: https://github.com/tnishimura/ionic-svelte-demo

When I load the js and CSS from a CDN as describe in the doc at , everything works well:

<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"/>

However, I’d like to bundle all javascript and css with rollup. So far, all my attempts have failed, not sure if it’s because of Svelte or because I’m doing something dumb. I’ve tried variety of things like:

import '@ionic/core';
import '@ionic/core/dist/ionic/ionic.esm.js';
import Ionic from '@ionic/core'
import '../node_modules/@ionic/core/dist/ionic/ionic.js';

and in no case does it allow me to use <ion-*> web components. Any help?

#2

I have seen someone else trying (on svelte slack) and did try myself, but I think there are many dependencies in the package and it is using SASS or something else (not sure what). Maybe that hinders the build process to go through, unless you specialise in rollup-plugins as well as the way ionic is built up?

My project: https://ionicsvelte.firebaseapp.com, https://github.com/Tommertom/svelte-ionic-app

I stopped looking for how to get it bundled, as I am ok with the CDN, as probably any app I make with ionic/svelte will be a mobile app which will include a service worker that can cache the CDN assets anyway. Next, specialising in rollup was not an objective.

btw, there is a webpack version for svelte available too (or is it only sapper?? sapper does not go well with some ionic parts, at least my experience). Maybe webpack does it easier?