Router features about svelte-spa-router HOT 13 CLOSED

Ok here's the update:

• I created the Advanced Usage doc explaining how to do transitions, nested routers, route groups
• For lazy loading: I've done some research, and that's actually something I might need to implement into the router itself and it's not very high in the priority list for me at the moment.

@hlobil and @ansarizafar if you're interested in the lazy loading, can you please create a separate issue? (and remember that PRs are welcome 😉 ) Thanks

from svelte-spa-router.

Here is a component that does lazy loading.

https://github.com/kaisermann/svelte-loadable

from svelte-spa-router.

Can you please open a separate issue for this?

from svelte-spa-router.

Hi @ansarizafar

That's a lot of requests 😄

1. Lazy loading: this is not in scope right now. I would also need to do some research to see if that can be implemented in the application outside of this component specifically. I am happy to consider a PR for this however.
2. Route groups: if I understand the feature correctly, you can do that by creating a new Svelte component as route, and include all components you want within that. You could also have multiple, nested svelte-spa-router components
3. Hooks: Can you give me an example? There could likely be a way to do that by just using Svelte.
4. Progress bars: same as above, can you please give me an example?
5. Nested routes: As per point 2, you can create a Svelte component nesting your components, or you can have nested <Router>'s
6. Animations can be done within the Svelte components itself. For example, you can wrap your component in a <div transition:fade="{{delay: 250, duration: 300}}">..</div>

It sounds like I might need to create a documentation article on "advanced topics" and explain better how (at least some of) the points above could be achieved with existing features of the router and/or Svelte.

from svelte-spa-router.

Thanks for your reply. Lazy loading is very important for bundle size. It would be great, If we can use await import('./home-view') to load route component. For hooks please have a look at Vue router navigation guards https://router.vuejs.org/guide/advanced/navigation-guards.html#global-after-hooks

from svelte-spa-router.

I'll need to do some research to see what lazy loading would require. It might be able to do that with the current module too, by managing the lazy loading logic inside the application. I can also explore how it would affect the router itself if I were to add it there; my main goal is to keep the router as simple as possible, and offload most other features to Svelte or the application itself (see how querystring support was implemented: the router returns the string but doesn't parse that, to avoid adding an extra dependency).

For both lazy loading and hooks, I'm happy to accept PRs 😉 And maybe open a separate issue for each of them please.

In the meanwhile, I'm leaving this issue open to remind myself to add some docs for certain topics like nested routing, animations, etc.

from svelte-spa-router.

This is very interesting. I'll try it and see if this can work with the router seamlessly.

Haven't been able to look at the docs I promised I'd make yet, but hopefully in the next few days.

from svelte-spa-router.

@ItalyPaleAle any news for Lazy loading? Amazing project this one!

from svelte-spa-router.

@frederikhors check here: https://github.com/ItalyPaleAle/svelte-spa-router/blob/master/Advanced%20Usage.md#async-route-loading

from svelte-spa-router.

@frederikhors check here: https://github.com/ItalyPaleAle/svelte-spa-router/blob/master/Advanced%20Usage.md#async-route-loading

Thanks I see. But it just doesn't work with sveltejs Rollup template and () => import("")?

Do we really need https://github.com/hmmhmmhm/svelte-spa-chunk?

from svelte-spa-router.

Thanks I see. But it just doesn't work with sveltejs Rollup template and () => import("")?

Do we really need https://github.com/hmmhmmhm/svelte-spa-chunk?

Well, it depends on what you want to do.

You could just use () => import("") (as long as you put the route definition object into an async function, and await for the import to complete before initializing the app). That would give you code splitting; however, all the JS modules would be loaded before the app is initialized. So, it's not lazy loading. It can still help for example with caching...

from svelte-spa-router.

@ItalyPaleAle with respect to transition, doing this

<div transition:fade="{{delay: 250, duration: 300}}">..</div>

for all pages/route components becomes cumbersome and repetitive after a while. is it possible to use a wrapper around the routes like this

<PageTransition>
     <Router {routes}/>
</PageTransition>

N.B this does not work currently with svelte-spa-router.

from svelte-spa-router.

@ItalyPaleAle #182

from svelte-spa-router.