merge

.changeset/chilled-fireants-learn.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': major
+---
+
+breaking: remove deprecated `use:enhance` callback values

.changeset/mean-moose-smell.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': major
+---
+
+breaking: error if form without multipart/form-data enctype contains a file input

.github/workflows/ci.yml

@@ -30,7 +30,7 @@ jobs:
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - run: pnpm run lint
-      - run: cd packages/kit && pnpm prepublishOnly && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please run prepublishOnly locally and commit the changes after you have reviewed them" && exit 1); }
+      - run: cd packages/kit && pnpm prepublishOnly && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please run prepublishOnly locally and commit the changes after you have reviewed them"; git diff; exit 1); }
       - run: pnpm run check
   Tests:
     runs-on: ${{ matrix.os }}

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

@@ -234,7 +234,7 @@ To get data from an external API or a `+server.js` handler, you can use the prov
 - It can be used to make credentialed requests on the server, as it inherits the `cookie` and `authorization` headers for the page request.
 - It can make relative requests on the server (ordinarily, `fetch` requires a URL with an origin when used in a server context).
 - Internal requests (e.g. for `+server.js` routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.
-- During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text` and `json` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](hooks#server-hooks-handle).
+- During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the `text`, `json` and `arrayBuffer` methods of the `Response` object. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](hooks#server-hooks-handle).
 - During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request - if you received a warning in your browser console when using the browser `fetch` instead of the `load` `fetch`, this is why.
 
 ```js
@@ -278,7 +278,7 @@ Cookies will only be passed through the provided `fetch` function if the target
 For example, if SvelteKit is serving my.domain.com:
 - domain.com WILL NOT receive cookies
 - my.domain.com WILL receive cookies
-- api.domain.dom WILL NOT receive cookies
+- api.domain.com WILL NOT receive cookies
 - sub.my.domain.com WILL receive cookies
 
 Other cookies will not be passed when `credentials: 'include'` is set, because SvelteKit does not know which domain which cookie belongs to (the browser does not pass this information along), so it's not safe to forward any of them. Use the [handleFetch hook](hooks#server-hooks-handlefetch) to work around it.
@@ -625,6 +625,20 @@ To summarize, a `load` function will rerun in the following situations:
 
 Note that rerunning a `load` function will update the `data` prop inside the corresponding `+layout.svelte` or `+page.svelte`; it does _not_ cause the component to be recreated. As a result, internal state is preserved. If this isn't what you want, you can reset whatever you need to reset inside an [`afterNavigate`](modules#$app-navigation-afternavigate) callback, and/or wrap your component in a [`{#key ...}`](https://svelte.dev/docs#template-syntax-key) block.
 
+## Implications for authentication
+
+A couple features of loading data have important implications for auth checks:
+- Layout `load` functions do not run on every request, such as during client side navigation between child routes. [(When do load functions rerun?)](load#rerunning-load-functions-when-do-load-functions-rerun)
+- Layout and page `load` functions run concurrently unless `await parent()` is called. If a layout `load` throws, the page `load` function runs, but the client will not receive the returned data.
+
+There are a few possible strategies to ensure an auth check occurs before protected code.
+
+To prevent data waterfalls and preserve layout `load` caches:
+- Use [hooks](hooks) to protect multiple routes before any `load` functions run
+- Use auth guards directly in `+page.server.js` `load` functions for route specific protection
+
+Putting an auth guard in `+layout.server.js` requires all child pages to call `await parent()` before protected code. Unless every child page depends on returned data from `await parent()`, the other options will be more performant.
+
 ## Further reading
 
 - [Tutorial: Loading data](https://learn.svelte.dev/tutorial/page-data)

documentation/docs/20-core-concepts/40-page-options.md

@@ -39,7 +39,7 @@ While prerendering, the value of `building` imported from [`$app/environment`](m
 
 ### Prerendering server routes
 
-Unlike the other page options, `prerender` also applies to `+server.js` files. These files are _not_ affected from layouts, but will inherit default values from the pages that fetch data from them, if any. For example if a `+page.js` contains this `load` function...
+Unlike the other page options, `prerender` also applies to `+server.js` files. These files are _not_ affected by layouts, but will inherit default values from the pages that fetch data from them, if any. For example if a `+page.js` contains this `load` function...
 
 ```js
 /// file: +page.js

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

@@ -117,7 +117,7 @@ Updating the context-based store value in deeper-level pages or components will
 
 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.
 
-## Component state is preserved
+## Component and page state is preserved
 
 When you navigate around your application, SvelteKit reuses existing layout and page components. For example, if you have a route like this...
 
@@ -140,7 +140,7 @@ When you navigate around your application, SvelteKit reuses existing layout and
 <div>{@html data.content}</div>
 ```
 
-...then navigating from `/blog/my-short-post` to `/blog/my-long-post` won't cause the component to be destroyed and recreated. The `data` prop (and by extension `data.title` and `data.content`) will change, but because the code isn't rerunning, `estimatedReadingTime` won't be recalculated.
+...then navigating from `/blog/my-short-post` to `/blog/my-long-post` won't cause the layout, page and any other components within to be destroyed and recreated. Instead the `data` prop (and by extension `data.title` and `data.content`) will update (as it would with any other Svelte component) and, because the code isn't rerunning, lifecycle methods like `onMount` and `onDestroy` won't rerun and `estimatedReadingTime` won't be recalculated.
 
 Instead, we need to make the value [_reactive_](https://learn.svelte.dev/tutorial/reactive-assignments):
 
@@ -155,7 +155,9 @@ Instead, we need to make the value [_reactive_](https://learn.svelte.dev/tutoria
 </script>
 ```
 
-Reusing components like this means that things like sidebar scroll state are preserved, and you can easily animate between changing values. However, if you do need to completely destroy and remount a component on navigation, you can use this pattern:
+> If your code in `onMount` and `onDestroy` has to run again after navigation you can use [afterNavigate](modules#$app-navigation-afternavigate) and [beforeNavigate](modules#$app-navigation-beforenavigate) respectively.
+
+Reusing components like this means that things like sidebar scroll state are preserved, and you can easily animate between changing values. In the case that you do need to completely destroy and remount a component on navigation, you can use this pattern:
 
 ```svelte
 {#key $page.url.pathname}

documentation/docs/30-advanced/30-link-options.md

@@ -122,8 +122,8 @@ To disable any of these options inside an element where they have been enabled,
 </div>
 ```
 
-To apply an attribute to an element conditionally, do this (`"true"` and `"false"` are both accepted values):
+To apply an attribute to an element conditionally, do this:
 
-```html
-<div data-sveltekit-reload={shouldReload}>
+```svelte
+<div data-sveltekit-preload-data={condition ? 'hover' : false}>
 ```

documentation/docs/30-advanced/40-service-workers.md

@@ -66,21 +66,39 @@ self.addEventListener('fetch', (event) => {
 
 		// `build`/`files` can always be served from the cache
 		if (ASSETS.includes(url.pathname)) {
-			return cache.match(url.pathname);
+			const response = await cache.match(url.pathname);
+
+			if (response) {
+				return response;
+			}
 		}
 
 		// for everything else, try the network first, but
 		// fall back to the cache if we're offline
 		try {
 			const response = await fetch(event.request);
 
+			// if we're offline, fetch can return a value that is not a Response
+			// instead of throwing - and we can't pass this non-Response to respondWith
+			if (!(response instanceof Response)) {
+				throw new Error('invalid response from fetch');
+			}
+
 			if (response.status === 200) {
 				cache.put(event.request, response.clone());
 			}
 
 			return response;
-		} catch {
-			return cache.match(event.request);
+		} catch (err) {
+			const response = await cache.match(event.request);
+
+			if (response) {
+				return response;
+			}
+
+			// if there's no cache, then just error out
+			// as there is nothing we can do to respond to this request
+			throw err;
 		}
 	}
 

documentation/docs/60-appendix/10-faq.md

@@ -65,7 +65,7 @@ If you are still encountering issues we recommend searching both [the Vite issue
 
 ## How do I use the view transitions API with SvelteKit?
 
-While SvelteKit does not have any specific integration with [view transitions](https://developer.chrome.com/docs/web-platform/view-transitions/), you can call `document.startViewTransition` in [`onNavigate`](/docs/modules#$app-navigation-onnavigate) to trigger a view transition on every navigation.
+While SvelteKit does not have any specific integration with [view transitions](https://developer.chrome.com/docs/web-platform/view-transitions/), you can call `document.startViewTransition` in [`onNavigate`](/docs/modules#$app-navigation-onnavigate) to trigger a view transition on every client-side navigation.
 
 ```js
 // @errors: 2339 2810

documentation/docs/60-appendix/30-migrating-to-sveltekit-2.md

@@ -113,6 +113,16 @@ During prerendering in SvelteKit 1, they are one and the same. As such, prerende
 
 Because of this, dynamic environment variables can no longer be read during prerendering in SvelteKit 2 — you should use the `static` modules instead. If the user lands on a prerendered page, SvelteKit will request up-to-date values for `$env/dynamic/public` from the server (by default from a module called `_env.js` — this can be configured with `config.kit.env.publicModule`) instead of reading them from the server-rendered HTML.
 
+## `form` and `data` have been removed from `use:enhance` callbacks
+
+If you provide a callback to [`use:enhance`](/docs/form-actions#progressive-enhancement-use-enhance), it will be called with an object containing various useful properties.
+
+In SvelteKit 1, those properties included `form` and `data`. These were deprecated some time ago in favour of `formElement` and `formData`, and have been removed altogether in SvelteKit 2.
+
+## Forms containing file inputs must use `multipart/form-data`
+
+If a form contains an `<input type="file">` but does not have an `enctype="multipart/form-data"` attribute, non-JS submissions will omit the file. SvelteKit 2 will throw an error if it encounters a form like this during a `use:enhance` submission to ensure that your forms work correctly when JavaScript is not present.
+
 ## Updated dependency requirements
 
 SvelteKit 2 requires Node `18.13` or higher, and the following minimum dependency versions:

package.json

@@ -19,18 +19,18 @@
 		"start": "cd sites/kit.svelte.dev && npm run dev"
 	},
 	"devDependencies": {
-		"@changesets/cli": "^2.26.2",
+		"@changesets/cli": "^2.27.1",
 		"@sveltejs/eslint-config": "^6.0.4",
 		"@svitejs/changesets-changelog-github-compact": "^1.1.0",
-		"@typescript-eslint/eslint-plugin": "^6.0.0",
-		"eslint": "^8.52.0",
-		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-svelte": "^2.31.0",
+		"@typescript-eslint/eslint-plugin": "^6.14.0",
+		"eslint": "^8.55.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.35.1",
 		"eslint-plugin-unicorn": "^49.0.0",
 		"playwright": "1.30.0",
-		"prettier": "^3.1.0",
-		"svelte": "^4.2.7",
-		"typescript": "^5.3.2"
+		"prettier": "^3.1.1",
+		"svelte": "^4.2.8",
+		"typescript": "^5.3.3"
 	},
 	"packageManager": "pnpm@8.11.0",
 	"engines": {

packages/adapter-auto/package.json

@@ -31,9 +31,9 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@types/node": "^18.19.1",
-		"typescript": "^5.3.2"
+		"@sveltejs/vite-plugin-svelte": "^3.0.1",
+		"@types/node": "^18.19.3",
+		"typescript": "^5.3.3"
 	},
 	"dependencies": {
 		"import-meta-resolve": "^4.0.0"

packages/adapter-cloudflare-workers/package.json

@@ -30,14 +30,14 @@
 		"check": "tsc"
 	},
 	"dependencies": {
-		"@cloudflare/workers-types": "^4.20230404.0",
+		"@cloudflare/workers-types": "^4.20231121.0",
 		"@iarna/toml": "^2.2.5",
-		"esbuild": "^0.19.3"
+		"esbuild": "^0.19.9"
 	},
 	"devDependencies": {
 		"@cloudflare/kv-asset-handler": "^0.3.0",
-		"@types/node": "^18.19.1",
-		"typescript": "^5.3.2"
+		"@types/node": "^18.19.3",
+		"typescript": "^5.3.3"
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^1.0.0 || ^2.0.0"

packages/adapter-cloudflare/package.json

@@ -32,14 +32,14 @@
 		"prepublishOnly": "pnpm build"
 	},
 	"dependencies": {
-		"@cloudflare/workers-types": "^4.20230404.0",
-		"esbuild": "^0.19.3",
+		"@cloudflare/workers-types": "^4.20231121.0",
+		"esbuild": "^0.19.9",
 		"worktop": "0.8.0-next.15"
 	},
 	"devDependencies": {
-		"@types/node": "^18.19.1",
-		"@types/ws": "^8.5.3",
-		"typescript": "^5.3.2"
+		"@types/node": "^18.19.3",
+		"@types/ws": "^8.5.10",
+		"typescript": "^5.3.3"
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^1.0.0 || ^2.0.0"

packages/adapter-netlify/package.json

@@ -34,21 +34,21 @@
 	},
 	"dependencies": {
 		"@iarna/toml": "^2.2.5",
-		"esbuild": "^0.19.3",
+		"esbuild": "^0.19.9",
 		"set-cookie-parser": "^2.6.0"
 	},
 	"devDependencies": {
-		"@netlify/functions": "^2.4.0",
+		"@netlify/functions": "^2.4.1",
 		"@rollup/plugin-commonjs": "^25.0.7",
-		"@rollup/plugin-json": "^6.0.1",
+		"@rollup/plugin-json": "^6.1.0",
 		"@rollup/plugin-node-resolve": "^15.2.3",
 		"@sveltejs/kit": "workspace:^",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@types/node": "^18.19.1",
-		"@types/set-cookie-parser": "^2.4.2",
-		"rollup": "^4.2.0",
-		"typescript": "^5.3.2",
-		"vitest": "^1.0.0"
+		"@sveltejs/vite-plugin-svelte": "^3.0.1",
+		"@types/node": "^18.19.3",
+		"@types/set-cookie-parser": "^2.4.7",
+		"rollup": "^4.8.0",
+		"typescript": "^5.3.3",
+		"vitest": "^1.0.4"
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^1.5.0 || ^2.0.0"

packages/adapter-node/package.json

@@ -33,21 +33,21 @@
 		"prepublishOnly": "pnpm build"
 	},
 	"devDependencies": {
-		"@polka/url": "^1.0.0-next.24",
+		"@polka/url": "1.0.0-next.24",
 		"@sveltejs/kit": "workspace:^",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@types/node": "^18.19.1",
-		"c8": "^8.0.0",
-		"polka": "^1.0.0-next.24",
+		"@sveltejs/vite-plugin-svelte": "^3.0.1",
+		"@types/node": "^18.19.3",
+		"c8": "^8.0.1",
+		"polka": "1.0.0-next.24",
 		"sirv": "^2.0.3",
-		"typescript": "^5.3.2",
-		"vitest": "^1.0.0"
+		"typescript": "^5.3.3",
+		"vitest": "^1.0.4"
 	},
 	"dependencies": {
 		"@rollup/plugin-commonjs": "^25.0.7",
-		"@rollup/plugin-json": "^6.0.1",
+		"@rollup/plugin-json": "^6.1.0",
 		"@rollup/plugin-node-resolve": "^15.2.3",
-		"rollup": "^4.2.0"
+		"rollup": "^4.8.0"
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^1.0.0 || ^2.0.0"

packages/adapter-static/index.js

@@ -18,7 +18,7 @@ export default function (options) {
 									has_param_routes
 										? '(routes with parameters are not part of entry points by default)'
 										: ''
-							  } — see https://kit.svelte.dev/docs/configuration#prerender for more info.`
+								} — see https://kit.svelte.dev/docs/configuration#prerender for more info.`
 							: '';
 
 					builder.log.error(

packages/adapter-static/package.json

@@ -32,12 +32,12 @@
 	"devDependencies": {
 		"@playwright/test": "1.30.0",
 		"@sveltejs/kit": "workspace:^",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@types/node": "^18.19.1",
+		"@sveltejs/vite-plugin-svelte": "^3.0.1",
+		"@types/node": "^18.19.3",
 		"sirv": "^2.0.3",
-		"svelte": "^4.2.7",
-		"typescript": "^5.3.2",
-		"vite": "^5.0.4"
+		"svelte": "^4.2.8",
+		"typescript": "^5.3.3",
+		"vite": "^5.0.8"
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.0.0"

packages/adapter-static/test/apps/prerendered/package.json

@@ -10,10 +10,10 @@
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:^",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"sirv-cli": "^2.0.2",
-		"svelte": "^4.2.7",
-		"vite": "^5.0.4"
+		"svelte": "^4.2.8",
+		"vite": "^5.0.8"
 	},
 	"type": "module"
 }

packages/adapter-static/test/apps/spa/package.json

@@ -11,10 +11,10 @@
 	"devDependencies": {
 		"@sveltejs/adapter-node": "workspace:^",
 		"@sveltejs/kit": "workspace:^",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"sirv-cli": "^2.0.2",
-		"svelte": "^4.2.7",
-		"vite": "^5.0.4"
+		"svelte": "^4.2.8",
+		"vite": "^5.0.8"
 	},
 	"type": "module"
 }