fix(svelte): improve Svelte children prop type checking (#15070)

Author: antonyfaris

.changeset/every-carpets-grin.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/svelte': patch
+---
+
+Improve Svelte `children` prop type checking

packages/integrations/svelte/svelte-shims.d.ts

@@ -4,25 +4,62 @@ import type { JSX } from 'astro/jsx-runtime';
 
 export type AstroClientDirectives = JSX.AstroComponentDirectives;
 
+type Snippet = import('svelte').Snippet;
+
 /**
- * Helper to detect index-signature-like keys (string or number).
+ * Helper to detect index-signature-like keys.
  */
-type IsIndexSignatureKey<K> = string extends K ? true : number extends K ? true : false;
+type IsIndexSignatureKey<K> = string extends K
+	? true
+	: number extends K
+		? true
+		: symbol extends K
+			? true
+			: false;
 
 /**
  * Removes index signatures whose value type is `never`.
  * (Keeps normal, explicitly-declared keys unchanged.)
  */
 export type StripNeverIndexSignatures<T> = {
 	[K in keyof T as IsIndexSignatureKey<K> extends true
-		? T[K] extends never
+		? [T[K]] extends [never]
 			? never
 			: K
 		: K]: T[K];
 };
 
 /**
- * Svelte component props plus Astro's client directives,
- * with `never` index signatures stripped out.
+ * If `children` exists and is `never`, make it `{ children?: undefined }`
+ * (works even when it was required).
+ * If `children` doesn't exist, add `{ children?: undefined }`.
+ */
+type NormalizeNeverChildren<T> = 'children' extends keyof T
+	? [T['children']] extends [never]
+		? Omit<T, 'children'> & { children?: undefined }
+		: T
+	: T & { children?: undefined };
+
+/**
+ * If `children` includes `Snippet` (even as part of a union), widen to `any`
+ * to allow arbitrary content.
+ */
+type WidenChildrenIfSnippet<T> = {
+	[K in keyof T]: K extends 'children'
+		? Extract<NonNullable<T[K]>, Snippet> extends never
+			? T[K]
+			: any
+		: T[K];
+};
+
+/**
+ * `T` (Svelte props) made safe for Astro:
+ * - Normalize `children` (avoid `never`/missing cases)
+ * - Widen snippet-based `children` to `any` (Astro slot/content compatibility)
+ * - Strip useless `never` index signatures (allow extra keys like `client:*`)
+ * - Add Astro client directives
  */
-export type PropsWithClientDirectives<T> = StripNeverIndexSignatures<T> & AstroClientDirectives;
+export type PropsWithClientDirectives<T> = StripNeverIndexSignatures<
+	WidenChildrenIfSnippet<NormalizeNeverChildren<T>>
+> &
+	AstroClientDirectives;

packages/integrations/svelte/test/check.test.js

@@ -33,4 +33,49 @@ describe('Svelte Check', () => {
 		}
 		assert.equal(exitCode, 0, 'Expected check to pass (exit code 0)');
 	});
+
+	it('should pass check on valid children usage', async () => {
+		const root = fileURLToPath(new URL('./fixtures/prop-types/types/children', import.meta.url));
+		const tsConfigPath = fileURLToPath(
+			new URL('./fixtures/prop-types/tsconfig.children-pass.json', import.meta.url),
+		);
+		const { getResult } = cli('check', '--tsconfig', tsConfigPath, '--root', root);
+		const { exitCode, stdout, stderr } = await getResult();
+
+		if (exitCode !== 0) {
+			console.error(stdout);
+			console.error(stderr);
+		}
+		assert.equal(exitCode, 0, 'Expected check to pass (exit code 0)');
+	});
+
+	it('should fail check on invalid text children', async () => {
+		const root = fileURLToPath(new URL('./fixtures/prop-types/types/children', import.meta.url));
+		const tsConfigPath = fileURLToPath(
+			new URL('./fixtures/prop-types/tsconfig.children-fail.json', import.meta.url),
+		);
+		const { getResult } = cli('check', '--tsconfig', tsConfigPath, '--root', root);
+		const { exitCode, stdout } = await getResult();
+
+		assert.equal(exitCode, 1, 'Expected check to fail (exit code 1)');
+		assert.ok(
+			stdout.includes(`'Empty' components don't accept text`),
+			'Expected Empty component error',
+		);
+		assert.ok(
+			stdout.includes(`'EmptyV5' components don't accept text`),
+			'Expected EmptyV5 component error',
+		);
+	});
+
+	it('should fail check on invalid element children', { skip: true }, async () => {
+		const root = fileURLToPath(new URL('./fixtures/prop-types/types/children', import.meta.url));
+		const tsConfigPath = fileURLToPath(
+			new URL('./fixtures/prop-types/tsconfig.children-fail-element.json', import.meta.url),
+		);
+		const { getResult } = cli('check', '--tsconfig', tsConfigPath, '--root', root);
+		const { exitCode } = await getResult();
+
+		assert.equal(exitCode, 1, 'Expected check to fail (exit code 1)');
+	});
 });

packages/integrations/svelte/test/fixtures/prop-types/tsconfig.children-fail-element.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["types/children/FailElement.astro"]
+}

packages/integrations/svelte/test/fixtures/prop-types/tsconfig.children-fail.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["types/children/Fail.astro"]
+}

packages/integrations/svelte/test/fixtures/prop-types/tsconfig.children-pass.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["types/children/Pass.astro"]
+}

packages/integrations/svelte/test/fixtures/prop-types/types/children/Arbitrary.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+
+  interface Props {
+    children: number;
+  }
+
+  const { children }: Props = $props();
+</script>
+
+<p>{children}</p>

packages/integrations/svelte/test/fixtures/prop-types/types/children/Empty.svelte

@@ -0,0 +1 @@
+<p>hello world</p>

packages/integrations/svelte/test/fixtures/prop-types/types/children/EmptyV5.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  const value = $state();
+</script>
+
+<p>hello world</p>

packages/integrations/svelte/test/fixtures/prop-types/types/children/Explicit.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children: Snippet;
+  }
+
+  const { children }: Props = $props();
+</script>
+
+{@render children()}