Merge remote-tracking branch 'origin/main' into feat/redirect-default…

…-language

.changeset/friendly-needles-invite.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Improves HMR for Astro style and script modules

.changeset/poor-cherries-buy.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Disables View Transition form handling when the `action` property points to an external URL

.changeset/slimy-mayflies-vanish.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fix Astro wrongfully deleting certain images imported with `?url` when used in tandem with `astro:assets`

.changeset/weak-planes-help.md

@@ -0,0 +1,4 @@
+---
+"astro": patch
+---
+Fixes an issue where anchor elements within a custom component could not trigger a view transition.

.github/workflows/check-merge.yml

@@ -45,22 +45,26 @@ jobs:
           files: |
             .changeset/**/*.md
 
-      - name: Check if any changesets contain minor changes
-        id: minor
+      - name: Check if any changesets contain minor or major changes
+        id: check
         if: steps.blocked.outputs.result != 'true'
         run: |
-          echo "Checking for changesets marked as minor"
+          echo "Checking for changesets marked as minor or major"
           echo "found=false" >> $GITHUB_OUTPUT
+
+          regex="[\"']astro[\"']: (minor|major)"
           for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
-            if grep -q "'astro': minor" "$file"; then
-              echo "found=true" >> $GITHUB_OUTPUT
-              echo "$file has a minor release tag"
-            fi
+              if [[ $(cat $file) =~ $regex ]]; then
+                  version="${BASH_REMATCH[1]}"
+                  echo "version=$version" >> $GITHUB_OUTPUT
+                  echo "found=true" >> $GITHUB_OUTPUT
+                  echo "$file has a $version release tag"
+              fi
           done
 
       - name: Add label
         uses: actions/github-script@v6
-        if: steps.minor.outputs.found == 'true'
+        if: steps.check.outputs.found == 'true'
         env:
           issue_number: ${{ github.event.number }}
         with:
@@ -69,12 +73,12 @@ jobs:
               issue_number: process.env.issue_number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              labels: ['semver: minor']
+              labels: ['semver: ${{ steps.check.outputs.version }}']
             });
 
       - name: Change PR Status
         uses: actions/github-script@v6
-        if: steps.minor.outputs.found == 'true'
+        if: steps.check.outputs.found == 'true'
         env:
           issue_number: ${{ github.event.number }}
         with:
@@ -84,5 +88,5 @@ jobs:
               repo: context.repo.repo,
               pull_number: process.env.issue_number,
               event: 'REQUEST_CHANGES',
-              body: 'This PR is blocked because it contains a `minor` changeset. A reviewer will merge this at the next release if approved.'
+              body: 'This PR is blocked because it contains a `${{ steps.check.outputs.version }}` changeset. A reviewer will merge this at the next release if approved.'
             });

packages/astro/components/ViewTransitions.astro

@@ -53,6 +53,9 @@ const { fallback = 'animate' } = Astro.props;
 	if (supportsViewTransitions || getFallback() !== 'none') {
 		document.addEventListener('click', (ev) => {
 			let link = ev.target;
+			if (ev.composed) {
+				link = ev.composedPath()[0];
+			}
 			if (link instanceof Element) {
 				link = link.closest('a, area');
 			}
@@ -106,7 +109,9 @@ const { fallback = 'animate' } = Astro.props;
 
 			// the "dialog" method is a special keyword used within <dialog> elements
 			// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fs-method
-			if (method === 'dialog') {
+			if (method === 'dialog' || location.origin !== new URL(action, location.href).origin) {
+				// No page transitions in these cases,
+				// Let the browser standard action handle this
 				return;
 			}
 

packages/astro/e2e/fixtures/view-transitions/src/pages/form-five.astro

@@ -0,0 +1,9 @@
+---
+import Layout from '../components/Layout.astro';
+
+---
+<Layout>
+	<form action="https://example.com/" method="POST">
+		<button id="submit">Submit</button>
+	</form>
+</Layout>

packages/astro/e2e/fixtures/view-transitions/src/pages/one.astro

@@ -12,6 +12,11 @@ import Layout from '../components/Layout.astro';
 	<a id="click-redirect-two" href="/redirect-two">go to redirect 2</a>
 	<a id="click-redirect-external" href="/redirect-external">go to a redirect external</a>
 	<a id="click-404" href="/undefined-page">go to undefined page</a>
+	<custom-a id="custom-click-two">
+		<template shadowrootmode="open">
+			<a href="/two">go to 2</a>
+		</template>
+	</custom-a>
 
 	<div id="test">test content</div>
 </Layout>

packages/astro/e2e/view-transitions.test.js

@@ -932,6 +932,13 @@ test.describe('View Transitions', () => {
 		).toEqual(1);
 	});
 
+	test('form POST that action for cross-origin is opt-out', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/form-five'));
+		page.on('request', (request) => expect(request.method()).toBe('POST'));
+		// Submit the form
+		await page.click('#submit');
+	});
+
 	test('form GET that redirects to another page is handled', async ({ page, astro }) => {
 		const loads = [];
 		page.addListener('load', async (p) => {
@@ -1206,4 +1213,18 @@ test.describe('View Transitions', () => {
 
 		expect(loads.length, 'There should only be 1 page load').toEqual(1);
 	});
+
+	test('custom elements can trigger a view transition', async ({ page, astro }) => {
+		const loads = [];
+		page.addListener('load', (p) => {
+			loads.push(p.title());
+		});
+		await page.goto(astro.resolveUrl('/one'));
+		await expect(page.locator('#one'), 'should have content').toHaveText('Page 1');
+		// go to page 2
+		await page.click('#custom-click-two');
+		await expect(page.locator('#two'), 'should have content').toHaveText('Page 2');
+
+		expect(loads.length, 'There should only be 1 page load').toEqual(1);
+	});
 });

packages/astro/src/assets/internal.ts

@@ -61,6 +61,10 @@ export async function getImage(
 				: options.src,
 	};
 
+	const originalPath = isESMImportedImage(resolvedOptions.src)
+		? resolvedOptions.src.fsPath
+		: resolvedOptions.src;
+
 	// Clone the `src` object if it's an ESM import so that we don't refer to any properties of the original object
 	// Causing our generate step to think the image is used outside of the image optimization pipeline
 	const clonedSrc = isESMImportedImage(resolvedOptions.src)
@@ -95,10 +99,10 @@ export async function getImage(
 		!(isRemoteImage(validatedOptions.src) && imageURL === validatedOptions.src)
 	) {
 		const propsToHash = service.propertiesToHash ?? DEFAULT_HASH_PROPS;
-		imageURL = globalThis.astroAsset.addStaticImage(validatedOptions, propsToHash);
+		imageURL = globalThis.astroAsset.addStaticImage(validatedOptions, propsToHash, originalPath);
 		srcSets = srcSetTransforms.map((srcSet) => ({
 			transform: srcSet.transform,
-			url: globalThis.astroAsset.addStaticImage!(srcSet.transform, propsToHash),
+			url: globalThis.astroAsset.addStaticImage!(srcSet.transform, propsToHash, originalPath),
 			descriptor: srcSet.descriptor,
 			attributes: srcSet.attributes,
 		}));

packages/astro/src/assets/types.ts

@@ -20,7 +20,9 @@ declare global {
 	// eslint-disable-next-line no-var
 	var astroAsset: {
 		imageService?: ImageService;
-		addStaticImage?: ((options: ImageTransform, hashProperties: string[]) => string) | undefined;
+		addStaticImage?:
+			| ((options: ImageTransform, hashProperties: string[], fsPath: string) => string)
+			| undefined;
 		staticImages?: AssetsGlobalStaticImagesList;
 		referencedImages?: Set<string>;
 	};

packages/astro/src/assets/utils/emitAsset.ts

@@ -33,7 +33,7 @@ export async function emitESMImage(
 	Object.defineProperty(emittedImage, 'fsPath', {
 		enumerable: false,
 		writable: false,
-		value: url,
+		value: id,
 	});
 
 	// Build

packages/astro/src/assets/utils/proxy.ts

@@ -1,11 +1,17 @@
-export function getProxyCode(options: Record<string, any>, isSSR: boolean): string {
+import type { ImageMetadata } from '../types.js';
+
+export function getProxyCode(options: ImageMetadata, isSSR: boolean): string {
+	const stringifiedFSPath = JSON.stringify(options.fsPath);
 	return `
 						new Proxy(${JSON.stringify(options)}, {
 						get(target, name, receiver) {
 							if (name === 'clone') {
 								return structuredClone(target);
 							}
-							${!isSSR ? 'globalThis.astroAsset.referencedImages.add(target.fsPath);' : ''}
+							if (name === 'fsPath') {
+								return ${stringifiedFSPath};
+							}
+							${!isSSR ? `globalThis.astroAsset.referencedImages.add(${stringifiedFSPath});` : ''}
 							return target[name];
 						}
 					})

packages/astro/src/assets/vite-plugin-assets.ts

@@ -19,7 +19,8 @@ import { hashTransform, propsToFilename } from './utils/transformToPath.js';
 
 const resolvedVirtualModuleId = '\0' + VIRTUAL_MODULE_ID;
 
-const assetRegex = new RegExp(`\\.(${VALID_INPUT_FORMATS.join('|')})$`, 'i');
+const assetRegex = new RegExp(`\\.(${VALID_INPUT_FORMATS.join('|')})`, 'i');
+const assetRegexEnds = new RegExp(`\\.(${VALID_INPUT_FORMATS.join('|')})$`, 'i');
 
 export default function assets({
 	settings,
@@ -81,7 +82,7 @@ export default function assets({
 					return;
 				}
 
-				globalThis.astroAsset.addStaticImage = (options, hashProperties) => {
+				globalThis.astroAsset.addStaticImage = (options, hashProperties, originalPath) => {
 					if (!globalThis.astroAsset.staticImages) {
 						globalThis.astroAsset.staticImages = new Map<
 							string,
@@ -97,11 +98,6 @@ export default function assets({
 						isESMImportedImage(options.src) ? options.src.src : options.src
 					).replace(settings.config.build.assetsPrefix || '', '');
 
-					// This, however, is the real original path, in `src` and all.
-					const originalSrcPath = isESMImportedImage(options.src)
-						? options.src.fsPath
-						: options.src;
-
 					const hash = hashTransform(
 						options,
 						settings.config.image.service.entrypoint,
@@ -120,7 +116,7 @@ export default function assets({
 
 						if (!transformsForPath) {
 							globalThis.astroAsset.staticImages.set(finalOriginalImagePath, {
-								originalSrcPath: originalSrcPath,
+								originalSrcPath: originalPath,
 								transforms: new Map(),
 							});
 							transformsForPath = globalThis.astroAsset.staticImages.get(finalOriginalImagePath)!;
@@ -178,15 +174,25 @@ export default function assets({
 				resolvedConfig = viteConfig;
 			},
 			async load(id, options) {
-				// If our import has any query params, we'll let Vite handle it
-				// See https://github.com/withastro/astro/issues/8333
-				if (id !== removeQueryString(id)) {
-					return;
-				}
 				if (assetRegex.test(id)) {
-					const meta = await emitESMImage(id, this.meta.watchMode, this.emitFile);
+					if (!globalThis.astroAsset.referencedImages)
+						globalThis.astroAsset.referencedImages = new Set();
+
+					if (id !== removeQueryString(id)) {
+						// If our import has any query params, we'll let Vite handle it, nonetheless we'll make sure to not delete it
+						// See https://github.com/withastro/astro/issues/8333
+						globalThis.astroAsset.referencedImages.add(removeQueryString(id));
+						return;
+					}
 
-					if (!meta) {
+					// If the requested ID doesn't end with a valid image extension, we'll let Vite handle it
+					if (!assetRegexEnds.test(id)) {
+						return;
+					}
+
+					const imageMetadata = await emitESMImage(id, this.meta.watchMode, this.emitFile);
+
+					if (!imageMetadata) {
 						throw new AstroError({
 							...AstroErrorData.ImageNotFound,
 							message: AstroErrorData.ImageNotFound.message(id),
@@ -197,13 +203,13 @@ export default function assets({
 					// Since you cannot use image optimization on the client anyway, it's safe to assume that if the user imported
 					// an image on the client, it should be present in the final build.
 					if (options?.ssr) {
-						return `export default ${getProxyCode(meta, isServerLikeOutput(settings.config))}`;
+						return `export default ${getProxyCode(
+							imageMetadata,
+							isServerLikeOutput(settings.config)
+						)}`;
 					} else {
-						if (!globalThis.astroAsset.referencedImages)
-							globalThis.astroAsset.referencedImages = new Set();
-
-						globalThis.astroAsset.referencedImages.add(meta.fsPath);
-						return `export default ${JSON.stringify(meta)}`;
+						globalThis.astroAsset.referencedImages.add(imageMetadata.fsPath);
+						return `export default ${JSON.stringify(imageMetadata)}`;
 					}
 				}
 			},

packages/astro/src/content/runtime-assets.ts

@@ -22,7 +22,7 @@ export function createImage(pluginContext: PluginContext, entryFilePath: string)
 				return z.never();
 			}
 
-			return { ...metadata, ASTRO_ASSET: true };
+			return { ...metadata, ASTRO_ASSET: metadata.fsPath };
 		});
 	};
 }

packages/astro/src/content/vite-plugin-content-imports.ts

@@ -364,6 +364,7 @@ function stringifyEntryData(data: Record<string, any>, isSSR: boolean): string {
 			// For Astro assets, add a proxy to track references
 			if (typeof value === 'object' && 'ASTRO_ASSET' in value) {
 				const { ASTRO_ASSET, ...asset } = value;
+				asset.fsPath = ASTRO_ASSET;
 				return getProxyCode(asset, isSSR);
 			}
 		});

packages/astro/src/vite-plugin-astro/index.ts

@@ -27,6 +27,7 @@ interface AstroPluginOptions {
 export default function astro({ settings, logger }: AstroPluginOptions): vite.Plugin[] {
 	const { config } = settings;
 	let resolvedConfig: vite.ResolvedConfig;
+	let server: vite.ViteDevServer;
 
 	// Variables for determining if an id starts with /src...
 	const srcRootWeb = config.srcDir.pathname.slice(config.root.pathname.length - 1);
@@ -38,6 +39,9 @@ export default function astro({ settings, logger }: AstroPluginOptions): vite.Pl
 		configResolved(_resolvedConfig) {
 			resolvedConfig = _resolvedConfig;
 		},
+		configureServer(_server) {
+			server = _server;
+		},
 		async load(id, opts) {
 			const parsedId = parseAstroRequest(id);
 			const query = parsedId.query;
@@ -46,9 +50,18 @@ export default function astro({ settings, logger }: AstroPluginOptions): vite.Pl
 			}
 			// For CSS / hoisted scripts, the main Astro module should already be cached
 			const filename = normalizePath(normalizeFilename(parsedId.filename, config.root));
-			const compileResult = getCachedCompileResult(config, filename);
+			let compileResult = getCachedCompileResult(config, filename);
 			if (!compileResult) {
-				return null;
+				// In dev, HMR could cause this compile result to be empty, try to load it first
+				if (server) {
+					await server.transformRequest('/@fs' + filename);
+					compileResult = getCachedCompileResult(config, filename);
+				}
+
+				// If there's really no compilation result, error
+				if (!compileResult) {
+					throw new Error('No cached compile result found for ' + id);
+				}
 			}
 
 			switch (query.type) {

packages/astro/test/fixtures/core-image-deletion/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@test/core-image-deletion",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  },
+  "scripts": {
+    "dev": "astro dev"
+  }
+}

packages/astro/test/fixtures/core-image-deletion/src/pages/index.astro

@@ -0,0 +1,15 @@
+---
+import { Image } from "astro:assets";
+import onlyOne from "../assets/onlyone.jpg";
+import twoOfUs from "../assets/twoofus.jpg";
+import twoFromURL from "../assets/url.jpg";
+import twoFromURL_URL from "../assets/url.jpg?url";
+---
+
+<Image src={onlyOne} alt="Only one of me exists at the end of the build" />
+
+<Image src={twoOfUs} alt="Two of us will exist, because I'm also used as a normal image" /></Image>
+<img src={twoOfUs.src} alt="Two of us will exist, because I'm also used as a normal image" />
+
+<Image src={twoFromURL} alt="Two of us will exist, because I'm also imported using ?url" /></Image>
+<img src={twoFromURL_URL} alt="Two of us will exist, because I'm also used as a normal image" />