feat: add Snippet type (#9584)

* feat: add Snippet type

related to #9447

* one more test

.changeset/shiny-baboons-play.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: add Snippet type

packages/svelte/src/compiler/phases/1-parse/acorn.js

@@ -2,7 +2,6 @@ import * as acorn from 'acorn';
 import { walk } from 'zimmerframe';
 import { tsPlugin } from 'acorn-typescript';
 
-// @ts-expect-error
 const ParserWithTS = acorn.Parser.extend(tsPlugin());
 
 /**

packages/svelte/src/compiler/phases/1-parse/ambient.d.ts

@@ -0,0 +1,3 @@
+// Silence the acorn typescript errors through this ambient type definition + tsconfig.json path alias
+// That way we can omit `"skipLibCheck": true` and catch other errors in our d.ts files
+declare module 'acorn-typescript';

packages/svelte/src/main/public.d.ts

@@ -185,6 +185,19 @@ export type ComponentType<Comp extends SvelteComponent> = (new (
 	element?: typeof HTMLElement;
 };
 
+declare const SnippetReturn: unique symbol;
+
+/**
+ * The type of a `#snippet` block. You can use it to (for example) express that your component expects a snippet of a certain type:
+ * ```ts
+ * let { banner } = $props<{ banner: Snippet<{ text: string }> }>();
+ * ```
+ * You can only call a snippet through the `{@render ...}` tag.
+ */
+export interface Snippet<T = void> {
+	(arg: T): typeof SnippetReturn;
+}
+
 interface DispatchOptions {
 	cancelable?: boolean;
 }

packages/svelte/tests/types/snippet.ts

@@ -0,0 +1,40 @@
+import type { Snippet } from 'svelte';
+
+const return_type: ReturnType<Snippet> = null as any;
+
+// @ts-expect-error
+const a: Snippet<{ text: string }> = () => {};
+// @ts-expect-error
+const b: Snippet<boolean> = (a, b) => {
+	return return_type;
+};
+// @ts-expect-error
+const c: Snippet<boolean> = (a: string) => {
+	return return_type;
+};
+// @ts-expect-error
+const d: Snippet<boolean> = (a: string, b: number) => {
+	return return_type;
+};
+// @ts-expect-error
+const e: Snippet = (a: string) => {
+	return return_type;
+};
+const f: Snippet = (a) => {
+	// @ts-expect-error
+	a?.x;
+	return return_type;
+};
+const g: Snippet<boolean> = (a) => {
+	// @ts-expect-error
+	a === '';
+	a === true;
+	return return_type;
+};
+const h: Snippet<{ a: true }> = (a) => {
+	a.a === true;
+	return return_type;
+};
+const i: Snippet = () => {
+	return return_type;
+};

packages/svelte/tsconfig.json

@@ -10,12 +10,12 @@
 		"noErrorTruncation": true,
 		"allowSyntheticDefaultImports": true,
 		"verbatimModuleSyntax": true,
-		"skipLibCheck": true,
 		"types": ["node"],
 		"strict": true,
 		"allowJs": true,
 		"checkJs": true,
 		"paths": {
+			"acorn-typescript": ["./src/compiler/phases/1-parse/ambient.d.ts"],
 			"svelte": ["./src/main/public.d.ts"],
 			"svelte/action": ["./src/action/public.d.ts"],
 			"svelte/compiler": ["./src/compiler/public.d.ts"],