Skip to content

page.params from $app/state not a rune server-side #14954

Open
@quentinderoubaix

Description

@quentinderoubaix

Describe the bug

I don't think this is a bug, but would like to open the discussion through this issue.

We now have the possibility to use the page object from $app/state instead of the store from $app/stores, which is awesome !

Something that could be confusing however is that the page object exposes runes only in client mode, and not in server mode.
Which means that if a user writes the following code:

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

export const routing = new (class Routing {
    #nameUpper = $derived(page.params.name?.toUpperCase());
    get nameUpper() {
        return this.#nameUpper;
    }
})();

This will work perfectly fine client-side, but will not work for pre-rendered routes !
You can check the reproduction link to see it.

Obviously, a simple fix is updating the above code to the following:

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

export const routing = new (class Routing {
    get nameUpper() {
        return page.params.name?.toUpperCase();
    }
})();

So there is no bug, just a slight confusion... Should users avoid using $derived with the page info ? Should they check if running in the browser to use $derived or simple getters ?

Reproduction

https://github.com/quentinderoubaix/showcase-app-state-behavior

Logs

No response

System Info

System:
  OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
  CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-1280P
  Memory: 8.45 GB / 15.47 GB
  Container: Yes
  Shell: 5.2.21 - /bin/bash
Binaries:
  Node: 22.11.0 - /usr/local/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 10.9.2 - /usr/local/bin/npm
  pnpm: 9.15.3 - /usr/local/bin/pnpm
  bun: 1.1.0 - ~/.bun/bin/bun
  Watchman: 4.9.0 - /usr/bin/watchman
npmPackages:
  @sveltejs/adapter-static: ^3.0.6 => 3.0.8 
  @sveltejs/kit: ^2.0.0 => 2.15.2 
  @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.4 
  svelte: ^5.0.0 => 5.16.5 
  vite: ^5.4.11 => 5.4.11

Severity

annoyance

Additional Information

No response

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