DEV Community

Discussion on: Svelte Smooth page transitions

Collapse
 
skwasha profile image
Sascha Linn

I'm not sure in which version it happened... but the segment prop no longer appears to be valid. I've yet to find what the appropriate replacement is.

Collapse
 
giorgosk profile image
Giorgos Kontopoulos 👀 • Edited

Yes there is some talks about removing segment from sapper but nothing has been committed yet. In here github.com/sveltejs/sapper/issues/824 you can find the discussion and some alternatives (using $page store)

Collapse
 
skwasha profile image
Sascha Linn • Edited

Yes. I saw that discussion as well. I guess my point was that the above code is no longer functional (at least the bits that rely on segment). Somewhere along the way that proposed change seems to have made it into the current sveletkit branch.

Does anyone know where the page store is in the Sveltekit world? Previously, it was in @sapper/app.

Thread Thread
 
sswam profile image
Sam Watkins

import { page } from '$app/stores';

Collapse
 
giorgosk profile image
Giorgos Kontopoulos 👀 • Edited

@skwasha I have updated the repo and replaced segment with $page.path and updated also the tutorial to reflect this change. Let me know if this works for you.

Collapse
 
skwasha profile image
Sascha Linn • Edited

Hey, that's great! Thanks for the update. Where did you happen to find the location for the page stores? I tried searching and checking old messages on the Discord but never saw any mention of it. Do you know if that's going to be where these "built in" stores will be located moving forward with Svelte Kit?

thanks again.

Thread Thread
 
giorgosk profile image
Giorgos Kontopoulos 👀

@skwasha I started digging in the sveltekit node_modules/sveltejs/kit/assets/runtime/app/stores.js code looking for $page.path mentioned in the github.com/sveltejs/sapper/issues/824 and found it. Perhaps the import import { page } from '@sveltejs/kit/assets/runtime/app/stores.js'; will get more elegant when sveltekit gets released (or I might be missing the correct way to do it) but this will be the way to use it again according to the issue/824.

Thread Thread
 
sswam profile image
Sam Watkins • Edited

I searched the discord and found the right way to do it:

import { page } from '$app/stores';

Thanks for this article, by the way, it's helping me get off the ground with svelte/kit.

Another idea for a change, you can set the class="current" like this, it's a bit shorter:

<a href="/" class:current={segment==="/"}>Home</a>
<a href="/about" class:current={segment==="/about"}>About</a>

Collapse
 
cholasimmons profile image
Chola • Edited

Hi @giorgosk, Great tutorial although my page fades are not ideal.

P.S: $page.path seems to have changed to $page.route.id?