Access to $page inside .ts file?

[realJogicodes]

Within onMount, I am calling a custom function, which is exported from $lib/utils:

// lib/utils.ts
export function myFunction (urlPath) {
   // do stuff
  goto(urlPath)
}

I am calling it like so an I need to pass in the current url:

// frontend/+page.svelte
<script>
  import { page } from '$app/stores';
  onMount(() => {
    myFunction($page.url.pathname)
  })
</script>

It run this exact same code on a couple of compnents and it occured to me, that doing $page.url.pathname over and over isn't ideal, because DRY so I tried refactoring that into myFunction.

Ideally, I'd run const redirectUrl = $page.url.pathname inside myFunction. But when I try that, I run into issues with typescript:

Cannot find name '$page'. Did you mean 'page'?ts(2552)

It is imported alright. Ok, so I try removing the $ which changes the type script complaint to:

Property 'url' does not exist on type 'Readable<Page<Record<string, string>, string | null>>'.ts(2339)

Is it not possible to run $page.url.pathname from $app/strores in a ts file by calling that from onMount? Do I need to make the function a front-end function somehow? I mean I am only calling it from onMount, so it should never run on the server if that's the issue

[geoffrich]

Outside of a Svelte component you can't use the $store syntax to get the value of the page store. You could use get:

import { get } from 'svelte/store';
import { page } from '$app/stores';
export function myFunction() {
  let urlPath = get(page).url.pathname;
  goto(urlPath)
}

[realJogicodes]

Thanks!