Merge branch 'sveltejs:main' into main

.github/PULL_REQUEST_TEMPLATE.md

@@ -8,3 +8,7 @@
 
 ### 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.

README.md

@@ -22,7 +22,7 @@ Web development, streamlined. Read the [documentation](https://kit.svelte.dev/do
 | [create-svelte](packages/create-svelte)                                     | [Changelog](packages/create-svelte/CHANGELOG.md)              |
 | [svelte-migrate](packages/migrate)                                          | [Changelog](packages/migrate/CHANGELOG.md)                    |
 
-[Additional adapters](<(https://sveltesociety.dev/packages#svelte-kit-adapters)>) are maintained by the community.
+[Additional adapters](https://sveltesociety.dev/packages?category=sveltekit-adapters) are maintained by the community.
 
 ## Bug reporting
 

documentation/docs/20-core-concepts/20-load.md

@@ -168,6 +168,8 @@ Server `load` functions _always_ run on the server.
 
 By default, universal `load` functions run on the server during SSR when the user first visits your page. They will then run again during hydration, reusing any responses from [fetch requests](#making-fetch-requests). All subsequent invocations of universal `load` functions happen in the browser. You can customize the behavior through [page options](page-options). If you disable [server side rendering](page-options#ssr), you'll get an SPA and universal `load` functions _always_ run on the client.
 
+If a route contains both universal and server `load` functions, the server `load` runs first.
+
 A `load` function is invoked at runtime, unless you [prerender](page-options#prerender) the page — in that case, it's invoked at build time.
 
 ### Input
@@ -190,7 +192,29 @@ Server `load` functions are convenient when you need to access data directly fro
 
 Universal `load` functions are useful when you need to `fetch` data from an external API and don't need private credentials, since SvelteKit can get the data directly from the API rather than going via your server. They are also useful when you need to return something that can't be serialized, such as a Svelte component constructor.
 
-In rare cases, you might need to use both together — for example, you might need to return an instance of a custom class that was initialised with data from your server.
+In rare cases, you might need to use both together — for example, you might need to return an instance of a custom class that was initialised with data from your server. When using both, the server `load` return value is _not_ passed directly to the page, but to the universal `load` function (as the `data` property):
+
+```js
+/// file: src/routes/+page.server.js
+/** @type {import('./$types').PageServerLoad} */
+export async function load() {
+	return {
+		serverMessage: 'hello from server load function'
+	};
+}
+```
+
+```js
+/// file: src/routes/+page.js
+// @errors: 18047
+/** @type {import('./$types').PageLoad} */
+export async function load({ data }) {
+	return {
+		serverMessage: data.serverMessage,
+		universalMessage: 'hello from universal load function'
+	};
+}
+```
 
 ## Using URL data
 

documentation/docs/20-core-concepts/50-state-management.md

@@ -113,7 +113,7 @@ You might wonder how we're able to use `$page.data` and other [app stores](modul
 <p>Welcome {$user.name}</p>
 ```
 
-Updating the context-based store value in deeper-level pages or components will not affect the value in the parent component when the page is rendered via SSR: The parent component has already been rendered by the time the store value is updated. To avoid values 'flashing' during state updates during hydration, it is generally recommended to pass state down into components rather than up.
+Updating the value of a context-based store in deeper-level pages or components while the page is being rendered via SSR will not affect the value in the parent component because it has already been rendered by the time the store value is updated. In contrast, on the client (when CSR is enabled, which is the default) the value will be propagated and components, pages, and layouts higher in the hierarchy will react to the new value. Therefore, to avoid values 'flashing' during state updates during hydration, it is generally recommended to pass state down into components rather than up.
 
 If you're not using SSR (and can guarantee that you won't need to use SSR in future) then you can safely keep state in a shared module, without using the context API.
 

documentation/docs/25-build-and-deploy/20-adapters.md

@@ -13,7 +13,7 @@ Official adapters exist for a variety of platforms — these are documented on t
 - [`@sveltejs/adapter-static`](adapter-static) for static site generation (SSG)
 - [`@sveltejs/adapter-vercel`](adapter-vercel) for Vercel
 
-Additional [community-provided adapters](https://sveltesociety.dev/packages#svelte-kit-adapters) exist for other platforms.
+Additional [community-provided adapters](https://sveltesociety.dev/packages?category=sveltekit-adapters) exist for other platforms.
 
 ## Using adapters
 

documentation/docs/25-build-and-deploy/40-adapter-node.md

@@ -63,7 +63,7 @@ Alternatively, the server can be configured to accept connections on a specified
 SOCKET_PATH=/tmp/socket node build
 ```
 
-### `ORIGIN`, `PROTOCOL_HEADER` and `HOST_HEADER`
+### `ORIGIN`, `PROTOCOL_HEADER`, `HOST_HEADER`, and `PORT_HEADER`
 
 HTTP doesn't give SvelteKit a reliable way to know the URL that is currently being requested. The simplest way to tell SvelteKit where the app is being served is to set the `ORIGIN` environment variable:
 
@@ -81,6 +81,8 @@ PROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host node build
 ```
 
 > [`x-forwarded-proto`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-Proto) and [`x-forwarded-host`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-Host) are de facto standard headers that forward the original protocol and host if you're using a reverse proxy (think load balancers and CDNs). You should only set these variables if your server is behind a trusted reverse proxy; otherwise, it'd be possible for clients to spoof these headers.
+>
+> If you're hosting your proxy on a non-standard port and your reverse proxy supports `x-forwarded-port`, you can also set `PORT_HEADER=x-forwarded-port`.
 
 If `adapter-node` can't correctly determine the URL of your deployment, you may experience this error when using [form actions](form-actions):
 

documentation/docs/30-advanced/67-shallow-routing.md

@@ -93,6 +93,6 @@ For this to work, you need to load the data that the `+page.svelte` expects. A c
 
 ## Caveats
 
-During server-side rendering, `$page.state` is always an empty object. The same is true for the first page the user lands on — if the user reloads the page, state will _not_ be applied until they navigate.
+During server-side rendering, `$page.state` is always an empty object. The same is true for the first page the user lands on — if the user reloads the page (or returns from another document), state will _not_ be applied until they navigate.
 
 Shallow routing is a feature that requires JavaScript to work. Be mindful when using it and try to think of sensible fallback behavior in case JavaScript isn't available.

documentation/docs/40-best-practices/20-seo.md

@@ -14,7 +14,7 @@ While search engines have got better in recent years at indexing content that wa
 
 ### Performance
 
-Signals such as [Core Web Vitals](https://web.dev/vitals/#core-web-vitals) impact search engine ranking. Because Svelte and SvelteKit introduce minimal overhead, it's easier to build high performance sites. You can test your site's performance using Google's [PageSpeed Insights](https://pagespeed.web.dev/) or [Lighthouse](https://developers.google.com/web/tools/lighthouse).
+Signals such as [Core Web Vitals](https://web.dev/vitals/#core-web-vitals) impact search engine ranking. Because Svelte and SvelteKit introduce minimal overhead, it's easier to build high performance sites. You can test your site's performance using Google's [PageSpeed Insights](https://pagespeed.web.dev/) or [Lighthouse](https://developers.google.com/web/tools/lighthouse). Read [the performance page](performance) for more details.
 
 ### Normalized URLs
 
@@ -28,30 +28,6 @@ Every page should have well-written and unique `<title>` and `<meta name="descri
 
 > A common pattern is to return SEO-related `data` from page [`load`](load) functions, then use it (as [`$page.data`](modules#$app-stores)) in a `<svelte:head>` in your root [layout](routing#layout).
 
-### Structured data
-
-[Structured data](https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data) helps search engines understand the content of a page. If you're using structured data alongside [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess), you will need to explicitly preserve `ld+json` data (this [may change in future](https://github.com/sveltejs/svelte-preprocess/issues/305)):
-
-```js
-/// file: svelte.config.js
-// @filename: ambient.d.ts
-declare module 'svelte-preprocess';
-
-// @filename: index.js
-// ---cut---
-import preprocess from 'svelte-preprocess';
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	preprocess: preprocess({
-		preserve: ['ld+json']
-		// ...
-	})
-};
-
-export default config;
-```
-
 ### Sitemaps
 
 [Sitemaps](https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap) help search engines prioritize pages within your site, particularly when you have a large amount of content. You can create a sitemap dynamically using an endpoint:

documentation/docs/60-appendix/20-integrations.md

@@ -4,7 +4,7 @@ title: Integrations
 
 ## Preprocessors
 
-Preprocessors transform your `.svelte` files before passing them to the compiler. For example, if your `.svelte` file uses TypeScript and PostCSS, it must first be transformed into JavaScript and CSS so that the Svelte compiler can handle it. There are many [available preprocessors](https://sveltesociety.dev/packages#preprocessors). The Svelte team maintains two official ones discussed below.
+Preprocessors transform your `.svelte` files before passing them to the compiler. For example, if your `.svelte` file uses TypeScript and PostCSS, it must first be transformed into JavaScript and CSS so that the Svelte compiler can handle it. There are many [available preprocessors](https://sveltesociety.dev/packages?category=preprocessors). The Svelte team maintains two official ones discussed below.
 
 ### `vitePreprocess`
 
@@ -27,7 +27,7 @@ You will need to install `svelte-preprocess` with `npm install --save-dev svelte
 
 ## Adders
 
-[Svelte Adders](https://sveltesociety.dev/templates#adders) allow you to setup many different complex integrations like Tailwind, PostCSS, Storybook, Firebase, GraphQL, mdsvex, and more with a single command. Please see [sveltesociety.dev](https://sveltesociety.dev/) for a full listing of templates, components, and tools available for use with Svelte and SvelteKit.
+[Svelte Adders](https://sveltesociety.dev/templates?category=svelte-add) allow you to setup many different complex integrations like Tailwind, PostCSS, Storybook, Firebase, GraphQL, mdsvex, and more with a single command. Please see [sveltesociety.dev](https://sveltesociety.dev/) for a full listing of templates, components, and tools available for use with Svelte and SvelteKit.
 
 ## Vite plugins
 

documentation/docs/60-appendix/50-additional-resources.md

@@ -17,7 +17,7 @@ We've written and published a few different SvelteKit sites as examples:
 - [`kit.svelte.dev`](https://github.com/sveltejs/kit/tree/main/sites/kit.svelte.dev)
 - [`svelte.dev`](https://github.com/sveltejs/svelte/tree/main/sites/svelte.dev)
 
-SvelteKit users have also published plenty of examples on GitHub, under the [#sveltekit](https://github.com/topics/sveltekit) and [#sveltekit-template](https://github.com/topics/sveltekit-template) topics, as well as on [the Svelte Society site](https://sveltesociety.dev/templates#svelte-kit). Note that these have not been vetted by the maintainers and may not be up to date.
+SvelteKit users have also published plenty of examples on GitHub, under the [#sveltekit](https://github.com/topics/sveltekit) and [#sveltekit-template](https://github.com/topics/sveltekit-template) topics, as well as on [the Svelte Society site](https://sveltesociety.dev/templates?category=sveltekit). Note that these have not been vetted by the maintainers and may not be up to date.
 
 ## Support
 

package.json

@@ -33,7 +33,7 @@
 		"svelte": "^4.2.8",
 		"typescript": "^5.3.3"
 	},
-	"packageManager": "pnpm@8.13.1",
+	"packageManager": "pnpm@8.14.0",
 	"engines": {
 		"pnpm": "^8.0.0"
 	}

packages/adapter-auto/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sveltejs/adapter-auto
 
+## 3.1.0
+
+### Minor Changes
+
+- feat: bump Azure adapter version ([#11496](https://github.com/sveltejs/kit/pull/11496))
+
 ## 3.0.1
 
 ### Patch Changes

packages/adapter-auto/adapters.js

@@ -23,7 +23,7 @@ export const adapters = [
 		name: 'Azure Static Web Apps',
 		test: () => process.env.GITHUB_ACTION_REPOSITORY === 'Azure/static-web-apps-deploy',
 		module: 'svelte-adapter-azure-swa',
-		version: '0.13'
+		version: '0.20'
 	},
 	{
 		name: 'AWS via SST',

packages/adapter-auto/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sveltejs/adapter-auto",
-	"version": "3.0.1",
+	"version": "3.1.0",
 	"description": "Automatically chooses the SvelteKit adapter for your current environment, if possible.",
 	"repository": {
 		"type": "git",

packages/adapter-node/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @sveltejs/adapter-node
 
+## 2.1.0
+
+### Minor Changes
+
+- feat: add `PORT_HEADER` env var for reverse proxies with non-standard ports ([#11249](https://github.com/sveltejs/kit/pull/11249))
+
+### Patch Changes
+
+- Updated dependencies [[`9556abae4ba28c02ba468735beb9eb868876a9a1`](https://github.com/sveltejs/kit/commit/9556abae4ba28c02ba468735beb9eb868876a9a1), [`8468af597c6240f7a3687ef1ed3873990b944f8c`](https://github.com/sveltejs/kit/commit/8468af597c6240f7a3687ef1ed3873990b944f8c)]:
+  - @sveltejs/kit@2.1.1
+
 ## 2.0.2
 
 ### Patch Changes

packages/adapter-node/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sveltejs/adapter-node",
-	"version": "2.0.2",
+	"version": "2.1.0",
 	"description": "Adapter for SvelteKit apps that generates a standalone Node server",
 	"repository": {
 		"type": "git",
@@ -37,7 +37,7 @@
 		"@sveltejs/kit": "workspace:^",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"@types/node": "^18.19.3",
-		"c8": "^8.0.1",
+		"c8": "^9.0.0",
 		"polka": "1.0.0-next.24",
 		"sirv": "^2.0.4",
 		"typescript": "^5.3.3",

packages/adapter-node/src/env.js

@@ -9,6 +9,7 @@ const expected = new Set([
 	'ADDRESS_HEADER',
 	'PROTOCOL_HEADER',
 	'HOST_HEADER',
+	'PORT_HEADER',
 	'BODY_SIZE_LIMIT'
 ]);
 

packages/adapter-node/src/handler.js

@@ -18,6 +18,7 @@ const xff_depth = parseInt(env('XFF_DEPTH', '1'));
 const address_header = env('ADDRESS_HEADER', '').toLowerCase();
 const protocol_header = env('PROTOCOL_HEADER', '').toLowerCase();
 const host_header = env('HOST_HEADER', 'host').toLowerCase();
+const port_header = env('PORT_HEADER', '').toLowerCase();
 const body_size_limit = parseInt(env('BODY_SIZE_LIMIT', '524288'));
 
 const dir = path.dirname(fileURLToPath(import.meta.url));
@@ -158,7 +159,12 @@ function sequence(handlers) {
 function get_origin(headers) {
 	const protocol = (protocol_header && headers[protocol_header]) || 'https';
 	const host = headers[host_header];
-	return `${protocol}://${host}`;
+	const port = port_header && headers[port_header];
+	if (port) {
+		return `${protocol}://${host}:${port}`;
+	} else {
+		return `${protocol}://${host}`;
+	}
 }
 
 export const handler = sequence(

packages/adapter-vercel/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sveltejs/adapter-vercel
 
+## 4.0.4
+
+### Patch Changes
+
+- fix: update @vercel/nft to 0.26.1 ([#11508](https://github.com/sveltejs/kit/pull/11508))
+
 ## 4.0.3
 
 ### Patch Changes

packages/adapter-vercel/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sveltejs/adapter-vercel",
-	"version": "4.0.3",
+	"version": "4.0.4",
 	"description": "A SvelteKit adapter that creates a Vercel app",
 	"repository": {
 		"type": "git",
@@ -31,7 +31,7 @@
 		"test": "vitest run"
 	},
 	"dependencies": {
-		"@vercel/nft": "^0.26.0",
+		"@vercel/nft": "^0.26.1",
 		"esbuild": "^0.19.9"
 	},
 	"devDependencies": {

packages/create-svelte/CHANGELOG.md

@@ -1,5 +1,11 @@
 # create-svelte
 
+## 6.0.6
+
+### Patch Changes
+
+- fix: set path: '/' in demo ([#11495](https://github.com/sveltejs/kit/pull/11495))
+
 ## 6.0.5
 
 ### Patch Changes

packages/create-svelte/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-svelte",
-	"version": "6.0.5",
+	"version": "6.0.6",
 	"description": "A CLI for creating new SvelteKit projects",
 	"repository": {
 		"type": "git",

packages/create-svelte/templates/default/src/routes/sverdle/+page.server.ts

@@ -45,7 +45,7 @@ export const actions = {
 			game.guesses[i] += key;
 		}
 
-		cookies.set('sverdle', game.toString(), { path: '' });
+		cookies.set('sverdle', game.toString(), { path: '/' });
 	},
 
 	/**
@@ -62,10 +62,10 @@ export const actions = {
 			return fail(400, { badGuess: true });
 		}
 
-		cookies.set('sverdle', game.toString(), { path: '' });
+		cookies.set('sverdle', game.toString(), { path: '/' });
 	},
 
 	restart: async ({ cookies }) => {
-		cookies.delete('sverdle', { path: '' });
+		cookies.delete('sverdle', { path: '/' });
 	}
 } satisfies Actions;

packages/enhanced-img/src/index.js

@@ -1,18 +1,14 @@
 import path from 'node:path';
+import { imagetools } from 'vite-imagetools';
 import { image } from './preprocessor.js';
 
 /**
  * @returns {Promise<import('vite').Plugin[]>}
  */
 export async function enhancedImages() {
-	const imagetools_plugin = await imagetools();
-	if (!imagetools_plugin) {
-		console.error(
-			'@sveltejs/enhanced-img: vite-imagetools is not installed. Skipping build-time optimizations'
-		);
-	}
-	return imagetools_plugin && !process.versions.webcontainer
-		? [image_plugin(imagetools_plugin), imagetools_plugin]
+	const imagetools_instance = await imagetools_plugin();
+	return !process.versions.webcontainer
+		? [image_plugin(imagetools_instance), imagetools_instance]
 		: [];
 }
 
@@ -64,15 +60,7 @@ const fallback = {
 	'.webp': 'png'
 };
 
-async function imagetools() {
-	/** @type {typeof import('vite-imagetools').imagetools} */
-	let imagetools;
-	try {
-		({ imagetools } = await import('vite-imagetools'));
-	} catch (err) {
-		return;
-	}
-
+async function imagetools_plugin() {
 	/** @type {Partial<import('vite-imagetools').VitePluginOptions>} */
 	const imagetools_opts = {
 		defaultDirectives: async ({ pathname, searchParams: qs }, metadata) => {