Use satifies operator (#7861)

* Use satifies operator

* generate TS with `satisfies` (#8001)

Co-authored-by: Rich Harris <[email protected]>

Author: benmccann

.changeset/cool-seahorses-cross.md

@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Use `satisfies` operator

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

@@ -271,7 +271,7 @@ export async function load({ cookies }) {
 Both server-only and shared `load` functions have access to a `setHeaders` function that, when running on the server, can set headers for the response. (When running in the browser, `setHeaders` has no effect.) This is useful if you want the page to be cached, for example:
 
 ```js
-// @errors: 2322
+// @errors: 2322 1360
 /// file: src/routes/products/+page.js
 /** @type {import('./$types').PageLoad} */
 export async function load({ fetch, setHeaders }) {

documentation/docs/30-advanced/20-hooks.md

@@ -158,7 +158,7 @@ declare namespace App {
 
 ```js
 /// file: src/hooks.server.js
-// @errors: 2322 2571 2339
+// @errors: 2322 1360 2571 2339
 // @filename: ambient.d.ts
 const Sentry: any;
 
@@ -178,7 +178,7 @@ export function handleError({ error, event }) {
 
 ```js
 /// file: src/hooks.client.js
-// @errors: 2322 2571 2339
+// @errors: 2322 1360 2571 2339
 // @filename: ambient.d.ts
 const Sentry: any;
 

documentation/docs/30-advanced/25-errors.md

@@ -81,7 +81,7 @@ Unexpected errors will go through the [`handleError`](/docs/hooks#shared-hooks-h
 
 ```js
 /// file: src/hooks.server.js
-// @errors: 2322 2571 2339
+// @errors: 2322 1360 2571 2339
 // @filename: ambient.d.ts
 const Sentry: any;
 

documentation/docs/50-reference/40-types.md

@@ -20,7 +20,7 @@ The `RequestHandler` and `Load` types both accept a `Params` argument allowing y
 
 ```js
 /// file: src/routes/[foo]/[bar]/[baz]/+page.server.js
-// @errors: 2355 2322
+// @errors: 2355 2322 1360
 /** @type {import('@sveltejs/kit').RequestHandler<{
  *   foo: string;
  *   bar: string;

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

@@ -3,7 +3,7 @@ import { Game } from './game';
 import type { PageServerLoad, Actions } from './$types';
 
 /** @type {import('./$types').PageServerLoad} */
-export const load: PageServerLoad = ({ cookies }) => {
+export const load = (({ cookies }) => {
 	const game = new Game(cookies.get('sverdle'));
 
 	return {
@@ -23,10 +23,10 @@ export const load: PageServerLoad = ({ cookies }) => {
 		 */
 		answer: game.answers.length >= 6 ? game.answer : null
 	};
-};
+}) satisfies PageServerLoad;
 
 /** @type {import('./$types').Actions} */
-export const actions: Actions = {
+export const actions = {
 	/**
 	 * Modify game state in reaction to a keypress. If client-side JavaScript
 	 * is available, this will happen in the browser instead of here
@@ -68,4 +68,4 @@ export const actions: Actions = {
 	restart: async ({ cookies }) => {
 		cookies.delete('sverdle');
 	}
-};
+} satisfies Actions;

packages/kit/src/core/sync/write_types/index.spec.js

@@ -265,4 +265,26 @@ test('Rewrites action types for a TypeScript module', () => {
 	);
 });
 
+test('Leaves satisfies operator untouched', () => {
+	const source = `
+		import type { Actions, PageServerLoad, RequestEvent } from './$types';
+		export function load({ params }) {
+			return {
+				a: 1
+			};
+		} satisfies PageServerLoad
+		export const actions = {
+			a: () => {},
+			b: (param: RequestEvent) => {},
+			c: (param) => {},
+		} satisfies Actions
+	`;
+
+	const rewritten = tweak_types(source, true);
+
+	assert.equal(rewritten?.exports, ['load', 'actions']);
+	assert.equal(rewritten?.modified, false);
+	assert.equal(rewritten?.code, source);
+});
+
 test.run();

sites/kit.svelte.dev/src/lib/docs/server/index.js

@@ -469,11 +469,12 @@ function convert_to_ts(js_code, indent = '', offset = '') {
 							code.overwrite(
 								node.getStart(),
 								node.name.getEnd(),
-								`${is_export ? 'export ' : ''}const ${node.name.getText()}: ${name} = ${
+								`${is_export ? 'export ' : ''}const ${node.name.getText()} = (${
 									is_async ? 'async ' : ''
 								}`
 							);
 							code.appendLeft(node.body.getStart(), '=> ');
+							code.appendLeft(node.body.getEnd(), `) satisfies ${name};`);
 
 							modified = true;
 						} else if (

sites/kit.svelte.dev/src/lib/docs/server/index.spec.js

@@ -59,18 +59,18 @@ export function GET(event) {
 \`\`\`generated-ts
 // @errors: 2461
 /// file: src/routes/what-is-my-user-agent/+server.ts
-import type { RequestHandler } from './$types';
 import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
 
-export const GET: RequestHandler = (event) => {
+export const GET = ((event) => {
 	// log all headers
 	console.log(...event.request.headers);
 
 	return json({
 		// retrieve a specific header
 		userAgent: event.request.headers.get('user-agent')
 	});
-}
+}) satisfies RequestHandler;
 \`\`\`
 
 etc etc