astro 3.3.0 → 3.3.1

package/components/Code.astro

@@ -8,7 +8,7 @@ import type {
 	ThemeRegistrationRaw,
 } from 'shikiji';
 import { visit } from 'unist-util-visit';
-import { getCachedHighlighter, replaceCssVariables } from './shiki.js';
+import { getCachedHighlighter, replaceCssVariables } from '../dist/core/shiki.js';
 
 interface Props {
 	/** The code to highlight. Required. */

package/components/Picture.astro

@@ -11,7 +11,16 @@ type Props = (LocalImageProps | RemoteImageProps) & {
 	pictureAttributes?: HTMLAttributes<'picture'>;
 };
 
-const { formats = ['webp'], pictureAttributes = {}, ...props } = Astro.props;
+const defaultFormats = ['webp'] as const;
+const defaultFallbackFormat = 'png' as const;
+
+// Certain formats don't want PNG fallbacks:
+// - GIF will typically want to stay as a gif, either for animation or for the lower amount of colors
+// - SVGs can't be converted to raster formats in most cases
+// For those, we'll use the original format as the fallback instead.
+const specialFormatsFallback = ['gif', 'svg'] as const;
+
+const { formats = defaultFormats, pictureAttributes = {}, fallbackFormat, ...props } = Astro.props;
 
 if (props.alt === undefined || props.alt === null) {
 	throw new AstroError(AstroErrorData.ImageMissingAlt);
@@ -24,16 +33,18 @@ const optimizedImages: GetImageResult[] = await Promise.all(
 	)
 );
 
-const fallbackFormat =
-	props.fallbackFormat ?? isESMImportedImage(props.src)
-		? ['svg', 'gif'].includes(props.src.format)
-			? props.src.format
-			: 'png'
-		: 'png';
+let resultFallbackFormat = fallbackFormat ?? defaultFallbackFormat;
+if (
+	!fallbackFormat &&
+	isESMImportedImage(props.src) &&
+	specialFormatsFallback.includes(props.src.format)
+) {
+	resultFallbackFormat = props.src.format;
+}
 
 const fallbackImage = await getImage({
 	...props,
-	format: fallbackFormat,
+	format: resultFallbackFormat,
 	widths: props.widths,
 	densities: props.densities,
 });
@@ -46,14 +57,13 @@ if (fallbackImage.srcSet.values.length > 0) {
 
 <picture {...pictureAttributes}>
 	{
-		Object.entries(optimizedImages).map(([_, image]) => (
-			<source
-				srcset={`${image.src}${
-					image.srcSet.values.length > 0 ? ' , ' + image.srcSet.attribute : ''
-				}`}
-				type={'image/' + image.options.format}
-			/>
-		))
+		Object.entries(optimizedImages).map(([_, image]) => {
+			const srcsetAttribute =
+				props.densities || (!props.densities && !props.widths)
+					? `${image.src}${image.srcSet.values.length > 0 ? ', ' + image.srcSet.attribute : ''}`
+					: image.srcSet.attribute;
+			return <source srcset={srcsetAttribute} type={'image/' + image.options.format} />;
+		})
 	}
 	<img src={fallbackImage.src} {...additionalAttributes} {...fallbackImage.attributes} />
 </picture>

package/dist/assets/services/service.js

@@ -65,10 +65,17 @@ const baseService = {
       if (options.src.format === "svg") {
         options.format = "svg";
       }
+      if (options.src.format === "svg" && options.format !== "svg" || options.src.format !== "svg" && options.format === "svg") {
+        throw new AstroError(AstroErrorData.UnsupportedImageConversion);
+      }
     }
     if (!options.format) {
       options.format = DEFAULT_OUTPUT_FORMAT;
     }
+    if (options.width)
+      options.width = Math.round(options.width);
+    if (options.height)
+      options.height = Math.round(options.height);
     return options;
   },
   getHTMLAttributes(options) {
@@ -84,12 +91,21 @@ const baseService = {
   },
   getSrcSet(options) {
     const srcSet = [];
-    const { targetWidth, targetHeight } = getTargetDimensions(options);
+    const { targetWidth } = getTargetDimensions(options);
     const { widths, densities } = options;
     const targetFormat = options.format ?? DEFAULT_OUTPUT_FORMAT;
-    const aspectRatio = targetWidth / targetHeight;
-    const imageWidth = isESMImportedImage(options.src) ? options.src.width : options.width;
-    const maxWidth = imageWidth ?? Infinity;
+    let imageWidth = options.width;
+    let maxWidth = Infinity;
+    if (isESMImportedImage(options.src)) {
+      imageWidth = options.src.width;
+      maxWidth = imageWidth;
+    }
+    const {
+      width: transformWidth,
+      height: transformHeight,
+      ...transformWithoutDimensions
+    } = options;
+    const allWidths = [];
     if (densities) {
       const densityValues = densities.map((density) => {
         if (typeof density === "number") {
@@ -99,48 +115,36 @@ const baseService = {
         }
       });
       const densityWidths = densityValues.sort().map((density) => Math.round(targetWidth * density));
-      densityWidths.forEach((width, index) => {
-        const maxTargetWidth = Math.min(width, maxWidth);
-        const { width: transformWidth, height: transformHeight, ...rest } = options;
-        const srcSetValue = {
-          transform: {
-            ...rest
-          },
-          descriptor: `${densityValues[index]}x`,
-          attributes: {
-            type: `image/${targetFormat}`
-          }
-        };
-        if (maxTargetWidth !== imageWidth) {
-          srcSetValue.transform.width = maxTargetWidth;
-          srcSetValue.transform.height = Math.round(maxTargetWidth / aspectRatio);
-        }
-        if (targetFormat !== options.format) {
-          srcSetValue.transform.format = targetFormat;
-        }
-        srcSet.push(srcSetValue);
-      });
+      allWidths.push(
+        ...densityWidths.map((width, index) => ({
+          maxTargetWidth: Math.min(width, maxWidth),
+          descriptor: `${densityValues[index]}x`
+        }))
+      );
     } else if (widths) {
-      widths.forEach((width) => {
-        const maxTargetWidth = Math.min(width, maxWidth);
-        const { width: transformWidth, height: transformHeight, ...rest } = options;
-        const srcSetValue = {
-          transform: {
-            ...rest
-          },
-          descriptor: `${width}w`,
-          attributes: {
-            type: `image/${targetFormat}`
-          }
-        };
-        if (maxTargetWidth !== imageWidth) {
-          srcSetValue.transform.width = maxTargetWidth;
-          srcSetValue.transform.height = Math.round(maxTargetWidth / aspectRatio);
+      allWidths.push(
+        ...widths.map((width) => ({
+          maxTargetWidth: Math.min(width, maxWidth),
+          descriptor: `${width}w`
+        }))
+      );
+    }
+    for (const { maxTargetWidth, descriptor } of allWidths) {
+      const srcSetTransform = { ...transformWithoutDimensions };
+      if (maxTargetWidth !== imageWidth) {
+        srcSetTransform.width = maxTargetWidth;
+      } else {
+        if (options.width && options.height) {
+          srcSetTransform.width = options.width;
+          srcSetTransform.height = options.height;
         }
-        if (targetFormat !== options.format) {
-          srcSetValue.transform.format = targetFormat;
+      }
+      srcSet.push({
+        transform: srcSetTransform,
+        descriptor,
+        attributes: {
+          type: `image/${targetFormat}`
         }
-        srcSet.push(srcSetValue);
       });
     }
     return srcSet;

package/dist/assets/utils/transformToPath.js

@@ -1,3 +1,4 @@
+import { deterministicString } from "deterministic-object-hash";
 import { basename, extname } from "node:path";
 import { removeQueryString } from "../../core/path.js";
 import { shorthash } from "../../runtime/server/shorthash.js";
@@ -14,7 +15,7 @@ function propsToFilename(transform, hash) {
 function hashTransform(transform, imageService) {
   const { alt, class: className, style, widths, densities, ...rest } = transform;
   const hashFields = { ...rest, imageService };
-  return shorthash(JSON.stringify(hashFields));
+  return shorthash(deterministicString(hashFields));
 }
 export {
   hashTransform,

package/dist/cli/add/index.js

@@ -602,10 +602,10 @@ async function fetchPackageJson(scope, name, tag) {
   const packageName = `${scope ? `${scope}/` : ""}${name}`;
   const registry = await getRegistry();
   const res = await fetch(`${registry}/${packageName}/${tag}`);
-  if (res.status === 404) {
-    return new Error();
-  } else {
+  if (res.status >= 200 && res.status < 300) {
     return await res.json();
+  } else {
+    return new Error();
   }
 }
 async function validateIntegrations(integrations) {

package/dist/core/constants.js

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

package/dist/core/dev/dev.js

@@ -20,7 +20,7 @@ async function dev(inlineConfig) {
       base: restart.container.settings.config.base
     })
   );
-  const currentVersion = "3.3.0";
+  const currentVersion = "3.3.1";
   if (currentVersion.includes("-")) {
     logger.warn(null, msg.prerelease({ currentVersion }));
   }

package/dist/core/errors/dev/vite.js

@@ -1,6 +1,7 @@
 import * as fs from "node:fs";
 import { fileURLToPath } from "node:url";
 import { codeToHtml } from "shikiji";
+import { replaceCssVariables } from "../../shiki.js";
 import { FailedToLoadModuleSSR, InvalidGlob, MdxIntegrationMissingError } from "../errors-data.js";
 import { AstroError } from "../errors.js";
 import { createSafeError } from "../utils.js";
@@ -70,6 +71,7 @@ function enhanceViteSSRError({
 }
 const ALTERNATIVE_JS_EXTS = ["cjs", "mjs"];
 const ALTERNATIVE_MD_EXTS = ["mdoc"];
+const INLINE_STYLE_SELECTOR_GLOBAL = /style="(.*?)"/g;
 async function getViteErrorPayload(err) {
   let plugin = err.plugin;
   if (!plugin && err.hint) {
@@ -85,12 +87,18 @@ async function getViteErrorPayload(err) {
   if (ALTERNATIVE_MD_EXTS.includes(highlighterLang ?? "")) {
     highlighterLang = "md";
   }
-  const highlightedCode = err.fullCode ? await codeToHtml(err.fullCode, {
+  let highlightedCode = err.fullCode ? await codeToHtml(err.fullCode, {
     // @ts-expect-error always assume that shiki can accept the lang string
     lang: highlighterLang,
     theme: "css-variables",
     lineOptions: err.loc?.line ? [{ line: err.loc.line, classes: ["error-line"] }] : void 0
   }) : void 0;
+  if (highlightedCode) {
+    highlightedCode = highlightedCode.replace(
+      INLINE_STYLE_SELECTOR_GLOBAL,
+      (m) => replaceCssVariables(m)
+    );
+  }
   return {
     type: "error",
     err: {

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

@@ -488,6 +488,18 @@ export declare const UnsupportedImageFormat: {
     message: (format: string, imagePath: string, supportedFormats: readonly string[]) => string;
     hint: string;
 };
+/**
+ * @docs
+ * @see
+ * - [Images](https://docs.astro.build/en/guides/images/)
+ * @description
+ * Astro does not currently supporting converting between vector (such as SVGs) and raster (such as PNGs and JPEGs) images.
+ */
+export declare const UnsupportedImageConversion: {
+    name: string;
+    title: string;
+    message: string;
+};
 /**
  * @docs
  * @see

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

@@ -175,6 +175,11 @@ const UnsupportedImageFormat = {
   )} are supported by our image services.`,
   hint: "Using an `img` tag directly instead of the `Image` component might be what you're looking for."
 };
+const UnsupportedImageConversion = {
+  name: "UnsupportedImageConversion",
+  title: "Unsupported image conversion",
+  message: "Converting between vector (such as SVGs) and raster (such as PNGs and JPEGs) images is not currently supported."
+};
 const PrerenderDynamicEndpointPathCollide = {
   name: "PrerenderDynamicEndpointPathCollide",
   title: "Prerendered dynamic endpoint has path collision.",
@@ -492,5 +497,6 @@ export {
   UnknownMarkdownError,
   UnknownViteError,
   UnsupportedConfigTransformError,
+  UnsupportedImageConversion,
   UnsupportedImageFormat
 };

package/dist/core/errors/overlay.js

@@ -68,16 +68,16 @@ const style = (
     --toggle-border-color: #C3CADB;
 
   /* Syntax Highlighting */
-  --shiki-color-text: #000000;
-  --shiki-token-constant: #4ca48f;
-  --shiki-token-string: #9f722a;
-  --shiki-token-comment: #8490b5;
-  --shiki-token-keyword: var(--accent);
-  --shiki-token-parameter: #aa0000;
-  --shiki-token-function: #4ca48f;
-  --shiki-token-string-expression: #9f722a;
-  --shiki-token-punctuation: #ffffff;
-  --shiki-token-link: #9f722a;
+  --astro-code-color-text: #000000;
+  --astro-code-token-constant: #4ca48f;
+  --astro-code-token-string: #9f722a;
+  --astro-code-token-comment: #8490b5;
+  --astro-code-token-keyword: var(--accent);
+  --astro-code-token-parameter: #aa0000;
+  --astro-code-token-function: #4ca48f;
+  --astro-code-token-string-expression: #9f722a;
+  --astro-code-token-punctuation: #ffffff;
+  --astro-code-token-link: #9f722a;
 }
 
 :host(.astro-dark) {
@@ -121,16 +121,16 @@ const style = (
   --toggle-border-color: #3D4663;
 
   /* Syntax Highlighting */
-  --shiki-color-text: #ffffff;
-  --shiki-token-constant: #90f4e3;
-  --shiki-token-string: #f4cf90;
-  --shiki-token-comment: #8490b5;
-  --shiki-token-keyword: var(--accent);
-  --shiki-token-parameter: #aa0000;
-  --shiki-token-function: #90f4e3;
-  --shiki-token-string-expression: #f4cf90;
-  --shiki-token-punctuation: #ffffff;
-  --shiki-token-link: #f4cf90;
+  --astro-code-color-text: #ffffff;
+  --astro-code-token-constant: #90f4e3;
+  --astro-code-token-string: #f4cf90;
+  --astro-code-token-comment: #8490b5;
+  --astro-code-token-keyword: var(--accent);
+  --astro-code-token-parameter: #aa0000;
+  --astro-code-token-function: #90f4e3;
+  --astro-code-token-string-expression: #f4cf90;
+  --astro-code-token-punctuation: #ffffff;
+  --astro-code-token-link: #f4cf90;
 }
 
 #theme-toggle-wrapper{

package/dist/core/messages.js

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

package/dist/core/shiki.d.ts

@@ -0,0 +1,8 @@
+import { getHighlighter, type Highlighter } from 'shikiji';
+type HighlighterOptions = NonNullable<Parameters<typeof getHighlighter>[0]>;
+/**
+ * shiki -> shikiji compat as we need to manually replace it
+ */
+export declare function replaceCssVariables(str: string): string;
+export declare function getCachedHighlighter(opts: HighlighterOptions): Promise<Highlighter>;
+export {};

package/dist/core/shiki.js

@@ -0,0 +1,35 @@
+import { getHighlighter } from "shikiji";
+const ASTRO_COLOR_REPLACEMENTS = {
+  "#000001": "var(--astro-code-color-text)",
+  "#000002": "var(--astro-code-color-background)",
+  "#000004": "var(--astro-code-token-constant)",
+  "#000005": "var(--astro-code-token-string)",
+  "#000006": "var(--astro-code-token-comment)",
+  "#000007": "var(--astro-code-token-keyword)",
+  "#000008": "var(--astro-code-token-parameter)",
+  "#000009": "var(--astro-code-token-function)",
+  "#000010": "var(--astro-code-token-string-expression)",
+  "#000011": "var(--astro-code-token-punctuation)",
+  "#000012": "var(--astro-code-token-link)"
+};
+const COLOR_REPLACEMENT_REGEX = new RegExp(
+  `(${Object.keys(ASTRO_COLOR_REPLACEMENTS).join("|")})`,
+  "g"
+);
+const cachedHighlighters = /* @__PURE__ */ new Map();
+function replaceCssVariables(str) {
+  return str.replace(COLOR_REPLACEMENT_REGEX, (match) => ASTRO_COLOR_REPLACEMENTS[match] || match);
+}
+function getCachedHighlighter(opts) {
+  const key = JSON.stringify(opts, Object.keys(opts).sort());
+  if (cachedHighlighters.has(key)) {
+    return cachedHighlighters.get(key);
+  }
+  const highlighter = getHighlighter(opts);
+  cachedHighlighters.set(key, highlighter);
+  return highlighter;
+}
+export {
+  getCachedHighlighter,
+  replaceCssVariables
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",
@@ -123,6 +123,7 @@
     "common-ancestor-path": "^1.0.1",
     "cookie": "^0.5.0",
     "debug": "^4.3.4",
+    "deterministic-object-hash": "^1.3.1",
     "devalue": "^4.3.2",
     "diff": "^5.1.0",
     "es-module-lexer": "^1.3.0",
@@ -151,7 +152,7 @@
     "shikiji": "^0.6.8",
     "string-width": "^6.1.0",
     "strip-ansi": "^7.1.0",
-    "tsconfck": "3.0.0-next.9",
+    "tsconfck": "^3.0.0",
     "unist-util-visit": "^4.1.2",
     "vfile": "^5.3.7",
     "vite": "^4.4.9",

package/components/shiki.ts

@@ -1,46 +0,0 @@
-import { type Highlighter, getHighlighter } from 'shikiji';
-
-type HighlighterOptions = NonNullable<Parameters<typeof getHighlighter>[0]>;
-
-const ASTRO_COLOR_REPLACEMENTS: Record<string, string> = {
-	'#000001': 'var(--astro-code-color-text)',
-	'#000002': 'var(--astro-code-color-background)',
-	'#000004': 'var(--astro-code-token-constant)',
-	'#000005': 'var(--astro-code-token-string)',
-	'#000006': 'var(--astro-code-token-comment)',
-	'#000007': 'var(--astro-code-token-keyword)',
-	'#000008': 'var(--astro-code-token-parameter)',
-	'#000009': 'var(--astro-code-token-function)',
-	'#000010': 'var(--astro-code-token-string-expression)',
-	'#000011': 'var(--astro-code-token-punctuation)',
-	'#000012': 'var(--astro-code-token-link)',
-};
-const COLOR_REPLACEMENT_REGEX = new RegExp(
-	`(${Object.keys(ASTRO_COLOR_REPLACEMENTS).join('|')})`,
-	'g'
-);
-
-// Caches Promise<Highlighter> for reuse when the same theme and langs are provided
-const cachedHighlighters = new Map();
-
-/**
- * shiki -> shikiji compat as we need to manually replace it
- */
-export function replaceCssVariables(str: string) {
-	return str.replace(COLOR_REPLACEMENT_REGEX, (match) => ASTRO_COLOR_REPLACEMENTS[match] || match);
-}
-
-export function getCachedHighlighter(opts: HighlighterOptions): Promise<Highlighter> {
-	// Always sort keys before stringifying to make sure objects match regardless of parameter ordering
-	const key = JSON.stringify(opts, Object.keys(opts).sort());
-
-	// Highlighter has already been requested, reuse the same instance
-	if (cachedHighlighters.has(key)) {
-		return cachedHighlighters.get(key);
-	}
-
-	const highlighter = getHighlighter(opts);
-	cachedHighlighters.set(key, highlighter);
-
-	return highlighter;
-}