From 279be90e88d0c1c2f09bfb4fb509ea7b0387d528 Mon Sep 17 00:00:00 2001 From: Tony Sullivan Date: Mon, 29 Aug 2022 16:51:07 -0500 Subject: [PATCH] adds support for string width/height on --- .changeset/lucky-mirrors-type.md | 5 ++- .../integrations/image/components/Image.astro | 2 -- .../integrations/image/src/lib/get-image.ts | 36 +++++++++++++++---- .../integrations/image/src/loaders/index.ts | 4 +-- .../basic-image/src/pages/index.astro | 2 +- .../fixtures/with-mdx/src/pages/index.mdx | 2 +- 6 files changed, 36 insertions(+), 15 deletions(-) diff --git a/.changeset/lucky-mirrors-type.md b/.changeset/lucky-mirrors-type.md index 318e019efdfbd..1483b018b244c 100644 --- a/.changeset/lucky-mirrors-type.md +++ b/.changeset/lucky-mirrors-type.md @@ -4,9 +4,8 @@ `` and `` now support using images in the `/public` directory :tada: +- Updates `` to support strings for `width` and `height` to match ``'s HTML syntax - Moving handling of local image files into the Vite plugin - Optimized image files are now built to `/dist` with hashes provided by Vite, removing the need for a `/dist/_image` directory -- Removes three npm dependencies: `etag`, `slash`, and `tiny-glob` -- Replaces `mrmime` with the `mime` package already used by Astro's SSR server -- Simplifies the injected `_image` route to work for both `dev` and `build` +- Simplifies the injected `_image` route used for optimizing images on-demand - Adds a new test suite for using images with `@astrojs/mdx` - including optimizing images straight from `/public` diff --git a/packages/integrations/image/components/Image.astro b/packages/integrations/image/components/Image.astro index 20efe6ee09b33..b43415307621a 100644 --- a/packages/integrations/image/components/Image.astro +++ b/packages/integrations/image/components/Image.astro @@ -13,8 +13,6 @@ interface LocalImageProps interface RemoteImageProps extends TransformOptions, astroHTML.JSX.ImgHTMLAttributes { src: string; format: OutputFormat; - width: number; - height: number; } export type Props = LocalImageProps | RemoteImageProps; diff --git a/packages/integrations/image/src/lib/get-image.ts b/packages/integrations/image/src/lib/get-image.ts index 34f39f144d959..f1d303b62eefe 100644 --- a/packages/integrations/image/src/lib/get-image.ts +++ b/packages/integrations/image/src/lib/get-image.ts @@ -9,13 +9,33 @@ export interface GetImageTransform extends Omit { src: string | ImageMetadata | Promise<{ default: ImageMetadata }>; } +function parseDimension(value: number | string | undefined, name: string, required = false) { + if (typeof value === 'number') { + return value; + } + + try { + // @ts-ignore + return parseInt(value); + } catch { + if (required) { + throw new Error(`"${name}" must be a number or string, received "${value}" (${typeof value})`); + } + } + + return undefined; +} + function resolveSize(transform: TransformOptions): TransformOptions { // keep width & height as provided if (transform.width && transform.height) { return transform; } - if (!transform.width && !transform.height) { + const width = parseDimension(transform.width, 'width', true); + const height = parseDimension(transform.height, 'height', true); + + if (!width && !height) { throw new Error(`"width" and "height" cannot both be undefined`); } @@ -39,15 +59,15 @@ function resolveSize(transform: TransformOptions): TransformOptions { // only width was provided, calculate height return { ...transform, - width: transform.width, - height: Math.round(transform.width / aspectRatio), + width, + height: Math.round(width! / aspectRatio), } as TransformOptions; } else if (transform.height) { // only height was provided, calculate width return { ...transform, - width: Math.round(transform.height * aspectRatio), - height: transform.height, + width: Math.round(height! * aspectRatio), + height, }; } @@ -63,7 +83,11 @@ async function resolveTransform(input: GetImageTransform): Promise
- +

diff --git a/packages/integrations/image/test/fixtures/with-mdx/src/pages/index.mdx b/packages/integrations/image/test/fixtures/with-mdx/src/pages/index.mdx index a713f44186fa3..fef50195d598d 100644 --- a/packages/integrations/image/test/fixtures/with-mdx/src/pages/index.mdx +++ b/packages/integrations/image/test/fixtures/with-mdx/src/pages/index.mdx @@ -8,7 +8,7 @@ import { Image } from '@astrojs/image/components';
- +