astro 2.1.0 → 2.1.2

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

@@ -658,6 +658,27 @@ export interface AstroUserConfig {
      * @name Image options
      */
     image?: {
+        /**
+         * @docs
+         * @name image.service (Experimental)
+         * @type {'astro/assets/services/sharp' | 'astro/assets/services/squoosh' | string}
+         * @default `'astro/assets/services/squoosh'`
+         * @version 2.1.0
+         * @description
+         * Set which image service is used for Astro’s experimental assets support.
+         *
+         * The value should be a module specifier for the image service to use:
+         * either one of Astro’s two built-in services, or a third-party implementation.
+         *
+         * ```js
+         * {
+         *   image: {
+         *     // Example: Enable the Sharp-based image service
+         *     service: 'astro/assets/services/sharp',
+         *   },
+         * }
+         * ```
+         */
         service: 'astro/assets/services/sharp' | 'astro/assets/services/squoosh' | (string & {});
     };
     /**
@@ -867,6 +888,7 @@ export interface AstroUserConfig {
      */
     legacy?: object;
     /**
+     * @docs
      * @kind heading
      * @name Experimental Flags
      * @description

package/dist/assets/services/service.js

@@ -1,5 +1,6 @@
 import { AstroError, AstroErrorData } from "../../core/errors/index.js";
 import { isRemotePath } from "../../core/path.js";
+import { VALID_INPUT_FORMATS } from "../consts.js";
 import { isESMImportedImage } from "../internal.js";
 function isLocalService(service) {
   if (!service) {
@@ -51,13 +52,23 @@ const baseService = {
       if (missingDimension) {
         throw new AstroError({
           ...AstroErrorData.MissingImageDimension,
-          message: AstroErrorData.MissingImageDimension.message(missingDimension)
+          message: AstroErrorData.MissingImageDimension.message(missingDimension, options.src)
         });
       }
     }
     if (!isESMImportedImage(options.src) && isRemotePath(options.src)) {
       return options.src;
     }
+    if (isESMImportedImage(options.src) && !VALID_INPUT_FORMATS.includes(options.src.format)) {
+      throw new AstroError({
+        ...AstroErrorData.UnsupportedImageFormat,
+        message: AstroErrorData.UnsupportedImageFormat.message(
+          options.src.format,
+          options.src.src,
+          VALID_INPUT_FORMATS
+        )
+      });
+    }
     const searchParams = new URLSearchParams();
     searchParams.append("href", isESMImportedImage(options.src) ? options.src.src : options.src);
     options.width && searchParams.append("w", options.width.toString());

package/dist/assets/vite-plugin-assets.js

@@ -7,6 +7,7 @@ import { fileURLToPath, pathToFileURL } from "node:url";
 import { normalizePath } from "vite";
 import { error } from "../core/logger/core.js";
 import { joinPaths, prependForwardSlash } from "../core/path.js";
+import { rootRelativePath } from "../core/util.js";
 import { VIRTUAL_MODULE_ID, VIRTUAL_SERVICE_ID } from "./consts.js";
 import { isESMImportedImage } from "./internal.js";
 import { isLocalService } from "./services/service.js";
@@ -65,8 +66,8 @@ function assets({
             if (!filePath) {
               return next();
             }
-            const filePathURL = new URL(filePath, "file:");
-            const file = await fs.readFile(filePathURL.pathname);
+            const filePathURL = new URL("." + filePath, settings.config.root);
+            const file = await fs.readFile(filePathURL);
             let meta = getOrigQueryParams(filePathURL.searchParams);
             if (!meta) {
               meta = await imageMetadata(filePathURL, file);
@@ -85,7 +86,10 @@ function assets({
               data = result.data;
               format = result.format;
             }
-            res.setHeader("Content-Type", mime.getType(fileURLToPath(url)) || `image/${format}`);
+            res.setHeader(
+              "Content-Type",
+              mime.getType(fileURLToPath(filePathURL)) || `image/${format}`
+            );
             res.setHeader("Cache-Control", "max-age=360000");
             const stream = Readable.from(data);
             return stream.pipe(res);
@@ -155,7 +159,7 @@ function assets({
         resolvedConfig = viteConfig;
       },
       async load(id) {
-        if (/\.(heic|heif|avif|jpeg|jpg|png|tiff|webp|gif)$/.test(id)) {
+        if (/\.(jpeg|jpg|png|tiff|webp|gif|svg)$/.test(id)) {
           const url = pathToFileURL(id);
           const meta = await imageMetadata(url);
           if (!meta) {
@@ -174,7 +178,7 @@ function assets({
             url.searchParams.append("origWidth", meta.width.toString());
             url.searchParams.append("origHeight", meta.height.toString());
             url.searchParams.append("origFormat", meta.format);
-            meta.src = url.toString();
+            meta.src = rootRelativePath(settings.config, url);
           }
           return `export default ${JSON.stringify(meta)}`;
         }

package/dist/core/constants.js

@@ -1,4 +1,4 @@
-const ASTRO_VERSION = "2.1.0";
+const ASTRO_VERSION = "2.1.2";
 const SUPPORTED_MARKDOWN_FILE_EXTENSIONS = [
   ".markdown",
   ".mdown",

package/dist/core/dev/dev.js

@@ -51,7 +51,7 @@ async function dev(settings, options) {
       isRestart: options.isRestart
     })
   );
-  const currentVersion = "2.1.0";
+  const currentVersion = "2.1.2";
   if (currentVersion.includes("-")) {
     warn(options.logging, null, msg.prerelease({ currentVersion }));
   }

package/dist/core/errors/errors-data.d.ts

@@ -397,21 +397,74 @@ export declare const AstroErrorData: {
         readonly message: (paramName: string) => string;
         readonly hint: "Rename your file to `[page].astro` or `[...page].astro`.";
     };
+    /**
+     * @docs
+     * @see
+     * - [Assets (Experimental)](https://docs.astro.build/en/guides/assets/)
+     * - [Image component](https://docs.astro.build/en/guides/assets/#image--astroassets)
+     * - [Image component#alt](https://docs.astro.build/en/guides/assets/#alt-required)
+     * @description
+     * The `alt` property allows you to provide descriptive alt text to users of screen readers and other assistive technologies. In order to ensure your images are accessible, the `Image` component requires that an `alt` be specified.
+     *
+     * If the image is merely decorative (i.e. doesn’t contribute to the understanding of the page), set `alt=""` so that screen readers know to ignore the image.
+     */
     readonly ImageMissingAlt: {
         readonly title: "Missing alt property";
         readonly code: 3022;
         readonly message: "The alt property is required.";
         readonly hint: "The `alt` property is important for the purpose of accessibility, without it users using screen readers or other assistive technologies won't be able to understand what your image is supposed to represent. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt for more information.";
     };
+    /**
+     * @docs
+     * @see
+     * - [Image Service API](https://docs.astro.build/en/reference/image-service-reference/)
+     * @description
+     * There was an error while loading the configured image service. This can be caused by various factors, such as your image service not properly exporting a compatible object in its default export, or an incorrect path.
+     *
+     * If you believe that your service is properly configured and this error is wrong, please [open an issue](https://astro.build/issues/).
+     */
     readonly InvalidImageService: {
         readonly title: "Error while loading image service";
         readonly code: 3023;
-        readonly message: "There was an error loading the configured image service. Please see the stack trace for more information";
+        readonly message: "There was an error loading the configured image service. Please see the stack trace for more information.";
     };
+    /**
+     * @docs
+     * @message
+     * Missing width and height attributes for `IMAGE_URL`. When using remote images, both dimensions are always required in order to avoid cumulative layout shift (CLS).
+     * @see
+     * - [Assets (Experimental)](https://docs.astro.build/en/guides/assets/)
+     * - [Image component#width-and-height](https://docs.astro.build/en/guides/assets/#width-and-height)
+     * @description
+     * For remote images, `width` and `height` cannot be inferred from the original file. As such, in order to avoid CLS, those two properties are always required.
+     *
+     * If your image is inside your `src` folder, you probably meant to import it instead. See [the Imports guide for more information](https://docs.astro.build/en/guides/imports/#other-assets).
+     */
     readonly MissingImageDimension: {
         readonly title: "Missing image dimensions";
         readonly code: 3024;
-        readonly message: (missingDimension: 'width' | 'height' | 'both') => string;
+        readonly message: (missingDimension: 'width' | 'height' | 'both', imageURL: string) => string;
+        readonly hint: "If your image is inside your `src` folder, you probably meant to import it instead. See [the Imports guide for more information](https://docs.astro.build/en/guides/imports/#other-assets).";
+    };
+    /**
+     * @docs
+     * @description
+     * The built-in image services do not currently support optimizing all image formats.
+     *
+     * For unsupported formats such as SVGs and GIFs, you may be able to use an `img` tag directly:
+     * ```astro
+     * ---
+     * import rocket from '../assets/images/rocket.svg'
+     * ---
+     *
+     * <img src={rocket.src} width={rocket.width} height={rocket.height} alt="A rocketship in space." />
+     * ```
+     */
+    readonly UnsupportedImageFormat: {
+        readonly title: "Unsupported image format";
+        readonly code: 3025;
+        readonly message: (format: string, imagePath: string, supportedFormats: readonly string[]) => string;
+        readonly hint: "If you do not need optimization, using an `img` tag directly instead of the `Image` component might be what you're looking for.";
     };
     /**
      * @docs

package/dist/core/errors/errors-data.js

@@ -154,12 +154,21 @@ Expected \`true\` value but got \`${suffix}\`.`;
   InvalidImageService: {
     title: "Error while loading image service",
     code: 3023,
-    message: "There was an error loading the configured image service. Please see the stack trace for more information"
+    message: "There was an error loading the configured image service. Please see the stack trace for more information."
   },
   MissingImageDimension: {
     title: "Missing image dimensions",
     code: 3024,
-    message: (missingDimension) => `For remote images, ${missingDimension === "both" ? "width and height are" : `${missingDimension} is`} required.`
+    message: (missingDimension, imageURL) => `Missing ${missingDimension === "both" ? "width and height attributes" : `${missingDimension} attribute`} for ${imageURL}. When using remote images, both dimensions are always required in order to avoid CLS.`,
+    hint: "If your image is inside your `src` folder, you probably meant to import it instead. See [the Imports guide for more information](https://docs.astro.build/en/guides/imports/#other-assets)."
+  },
+  UnsupportedImageFormat: {
+    title: "Unsupported image format",
+    code: 3025,
+    message: (format, imagePath, supportedFormats) => `Received unsupported format \`${format}\` from \`${imagePath}\`. Currently only ${supportedFormats.join(
+      ", "
+    )} are supported for optimization.`,
+    hint: "If you do not need optimization, using an `img` tag directly instead of the `Image` component might be what you're looking for."
   },
   UnknownViteError: {
     title: "Unknown Vite Error.",

package/dist/core/messages.js

@@ -47,7 +47,7 @@ function serverStart({
   base,
   isRestart = false
 }) {
-  const version = "2.1.0";
+  const version = "2.1.2";
   const localPrefix = `${dim("\u2503")} Local    `;
   const networkPrefix = `${dim("\u2503")} Network  `;
   const emptyPrefix = " ".repeat(11);
@@ -233,7 +233,7 @@ function printHelp({
     message.push(
       linebreak(),
       `  ${bgGreen(black(` ${commandName} `))} ${green(
-        `v${"2.1.0"}`
+        `v${"2.1.2"}`
       )} ${headline}`
     );
   }

package/dist/core/util.d.ts

@@ -37,6 +37,7 @@ export declare function isPage(file: URL, settings: AstroSettings): boolean;
 export declare function isEndpoint(file: URL, settings: AstroSettings): boolean;
 export declare function isModeServerWithNoAdapter(settings: AstroSettings): boolean;
 export declare function relativeToSrcDir(config: AstroConfig, idOrUrl: URL | string): string;
+export declare function rootRelativePath(config: AstroConfig, idOrUrl: URL | string): string;
 export declare function emoji(char: string, fallback: string): string;
 /**
  * Simulate Vite's resolve and import analysis so we can import the id as an URL

package/dist/core/util.js

@@ -114,6 +114,15 @@ function relativeToSrcDir(config, idOrUrl) {
   }
   return id.slice(slash(fileURLToPath(config.srcDir)).length);
 }
+function rootRelativePath(config, idOrUrl) {
+  let id;
+  if (typeof idOrUrl !== "string") {
+    id = unwrapId(viteID(idOrUrl));
+  } else {
+    id = idOrUrl;
+  }
+  return prependForwardSlash(id.slice(normalizePath(fileURLToPath(config.root)).length));
+}
 function emoji(char, fallback) {
   return process.platform !== "win32" ? char : fallback;
 }
@@ -170,6 +179,7 @@ export {
   resolveJsToTs,
   resolvePages,
   resolvePath,
+  rootRelativePath,
   unwrapId,
   viteID
 };

package/dist/runtime/server/jsx.js

@@ -194,10 +194,17 @@ Did you forget to import the component or is it possible there is a typo?`);
 async function renderElement(result, tag, { children, ...props }) {
   return markHTMLString(
     `<${tag}${spreadAttributes(props)}${markHTMLString(
-      (children == null || children == "") && voidElementNames.test(tag) ? `/>` : `>${children == null ? "" : await renderJSX(result, children)}</${tag}>`
+      (children == null || children == "") && voidElementNames.test(tag) ? `/>` : `>${children == null ? "" : await renderJSX(result, prerenderElementChildren(tag, children))}</${tag}>`
     )}`
   );
 }
+function prerenderElementChildren(tag, children) {
+  if (typeof children === "string" && (tag === "style" || tag === "script")) {
+    return markHTMLString(children);
+  } else {
+    return children;
+  }
+}
 function useConsoleFilter() {
   consoleFilterRefs++;
   if (!originalConsoleError) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",