Skip to content

Add $routes type alias #13517

@vladshcherbin

Description

@vladshcherbin

Describe the problem

I'd love to use route data directly in $lib/components instead of passing props to reduce type boilerplate. This is possible with page.data from $app/state, but it lacks proper types, requiring manual type assertions:

import { page } from '$app/state';
import type { PageData } from "../../routes/listings/$types";

const { carsCount } = $derived(page.data as PageData)

The main challenge is importing the correct PageData type, especially in deeply nested components and routes - path can quickly become cumbersome.

Describe the proposed solution

I'd love to have $routes alias which points directly to generated route types so I can use it in any part of the app:

import { page } from '$app/state';
import type { PageData } from "$routes/listings/$types";

const { carsCount } = $derived(page.data as PageData)

It's already working by providing alias in svelte.config.js:

export default {
  kit: {
    alias: {
      $routes: '.svelte-kit/types/src/routes'
    }
  }
}

Would be nice to have it right of the box 🥳

Alternatives considered

Some generic with route path param would also be fine

Importance

would make my life easier

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    feature / enhancementNew feature or requesthelp wantedPRs welcomed. The implementation details are unlikely to cause debateneeds-decisionNot sure if we want to do this yet, also design work needed

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions