I want to help improve this. What should I work on?

[b-d-m-p]

Hi, we spoke on reddit a bit before. I'm a fan of Ionic and Svelte and want this to take off, so if there's something I can work on, let me know.

Cheers

[Tommertom]

Hi thx!

Depends on your interest - there are number of topics to cover pending the use case.

• workbox improvements to make it a full PWA -> trying to align with the angular goodies, so it becomes out of th box usable for PWA power. The workbox implementation now is pretty basic (does nothing). Would be nice to have offline support, push notification and some other goodies in there (understanding workbox is too time consuming for me now)
• UI additions -> adding from other frameworks (Pane, Chat balloons)
• Fixing bugs -> not very inspiring (some API links are broken, javascript source viewing)
• Adding other frameworks in source viewer (angular, vue) -> not high prio for me. Not sure if it will attract more developers
• Dealing with feedback -> creating some fancy ways to get user input, without harrassing them
• Add other icons libraries

And besides code developing, figure out how to attract more developers and validate the usefulness. After all, the project's goal is to help other developers (Ionic and/or svelte).

Let me know.

[b-d-m-p]

@Tommertom Sorry for the late reply. Wasn't really using Github notifications. Am now. I will take a look at some bugs. Is there are roadmap, we can add this list to?

[Tommertom]

Hi @b-d-m-p . No problem. The objective is to keep the app ready as boilerplate for building an easy Ionic app, ideally as PWA. So the roadmap is to keep it updated with latest version of the key libraries used. So, the roadmap also requires deciding which library is now the best to use. E.g. I saw about rxfire for Firebase integration - which I should have thought off earlier...

To that extend, besides some (unreported) bugs you may find, the biggest TODO is to make it fully PWA and provide the instructions on how to add nice PWA goodies. I am used to Angular CLI, and it out-of-box gives a great developer flow for PWAs. I was considering workbox. You have any suggestions?

[AlexRMU]

What's up with the updates?

• Now there is no css in rollup-plugin-svelte: https://github.com/Tommertom/svelte-ionic-app/blob/master/rollup.config.js#L76
• In modal windows, not all styles are displayed correctly (the close button is gray, not blue): https://ionicsvelte.firebaseapp.com/ionic/Controllers
  To fix it, you can insert a link to the css in the component file or as in the following paragraph
• svelte-custom-elements is deprecated, now you need to do something like this:

export async function IonicShowModal(selector, component, componentProps) {

    let elem = document.createElement(selector);
    document.body.append(elem);
    let svelteComponent = new component({ target: elem, props: componentProps, });

    let modal = await modalController
        .create({
            component: selector,
        });

    await modal.present();
    let res = await modal.onWillDismiss();

    svelteComponent.$destroy();
    elem.remove();

    return res;
}

[Tommertom]

Hi @AlexRMU

Thx for that. I was planning to do an update when Ionic 6 is beyond RC

A while ago I played with svelte init, to see if that powerful tooling could replace some of the stuff now present. But initial tests did not give good results

I will look into your individual points

Thx

[b-d-m-p]

@Tommertom Thanks for keeping up with this. If you give me something specific to do, I will have a go at it. Not sure where to start. Cheers.

[raymondboswel]

@AlexRMU Thank you for the snippet above. I was stuck trying to find a way to apply my global styles inside my customElements, which seems like a bit of a dead end. I just had to make a small update to your snippet to get it to work:

export const IonicShowModal = async (
  selector: string,
  component: new (...args: any) => SvelteComponent,
  componentProps: any
) => {
    
    // modalController adds element already, so don't have to add the following 3 lines.
    // let elem = document.createElement(selector);
    // document.body.append(elem);
    // let svelteComponent = new component({ target: elem, props: componentProps, });
  
  const modal = await modalController.create({
    component: selector,
    componentProps,
  });
  await modal.present();

  //TODO: Consider what should happen if more than 1 tag found...
  let elem = document.getElementsByTagName(selector)[0];  
  
  let svelteComponent = new component({ target: elem, props: componentProps, });

  let res = await modal.onWillDismiss();

  svelteComponent.$destroy();
  elem.remove();

  return res;
  
};

[Tommertom]

So @raymondboswel - does this also mean this code should be used for popover? I guess so..

[Tommertom]

@Tommertom Thanks for keeping up with this. If you give me something specific to do, I will have a go at it. Not sure where to start. Cheers.

Hi @b-d-m-p - sorry for ignoring you - with the seasonal holidays coming I want to work on this project and also do the Ionic 6 upgrade.

The thing that haunts me here is the service-worker part using workbox or something else. This project needs some nice and easy way to get it to get 100% PWA score in Lighthouse - and the biggest thing is the offline capabilities. Especially looking at the updating routines needed to notify the app there is an update etc..

So, this means at least:

• deciding if workbox is the way to go or not - I have no clue what else is out there
• cli command (npm run build-pwa or so) that builds the project as PWA, with the service worker getting the update on new files.
• some API description or simple routine in a svelty way that communicates with the service worker - getting notified on updates etc. Basically this API: https://angular.io/api/service-worker/SwUpdate
• .. maybe more

Would this something you could dive into?

[raymondboswel]

Yes, it works for both cases 👍 With regard to getting the app a 100% PWA score - With Ionic 6 you can now bundle the project with bundlers like Vite, which has a workbox integration. I haven't fully looked into it as it's not something I currently have to achieve, but you can take a look at https://github.com/raymondboswel/ionic-modal-reproduction/blob/main/src/App.svelte for the details on what's required to get Ionic working with Vite.

[Tommertom]

Started working on Ionic6vite integration

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

[Tommertom]

Closing this issue - update to Ionic 6 using vite now pushed to master

[Tommertom]

@raymondboswel @AlexRMU

Now with the arrival of Ionic 6 I refactored your code to launch a modal. Also because your code seems to open the modal empty, and after completion of the animation, the modal gets populated. Which seems undesirable.

The following code I use - and the magic I needed is in your function declaration:

export const modalController = {
    create: (modalOptions: any): Promise<HTMLIonModalElement> => { // needs to be typed to ModalOptions (Partial or so?)
        return Promise.resolve(modalController.__create(modalOptions.component, modalOptions)) as Promise<HTMLIonModalElement>
    },
    __create: (
        component: new (...args: any) => SvelteComponent,
        modalOptions: ModalOptions
    ) => {

        const divWrapper = document.createElement("div");
        const contentID = "id" + Date.now();
        divWrapper.id = contentID;

        const modalWrapper = document.createElement("ion-modal") as HTMLIonModalElement;
        let modalContent = document.createElement("div");

        /* assign properties - maybe use hasOwnProperties or so? */
        Object.keys(modalOptions)
            .filter(key => !['component', 'componentProps'].includes(key))
            .forEach(key => {
                modalWrapper[key] = modalOptions[key]
            })

        divWrapper.appendChild(modalWrapper);
        modalWrapper.appendChild(modalContent);
        document.body.appendChild(divWrapper);

        const svelteComponent = new component({ target: modalContent, props: modalOptions.componentProps });

        modalWrapper.onDidDismiss().then(() => {
            svelteComponent.$destroy();
            divWrapper.remove();
        });

        return modalWrapper;
    },

    dismiss: (data?: any, role?: string | undefined, id?: string | undefined) => {
        return modalControllerOrg.dismiss(data, role)
    },

    getTop: () => {
        return modalControllerOrg.getTop();
    }
}

This repo is upgraded with fully new version - also in a more library fashion, inspired by your earlier code.

There are still some challenges - especially with Tabbar - I could use some help, but not sure about your appetite :)

[raymondboswel]

Hi @Tommertom, that's awesome. It looks pretty good. I have a new addition to the family so my time is very limited right now, but I'll take a look at the tabbar and see if there's anything I can do. If you're in a hurry, you could log the issue in the Ionic repo, they were super responsive when I was finding my way through the custom elements build.