Navigation

[itsfolf]

The state of navigation in this project seems a bit unclear at the moment:

On one hand, there's SvelteKit's routing, however, this doesn't give you a native-like experience with stacks, transitions, and gestures. It looks like the answer to that is IonPage, but all it currently does is a rudimentary swipe animation that doesn't even work on the way out.

And then there's IonNav/navController, which seems to be more connected with Ionic, but decouples routes from SvelteKit.

How can one achieve smooth native-like transitions and history, especially when working with stacked drawers and tab views?

[Tommertom]

Hey there,

Thanks for raising this.

True full navigation experience as you can find with React/Angular/Vue integration is still on the todo-list. The problem here is that to achieve this I likely need to rewrite large chunks of the routing system of SvelteKit. That is for me currently a too steep project to take on given the time consumption as well the uncertainties if it works.

So this makes it possibly not usable for more complex requirements like the ones you mention.

I am sorry about this, but for now this is where I stand. And I am happy to get contributions and/or showcases that hint on the feasibility to achieve this.

[Forsakenrox]

Hey there,

Thanks for raising this.

True full navigation experience as you can find with React/Angular/Vue integration is still on the todo-list. The problem here is that to achieve this I likely need to rewrite large chunks of the routing system of SvelteKit. That is for me currently a too steep project to take on given the time consumption as well the uncertainties if it works.

So this makes it possibly not usable for more complex requirements like the ones you mention.

I am sorry about this, but for now this is where I stand. And I am happy to get contributions and/or showcases that hint on the feasibility to achieve this.

Ionic vue implementation just use vue-router package, may be better use simple Svelte (not Kit) with "svelte-router" ? code is very simmilar with vue. Just thinking out loud. I really appreciate the work you've done and condemn the reluctance of Ionic maintainers to support svelte, but at this stage your solution is still far from production ready =\

[Tommertom]

Fully agree it is not production ready and feel like i am at crossroads

I like the file based routing of kit but in all fairness most other kit features seem not relevant for people building mobile ui apps with ionic - as those need to be SPAs - form actions, server stuff... just the unified code base with api endpoints make sense to some extend

So why bother ionic mobile app devs with irrelevant api - also causing confusion when reaching out to the (very nice) community?

So then the question is maybe indeed go for a different router to make sure devs are better guided

I am at crossroads here. I know there is some fundamental work needed on overlays - the routing is another fundamental thing....

[burggraf]

Here's what I'm doing:

navigation.service.ts

export let pathStack: string[] = []

import { afterNavigate } from '$app/navigation';
import { base } from '$app/paths'

export const pushPathStack = async () => {
      afterNavigate(({from}) => {
        if (from !== null && from?.url !== null) {
            pathStack.push(from?.url.pathname || base || '/');
        } else {
            pathStack.push(base || '/');
        }
      });
}

export const popPathStack = () => {
    const path = pathStack.pop();
    return path || base || '/';
}

in pages:

import { pushPathStack, popPathStack } from '$services/navigation.service'
const ionViewWillEnter = async () => {
	pushPathStack();
}
// in my back button
goto(popPathStack());

[KiddoV]

@burggraf Can you show a demo app?

I really like this project but @Forsakenrox is right, without routing, seems like it is not ready.

Related to my question: #91

[Tommertom]

Ionic vue implementation just use vue-router package, may be better use simple Svelte (not Kit) with "svelte-router" ?

@itsfolf I am looking to rebuild ionic-svelte in order to make it more maintainable. I am looking first to write down some principles (see #93)

For the points you raise -

• we want native feel animations and gesture responses
• we need a router that connects with these

I am not very keen to rebuild a router and the alternative routers (svelte-router-spa and routify) do not give me the impression they are either well maintained nor fully embraced by developers. Next, to achieve the animations/gestures, we need router APIs that makes it easier to tie in.

For now, this means that first I want to see if at all it possible to (manually) add the animations - even if that means adding divs so the Kit router does the in/out transitions.

Adding the complex Ionic JS-2-CSS animations is likely impossible anyway, as it requires a different strategy by the router loading/showing/unloading components - e.g. they need to be kept in memory. This requirement was confirmed by Ionic's team.

An interesting test would be to see if the ion-router can be used to achieve the animation objectives....

Happy to hear your developer views on the issue discussing a rebuild #93)