Patch for Astro VS Code Plugin type errors (#10562)

* Update Code.astro

Adding 'as any' to suppress Astro VS Code extension complaining

* Changes to Picture.astro to stop Astro VS Code extension complaining

* Couple more changes for supressing type errors

* fix(types): Fixes type errors in component properly

* chore: changeset

---------

Co-authored-by: Princesseuh <3019731+Princesseuh@users.noreply.github.com>

4 files changed, 21 insertions, 13 deletions

diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 98047b5b8..43cc847bb 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -80,7 +80,7 @@ const highlighter = await getCachedHighlighter({
 			? Object.keys(bundledLanguages).includes(lang)
 				? lang
 				: 'plaintext'
-			: lang,
+			: (lang as any),
 	],
 	theme,
 	themes,
@@ -89,7 +89,7 @@ const highlighter = await getCachedHighlighter({
 
 const html = highlighter.highlight(code, typeof lang === 'string' ? lang : lang.name, {
 	inline,
-	attributes: rest,
+	attributes: rest as any,
 });
 ---
 
diff --git a/packages/astro/components/Picture.astro b/packages/astro/components/Picture.astro
index b37b2d545..f23ab6ccc 100644
--- a/packages/astro/components/Picture.astro
+++ b/packages/astro/components/Picture.astro
@@ -1,7 +1,7 @@
 ---
 import { getImage, type LocalImageProps, type RemoteImageProps } from 'astro:assets';
 import type { GetImageResult, ImageOutputFormat } from '../dist/@types/astro';
-import { isESMImportedImage } from '../dist/assets/utils/imageKind';
+import { isESMImportedImage, resolveSrc } from '../dist/assets/utils/imageKind';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
 import type { HTMLAttributes } from '../types';
 
@@ -27,20 +27,27 @@ if (props.alt === undefined || props.alt === null) {
 	throw new AstroError(AstroErrorData.ImageMissingAlt);
 }
 
+const originalSrc = await resolveSrc(props.src);
 const optimizedImages: GetImageResult[] = await Promise.all(
 	formats.map(
 		async (format) =>
-			await getImage({ ...props, format: format, widths: props.widths, densities: props.densities })
+			await getImage({
+				...props,
+				src: originalSrc,
+				format: format,
+				widths: props.widths,
+				densities: props.densities,
+			})
 	)
 );
 
 let resultFallbackFormat = fallbackFormat ?? defaultFallbackFormat;
 if (
 	!fallbackFormat &&
-	isESMImportedImage(props.src) &&
-	specialFormatsFallback.includes(props.src.format)
+	isESMImportedImage(originalSrc) &&
+	originalSrc.format in specialFormatsFallback
 ) {
-	resultFallbackFormat = props.src.format;
+	resultFallbackFormat = originalSrc.format;
 }
 
 const fallbackImage = await getImage({
diff --git a/packages/astro/src/assets/internal.ts b/packages/astro/src/assets/internal.ts
index 4d29247a5..5cd3cc7bf 100644
--- a/packages/astro/src/assets/internal.ts
+++ b/packages/astro/src/assets/internal.ts
@@ -8,7 +8,7 @@ import type {
 	SrcSetValue,
 	UnresolvedImageTransform,
 } from './types.js';
-import { isESMImportedImage, isRemoteImage } from './utils/imageKind.js';
+import { isESMImportedImage, isRemoteImage, resolveSrc } from './utils/imageKind.js';
 import { probe } from './utils/remoteProbe.js';
 
 export async function getConfiguredImageService(): Promise<ImageService> {
@@ -56,10 +56,7 @@ export async function getImage(
 	// If the user inlined an import, something fairly common especially in MDX, or passed a function that returns an Image, await it for them
 	const resolvedOptions: ImageTransform = {
 		...options,
-		src:
-			typeof options.src === 'object' && 'then' in options.src
-				? (await options.src).default ?? (await options.src)
-				: options.src,
+		src: await resolveSrc(options.src),
 	};
 
 	// Infer size for remote images if inferSize is true
diff --git a/packages/astro/src/assets/utils/imageKind.ts b/packages/astro/src/assets/utils/imageKind.ts
index 866d9ed87..7b42f9f70 100644
--- a/packages/astro/src/assets/utils/imageKind.ts
+++ b/packages/astro/src/assets/utils/imageKind.ts
@@ -1,4 +1,4 @@
-import type { ImageMetadata } from '../types.js';
+import type { ImageMetadata, UnresolvedImageTransform } from '../types.js';
 
 export function isESMImportedImage(src: ImageMetadata | string): src is ImageMetadata {
 	return typeof src === 'object';
@@ -7,3 +7,7 @@ export function isESMImportedImage(src: ImageMetadata | string): src is ImageMet
 export function isRemoteImage(src: ImageMetadata | string): src is string {
 	return typeof src === 'string';
 }
+
+export async function resolveSrc(src: UnresolvedImageTransform['src']) {
+	return typeof src === 'object' && 'then' in src ? (await src).default ?? (await src) : src;
+}