feat: add PageProps to $./types

[weebao]

Closes #12726

Added a PageProps type for defining page props using the $props() rune.

<!--- file: page.svelte --->
<script>
	import { PageProps } from './$types';

	let { data }: PageProps = $props();
</script>

---

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

Edits

• Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4ad2dc8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sveltejs/kit	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Rich-Harris]

preview: https://svelte-dev-git-preview-kit-12967-svelte.vercel.app/

this is an automated message

[eltigerchino]

Did you accidentally forget to commit the changes? This PR only modifies the documentation

[weebao]

I'm pretty sure I changed the code. I will check now. Thansk for the notice!

[eltigerchino]

@weebao I think you meant to make the changes in the file below before regenerating the types.

kit/packages/kit/src/types/ambient.d.ts

Lines 36 to 46 in d94a854

	/**
	* Defines the common shape of the [$page.data store](https://svelte.dev/docs/kit/$app-stores#page) - that is, the data that is shared between all pages.
	* The `Load` and `ServerLoad` functions in `./$types` will be narrowed accordingly.
	* Use optional properties for data that is only present on specific pages. Do not add an index signature (`[key: string]: any`).
	*/
	export interface PageData {}
	/**
	* The shape of the `$page.state` object, which can be manipulated using the [`pushState`](https://svelte.dev/docs/kit/$app-navigation#pushState) and [`replaceState`](https://svelte.dev/docs/kit/$app-navigation#replaceState) functions from `$app/navigation`.
	*/
	export interface PageState {}

The types/index.d.ts file will get replaced based on the changes to this file.

[MathiasWP]

Why have the "data" in the props? Wouldn't it be even cleaner to emit it?

[weebao]

Why have the "data" in the props? Wouldn't it be even cleaner to emit it?

That's because I want to not keep writing the code below on every page, so this is what I proposed.

<script>
	import { PageData } from './$types';

	interface PageProps {
		data: PageData;
	}

	let { data }: PageProps = $props();
</script>

Is this the correct way of doing it? This is my first time submitting a PR to this codebase so please let me know if I'm doing terribly wrong 😅

[MathiasWP]

Why have the "data" in the props? Wouldn't it be even cleaner to emit it?

That's because I want to not keep writing the code below on every page, so this is what I proposed.

<script>
	import { PageData } from './$types';

	interface PageProps {
		data: PageData;
	}

	let { data }: PageProps = $props();
</script>

Is this the correct way of doing it? This is my first time submitting a PR to this codebase so please let me know if I'm doing terribly wrong 😅

What about something like this?

// +page.ts
export const load = () => {
	return {
		framework: "svelte",
		version: 5
	}
}

<script lang="ts">
// +page.svelte
import { PageProps } from './$types';

let { framework, version }: PageProps = $props()
</script>

A +page.svelte file cannot get its props from anything other than the load method, right? So why have the extra "data" variable wrapping? I see why it was needed with Svelte 4, but it feels unnecessary with Svelte 5.

[weebao]

@MathiasWP

Ohhh, I get your point. Having the data variable wrapper would make it redundant then. Right now I just made a simple fix for me and the other person who created the issue.

I think for your example case, the user would have to define their own CustomPageProps instead of importing from the global ./$types since I'm not sure how to implement PageProps to be customized for each page's data, but that would definitely make the code a lot cleaner! Can you show me how to implement this since I'm still not familiar with the codebase yet. Thank you!

[MathiasWP]

@MathiasWP

Ohhh, I get your point. Having the data variable wrapper would make it redundant then. Right now I just made a simple fix for me and the other person who created the issue.

I think for your example case, the user would have to define their own CustomPageProps instead of importing from the global ./$types since I'm not sure how to implement PageProps to be customized for each page's data, but that would definitely make the code a lot cleaner! Can you show me how to implement this since I'm still not familiar with the codebase yet. Thank you!

Before spending time implementing it we should get an approval on the API from some of the svelte(kit) maintainers @Rich-Harris @dummdidumm @benmccann

[Rich-Harris]

this doesn't belong here — PageProps isn't part of the App namespace, it's part of ./$types

Suggested change

* // interface PageProps {}

[Rich-Harris]

ditto

Suggested change

	/**
	* Defines the reusable shape for [$props()](https://svelte.dev/docs/svelte/$props#Type-safety) for `+page.svelte` specifically
	*/
	export interface PageProps {
	data: PageData;
	}

[Rich-Harris]

Hi — thanks for the PR but I'm afraid this isn't the right way to do it — PageProps doesn't belong in the App namespace. The $types.d.ts file emitted for each route in write_types.js should contain something like this...

export type PageProps = { data: PageData, form: ActionData, children: Snippet };

(Note that it includes form, where appropriate, and children — in other words no, we do need a top-level data prop)

[weebao]

@Rich-Harris That actually makes so much sense. I'll work on it now

[weebao]

Pretty dumb way to write this I know. I could've pushed this in the nested if above but I just thought writing it below PageData would be more intuitive. Also, didn't know how to add children in LayoutProps since I can't write import("svelte").Snippet as svelte isn't included.