Merge branch 'main' into version-3

Author: teemingc

.changeset/silent-sites-end.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: `config.kit.csp.directives['trusted-types']` requires `'svelte-trusted-html'` (and `'sveltekit-trusted-url'` when a service worker is automatically registered) if it is configured

.changeset/twelve-taxis-move.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': minor
+---
+
+feat: return boolean from `submit` to indicate submission validity for enhanced `form` remote functions

CONTRIBUTING.md

@@ -84,8 +84,20 @@ If there are tests that fail on the CI, you can retrieve the failed screenshots
 
 It is very easy to introduce flakiness in a browser test. If you try to fix the flakiness in a test, you can run it until failure to gain some confidence you've fixed the test with a command like:
 
+```sh
+pnpx playwright test --workers=1 --repeat-each 1000 --max-failures 1 -g "accepts a Request object"
 ```
-npx playwright test --workers=1 --repeat-each 1000 --max-failures 1 -g "accepts a Request object"
+
+The Playwright tests can also be run with the following environment variables to augment how the tests run locally:
+
+```sh
+# Default values
+KIT_E2E_BROWSER=chromium
+KIT_E2E_RETRIES=0
+KIT_E2E_WORKERS=undefined
+
+# Append the modified environment variable before the test command
+KIT_E2E_RETRIES=2 pnpm test:kit
 ```
 
 ## Working on Vite and other dependencies

documentation/docs/20-core-concepts/60-remote-functions.md

@@ -392,13 +392,22 @@ Because our form contains a `file` input, we've added an `enctype="multipart/for
 
 In the case of `radio` and `checkbox` inputs that all belong to the same field, the `value` must be specified as a second argument to `.as(...)`:
 
+```js
+/// file: constants.js
+export const operatingSystems = /** @type {const} */ (['windows', 'mac', 'linux']);
+export const languages = /** @type {const} */ (['html', 'css', 'js']);
+```
+
 ```js
 /// file: data.remote.js
+// @filename: constants.js
+export const operatingSystems = /** @type {const} */ (['windows', 'mac', 'linux']);
+export const languages = /** @type {const} */ (['html', 'css', 'js']);
+// @filename: index.js
 import * as v from 'valibot';
 import { form } from '$app/server';
 // ---cut---
-export const operatingSystems = /** @type {const} */ (['windows', 'mac', 'linux']);
-export const languages = /** @type {const} */ (['html', 'css', 'js']);
+import { operatingSystems, languages } from './constants';
 
 export const survey = form(
 	v.object({
@@ -704,10 +713,13 @@ We can customize what happens when the form is submitted with the `enhance` meth
 
 <form {...createPost.enhance(async ({ form, data, submit }) => {
 	try {
-		await submit();
-		form.reset();
+		if (await submit()) {
+			form.reset();
 
-		showToast('Successfully published!');
+			showToast('Successfully published!');
+		} else {
+			showToast('Invalid data!');
+		}
 	} catch (error) {
 		showToast('Oh no! Something went wrong');
 	}

packages/kit/src/core/config/index.js

@@ -1,7 +1,9 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import process from 'node:process';
 import * as url from 'node:url';
 import options from './options.js';
+import { resolve_entry } from '../../utils/filesystem.js';
 
 /**
  * Loads the template (src/app.html by default) and validates that it has the
@@ -96,7 +98,7 @@ export async function load_config({ cwd }) {
  * @returns {import('types').ValidatedConfig}
  */
 export function process_config(config, { cwd }) {
-	const validated = validate_config(config);
+	const validated = validate_config(config, cwd);
 
 	validated.kit.env.dir = path.resolve(cwd, validated.kit.env.dir);
 	validated.kit.outDir = path.resolve(cwd, validated.kit.outDir);
@@ -117,15 +119,17 @@ export function process_config(config, { cwd }) {
 
 /**
  * @param {import('@sveltejs/kit').Config} config
+ * @param {string} [cwd]
  * @returns {import('types').ValidatedConfig}
  */
-export function validate_config(config) {
+export function validate_config(config, cwd = process.cwd()) {
 	if (typeof config !== 'object') {
 		throw new Error(
 			'The Svelte config file must have a configuration object as its default export. See https://svelte.dev/docs/kit/configuration'
 		);
 	}
 
+	/** @type {import('types').ValidatedConfig} */
 	const validated = options(config, 'config');
 	const files = validated.kit.files;
 
@@ -152,5 +156,22 @@ export function validate_config(config) {
 		}
 	}
 
+	if (validated.kit.csp?.directives?.['require-trusted-types-for']?.includes('script')) {
+		if (!validated.kit.csp?.directives?.['trusted-types']?.includes('svelte-trusted-html')) {
+			throw new Error(
+				"The `csp.directives['trusted-types']` option must include 'svelte-trusted-html'"
+			);
+		}
+		if (
+			validated.kit.serviceWorker?.register &&
+			resolve_entry(path.resolve(cwd, validated.kit.files.serviceWorker)) &&
+			!validated.kit.csp?.directives?.['trusted-types']?.includes('sveltekit-trusted-url')
+		) {
+			throw new Error(
+				"The `csp.directives['trusted-types']` option must include 'sveltekit-trusted-url' when `serviceWorker.register` is true"
+			);
+		}
+	}
+
 	return validated;
 }

packages/kit/src/core/config/options.js

@@ -1,6 +1,6 @@
-import process from 'node:process';
+/** @import { Validator } from './types.js' */
 
-/** @typedef {import('./types.js').Validator} Validator */
+import process from 'node:process';
 
 const directives = object({
 	'child-src': string_array(),

packages/kit/src/exports/public.d.ts

@@ -2040,10 +2040,10 @@ export type RemoteForm<Input extends RemoteFormInput | void, Output> = {
 		callback: (opts: {
 			form: HTMLFormElement;
 			data: Input;
-			submit: () => Promise<void> & {
-				updates: (...updates: RemoteQueryUpdate[]) => Promise<void>;
+			submit: () => Promise<boolean> & {
+				updates: (...updates: RemoteQueryUpdate[]) => Promise<boolean>;
 			};
-		}) => void | Promise<void>
+		}) => void
 	): {
 		method: 'POST';
 		action: string;

packages/kit/src/runtime/client/remote-functions/form.svelte.js

@@ -130,6 +130,7 @@ export function form(id) {
 			}
 
 			try {
+				// eslint-disable-next-line @typescript-eslint/await-thenable -- `callback` is typed as returning `void` to allow returning e.g. `Promise<boolean>`
 				await callback({
 					form,
 					data,
@@ -146,7 +147,7 @@ export function form(id) {
 
 		/**
 		 * @param {FormData} data
-		 * @returns {Promise<any> & { updates: (...args: any[]) => any }}
+		 * @returns {Promise<boolean> & { updates: (...args: any[]) => Promise<boolean> }}
 		 */
 		function submit(data) {
 			// Store a reference to the current instance and increment the usage count for the duration
@@ -167,7 +168,7 @@ export function form(id) {
 			/** @type {Error | undefined} */
 			let updates_error;
 
-			/** @type {Promise<any> & { updates: (...args: RemoteQueryUpdate[]) => Promise<any> }} */
+			/** @type {Promise<boolean> & { updates: (...args: RemoteQueryUpdate[]) => Promise<boolean> }} */
 			const promise = (async () => {
 				try {
 					await Promise.resolve();
@@ -204,21 +205,25 @@ export function form(id) {
 
 					if (form_result.type === 'result') {
 						({ issues: raw_issues = [], result } = devalue.parse(form_result.result, app.decoders));
+						const succeeded = raw_issues.length === 0;
 
-						if (!issues.$) {
+						if (succeeded) {
 							if (form_result.refreshes) {
 								apply_refreshes(form_result.refreshes);
 							} else {
 								void invalidateAll();
 							}
 						}
+
+						return succeeded;
 					} else if (form_result.type === 'redirect') {
 						const stringified_refreshes = form_result.refreshes ?? '';
 						if (stringified_refreshes) {
 							apply_refreshes(stringified_refreshes);
 						}
 						// Use internal version to allow redirects to external URLs
 						void _goto(form_result.location, { invalidateAll: !stringified_refreshes }, 0);
+						return true;
 					} else {
 						throw new HttpError(form_result.status ?? 500, form_result.error);
 					}
@@ -434,8 +439,8 @@ export function form(id) {
 
 		instance[createAttachmentKey()] = create_attachment(
 			form_onsubmit(({ submit, form }) =>
-				submit().then(() => {
-					if (!issues.$) {
+				submit().then((succeeded) => {
+					if (succeeded) {
 						form.reset();
 					}
 				})

packages/kit/src/runtime/server/page/render.js

@@ -608,8 +608,14 @@ export async function render_response({
 			// we use an anonymous function instead of an arrow function to support
 			// older browsers (https://github.com/sveltejs/kit/pull/5417)
 			blocks.push(`if ('serviceWorker' in navigator) {
+						const script_url = '${prefixed('service-worker.js')}';
+						const policy = globalThis?.window?.trustedTypes?.createPolicy(
+							'sveltekit-trusted-url',
+							{ createScriptURL(url) { return url; } }
+						);
+						const sanitised = policy?.createScriptURL(script_url) ?? script_url;
 						addEventListener('load', function () {
-							navigator.serviceWorker.register('${prefixed('service-worker.js')}'${opts});
+							navigator.serviceWorker.register(sanitised${opts});
 						});
 					}`);
 		}

packages/kit/test/apps/async/src/routes/remote/form/[test_name]/+page.svelte

@@ -7,6 +7,8 @@
 
 	const scoped = set_message.for(`scoped:${params.test_name}`);
 	const enhanced = set_message.for(`enhanced:${params.test_name}`);
+
+	let submit_result = $state('none');
 </script>
 
 <p>message.current: {message.current}</p>
@@ -52,7 +54,9 @@
 <form
 	data-enhanced
 	{...enhanced.enhance(async ({ data, submit }) => {
-		await submit().updates(message.withOverride(() => data.message + ' (override)'));
+		submit_result = String(
+			await submit().updates(message.withOverride(() => data.message + ' (override)'))
+		);
 	})}
 >
 	{#if enhanced.fields.message.issues()}
@@ -67,6 +71,7 @@
 <p>enhanced.input.message: {enhanced.fields.message.value()}</p>
 <p>enhanced.pending: {enhanced.pending}</p>
 <p>enhanced.result: {enhanced.result}</p>
+<p>enhanced.submit_result: {submit_result}</p>
 
 <hr />