astro 2.0.17 → 2.1.0

package/README.md

@@ -1,10 +1,10 @@
 <br/>
 <p align="center">
-  <img src="../../assets/social/banner-minimal.png" alt="Astro logo">
+  <img src="../../.github/assets/banner.png" alt="Build the web you want">
   <br/><br/>
-  <a href="https://astro.build">Astro</a> is a website build tool for the modern web &mdash;
+  <a href="https://astro.build">Astro</a> is the all-in-one web framework designed for speed.
   <br/>
-  powerful developer experience meets lightweight output.
+  Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.
   <br/><br/>
 </p>
 

package/client-base.d.ts

@@ -1,5 +1,28 @@
 /// <reference path="./import-meta.d.ts" />
 
+declare module 'astro:assets' {
+	// Exporting things one by one is a bit cumbersome, not sure if there's a better way - erika, 2023-02-03
+	type AstroAssets = {
+		getImage: typeof import('./dist/assets/index.js').getImage;
+		Image: typeof import('./components/Image.astro').default;
+	};
+
+	type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+	type Simplify<T> = { [KeyType in keyof T]: T[KeyType] };
+	type ImgAttributes = WithRequired<
+		Omit<import('./types').HTMLAttributes<'img'>, 'src' | 'width' | 'height'>,
+		'alt'
+	>;
+
+	export type LocalImageProps = Simplify<
+		import('./dist/assets/types.js').LocalImageProps<ImgAttributes>
+	>;
+	export type RemoteImageProps = Simplify<
+		import('./dist/assets/types.js').RemoteImageProps<ImgAttributes>
+	>;
+	export const { getImage, Image }: AstroAssets;
+}
+
 type MD = import('./dist/@types/astro').MarkdownInstance<Record<string, any>>;
 interface ExportedMarkdownModuleEntities {
 	frontmatter: MD['frontmatter'];
@@ -117,6 +140,10 @@ declare module '*.mdx' {
 	export default load;
 }
 
+declare module 'astro:ssr-manifest' {
+	export const manifest: import('./dist/@types/astro').SSRManifest;
+}
+
 // Everything below are Vite's types (apart from image types, which are in `client.d.ts`)
 
 // CSS modules

package/client-image.d.ts

@@ -0,0 +1,48 @@
+/// <reference path="./client-base.d.ts" />
+
+type InputFormat = 'avif' | 'gif' | 'heic' | 'heif' | 'jpeg' | 'jpg' | 'png' | 'tiff' | 'webp';
+
+interface ImageMetadata {
+	src: string;
+	width: number;
+	height: number;
+	format: InputFormat;
+}
+
+// images
+declare module '*.avif' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
+declare module '*.gif' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
+declare module '*.heic' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
+declare module '*.heif' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
+declare module '*.jpeg' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
+declare module '*.jpg' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
+declare module '*.png' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
+declare module '*.tiff' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
+declare module '*.webp' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}

package/components/Image.astro

@@ -0,0 +1,28 @@
+---
+import { getImage, type LocalImageProps, type RemoteImageProps } from 'astro:assets';
+import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
+
+// The TypeScript diagnostic for JSX props uses the last member of the union to suggest props, so it would be better for
+// LocalImageProps to be last. Unfortunately, when we do this the error messages that remote images get are complete nonsense
+// Not 100% sure how to fix this, seems to be a TypeScript issue. Unfortunate.
+type Props = LocalImageProps | RemoteImageProps;
+
+const props = Astro.props;
+
+if (props.alt === undefined || props.alt === null) {
+	throw new AstroError(AstroErrorData.ImageMissingAlt);
+}
+
+// As a convenience, allow width and height to be string with a number in them, to match HTML's native `img`.
+if (typeof props.width === 'string') {
+	props.width = parseInt(props.width);
+}
+
+if (typeof props.height === 'string') {
+	props.height = parseInt(props.height);
+}
+
+const image = await getImage(props);
+---
+
+<img src={image.src} {...image.attributes} />

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

@@ -13,9 +13,12 @@ import type { PageBuildData } from '../core/build/types';
 import type { AstroConfigSchema } from '../core/config';
 import type { AstroTimer } from '../core/config/timer';
 import type { AstroCookies } from '../core/cookies';
+import type { LogOptions } from '../core/logger/core';
 import type { AstroComponentFactory, AstroComponentInstance } from '../runtime/server';
 import { SUPPORTED_MARKDOWN_FILE_EXTENSIONS } from './../core/constants.js';
 export type { MarkdownHeading, MarkdownMetadata, MarkdownRenderingResult, RehypePlugins, RemarkPlugins, ShikiConfig, } from '@astrojs/markdown-remark';
+export type { ExternalImageService, LocalImageService } from '../assets/services/service';
+export type { ImageTransform } from '../assets/types';
 export type { SSRManifest } from '../core/app/types';
 export type { AstroCookies } from '../core/cookies';
 export interface AstroBuiltinProps {
@@ -64,6 +67,7 @@ export interface CLIFlags {
     port?: number;
     config?: string;
     drafts?: boolean;
+    experimentalAssets?: boolean;
 }
 export interface BuildConfig {
     /**
@@ -648,6 +652,14 @@ export interface AstroUserConfig {
     server?: ServerConfig | ((options: {
         command: 'dev' | 'preview';
     }) => ServerConfig);
+    /**
+     * @docs
+     * @kind heading
+     * @name Image options
+     */
+    image?: {
+        service: 'astro/assets/services/sharp' | 'astro/assets/services/squoosh' | (string & {});
+    };
     /**
      * @docs
      * @kind heading
@@ -861,7 +873,27 @@ export interface AstroUserConfig {
      * Astro offers experimental flags to give users early access to new features.
      * These flags are not guaranteed to be stable.
      */
-    experimental?: object;
+    experimental?: {
+        /**
+         * @docs
+         * @name experimental.assets
+         * @type {boolean}
+         * @default `false`
+         * @version 2.1.0
+         * @description
+         * Enable experimental support for optimizing and resizing images. With this enabled, a new `astro:assets` module will be exposed.
+         *
+         * To enable this feature, set `experimental.assets` to `true` in your Astro config:
+         *
+         * ```js
+         * {
+         * 	experimental: {
+         *		assets: true,
+         * 	},
+         * }
+         */
+        assets?: boolean;
+    };
     /** @deprecated - Use "integrations" instead. Run Astro to learn more about migrating. */
     renderers?: never;
     /** @deprecated `projectRoot` has been renamed to `root` */
@@ -902,11 +934,31 @@ export interface InjectedRoute {
 export interface AstroConfig extends z.output<typeof AstroConfigSchema> {
     integrations: AstroIntegration[];
 }
+export interface ContentEntryType {
+    extensions: string[];
+    getEntryInfo(params: {
+        fileUrl: URL;
+        contents: string;
+    }): GetEntryInfoReturnType | Promise<GetEntryInfoReturnType>;
+    contentModuleTypes?: string;
+}
+type GetEntryInfoReturnType = {
+    data: Record<string, unknown>;
+    /**
+     * Used for error hints to point to correct line and location
+     * Should be the untouched data as read from the file,
+     * including newlines
+     */
+    rawData: string;
+    body: string;
+    slug: string;
+};
 export interface AstroSettings {
     config: AstroConfig;
     adapter: AstroAdapter | undefined;
     injectedRoutes: InjectedRoute[];
     pageExtensions: string[];
+    contentEntryTypes: ContentEntryType[];
     renderers: AstroRenderer[];
     scripts: {
         stage: InjectedScriptStage;
@@ -990,6 +1042,50 @@ export type GetStaticPathsResultKeyed = GetStaticPathsResult & {
  * [Astro Reference](https://docs.astro.build/en/reference/api-reference/#getstaticpaths)
  */
 export type GetStaticPaths = (options: GetStaticPathsOptions) => Promise<GetStaticPathsResult | GetStaticPathsResult[]> | GetStaticPathsResult | GetStaticPathsResult[];
+/**
+ * Infers the shape of the `params` property returned by `getStaticPaths()`.
+ *
+ * @example
+ * ```ts
+ * export async function getStaticPaths() {
+ *   return results.map((entry) => ({
+ *     params: { slug: entry.slug },
+ *   }));
+ * }
+ *
+ * type Params = InferGetStaticParamsType<typeof getStaticPaths>;
+ * //   ^? { slug: string; }
+ *
+ * const { slug } = Astro.params as Params;
+ * ```
+ */
+export type InferGetStaticParamsType<T> = T extends () => Promise<infer R> ? R extends Array<infer U> ? U extends {
+    params: infer P;
+} ? P : never : never : never;
+/**
+ * Infers the shape of the `props` property returned by `getStaticPaths()`.
+ *
+ * @example
+ * ```ts
+ * export async function getStaticPaths() {
+ *   return results.map((entry) => ({
+ *     params: { slug: entry.slug },
+ *     props: {
+ *       propA: true,
+ *       propB: 42
+ *     },
+ *   }));
+ * }
+ *
+ * type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+ * //   ^? { propA: boolean; propB: number; }
+ *
+ * const { propA, propB } = Astro.props as Props;
+ * ```
+ */
+export type InferGetStaticPropsType<T> = T extends () => Promise<infer R> ? R extends Array<infer U> ? U extends {
+    props: infer P;
+} ? P : never : never : never;
 export interface HydrateOptions {
     name: string;
     value?: string;
@@ -1248,6 +1344,10 @@ export interface AstroIntegration {
         }) => void | Promise<void>;
     };
 }
+export interface AstroPluginOptions {
+    settings: AstroSettings;
+    logging: LogOptions;
+}
 export type RouteType = 'page' | 'endpoint';
 export interface RoutePart {
     content: string;

package/dist/assets/consts.d.ts

@@ -0,0 +1,4 @@
+export declare const VIRTUAL_MODULE_ID = "astro:assets";
+export declare const VIRTUAL_SERVICE_ID = "virtual:image-service";
+export declare const VALID_INPUT_FORMATS: readonly ["heic", "heif", "avif", "jpeg", "jpg", "png", "tiff", "webp", "gif"];
+export declare const VALID_OUTPUT_FORMATS: readonly ["avif", "png", "webp", "jpeg", "jpg"];

package/dist/assets/consts.js

@@ -0,0 +1,20 @@
+const VIRTUAL_MODULE_ID = "astro:assets";
+const VIRTUAL_SERVICE_ID = "virtual:image-service";
+const VALID_INPUT_FORMATS = [
+  "heic",
+  "heif",
+  "avif",
+  "jpeg",
+  "jpg",
+  "png",
+  "tiff",
+  "webp",
+  "gif"
+];
+const VALID_OUTPUT_FORMATS = ["avif", "png", "webp", "jpeg", "jpg"];
+export {
+  VALID_INPUT_FORMATS,
+  VALID_OUTPUT_FORMATS,
+  VIRTUAL_MODULE_ID,
+  VIRTUAL_SERVICE_ID
+};

package/dist/assets/image-endpoint.d.ts

@@ -0,0 +1,5 @@
+import type { APIRoute } from '../@types/astro.js';
+/**
+ * Endpoint used in SSR to serve optimized images
+ */
+export declare const get: APIRoute;

package/dist/assets/image-endpoint.js

@@ -0,0 +1,50 @@
+import mime from "mime";
+import { isRemotePath } from "../core/path.js";
+import { getConfiguredImageService } from "./internal.js";
+import { isLocalService } from "./services/service.js";
+import { etag } from "./utils/etag.js";
+async function loadRemoteImage(src) {
+  try {
+    const res = await fetch(src);
+    if (!res.ok) {
+      return void 0;
+    }
+    return Buffer.from(await res.arrayBuffer());
+  } catch (err) {
+    return void 0;
+  }
+}
+const get = async ({ request }) => {
+  try {
+    const imageService = await getConfiguredImageService();
+    if (!isLocalService(imageService)) {
+      throw new Error("Configured image service is not a local service");
+    }
+    const url = new URL(request.url);
+    const transform = await imageService.parseURL(url);
+    if (!transform || !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);
+    inputBuffer = await loadRemoteImage(sourceUrl);
+    if (!inputBuffer) {
+      return new Response("Not Found", { status: 404 });
+    }
+    const { data, format } = await imageService.transform(inputBuffer, transform);
+    return new Response(data, {
+      status: 200,
+      headers: {
+        "Content-Type": mime.getType(format) || "",
+        "Cache-Control": "public, max-age=31536000",
+        ETag: etag(data.toString()),
+        Date: new Date().toUTCString()
+      }
+    });
+  } catch (err) {
+    return new Response(`Server Error: ${err}`, { status: 500 });
+  }
+};
+export {
+  get
+};

package/dist/assets/index.d.ts

@@ -0,0 +1,4 @@
+export { getConfiguredImageService, getImage } from './internal.js';
+export { baseService } from './services/service.js';
+export { type LocalImageProps, type RemoteImageProps } from './types.js';
+export { imageMetadata } from './utils/metadata.js';

package/dist/assets/index.js

@@ -0,0 +1,10 @@
+import { getConfiguredImageService, getImage } from "./internal.js";
+import { baseService } from "./services/service.js";
+import {} from "./types.js";
+import { imageMetadata } from "./utils/metadata.js";
+export {
+  baseService,
+  getConfiguredImageService,
+  getImage,
+  imageMetadata
+};

package/dist/assets/internal.d.ts

@@ -0,0 +1,36 @@
+import { StaticBuildOptions } from '../core/build/types.js';
+import { ImageService } from './services/service.js';
+import type { ImageMetadata, ImageTransform } from './types.js';
+export declare function isESMImportedImage(src: ImageMetadata | string): src is ImageMetadata;
+export declare function getConfiguredImageService(): Promise<ImageService>;
+interface GetImageResult {
+    options: ImageTransform;
+    src: string;
+    attributes: Record<string, any>;
+}
+/**
+ * Get an optimized image and the necessary attributes to render it.
+ *
+ * **Example**
+ * ```astro
+ * ---
+ * import { getImage } from 'astro:assets';
+ * import originalImage from '../assets/image.png';
+ *
+ * const optimizedImage = await getImage({src: originalImage, width: 1280 })
+ * ---
+ * <img src={optimizedImage.src} {...optimizedImage.attributes} />
+ * ```
+ *
+ * This is functionally equivalent to using the `<Image />` component, as the component calls this function internally.
+ */
+export declare function getImage(options: ImageTransform): Promise<GetImageResult>;
+export declare function getStaticImageList(): Iterable<[ImageTransform, string]>;
+interface GenerationData {
+    weight: {
+        before: number;
+        after: number;
+    };
+}
+export declare function generateImage(buildOpts: StaticBuildOptions, options: ImageTransform, filepath: string): Promise<GenerationData | undefined>;
+export {};

package/dist/assets/internal.js

@@ -0,0 +1,70 @@
+import fs from "node:fs";
+import { AstroError, AstroErrorData } from "../core/errors/index.js";
+import { isLocalService } from "./services/service.js";
+function isESMImportedImage(src) {
+  return typeof src === "object";
+}
+async function getConfiguredImageService() {
+  if (!globalThis.astroAsset.imageService) {
+    const { default: service } = await import("virtual:image-service").catch((e) => {
+      const error = new AstroError(AstroErrorData.InvalidImageService);
+      error.cause = e;
+      throw error;
+    });
+    globalThis.astroAsset.imageService = service;
+    return service;
+  }
+  return globalThis.astroAsset.imageService;
+}
+async function getImage(options) {
+  const service = await getConfiguredImageService();
+  let imageURL = service.getURL(options);
+  if (isLocalService(service) && globalThis.astroAsset.addStaticImage) {
+    imageURL = globalThis.astroAsset.addStaticImage(options);
+  }
+  return {
+    options,
+    src: imageURL,
+    attributes: service.getHTMLAttributes !== void 0 ? service.getHTMLAttributes(options) : {}
+  };
+}
+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();
+}
+async function generateImage(buildOpts, options, filepath) {
+  if (!isESMImportedImage(options.src)) {
+    return void 0;
+  }
+  const imageService = await getConfiguredImageService();
+  let serverRoot, clientRoot;
+  if (buildOpts.settings.config.output === "server") {
+    serverRoot = buildOpts.settings.config.build.server;
+    clientRoot = buildOpts.settings.config.build.client;
+  } else {
+    serverRoot = buildOpts.settings.config.outDir;
+    clientRoot = buildOpts.settings.config.outDir;
+  }
+  const fileData = await fs.promises.readFile(new URL("." + options.src.src, serverRoot));
+  const resultData = await imageService.transform(fileData, { ...options, src: options.src.src });
+  const finalFileURL = new URL("." + filepath, clientRoot);
+  const finalFolderURL = new URL("./", finalFileURL);
+  await fs.promises.mkdir(finalFolderURL, { recursive: true });
+  await fs.promises.writeFile(finalFileURL, resultData.data);
+  return {
+    weight: {
+      before: Math.trunc(fileData.byteLength / 1024),
+      after: Math.trunc(resultData.data.byteLength / 1024)
+    }
+  };
+}
+export {
+  generateImage,
+  getConfiguredImageService,
+  getImage,
+  getStaticImageList,
+  isESMImportedImage
+};

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

@@ -0,0 +1,71 @@
+/// <reference types="node" />
+import { ImageTransform, OutputFormat } 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 {
+    /**
+     * Return the URL to the endpoint or URL your images are generated from.
+     *
+     * For a local service, your service should expose an endpoint handling the image requests, or use Astro's at `/_image`.
+     *
+     * For external services, this should point to the URL your images are coming from, for instance, `/_vercel/image`
+     *
+     */
+    getURL: (options: ImageTransform) => 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) => Record<string, any>;
+}
+export type ExternalImageService = SharedServiceProps;
+type LocalImageTransform = {
+    src: string;
+    [key: string]: any;
+};
+export interface LocalImageService extends SharedServiceProps {
+    /**
+     * 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) => LocalImageTransform | 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) => Promise<{
+        data: Buffer;
+        format: OutputFormat;
+    }>;
+}
+export type BaseServiceTransform = {
+    src: string;
+    width?: number;
+    height?: number;
+    format?: string | null;
+    quality?: string | null;
+};
+/**
+ * Basic local service using the included `_image` endpoint.
+ * This service intentionally does not implement `transform`.
+ *
+ * Example usage:
+ * ```ts
+ * const service = {
+ *  getURL: baseService.getURL,
+ *  parseURL: baseService.parseURL,
+ *  getHTMLAttributes: baseService.getHTMLAttributes,
+ *  async transform(inputBuffer, transformOptions) {...}
+ * }
+ * ```
+ *
+ * This service only supports the following properties: `width`, `height`, `format` and `quality`.
+ * Additionally, remote URLs are passed as-is.
+ *
+ */
+export declare const baseService: Omit<LocalImageService, 'transform'>;
+export {};

package/dist/assets/services/service.js

@@ -0,0 +1,88 @@
+import { AstroError, AstroErrorData } from "../../core/errors/index.js";
+import { isRemotePath } from "../../core/path.js";
+import { isESMImportedImage } from "../internal.js";
+function isLocalService(service) {
+  if (!service) {
+    return false;
+  }
+  return "transform" in service;
+}
+function parseQuality(quality) {
+  let result = parseInt(quality);
+  if (Number.isNaN(result)) {
+    return quality;
+  }
+  return result;
+}
+const baseService = {
+  getHTMLAttributes(options) {
+    let targetWidth = options.width;
+    let targetHeight = options.height;
+    if (isESMImportedImage(options.src)) {
+      const aspectRatio = options.src.width / options.src.height;
+      if (targetHeight && !targetWidth) {
+        targetWidth = Math.round(targetHeight * aspectRatio);
+      } else if (targetWidth && !targetHeight) {
+        targetHeight = Math.round(targetWidth / aspectRatio);
+      } else {
+        targetWidth = options.src.width;
+        targetHeight = options.src.height;
+      }
+    }
+    const { src, width, height, format, quality, ...attributes } = options;
+    return {
+      ...attributes,
+      width: targetWidth,
+      height: targetHeight,
+      loading: attributes.loading ?? "lazy",
+      decoding: attributes.decoding ?? "async"
+    };
+  },
+  getURL(options) {
+    if (!isESMImportedImage(options.src)) {
+      let missingDimension;
+      if (!options.width && !options.height) {
+        missingDimension = "both";
+      } else if (!options.width && options.height) {
+        missingDimension = "width";
+      } else if (options.width && !options.height) {
+        missingDimension = "height";
+      }
+      if (missingDimension) {
+        throw new AstroError({
+          ...AstroErrorData.MissingImageDimension,
+          message: AstroErrorData.MissingImageDimension.message(missingDimension)
+        });
+      }
+    }
+    if (!isESMImportedImage(options.src) && isRemotePath(options.src)) {
+      return options.src;
+    }
+    const searchParams = new URLSearchParams();
+    searchParams.append("href", isESMImportedImage(options.src) ? options.src.src : options.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 "/_image?" + searchParams;
+  },
+  parseURL(url) {
+    const params = url.searchParams;
+    if (!params.has("href")) {
+      return void 0;
+    }
+    const transform = {
+      src: params.get("href"),
+      width: params.has("w") ? parseInt(params.get("w")) : void 0,
+      height: params.has("h") ? parseInt(params.get("h")) : void 0,
+      format: params.get("f"),
+      quality: params.get("q")
+    };
+    return transform;
+  }
+};
+export {
+  baseService,
+  isLocalService,
+  parseQuality
+};

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

@@ -0,0 +1,3 @@
+import { LocalImageService } from './service.js';
+declare const sharpService: LocalImageService;
+export default sharpService;