astro 2.10.9 → 2.10.11

package/components/ViewTransitions.astro

@@ -38,12 +38,21 @@ const { fallback = 'animate' } = Astro.props as Props;
 
 	const throttle = (cb: (...args: any[]) => any, delay: number) => {
 		let wait = false;
+		// During the waiting time additional events are lost.
+		// So repeat the callback at the end if we have swallowed events.
+		let onceMore = false;
 		return (...args: any[]) => {
-			if (wait) return;
-
+			if (wait) {
+				onceMore = true;
+				return;
+			}
 			cb(...args);
 			wait = true;
 			setTimeout(() => {
+				if (onceMore) {
+					onceMore = false;
+					cb(...args);
+				}
 				wait = false;
 			}, delay);
 		};
@@ -92,9 +101,8 @@ const { fallback = 'animate' } = Astro.props as Props;
 
 	const parser = new DOMParser();
 
-	async function updateDOM(dir: Direction, html: string, state?: State, fallback?: Fallback) {
+	async function updateDOM(html: string, state?: State, fallback?: Fallback) {
 		const doc = parser.parseFromString(html, 'text/html');
-		doc.documentElement.dataset.astroTransition = dir;
 
 		// Check for a head element that should persist, either because it has the data
 		// attribute or is a link el.
@@ -163,6 +171,8 @@ const { fallback = 'animate' } = Astro.props as Props;
 			}
 			if (state?.scrollY != null) {
 				scrollTo(0, state.scrollY);
+				// Overwrite erroneous updates by the scroll handler during transition
+				persistState(state);
 			}
 
 			triggerEvent('astro:beforeload');
@@ -222,15 +232,17 @@ const { fallback = 'animate' } = Astro.props as Props;
 			location.href = href;
 			return;
 		}
+		document.documentElement.dataset.astroTransition = dir;
 		if (supportsViewTransitions) {
-			finished = document.startViewTransition(() => updateDOM(dir, html, state)).finished;
+			finished = document.startViewTransition(() => updateDOM(html, state)).finished;
 		} else {
-			finished = updateDOM(dir, html, state, getFallback());
+			finished = updateDOM(html, state, getFallback());
 		}
 		try {
 			await finished;
 		} finally {
-			document.documentElement.removeAttribute('data-astro-transition');
+			// skip this for the moment as it tends to stop fallback animations
+			// document.documentElement.removeAttribute('data-astro-transition');
 			await runScripts();
 			markScriptsExec();
 			onload();
@@ -280,8 +292,7 @@ const { fallback = 'animate' } = Astro.props as Props;
 				transitionEnabledOnThisPage()
 			) {
 				ev.preventDefault();
-				navigate('forward', link.href, { index: currentHistoryIndex, scrollY: 0 });
-				currentHistoryIndex++;
+				navigate('forward', link.href, { index: ++currentHistoryIndex, scrollY: 0 });
 				const newState: State = { index: currentHistoryIndex, scrollY };
 				persistState({ index: currentHistoryIndex - 1, scrollY });
 				history.pushState(newState, '', link.href);
@@ -295,10 +306,11 @@ const { fallback = 'animate' } = Astro.props as Props;
 				return;
 			}
 
-			// hash change creates no state.
+			// History entries without state are created by the browser (e.g. for hash links)
+			// Our view transition entries always have state.
+			// Just ignore stateless entries.
+			// The browser will handle navigation fine without our help
 			if (ev.state === null) {
-				persistState({ index: currentHistoryIndex, scrollY });
-				ev.preventDefault();
 				return;
 			}
 
@@ -333,6 +345,8 @@ const { fallback = 'animate' } = Astro.props as Props;
 		addEventListener(
 			'scroll',
 			throttle(() => {
+				// only updste history entries that are managed by us
+				// leave other entries alone and do not accidently add state.
 				if (history.state) {
 					persistState({ ...history.state, scrollY });
 				}

package/dist/@types/astro.d.ts

@@ -8,6 +8,7 @@ import type { AddressInfo } from 'node:net';
 import type * as rollup from 'rollup';
 import type { TsConfigJson } from 'tsconfig-resolver';
 import type * as vite from 'vite';
+import type { RemotePattern } from '../assets/utils/remotePattern';
 import type { SerializedSSRManifest } from '../core/app/types';
 import type { PageBuildData } from '../core/build/types';
 import type { AstroConfigType } from '../core/config';
@@ -19,6 +20,7 @@ import type { SUPPORTED_MARKDOWN_FILE_EXTENSIONS } from './../core/constants.js'
 export type { MarkdownHeading, MarkdownMetadata, MarkdownRenderingResult, RehypePlugins, RemarkPlugins, ShikiConfig, } from '@astrojs/markdown-remark';
 export type { ExternalImageService, ImageService, LocalImageService, } from '../assets/services/service';
 export type { GetImageResult, ImageInputFormat, ImageMetadata, ImageOutputFormat, ImageQuality, ImageQualityPreset, ImageTransform, } from '../assets/types';
+export type { RemotePattern } from '../assets/utils/remotePattern';
 export type { SSRManifest } from '../core/app/types';
 export type { AstroCookies } from '../core/cookies';
 export interface AstroBuiltinProps {
@@ -312,9 +314,9 @@ type ServerConfig = {
 export interface ViteUserConfig extends vite.UserConfig {
     ssr?: vite.SSROptions;
 }
-export interface ImageServiceConfig {
+export interface ImageServiceConfig<T extends Record<string, any> = Record<string, any>> {
     entrypoint: 'astro/assets/services/sharp' | 'astro/assets/services/squoosh' | (string & {});
-    config?: Record<string, any>;
+    config?: T;
 }
 /**
  * Astro User Config
@@ -769,10 +771,10 @@ export interface AstroUserConfig {
          * @default `never`
          * @version 2.6.0
          * @description
-         * Control whether styles are sent to the browser in a separate css file or inlined into `<style>` tags. Choose from the following options:
-         *  - `'always'` - all styles are inlined into `<style>` tags
-         *  - `'auto'` - only stylesheets smaller than `ViteConfig.build.assetsInlineLimit` (default: 4kb) are inlined. Otherwise, styles are sent in external stylesheets.
-         *  - `'never'` - all styles are sent in external stylesheets
+         * Control whether project styles are sent to the browser in a separate css file or inlined into `<style>` tags. Choose from the following options:
+         *  - `'always'` - project styles are inlined into `<style>` tags
+         *  - `'auto'` - only stylesheets smaller than `ViteConfig.build.assetsInlineLimit` (default: 4kb) are inlined. Otherwise, project styles are sent in external stylesheets.
+         *  - `'never'` - project styles are sent in external stylesheets
          *
          * ```js
          * {
@@ -933,6 +935,66 @@ export interface AstroUserConfig {
          * ```
          */
         service: ImageServiceConfig;
+        /**
+         * @docs
+         * @name image.domains (Experimental)
+         * @type {string[]}
+         * @default `{domains: []}`
+         * @version 2.10.10
+         * @description
+         * Defines a list of permitted image source domains for local image optimization. No other remote images will be optimized by Astro.
+         *
+         * This option requires an array of individual domain names as strings. Wildcards are not permitted. Instead, use [`image.remotePatterns`](#imageremotepatterns-experimental) to define a list of allowed source URL patterns.
+         *
+         * ```js
+         * // astro.config.mjs
+         * {
+         *   image: {
+         *     // Example: Allow remote image optimization from a single domain
+         *     domains: ['astro.build'],
+         *   },
+         * }
+         * ```
+         */
+        domains?: string[];
+        /**
+         * @docs
+         * @name image.remotePatterns (Experimental)
+         * @type {RemotePattern[]}
+         * @default `{remotePatterns: []}`
+         * @version 2.10.10
+         * @description
+         * Defines a list of permitted image source URL patterns for local image optimization.
+         *
+         * `remotePatterns` can be configured with four properties:
+         * 1. protocol
+         * 2. hostname
+         * 3. port
+         * 4. pathname
+         *
+         * ```js
+         * {
+         *   image: {
+         *     // Example: allow processing all images from your aws s3 bucket
+         *     remotePatterns: [{
+         *       protocol: 'https',
+         *       hostname: '**.amazonaws.com',
+         *     }],
+         *   },
+         * }
+         * ```
+         *
+         * You can use wildcards to define the permitted `hostname` and `pathname` values as described below. Otherwise, only the exact values provided will be configured:
+         * `hostname`:
+         *   - Start with '**.' to allow all subdomains ('endsWith').
+         *   - Start with '*.' to allow only one level of subdomain.
+         *
+         * `pathname`:
+         *   - End with '/**' to allow all sub-routes ('startsWith').
+         *   - End with '/*' to allow only one level of sub-route.
+
+         */
+        remotePatterns?: Partial<RemotePattern>[];
     };
     /**
      * @docs

package/dist/assets/{generate.d.ts → build/generate.d.ts}

@@ -1,5 +1,5 @@
-import type { StaticBuildOptions } from '../core/build/types.js';
-import type { ImageTransform } from './types.js';
+import type { StaticBuildOptions } from '../../core/build/types.js';
+import type { ImageTransform } from '../types.js';
 interface GenerationDataUncached {
     cached: false;
     weight: {

package/dist/assets/build/generate.js

@@ -0,0 +1,123 @@
+import fs, { readFileSync } from "node:fs";
+import { basename, join } from "node:path/posix";
+import { warn } from "../../core/logger/core.js";
+import { prependForwardSlash } from "../../core/path.js";
+import { isServerLikeOutput } from "../../prerender/utils.js";
+import { getConfiguredImageService, isESMImportedImage } from "../internal.js";
+import { loadRemoteImage } from "./remote.js";
+async function generateImage(buildOpts, options, filepath) {
+  let useCache = true;
+  const assetsCacheDir = new URL("assets/", buildOpts.settings.config.cacheDir);
+  try {
+    await fs.promises.mkdir(assetsCacheDir, { recursive: true });
+  } catch (err) {
+    warn(
+      buildOpts.logging,
+      "astro:assets",
+      `An error was encountered while creating the cache directory. Proceeding without caching. Error: ${err}`
+    );
+    useCache = false;
+  }
+  let serverRoot, clientRoot;
+  if (isServerLikeOutput(buildOpts.settings.config)) {
+    serverRoot = buildOpts.settings.config.build.server;
+    clientRoot = buildOpts.settings.config.build.client;
+  } else {
+    serverRoot = buildOpts.settings.config.outDir;
+    clientRoot = buildOpts.settings.config.outDir;
+  }
+  const isLocalImage = isESMImportedImage(options.src);
+  const finalFileURL = new URL("." + filepath, clientRoot);
+  const finalFolderURL = new URL("./", finalFileURL);
+  const cacheFile = basename(filepath) + (isLocalImage ? "" : ".json");
+  const cachedFileURL = new URL(cacheFile, assetsCacheDir);
+  await fs.promises.mkdir(finalFolderURL, { recursive: true });
+  try {
+    if (isLocalImage) {
+      await fs.promises.copyFile(cachedFileURL, finalFileURL);
+      return {
+        cached: true
+      };
+    } else {
+      const JSONData = JSON.parse(readFileSync(cachedFileURL, "utf-8"));
+      if (JSONData.expires < Date.now()) {
+        await fs.promises.writeFile(finalFileURL, Buffer.from(JSONData.data, "base64"));
+        return {
+          cached: true
+        };
+      }
+    }
+  } catch (e) {
+    if (e.code !== "ENOENT") {
+      throw new Error(`An error was encountered while reading the cache file. Error: ${e}`);
+    }
+  }
+  const originalImagePath = isLocalImage ? options.src.src : options.src;
+  let imageData;
+  let resultData = {
+    data: void 0,
+    expires: void 0
+  };
+  if (isLocalImage) {
+    imageData = await fs.promises.readFile(
+      new URL(
+        "." + prependForwardSlash(
+          join(buildOpts.settings.config.build.assets, basename(originalImagePath))
+        ),
+        serverRoot
+      )
+    );
+  } else {
+    const remoteImage = await loadRemoteImage(originalImagePath);
+    resultData.expires = remoteImage.expires;
+    imageData = remoteImage.data;
+  }
+  const imageService = await getConfiguredImageService();
+  resultData.data = (await imageService.transform(
+    imageData,
+    { ...options, src: originalImagePath },
+    buildOpts.settings.config.image
+  )).data;
+  try {
+    if (useCache) {
+      if (isLocalImage) {
+        await fs.promises.writeFile(cachedFileURL, resultData.data);
+      } else {
+        await fs.promises.writeFile(
+          cachedFileURL,
+          JSON.stringify({
+            data: Buffer.from(resultData.data).toString("base64"),
+            expires: resultData.expires
+          })
+        );
+      }
+    }
+  } catch (e) {
+    warn(
+      buildOpts.logging,
+      "astro:assets",
+      `An error was encountered while creating the cache directory. Proceeding without caching. Error: ${e}`
+    );
+  } finally {
+    await fs.promises.writeFile(finalFileURL, resultData.data);
+  }
+  return {
+    cached: false,
+    weight: {
+      // Divide by 1024 to get size in kilobytes
+      before: Math.trunc(imageData.byteLength / 1024),
+      after: Math.trunc(Buffer.from(resultData.data).byteLength / 1024)
+    }
+  };
+}
+function getStaticImageList() {
+  var _a, _b;
+  if (!((_a = globalThis == null ? void 0 : globalThis.astroAsset) == null ? void 0 : _a.staticImages)) {
+    return [];
+  }
+  return (_b = globalThis.astroAsset.staticImages) == null ? void 0 : _b.entries();
+}
+export {
+  generateImage,
+  getStaticImageList
+};

package/dist/assets/build/remote.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="node" />
+export type RemoteCacheEntry = {
+    data: string;
+    expires: number;
+};
+export declare function loadRemoteImage(src: string): Promise<{
+    data: Buffer;
+    expires: number;
+}>;

package/dist/assets/build/remote.js

@@ -0,0 +1,42 @@
+import CachePolicy from "http-cache-semantics";
+async function loadRemoteImage(src) {
+  const req = new Request(src);
+  const res = await fetch(req);
+  if (!res.ok) {
+    throw new Error(
+      `Failed to load remote image ${src}. The request did not return a 200 OK response. (received ${res.status}))`
+    );
+  }
+  const policy = new CachePolicy(webToCachePolicyRequest(req), webToCachePolicyResponse(res));
+  const expires = policy.storable() ? policy.timeToLive() : 0;
+  return {
+    data: Buffer.from(await res.arrayBuffer()),
+    expires: Date.now() + expires
+  };
+}
+function webToCachePolicyRequest({ url, method, headers: _headers }) {
+  let headers = {};
+  try {
+    headers = Object.fromEntries(_headers.entries());
+  } catch {
+  }
+  return {
+    method,
+    url,
+    headers
+  };
+}
+function webToCachePolicyResponse({ status, headers: _headers }) {
+  let headers = {};
+  try {
+    headers = Object.fromEntries(_headers.entries());
+  } catch {
+  }
+  return {
+    status,
+    headers
+  };
+}
+export {
+  loadRemoteImage
+};

package/dist/assets/image-endpoint.js

@@ -1,9 +1,9 @@
 import mime from "mime/lite.js";
 import { isRemotePath } from "../core/path.js";
-import { getConfiguredImageService } from "./internal.js";
+import { getConfiguredImageService, isRemoteAllowed } from "./internal.js";
 import { isLocalService } from "./services/service.js";
 import { etag } from "./utils/etag.js";
-import { imageServiceConfig } from "astro:assets";
+import { imageConfig } from "astro:assets";
 async function loadRemoteImage(src) {
   try {
     const res = await fetch(src);
@@ -22,21 +22,20 @@ const get = async ({ request }) => {
       throw new Error("Configured image service is not a local service");
     }
     const url = new URL(request.url);
-    const transform = await imageService.parseURL(url, imageServiceConfig);
+    const transform = await imageService.parseURL(url, imageConfig);
     if (!(transform == null ? void 0 : transform.src)) {
       throw new Error("Incorrect transform returned by `parseURL`");
     }
     let inputBuffer = void 0;
     const sourceUrl = isRemotePath(transform.src) ? new URL(transform.src) : new URL(transform.src, url.origin);
+    if (isRemotePath(transform.src) && isRemoteAllowed(transform.src, imageConfig) === false) {
+      return new Response("Forbidden", { status: 403 });
+    }
     inputBuffer = await loadRemoteImage(sourceUrl);
     if (!inputBuffer) {
       return new Response("Not Found", { status: 404 });
     }
-    const { data, format } = await imageService.transform(
-      inputBuffer,
-      transform,
-      imageServiceConfig
-    );
+    const { data, format } = await imageService.transform(inputBuffer, transform, imageConfig);
     return new Response(data, {
       status: 200,
       headers: {

package/dist/assets/internal.d.ts

@@ -1,7 +1,9 @@
-import type { AstroSettings } from '../@types/astro.js';
+import type { AstroConfig, AstroSettings } from '../@types/astro.js';
 import { type ImageService } from './services/service.js';
 import type { GetImageResult, ImageMetadata, ImageTransform, UnresolvedImageTransform } from './types.js';
 export declare function injectImageEndpoint(settings: AstroSettings): AstroSettings;
 export declare function isESMImportedImage(src: ImageMetadata | string): src is ImageMetadata;
+export declare function isRemoteImage(src: ImageMetadata | string): src is string;
+export declare function isRemoteAllowed(src: string, { domains, remotePatterns, }: Partial<Pick<AstroConfig['image'], 'domains' | 'remotePatterns'>>): boolean;
 export declare function getConfiguredImageService(): Promise<ImageService>;
-export declare function getImage(options: ImageTransform | UnresolvedImageTransform, serviceConfig: Record<string, any>): Promise<GetImageResult>;
+export declare function getImage(options: ImageTransform | UnresolvedImageTransform, imageConfig: AstroConfig['image']): Promise<GetImageResult>;

package/dist/assets/internal.js

@@ -1,5 +1,7 @@
+import { isRemotePath } from "@astrojs/internal-helpers/path";
 import { AstroError, AstroErrorData } from "../core/errors/index.js";
 import { isLocalService } from "./services/service.js";
+import { matchHostname, matchPattern } from "./utils/remotePattern.js";
 function injectImageEndpoint(settings) {
   settings.injectedRoutes.push({
     pattern: "/_image",
@@ -11,6 +13,18 @@ function injectImageEndpoint(settings) {
 function isESMImportedImage(src) {
   return typeof src === "object";
 }
+function isRemoteImage(src) {
+  return typeof src === "string";
+}
+function isRemoteAllowed(src, {
+  domains = [],
+  remotePatterns = []
+}) {
+  if (!isRemotePath(src))
+    return false;
+  const url = new URL(src);
+  return domains.some((domain) => matchHostname(url, domain)) || remotePatterns.some((remotePattern) => matchPattern(url, remotePattern));
+}
 async function getConfiguredImageService() {
   var _a;
   if (!((_a = globalThis == null ? void 0 : globalThis.astroAsset) == null ? void 0 : _a.imageService)) {
@@ -29,7 +43,7 @@ async function getConfiguredImageService() {
   }
   return globalThis.astroAsset.imageService;
 }
-async function getImage(options, serviceConfig) {
+async function getImage(options, imageConfig) {
   if (!options || typeof options !== "object") {
     throw new AstroError({
       ...AstroErrorData.ExpectedImageOptions,
@@ -41,21 +55,24 @@ async function getImage(options, serviceConfig) {
     ...options,
     src: typeof options.src === "object" && "then" in options.src ? (await options.src).default : options.src
   };
-  const validatedOptions = service.validateOptions ? await service.validateOptions(resolvedOptions, serviceConfig) : resolvedOptions;
-  let imageURL = await service.getURL(validatedOptions, serviceConfig);
-  if (isLocalService(service) && globalThis.astroAsset.addStaticImage) {
+  const validatedOptions = service.validateOptions ? await service.validateOptions(resolvedOptions, imageConfig) : resolvedOptions;
+  let imageURL = await service.getURL(validatedOptions, imageConfig);
+  if (isLocalService(service) && globalThis.astroAsset.addStaticImage && // If `getURL` returned the same URL as the user provided, it means the service doesn't need to do anything
+  !(isRemoteImage(validatedOptions.src) && imageURL === validatedOptions.src)) {
     imageURL = globalThis.astroAsset.addStaticImage(validatedOptions);
   }
   return {
     rawOptions: resolvedOptions,
     options: validatedOptions,
     src: imageURL,
-    attributes: service.getHTMLAttributes !== void 0 ? service.getHTMLAttributes(validatedOptions, serviceConfig) : {}
+    attributes: service.getHTMLAttributes !== void 0 ? service.getHTMLAttributes(validatedOptions, imageConfig) : {}
   };
 }
 export {
   getConfiguredImageService,
   getImage,
   injectImageEndpoint,
-  isESMImportedImage
+  isESMImportedImage,
+  isRemoteAllowed,
+  isRemoteImage
 };

package/dist/assets/services/service.d.ts

@@ -1,9 +1,16 @@
 /// <reference types="node" />
+import type { AstroConfig } from '../../@types/astro.js';
 import type { ImageOutputFormat, ImageTransform } from '../types.js';
 export type ImageService = LocalImageService | ExternalImageService;
 export declare function isLocalService(service: ImageService | undefined): service is LocalImageService;
 export declare function parseQuality(quality: string): string | number;
-interface SharedServiceProps {
+type ImageConfig<T> = Omit<AstroConfig['image'], 'service'> & {
+    service: {
+        entrypoint: string;
+        config: T;
+    };
+};
+interface SharedServiceProps<T extends Record<string, any> = Record<string, any>> {
     /**
      * Return the URL to the endpoint or URL your images are generated from.
      *
@@ -12,14 +19,14 @@ interface SharedServiceProps {
      * For external services, this should point to the URL your images are coming from, for instance, `/_vercel/image`
      *
      */
-    getURL: (options: ImageTransform, serviceConfig: Record<string, any>) => string | Promise<string>;
+    getURL: (options: ImageTransform, imageConfig: ImageConfig<T>) => string | Promise<string>;
     /**
      * Return any additional HTML attributes separate from `src` that your service requires to show the image properly.
      *
      * For example, you might want to return the `width` and `height` to avoid CLS, or a particular `class` or `style`.
      * In most cases, you'll want to return directly what your user supplied you, minus the attributes that were used to generate the image.
      */
-    getHTMLAttributes?: (options: ImageTransform, serviceConfig: Record<string, any>) => Record<string, any> | Promise<Record<string, any>>;
+    getHTMLAttributes?: (options: ImageTransform, imageConfig: ImageConfig<T>) => Record<string, any> | Promise<Record<string, any>>;
     /**
      * Validate and return the options passed by the user.
      *
@@ -28,25 +35,25 @@ interface SharedServiceProps {
      *
      * This method should returns options, and can be used to set defaults (ex: a default output format to be used if the user didn't specify one.)
      */
-    validateOptions?: (options: ImageTransform, serviceConfig: Record<string, any>) => ImageTransform | Promise<ImageTransform>;
+    validateOptions?: (options: ImageTransform, imageConfig: ImageConfig<T>) => ImageTransform | Promise<ImageTransform>;
 }
-export type ExternalImageService = SharedServiceProps;
+export type ExternalImageService<T extends Record<string, any> = Record<string, any>> = SharedServiceProps<T>;
 export type LocalImageTransform = {
     src: string;
     [key: string]: any;
 };
-export interface LocalImageService extends SharedServiceProps {
+export interface LocalImageService<T extends Record<string, any> = Record<string, any>> extends SharedServiceProps<T> {
     /**
      * Parse the requested parameters passed in the URL from `getURL` back into an object to be used later by `transform`.
      *
      * In most cases, this will get query parameters using, for example, `params.get('width')` and return those.
      */
-    parseURL: (url: URL, serviceConfig: Record<string, any>) => LocalImageTransform | undefined | Promise<LocalImageTransform> | Promise<undefined>;
+    parseURL: (url: URL, imageConfig: ImageConfig<T>) => LocalImageTransform | undefined | Promise<LocalImageTransform> | Promise<undefined>;
     /**
      * Performs the image transformations on the input image and returns both the binary data and
      * final image format of the optimized image.
      */
-    transform: (inputBuffer: Buffer, transform: LocalImageTransform, serviceConfig: Record<string, any>) => Promise<{
+    transform: (inputBuffer: Buffer, transform: LocalImageTransform, imageConfig: ImageConfig<T>) => Promise<{
         data: Buffer;
         format: ImageOutputFormat;
     }>;

package/dist/assets/services/service.js

@@ -1,7 +1,7 @@
 import { AstroError, AstroErrorData } from "../../core/errors/index.js";
 import { joinPaths } from "../../core/path.js";
 import { VALID_SUPPORTED_FORMATS } from "../consts.js";
-import { isESMImportedImage } from "../internal.js";
+import { isESMImportedImage, isRemoteAllowed } from "../internal.js";
 function isLocalService(service) {
   if (!service) {
     return false;
@@ -87,17 +87,26 @@ const baseService = {
       decoding: attributes.decoding ?? "async"
     };
   },
-  getURL(options) {
-    if (!isESMImportedImage(options.src)) {
+  getURL(options, imageConfig) {
+    const searchParams = new URLSearchParams();
+    if (isESMImportedImage(options.src)) {
+      searchParams.append("href", options.src.src);
+    } else if (isRemoteAllowed(options.src, imageConfig)) {
+      searchParams.append("href", options.src);
+    } else {
       return options.src;
     }
-    const searchParams = new URLSearchParams();
-    searchParams.append("href", options.src.src);
-    options.width && searchParams.append("w", options.width.toString());
-    options.height && searchParams.append("h", options.height.toString());
-    options.quality && searchParams.append("q", options.quality.toString());
-    options.format && searchParams.append("f", options.format);
-    return joinPaths(import.meta.env.BASE_URL, "/_image?") + searchParams;
+    const params = {
+      w: "width",
+      h: "height",
+      q: "quality",
+      f: "format"
+    };
+    Object.entries(params).forEach(([param, key]) => {
+      options[key] && searchParams.append(param, options[key].toString());
+    });
+    const imageEndpoint = joinPaths(import.meta.env.BASE_URL, "/_image");
+    return `${imageEndpoint}?${searchParams}`;
   },
   parseURL(url) {
     const params = url.searchParams;

package/dist/assets/utils/remotePattern.d.ts

@@ -0,0 +1,11 @@
+export type RemotePattern = {
+    hostname?: string;
+    pathname?: string;
+    protocol?: string;
+    port?: string;
+};
+export declare function matchPattern(url: URL, remotePattern: RemotePattern): boolean;
+export declare function matchPort(url: URL, port?: string): boolean;
+export declare function matchProtocol(url: URL, protocol?: string): boolean;
+export declare function matchHostname(url: URL, hostname?: string, allowWildcard?: boolean): boolean;
+export declare function matchPathname(url: URL, pathname?: string, allowWildcard?: boolean): boolean;