fix(cloudflare): experimental chromeDevtoolsWorkspace

.changeset/quick-dingos-itch.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/cloudflare': patch
+---
+
+Fixed an issue where the feature `experimental.chromeDevtoolsWorkspace` wasn't supported by the new version of the adapter.

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

@@ -4,8 +4,6 @@ import type * as vite from 'vite';
 import { isRunnableDevEnvironment, type Plugin, type RunnableDevEnvironment } from 'vite';
 import type { BuildInternals } from '../core/build/internal.js';
 import { AstroError, AstroErrorData } from '../core/errors/index.js';
-import type { ModuleLoader } from '../core/module-loader/index.js';
-import { createViteLoader } from '../core/module-loader/vite.js';
 import { wrapId } from '../core/util.js';
 import type { AstroSettings } from '../types/astro.js';
 import { isBuildableCSSRequest } from '../vite-plugin-astro-server/util.js';
@@ -27,7 +25,7 @@ export function astroContentAssetPropagationPlugin({
 }: {
 	settings: AstroSettings;
 }): Plugin {
-	let devModuleLoader: ModuleLoader;
+	let environment: RunnableDevEnvironment | undefined = undefined;
 	return {
 		name: 'astro:content-asset-propagation',
 		enforce: 'pre',
@@ -75,10 +73,7 @@ export function astroContentAssetPropagationPlugin({
 			if (!isRunnableDevEnvironment(server.environments[ASTRO_VITE_ENVIRONMENT_NAMES.ssr])) {
 				return;
 			}
-			devModuleLoader = createViteLoader(
-				server,
-				server.environments[ASTRO_VITE_ENVIRONMENT_NAMES.ssr] as RunnableDevEnvironment,
-			);
+			environment = server.environments[ASTRO_VITE_ENVIRONMENT_NAMES.ssr] as RunnableDevEnvironment;
 		},
 		transform: {
 			filter: {
@@ -91,15 +86,15 @@ export function astroContentAssetPropagationPlugin({
 
 					// We can access the server in dev,
 					// so resolve collected styles and scripts here.
-					if (isAstroServerEnvironment(this.environment) && devModuleLoader) {
-						if (!devModuleLoader.getModuleById(basePath)?.ssrModule) {
-							await devModuleLoader.import(basePath);
+					if (isAstroServerEnvironment(this.environment) && environment) {
+						if (!environment.moduleGraph.getModuleById(basePath)?.ssrModule) {
+							await environment.runner.import(basePath);
 						}
 						const {
 							styles,
 							urls,
 							crawledFiles: styleCrawledFiles,
-						} = await getStylesForURL(basePath, devModuleLoader.getSSREnvironment());
+						} = await getStylesForURL(basePath, environment);
 
 						// Register files we crawled to be able to retrieve the rendered styles and scripts,
 						// as when they get updated, we need to re-transform ourselves.

packages/astro/src/core/create-vite.ts

@@ -24,10 +24,7 @@ import type { AstroSettings, RoutesList } from '../types/astro.js';
 import { vitePluginAdapterConfig } from '../vite-plugin-adapter-config/index.js';
 import { vitePluginApp } from '../vite-plugin-app/index.js';
 import astroVitePlugin from '../vite-plugin-astro/index.js';
-import {
-	vitePluginAstroServer,
-	vitePluginAstroServerClient,
-} from '../vite-plugin-astro-server/index.js';
+import { vitePluginAstroServer } from '../vite-plugin-astro-server/index.js';
 import configAliasVitePlugin from '../vite-plugin-config-alias/index.js';
 import { astroDevCssPlugin } from '../vite-plugin-css/index.js';
 import vitePluginFileURL from '../vite-plugin-fileurl/index.js';
@@ -51,6 +48,8 @@ import { vitePluginSessionDriver } from './session/vite-plugin.js';
 import { isObject } from './util.js';
 import { vitePluginEnvironment } from '../vite-plugin-environment/index.js';
 import { ASTRO_VITE_ENVIRONMENT_NAMES } from './constants.js';
+import { vitePluginChromedevtools } from '../vite-plugin-chromedevtools/index.js';
+import { vitePluginAstroServerClient } from '../vite-plugin-overlay/index.js';
 
 type CreateViteOptions = {
 	settings: AstroSettings;
@@ -160,6 +159,7 @@ export async function createVite(
 			vitePluginSessionDriver({ settings }),
 			astroContainer(),
 			astroHmrReloadPlugin(),
+			vitePluginChromedevtools({ settings }),
 		],
 		publicDir: fileURLToPath(settings.config.publicDir),
 		root: fileURLToPath(settings.config.root),

packages/astro/src/vite-plugin-app/pipeline.ts

@@ -23,8 +23,8 @@ import type {
 } from '../types/public/index.js';
 import { getComponentMetadata } from '../vite-plugin-astro-server/metadata.js';
 import { createResolve } from '../vite-plugin-astro-server/resolve.js';
-import { getDevCSSModuleName } from '../vite-plugin-css/util.js';
 import { PAGE_SCRIPT_ID } from '../vite-plugin-scripts/index.js';
+import { getDevCSSModuleName } from '../vite-plugin-css/util.js';
 
 export class AstroServerPipeline extends Pipeline {
 	getName(): string {

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

@@ -1,5 +1,2 @@
 export { createController, runWithErrorHandling } from './controller.js';
-export {
-	createVitePluginAstroServerClient as vitePluginAstroServerClient,
-	default as vitePluginAstroServer,
-} from './plugin.js';
+export { default as vitePluginAstroServer } from './plugin.js';

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

@@ -1,9 +1,5 @@
 import { AsyncLocalStorage } from 'node:async_hooks';
-import { randomUUID } from 'node:crypto';
-import { existsSync } from 'node:fs';
-import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { IncomingMessage } from 'node:http';
-import { fileURLToPath } from 'node:url';
 import type * as vite from 'vite';
 import { isRunnableDevEnvironment, type RunnableDevEnvironment } from 'vite';
 import { toFallbackType } from '../core/app/common.js';
@@ -23,7 +19,6 @@ import {
 import { createKey, getEnvironmentKey, hasEnvironmentKey } from '../core/encryption.js';
 import { getViteErrorPayload } from '../core/errors/dev/index.js';
 import { AstroError, AstroErrorData } from '../core/errors/index.js';
-import { patchOverlay } from '../core/errors/overlay.js';
 import type { Logger } from '../core/logger/core.js';
 import { NOOP_MIDDLEWARE_FN } from '../core/middleware/noop-middleware.js';
 import { createViteLoader } from '../core/module-loader/index.js';
@@ -103,49 +98,6 @@ export default function createVitePluginAstroServer({
 					handle: trailingSlashMiddleware(settings),
 				});
 
-				// Chrome DevTools workspace handler
-				// See https://chromium.googlesource.com/devtools/devtools-frontend/+/main/docs/ecosystem/automatic_workspace_folders.md
-				viteServer.middlewares.use(async function chromeDevToolsHandler(request, response, next) {
-					if (request.url !== '/.well-known/appspecific/com.chrome.devtools.json') {
-						return next();
-					}
-					if (!settings.config.experimental.chromeDevtoolsWorkspace) {
-						// Return early to stop console spam
-						response.writeHead(404);
-						response.end();
-						return;
-					}
-
-					const pluginVersion = '1.1';
-					const cacheDir = settings.config.cacheDir;
-					const configPath = new URL('./chrome-workspace.json', cacheDir);
-
-					if (!existsSync(cacheDir)) {
-						await mkdir(cacheDir, { recursive: true });
-					}
-
-					let config;
-					try {
-						config = JSON.parse(await readFile(configPath, 'utf-8'));
-						// If the cached workspace config was created with a previous version of this plugin,
-						// we throw an error so it gets recreated in the `catch` block below.
-						if (config.version !== pluginVersion) throw new Error('Cached config is outdated.');
-					} catch {
-						config = {
-							workspace: {
-								version: pluginVersion,
-								uuid: randomUUID(),
-								root: fileURLToPath(settings.config.root),
-							},
-						};
-						await writeFile(configPath, JSON.stringify(config));
-					}
-
-					response.setHeader('Content-Type', 'application/json');
-					response.end(JSON.stringify(config));
-					return;
-				});
-
 				// Note that this function has a name so other middleware can find it.
 				viteServer.middlewares.use(async function astroDevHandler(request, response) {
 					if (request.url === undefined || !request.method) {
@@ -163,24 +115,6 @@ export default function createVitePluginAstroServer({
 	};
 }
 
-export function createVitePluginAstroServerClient(): vite.Plugin {
-	return {
-		name: 'astro:server-client',
-		applyToEnvironment(environment) {
-			return environment.name === ASTRO_VITE_ENVIRONMENT_NAMES.client;
-		},
-		transform: {
-			filter: {
-				id: /vite\/dist\/client\/client\.mjs/,
-			},
-			handler(code) {
-				// Replace the Vite overlay with ours
-				return patchOverlay(code);
-			},
-		},
-	};
-}
-
 /**
  * It creates a `SSRManifest` from the `AstroSettings`.
  *

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

@@ -0,0 +1,60 @@
+import type { Plugin } from 'vite';
+import type { AstroSettings } from '../types/astro.js';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { readFile } from 'node:fs/promises';
+
+interface Payload {
+	settings: AstroSettings;
+}
+
+export function vitePluginChromedevtools({ settings }: Payload): Plugin {
+	return {
+		name: 'astro:chromedevtools',
+		configureServer(viteServer) {
+			// Chrome DevTools workspace handler
+			// See https://chromium.googlesource.com/devtools/devtools-frontend/+/main/docs/ecosystem/automatic_workspace_folders.md
+			viteServer.middlewares.use(async function chromeDevToolsHandler(request, response, next) {
+				if (request.url !== '/.well-known/appspecific/com.chrome.devtools.json') {
+					return next();
+				}
+				if (!settings.config.experimental.chromeDevtoolsWorkspace) {
+					// Return early to stop console spam
+					response.writeHead(404);
+					response.end();
+					return;
+				}
+
+				const pluginVersion = '1.1';
+				const cacheDir = settings.config.cacheDir;
+				const configPath = new URL('./chrome-workspace.json', cacheDir);
+
+				if (!existsSync(cacheDir)) {
+					await mkdir(cacheDir, { recursive: true });
+				}
+
+				let config;
+				try {
+					config = JSON.parse(await readFile(configPath, 'utf-8'));
+					// If the cached workspace config was created with a previous version of this plugin,
+					// we throw an error so it gets recreated in the `catch` block below.
+					if (config.version !== pluginVersion) throw new Error('Cached config is outdated.');
+				} catch {
+					config = {
+						workspace: {
+							version: pluginVersion,
+							uuid: crypto.randomUUID(),
+							root: fileURLToPath(settings.config.root),
+						},
+					};
+					await writeFile(configPath, JSON.stringify(config));
+				}
+
+				response.setHeader('Content-Type', 'application/json');
+				response.end(JSON.stringify(config));
+				return;
+			});
+		},
+	};
+}

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

@@ -0,0 +1,21 @@
+import type { Plugin } from 'vite';
+import { ASTRO_VITE_ENVIRONMENT_NAMES } from '../core/constants.js';
+import { patchOverlay } from '../core/errors/overlay.js';
+
+export function vitePluginAstroServerClient(): Plugin {
+	return {
+		name: 'astro:server-client',
+		applyToEnvironment(environment) {
+			return environment.name === ASTRO_VITE_ENVIRONMENT_NAMES.client;
+		},
+		transform: {
+			filter: {
+				id: /vite\/dist\/client\/client\.mjs/,
+			},
+			handler(code) {
+				// Replace the Vite overlay with ours
+				return patchOverlay(code);
+			},
+		},
+	};
+}

packages/integrations/cloudflare/test/fixtures/vite-plugin/astro.config.mjs

@@ -46,6 +46,7 @@ export default defineConfig({
 			provider: fontProviders.google(),
 			name: "Roboto",
 			cssVariable: "--font-roboto"
-		}]
-	}
+		}],
+		chromeDevtoolsWorkspace: true
+	},
 });