..R-RM

.changeset/calm-lemons-compare.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+When redirecting to the default root locale, Astro middleare should take into consideration the value of `trailingSlash`

.changeset/dirty-zoos-fail.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes display of debug messages when using the `--verbose` flag

.changeset/famous-hats-teach.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix Passthrough image service generating multiple images with the same content in certain cases

.changeset/new-pets-fail.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Supports `formmethod` and `formaction` for form overrides

.changeset/red-houses-explode.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes the regression which broke bundling of image service for pre-rendered pages, which was introduced by [#8854](https://github.com/withastro/astro/pull/8854)

.changeset/six-chefs-flash.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Add a new settings panel to the dev overlay

.changeset/tidy-peas-accept.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes preview server `trailingSlash` handling for request URLs with query strings

packages/astro/components/ViewTransitions.astro

@@ -88,11 +88,14 @@ const { fallback = 'animate', handleForms } = Astro.props;
 				}
 
 				const form = el as HTMLFormElement;
+				const submitter = ev.submitter;
 				const formData = new FormData(form);
 				// Use the form action, if defined, otherwise fallback to current path.
-				let action = form.action ?? location.pathname;
+				let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname;
+				const method = submitter?.getAttribute('formmethod') ?? form.method;
+
 				const options: Options = {};
-				if (form.method === 'get') {
+				if (method === 'get') {
 					const params = new URLSearchParams(formData as any);
 					const url = new URL(action);
 					url.search = params.toString();

packages/astro/config.d.ts

@@ -16,18 +16,19 @@ export function getViteConfig(config: ViteUserConfig): ViteUserConfigFn;
 
 /**
  * Return the configuration needed to use the Sharp-based image service
- * See: https://docs.astro.build/en/guides/assets/#using-sharp
  */
 export function sharpImageService(): ImageServiceConfig;
 
 /**
  * Return the configuration needed to use the Squoosh-based image service
+ * See: https://docs.astro.build/en/guides/images/#configure-squoosh
  */
 export function squooshImageService(): ImageServiceConfig;
 
 /**
  * Return the configuration needed to use the passthrough image service. This image services does not perform
  * any image transformations, and is mainly useful when your platform does not support other image services, or you are
  * not using Astro's built-in image processing.
+ * See: https://docs.astro.build/en/guides/images/#configure-no-op-passthrough-service
  */
 export function passthroughImageService(): ImageServiceConfig;

packages/astro/e2e/dev-overlay.test.js

@@ -98,4 +98,23 @@ test.describe('Dev Overlay', () => {
 		await expect(auditHighlight).not.toBeVisible();
 		await expect(auditHighlightTooltip).not.toBeVisible();
 	});
+
+	test('can open Settings plugin', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const overlay = page.locator('astro-dev-overlay');
+		const pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]');
+		await pluginButton.click();
+
+		const settingsPluginCanvas = overlay.locator(
+			'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:settings"]'
+		);
+		const settingsWindow = settingsPluginCanvas.locator('astro-dev-overlay-window');
+		await expect(settingsWindow).toHaveCount(1);
+		await expect(settingsWindow).toBeVisible();
+
+		// Toggle plugin off
+		await pluginButton.click();
+		await expect(settingsWindow).not.toBeVisible();
+	});
 });

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

@@ -0,0 +1,20 @@
+---
+import Layout from '../components/Layout.astro';
+let formData: FormData | undefined;
+if(Astro.request.method === 'POST') {
+	formData = await Astro.request.formData();
+}
+---
+<Layout>
+	{
+		Astro.request.method === 'GET' ? (
+			<h2>Contact Form</h2>
+			<form action="/contact" method="get">
+				<input type="hidden" name="name" value="Testing">
+				<button id="submit" type="submit" formmethod="post" formaction="/form-three">Submit</button>
+			</form>
+		) : (
+			<div id="three-result">Got: {formData?.get('name')}</div>
+		)
+	}
+</Layout>

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

@@ -1004,4 +1004,16 @@ test.describe('View Transitions', () => {
 			'There should be only 1 page load. No additional loads for the form submission'
 		).toEqual(1);
 	});
+
+	test('forms are overridden by formmethod and formaction', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/form-three'));
+
+		let locator = page.locator('h2');
+		await expect(locator, 'should have content').toHaveText('Contact Form');
+
+		// Submit the form
+		await page.click('#submit');
+		const result = page.locator('#three-result');
+		await expect(result, 'should have content').toHaveText('Got: Testing');
+	});
 });

packages/astro/package.json

@@ -186,7 +186,7 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.1.0",
-    "@playwright/test": "^1.37.1",
+    "@playwright/test": "1.40.0-alpha-nov-13-2023",
     "@types/babel__generator": "^7.6.4",
     "@types/babel__traverse": "^7.20.1",
     "@types/chai": "^4.3.5",

packages/astro/src/@types/astro.ts

@@ -24,6 +24,7 @@ import type { AstroIntegrationLogger, Logger, LoggerLevel } from '../core/logger
 import type { AstroDevOverlay, DevOverlayCanvas } from '../runtime/client/dev-overlay/overlay.js';
 import type { DevOverlayHighlight } from '../runtime/client/dev-overlay/ui-library/highlight.js';
 import type { Icon } from '../runtime/client/dev-overlay/ui-library/icons.js';
+import type { DevOverlayToggle } from '../runtime/client/dev-overlay/ui-library/toggle.js';
 import type { DevOverlayTooltip } from '../runtime/client/dev-overlay/ui-library/tooltip.js';
 import type { DevOverlayWindow } from '../runtime/client/dev-overlay/ui-library/window.js';
 import type { AstroComponentFactory, AstroComponentInstance } from '../runtime/server/index.js';
@@ -1499,7 +1500,7 @@ export interface AstroUserConfig {
 			 * The following example configures your content fallback strategy to redirect unavailable pages in `/pt-br/` to their `es` version, and unavailable pages in `/fr/` to their `en` version. Unavailable `/es/` pages will return a 404.
 			 *
 			 * ```js
-			 * export defualt defineConfig({
+			 * export default defineConfig({
 			 * 	experimental: {
 			 * 		i18n: {
 			 * 			defaultLocale: "en",
@@ -2578,5 +2579,6 @@ declare global {
 		'astro-dev-overlay-plugin-canvas': DevOverlayCanvas;
 		'astro-dev-overlay-tooltip': DevOverlayTooltip;
 		'astro-dev-overlay-highlight': DevOverlayHighlight;
+		'astro-dev-overlay-toggle': DevOverlayToggle;
 	}
 }

packages/astro/src/assets/services/noop.ts

@@ -2,6 +2,7 @@ import { baseService, type LocalImageService } from './service.js';
 
 // Empty service used for platforms that neither support Squoosh or Sharp.
 const noopService: LocalImageService = {
+	propertiesToHash: ['src'],
 	validateOptions: baseService.validateOptions,
 	getURL: baseService.getURL,
 	parseURL: baseService.parseURL,

packages/astro/src/core/app/index.ts

@@ -166,7 +166,11 @@ export class App {
 		);
 		let response;
 		try {
-			let i18nMiddleware = createI18nMiddleware(this.#manifest.i18n, this.#manifest.base);
+			let i18nMiddleware = createI18nMiddleware(
+				this.#manifest.i18n,
+				this.#manifest.base,
+				this.#manifest.trailingSlash
+			);
 			if (i18nMiddleware) {
 				if (mod.onRequest) {
 					this.#pipeline.setMiddlewareFunction(

packages/astro/src/core/app/types.ts

@@ -37,6 +37,7 @@ export type SSRManifest = {
 	routes: RouteInfo[];
 	site?: string;
 	base: string;
+	trailingSlash: 'always' | 'never' | 'ignore';
 	compressHTML: boolean;
 	assetsPrefix?: string;
 	renderers: SSRLoadedRenderer[];

packages/astro/src/core/build/generate.ts

@@ -278,7 +278,8 @@ async function generatePage(
 	const onRequest = ssrEntry.onRequest;
 	const i18nMiddleware = createI18nMiddleware(
 		pipeline.getManifest().i18n,
-		pipeline.getManifest().base
+		pipeline.getManifest().base,
+		pipeline.getManifest().trailingSlash
 	);
 	if (config.experimental.i18n && i18nMiddleware) {
 		if (onRequest) {
@@ -636,6 +637,7 @@ export function createBuildManifest(
 		};
 	}
 	return {
+		trailingSlash: settings.config.trailingSlash,
 		assets: new Set(),
 		entryModules: Object.fromEntries(internals.entrySpecifierToBundleMap.entries()),
 		routes: [],

packages/astro/src/core/build/plugins/plugin-manifest.ts

@@ -256,6 +256,7 @@ function buildManifest(
 		routes,
 		site: settings.config.site,
 		base: settings.config.base,
+		trailingSlash: settings.config.trailingSlash,
 		compressHTML: settings.config.compressHTML,
 		assetsPrefix: settings.config.build.assetsPrefix,
 		componentMetadata: Array.from(internals.componentMetadata),

packages/astro/src/core/build/plugins/plugin-prerender.ts

@@ -12,7 +12,11 @@ function vitePluginPrerender(opts: StaticBuildOptions, internals: BuildInternals
 
 		outputOptions(outputOptions) {
 			extendManualChunks(outputOptions, {
-				before(id, meta) {
+				after(id, meta) {
+					// Split the Astro runtime into a separate chunk for readability
+					if (id.includes('astro/dist/runtime')) {
+						return 'astro';
+					}
 					const pageInfo = internals.pagesByViteID.get(id);
 					if (pageInfo) {
 						// prerendered pages should be split into their own chunk

packages/astro/src/core/logger/core.ts

@@ -142,8 +142,8 @@ export class Logger {
 	error(label: string | null, message: string) {
 		error(this.options, label, message);
 	}
-	debug(label: string | null, message: string, ...args: any[]) {
-		debug(this.options, label, message, args);
+	debug(label: string | null, ...messages: any[]) {
+		debug(label, ...messages);
 	}
 
 	level() {
@@ -181,6 +181,6 @@ export class AstroIntegrationLogger {
 		error(this.options, this.label, message);
 	}
 	debug(message: string) {
-		debug(this.options, this.label, message);
+		debug(this.label, message);
 	}
 }

packages/astro/src/core/preview/vite-plugin-astro-preview.ts

@@ -24,7 +24,8 @@ export function vitePluginAstroPreview(settings: AstroSettings): Plugin {
 					return;
 				}
 
-				const pathname = stripBase(req.url!, base);
+				const strippedPathname = stripBase(req.url!, base);
+				const pathname = new URL(strippedPathname, 'https://a.b').pathname;
 				const isRoot = pathname === '/';
 
 				// Validate trailingSlash

packages/astro/src/i18n/middleware.ts

@@ -1,4 +1,4 @@
-import { joinPaths } from '@astrojs/internal-helpers/path';
+import { appendForwardSlash, joinPaths } from '@astrojs/internal-helpers/path';
 import type { MiddlewareEndpointHandler, SSRManifest } from '../@types/astro.js';
 
 // Checks if the pathname doesn't have any locale, exception for the defaultLocale, which is ignored on purpose
@@ -14,7 +14,8 @@ function checkIsLocaleFree(pathname: string, locales: string[]): boolean {
 
 export function createI18nMiddleware(
 	i18n: SSRManifest['i18n'],
-	base: SSRManifest['base']
+	base: SSRManifest['base'],
+	trailingSlash: SSRManifest['trailingSlash']
 ): MiddlewareEndpointHandler | undefined {
 	if (!i18n) {
 		return undefined;
@@ -42,8 +43,12 @@ export function createI18nMiddleware(
 					headers: response.headers,
 				});
 			} else if (i18n.routingStrategy === 'prefix-always') {
-				if (url.pathname === base || url.pathname === base + '/') {
-					return context.redirect(`${joinPaths(base, i18n.defaultLocale)}`);
+				if (url.pathname === base + '/' || url.pathname === base) {
+					if (trailingSlash === 'always') {
+						return context.redirect(`${appendForwardSlash(joinPaths(base, i18n.defaultLocale))}`);
+					} else {
+						return context.redirect(`${joinPaths(base, i18n.defaultLocale)}`);
+					}
 				}
 
 				// Astro can't know where the default locale is supposed to be, so it returns a 404 with no content.

packages/astro/src/runtime/client/dev-overlay/entrypoint.ts

@@ -1,5 +1,6 @@
 import type { DevOverlayPlugin as DevOverlayPluginDefinition } from '../../../@types/astro.js';
 import { type AstroDevOverlay, type DevOverlayPlugin } from './overlay.js';
+import { settings } from './settings.js';
 
 let overlay: AstroDevOverlay;
 
@@ -9,22 +10,26 @@ document.addEventListener('DOMContentLoaded', async () => {
 		{ default: astroDevToolPlugin },
 		{ default: astroAuditPlugin },
 		{ default: astroXrayPlugin },
+		{ default: astroSettingsPlugin },
 		{ AstroDevOverlay, DevOverlayCanvas },
 		{ DevOverlayCard },
 		{ DevOverlayHighlight },
 		{ DevOverlayTooltip },
 		{ DevOverlayWindow },
+		{ DevOverlayToggle },
 	] = await Promise.all([
 		// @ts-expect-error
 		import('astro:dev-overlay'),
 		import('./plugins/astro.js'),
 		import('./plugins/audit.js'),
 		import('./plugins/xray.js'),
+		import('./plugins/settings.js'),
 		import('./overlay.js'),
 		import('./ui-library/card.js'),
 		import('./ui-library/highlight.js'),
 		import('./ui-library/tooltip.js'),
 		import('./ui-library/window.js'),
+		import('./ui-library/toggle.js'),
 	]);
 
 	// Register custom elements
@@ -34,6 +39,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 	customElements.define('astro-dev-overlay-tooltip', DevOverlayTooltip);
 	customElements.define('astro-dev-overlay-highlight', DevOverlayHighlight);
 	customElements.define('astro-dev-overlay-card', DevOverlayCard);
+	customElements.define('astro-dev-overlay-toggle', DevOverlayToggle);
 
 	overlay = document.createElement('astro-dev-overlay');
 
@@ -60,7 +66,9 @@ document.addEventListener('DOMContentLoaded', async () => {
 				newState = evt.detail.state ?? true;
 			}
 
-			target.querySelector('.notification')?.toggleAttribute('data-active', newState);
+			if (settings.config.showPluginNotifications === false) {
+				target.querySelector('.notification')?.toggleAttribute('data-active', newState);
+			}
 		});
 
 		eventTarget.addEventListener('toggle-plugin', async (evt) => {
@@ -77,8 +85,8 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 	const customPluginsDefinitions = (await loadDevOverlayPlugins()) as DevOverlayPluginDefinition[];
 	const plugins: DevOverlayPlugin[] = [
-		...[astroDevToolPlugin, astroXrayPlugin, astroAuditPlugin].map((pluginDef) =>
-			preparePlugin(pluginDef, true)
+		...[astroDevToolPlugin, astroXrayPlugin, astroAuditPlugin, astroSettingsPlugin].map(
+			(pluginDef) => preparePlugin(pluginDef, true)
 		),
 		...customPluginsDefinitions.map((pluginDef) => preparePlugin(pluginDef, false)),
 	];