Skip to content

Navigation #79

Description

@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?

Activity

Tommertom commented on May 12, 2023

@Tommertom
Collaborator

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 commented on Jun 29, 2023

@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 commented on Jun 30, 2023

@Tommertom
Collaborator

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 commented on Jun 30, 2023

@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 commented on Dec 15, 2023

@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: https://github.com/Tommertom/svelte-ionic-app/issues/91

Tommertom commented on Jan 7, 2024

@Tommertom
Collaborator

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 https://github.com/Tommertom/svelte-ionic-app/issues/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 https://github.com/Tommertom/svelte-ionic-app/issues/93)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions