From 348c1ca1323d0516c2dcf8e963343cd12cb5407f Mon Sep 17 00:00:00 2001
From: apetta <akshaypetta@gmail.com>
Date: Tue, 26 Mar 2024 21:20:28 +0000
Subject: [PATCH] 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>
---
.changeset/breezy-peaches-agree.md | 5 +++++
packages/astro/components/Code.astro | 4 ++--
packages/astro/components/Picture.astro | 17 ++++++++++++-----
packages/astro/src/assets/internal.ts | 7 ++-----
packages/astro/src/assets/utils/imageKind.ts | 6 +++++-
5 files changed, 26 insertions(+), 13 deletions(-)
create mode 100644 .changeset/breezy-peaches-agree.md
diff --git a/.changeset/breezy-peaches-agree.md b/.changeset/breezy-peaches-agree.md
new file mode 100644
index 0000000000..0c639b8ce9
--- /dev/null
+++ b/.changeset/breezy-peaches-agree.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes minor type issues inside the built-in components of Astro
diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 98047b5b8e..43cc847bb8 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 b37b2d5451..f23ab6ccce 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 4d29247a55..5cd3cc7bf5 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 866d9ed876..7b42f9f701 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;
+}