From 74bfad07afe70fec40de4db3d32a87af306406db Mon Sep 17 00:00:00 2001
From: Emanuele Stoppa <my.burning@gmail.com>
Date: Wed, 4 Dec 2024 15:38:50 +0000
Subject: [PATCH] fix: experimental svg types (#12625)

* fix: experimental svg types

* apply suggestion
---
 .changeset/rare-cooks-battle.md           |  5 +++
 packages/astro/src/core/config/schema.ts  | 29 +++++++++-----
 packages/astro/src/types/public/config.ts | 46 ++++++++++++-----------
 pnpm-lock.yaml                            |  6 ---
 4 files changed, 48 insertions(+), 38 deletions(-)
 create mode 100644 .changeset/rare-cooks-battle.md

diff --git a/.changeset/rare-cooks-battle.md b/.changeset/rare-cooks-battle.md
new file mode 100644
index 000000000000..cc6955fa490f
--- /dev/null
+++ b/.changeset/rare-cooks-battle.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes an issue where the `experimental.svg` had incorrect type, resulting in some errors in the editors.
diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts
index 3ddaf3e0c292..464ea3de1ace 100644
--- a/packages/astro/src/core/config/schema.ts
+++ b/packages/astro/src/core/config/schema.ts
@@ -11,6 +11,7 @@ import type { OutgoingHttpHeaders } from 'node:http';
 import path from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import { z } from 'zod';
+import type { SvgRenderMode } from '../../assets/utils/svg.js';
 import { EnvSchema } from '../../env/schema.js';
 import type { AstroUserConfig, ViteUserConfig } from '../../types/public/config.js';
 import { appendForwardSlash, prependForwardSlash, removeTrailingForwardSlash } from '../path.js';
@@ -96,9 +97,7 @@ export const ASTRO_CONFIG_DEFAULTS = {
 		clientPrerender: false,
 		contentIntellisense: false,
 		responsiveImages: false,
-		svg: {
-			mode: 'inline',
-		},
+		svg: false,
 	},
 } satisfies AstroUserConfig & { server: { open: boolean } };
 
@@ -540,18 +539,28 @@ export const AstroConfigSchema = z.object({
 			svg: z
 				.union([
 					z.boolean(),
-					z.object({
-						mode: z
-							.union([z.literal('inline'), z.literal('sprite')])
-							.optional()
-							.default(ASTRO_CONFIG_DEFAULTS.experimental.svg.mode),
-					}),
+					z
+						.object({
+							mode: z.union([z.literal('inline'), z.literal('sprite')]).optional(),
+						})
+						.optional(),
 				])
 				.optional()
+				.default(ASTRO_CONFIG_DEFAULTS.experimental.svg)
 				.transform((svgConfig) => {
 					// Handle normalization of `experimental.svg` config boolean values
 					if (typeof svgConfig === 'boolean') {
-						return svgConfig ? ASTRO_CONFIG_DEFAULTS.experimental.svg : undefined;
+						return svgConfig
+							? {
+									mode: 'inline' as SvgRenderMode,
+								}
+							: undefined;
+					} else {
+						if (!svgConfig.mode) {
+							return {
+								mode: 'inline' as SvgRenderMode,
+							};
+						}
 					}
 					return svgConfig;
 				}),
diff --git a/packages/astro/src/types/public/config.ts b/packages/astro/src/types/public/config.ts
index 43aea0743a69..0b663f55641e 100644
--- a/packages/astro/src/types/public/config.ts
+++ b/packages/astro/src/types/public/config.ts
@@ -1940,28 +1940,30 @@ export interface ViteUserConfig extends OriginalViteUserConfig {
 		 * For a complete overview, and to give feedback on this experimental API,
 		 * see the [Feature RFC](https://github.com/withastro/roadmap/pull/1035).
 		 */
-		svg?: {
-			/**
-			 *
-			 * @name experimental.svg.mode
-			 * @type {string}
-			 * @default 'inline'
-			 *
-			 * The default technique for handling imported SVG files. Astro will inline the SVG content into your HTML output if not specified.
-			 *
-			 * - `inline`: Astro will inline the SVG content into your HTML output.
-			 * - `sprite`: Astro will generate a sprite sheet with all imported SVG files.
-			 *
-			 * ```astro
-			 * ---
-			 * import Logo from './path/to/svg/file.svg';
-			 * ---
-			 *
-			 * <Logo size={24} mode="sprite" />
-			 * ```
-			 */
-			mode?: SvgRenderMode;
-		};
+		svg?:
+			| boolean
+			| {
+					/**
+					 *
+					 * @name experimental.svg.mode
+					 * @type {string}
+					 * @default 'inline'
+					 *
+					 * The default technique for handling imported SVG files. Astro will inline the SVG content into your HTML output if not specified.
+					 *
+					 * - `inline`: Astro will inline the SVG content into your HTML output.
+					 * - `sprite`: Astro will generate a sprite sheet with all imported SVG files.
+					 *
+					 * ```astro
+					 * ---
+					 * import Logo from './path/to/svg/file.svg';
+					 * ---
+					 *
+					 * <Logo size={24} mode="sprite" />
+					 * ```
+					 */
+					mode: SvgRenderMode;
+			  };
 	};
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8c321c363c6e..f87bd6cd9e0d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -968,12 +968,6 @@ importers:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
 
-  packages/astro/e2e/fixtures/custom-renderer:
-    dependencies:
-      astro:
-        specifier: workspace:*
-        version: link:../../..
-
   packages/astro/e2e/fixtures/dev-toolbar:
     dependencies:
       '@astrojs/preact':