feat(@astrojs/cloudflare): add runtime support to astro dev

packages/integrations/cloudflare/package.json

@@ -42,7 +42,10 @@
     "@astrojs/underscore-redirects": "workspace:*",
     "@cloudflare/workers-types": "^4.20230821.0",
     "esbuild": "^0.19.2",
-    "tiny-glob": "^0.2.9"
+    "tiny-glob": "^0.2.9",
+    "find-up": "^6.3.0",
+    "@iarna/toml": "^2.2.5",
+    "dotenv": "^16.3.1"
   },
   "peerDependencies": {
     "astro": "workspace:^3.0.9"

packages/integrations/cloudflare/src/CFVars.ts

@@ -0,0 +1,132 @@
+/**
+ * This file is a derivative work of wrangler by Cloudflare
+ * An upstream request for exposing this API was made here:
+ * https://github.com/cloudflare/workers-sdk/issues/3897
+ *
+ * Until further notice, we will be using this file as a workaround
+ */
+
+import * as fs from 'node:fs';
+import { resolve, dirname, relative } from 'node:path';
+import { findUpSync } from 'find-up';
+import TOML from '@iarna/toml';
+import dotenv from 'dotenv';
+
+function findWranglerToml(
+	referencePath: string = process.cwd(),
+	preferJson = false
+): string | undefined {
+	if (preferJson) {
+		return (
+			findUpSync(`wrangler.json`, { cwd: referencePath }) ??
+			findUpSync(`wrangler.toml`, { cwd: referencePath })
+		);
+	}
+	return findUpSync(`wrangler.toml`, { cwd: referencePath });
+}
+type File = {
+	file?: string;
+	fileText?: string;
+};
+type Location = File & {
+	line: number;
+	column: number;
+	length?: number;
+	lineText?: string;
+	suggestion?: string;
+};
+type Message = {
+	text: string;
+	location?: Location;
+	notes?: Message[];
+	kind?: 'warning' | 'error';
+};
+class ParseError extends Error implements Message {
+	readonly text: string;
+	readonly notes: Message[];
+	readonly location?: Location;
+	readonly kind: 'warning' | 'error';
+
+	constructor({ text, notes, location, kind }: Message) {
+		super(text);
+		this.name = this.constructor.name;
+		this.text = text;
+		this.notes = notes ?? [];
+		this.location = location;
+		this.kind = kind ?? 'error';
+	}
+}
+const TOML_ERROR_NAME = 'TomlError';
+const TOML_ERROR_SUFFIX = ' at row ';
+type TomlError = Error & {
+	line: number;
+	col: number;
+};
+function parseTOML(input: string, file?: string): TOML.JsonMap | never {
+	try {
+		// Normalize CRLF to LF to avoid hitting https://github.com/iarna/iarna-toml/issues/33.
+		const normalizedInput = input.replace(/\r\n/g, '\n');
+		return TOML.parse(normalizedInput);
+	} catch (err) {
+		const { name, message, line, col } = err as TomlError;
+		if (name !== TOML_ERROR_NAME) {
+			throw err;
+		}
+		const text = message.substring(0, message.lastIndexOf(TOML_ERROR_SUFFIX));
+		const lineText = input.split('\n')[line];
+		const location = {
+			lineText,
+			line: line + 1,
+			column: col - 1,
+			file,
+			fileText: input,
+		};
+		throw new ParseError({ text, location });
+	}
+}
+
+export interface DotEnv {
+	path: string;
+	parsed: dotenv.DotenvParseOutput;
+}
+function tryLoadDotEnv(path: string): DotEnv | undefined {
+	try {
+		const parsed = dotenv.parse(fs.readFileSync(path));
+		return { path, parsed };
+	} catch (e) {
+		// logger.debug(`Failed to load .env file "${path}":`, e);
+	}
+}
+/**
+ * Loads a dotenv file from <path>, preferring to read <path>.<environment> if
+ * <environment> is defined and that file exists.
+ */
+
+export function loadDotEnv(path: string): DotEnv | undefined {
+	return tryLoadDotEnv(path);
+}
+function getVarsForDev(config: any, configPath: string | undefined): any {
+	const configDir = resolve(dirname(config.configPath ?? '.'));
+	const devVarsPath = resolve(configDir, '.dev.vars');
+	const loaded = loadDotEnv(devVarsPath);
+	if (loaded !== undefined) {
+		const devVarsRelativePath = relative(process.cwd(), loaded.path);
+		return {
+			...config.vars,
+			...loaded.parsed,
+		};
+	} else {
+		return config.vars;
+	}
+}
+export async function CFVars() {
+	let rawConfig;
+	const configPath = findWranglerToml(process.cwd(), false); // false = args.experimentalJsonConfig
+
+	// Load the configuration from disk if available
+	if (configPath?.endsWith('toml')) {
+		rawConfig = parseTOML(fs.readFileSync(configPath).toString(), configPath);
+	}
+	const vars = getVarsForDev(rawConfig, configPath);
+	return vars;
+}

packages/integrations/cloudflare/src/index.ts

@@ -1,18 +1,26 @@
 import { createRedirectsFromAstroRoutes } from '@astrojs/underscore-redirects';
+import type { IncomingRequestCfProperties } from '@cloudflare/workers-types/experimental';
 import type { AstroAdapter, AstroConfig, AstroIntegration, RouteData } from 'astro';
 import esbuild from 'esbuild';
 import * as fs from 'node:fs';
 import * as os from 'node:os';
 import { sep } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import glob from 'tiny-glob';
+import { CFVars } from './CFVars.js';
 
 export type { AdvancedRuntime } from './server.advanced';
 export type { DirectoryRuntime } from './server.directory';
 
 type Options = {
 	mode: 'directory' | 'advanced';
 	functionPerRoute?: boolean;
+	/**
+	 * 'off': current behaviour (wrangler is needed)
+	 * 'local': use a static req.cf object, and env vars defined in wrangler.toml & .dev.vars (astro dev is enough)
+	 * 'remote': use a dynamic real-live req.cf object, and env vars defined in wrangler.toml & .dev.vars (astro dev is enough)
+	 */
+	runtime: 'off' | 'local' | 'remote';
 };
 
 interface BuildConfig {
@@ -66,6 +74,79 @@ export function getAdapter({
 		  };
 }
 
+async function getCFObject(runtimeMode: string): Promise<IncomingRequestCfProperties | void> {
+	// Milliseconds in 1 day
+	const DAY = 86400000;
+	// Max age in days of cf.json
+	const CF_DAYS = 1;
+
+	const CF_ENDPOINT = 'https://workers.cloudflare.com/cf.json';
+
+	const CF_FALLBACK: IncomingRequestCfProperties = {
+		asOrganization: '',
+		asn: 395747,
+		colo: 'DFW',
+		city: 'Austin',
+		region: 'Texas',
+		regionCode: 'TX',
+		metroCode: '635',
+		postalCode: '78701',
+		country: 'US',
+		continent: 'NA',
+		timezone: 'America/Chicago',
+		latitude: '30.27130',
+		longitude: '-97.74260',
+		clientTcpRtt: 0,
+		httpProtocol: 'HTTP/1.1',
+		requestPriority: 'weight=192;exclusive=0',
+		tlsCipher: 'AEAD-AES128-GCM-SHA256',
+		tlsVersion: 'TLSv1.3',
+		tlsClientAuth: {
+			certPresented: '0',
+			certVerified: 'NONE',
+			certRevoked: '0',
+			certIssuerDN: '',
+			certSubjectDN: '',
+			certIssuerDNRFC2253: '',
+			certSubjectDNRFC2253: '',
+			certIssuerDNLegacy: '',
+			certSubjectDNLegacy: '',
+			certSerial: '',
+			certIssuerSerial: '',
+			certSKI: '',
+			certIssuerSKI: '',
+			certFingerprintSHA1: '',
+			certFingerprintSHA256: '',
+			certNotBefore: '',
+			certNotAfter: '',
+		},
+		edgeRequestKeepAliveStatus: 0,
+		hostMetadata: undefined,
+		clientTrustScore: 99,
+		botManagement: {
+			corporateProxy: false,
+			verifiedBot: false,
+			ja3Hash: '25b4882c2bcb50cd6b469ff28c596742',
+			staticResource: false,
+			detectionIds: [],
+			score: 99,
+		},
+	};
+
+	if (runtimeMode === 'local') {
+		return CF_FALLBACK;
+	} else if (runtimeMode === 'remote') {
+		try {
+			const res = await fetch(CF_ENDPOINT);
+			const cfText = await res.text();
+			const storedCf = JSON.parse(cfText);
+			return storedCf;
+		} catch (e: any) {
+			return CF_FALLBACK;
+		}
+	}
+}
+
 const SHIM = `globalThis.process = {
 	argv: [],
 	env: {},
@@ -78,13 +159,22 @@ const SERVER_BUILD_FOLDER = '/$server_build/';
  */
 const potentialFunctionRouteTypes = ['endpoint', 'page'];
 
+const STATIC_ERROR = `
+[@astrojs/cloudflare] \`output: "server"\` or \`output: "hybrid"\` is required to use this adapter. Otherwise, this adapter is not necessary to deploy a static site to Cloudflare.
+`;
+
+const FOLDER_ERROR = `
+[@astrojs/cloudflare] \`base: "${SERVER_BUILD_FOLDER}"\` is not allowed. Please change your \`base\` config to something else.
+`;
+
 export default function createIntegration(args?: Options): AstroIntegration {
 	let _config: AstroConfig;
 	let _buildConfig: BuildConfig;
 	let _entryPoints = new Map<RouteData, URL>();
 
 	const isModeDirectory = args?.mode === 'directory';
 	const functionPerRoute = args?.functionPerRoute ?? false;
+	const runtimeMode = args?.runtime ?? 'off';
 
 	return {
 		name: '@astrojs/cloudflare',
@@ -105,17 +195,49 @@ export default function createIntegration(args?: Options): AstroIntegration {
 				_buildConfig = config.build;
 
 				if (config.output === 'static') {
-					throw new Error(`
-  [@astrojs/cloudflare] \`output: "server"\` or \`output: "hybrid"\` is required to use this adapter. Otherwise, this adapter is not necessary to deploy a static site to Cloudflare.
-
-`);
+					throw new Error(STATIC_ERROR);
 				}
 
 				if (config.base === SERVER_BUILD_FOLDER) {
-					throw new Error(`
-  [@astrojs/cloudflare] \`base: "${SERVER_BUILD_FOLDER}"\` is not allowed. Please change your \`base\` config to something else.`);
+					throw new Error(FOLDER_ERROR);
 				}
 			},
+			'astro:server:setup': ({ server }) => {
+				server.middlewares.use(async function middleware(req, res, next) {
+					if (runtimeMode === 'off') {
+						next();
+					} else {
+						const vars = await CFVars();
+						const cf = await getCFObject(runtimeMode);
+
+						const clientLocalsSymbol = Symbol.for('astro.locals');
+						Reflect.set(req, clientLocalsSymbol, {
+							runtime: {
+								env: {
+									// default binding for static assets will be dynamic once we support mocking of bindings
+									ASSETS: {},
+									// this is just a VAR for CF to change build behavior, on dev it should be 0
+									CF_PAGES: '0',
+									// will be fetched from git dynamically once we support mocking of bindings
+									CF_PAGES_BRANCH: 'TBA',
+									// will be fetched from git dynamically once we support mocking of bindings
+									CF_PAGES_COMMIT_SHA: 'TBA',
+									CF_PAGES_URL: `http://${req.headers.host}`,
+									...vars,
+								},
+								cf: cf,
+								// will be supported once we support mocking of bindings
+								// waitUntil: (promise: Promise<any>) => {
+								//   context.waitUntil(promise);
+								// },
+								// will be supported once we support mocking of bindings
+								// caches: caches,
+							},
+						});
+						next();
+					}
+				});
+			},
 			'astro:build:setup': ({ vite, target }) => {
 				if (target === 'server') {
 					vite.resolve ||= {};

packages/integrations/cloudflare/src/server.advanced.ts

@@ -44,19 +44,6 @@ export function createExports(manifest: SSRManifest) {
 				request.headers.get('cf-connecting-ip')
 			);
 
-			// `getRuntime()` is deprecated, currently available additionally to new Astro.locals.runtime
-			// TODO: remove `getRuntime()` in Astro 3.0
-			Reflect.set(request, Symbol.for('runtime'), {
-				env,
-				name: 'cloudflare',
-				caches,
-				cf: request.cf,
-				...context,
-				waitUntil: (promise: Promise<any>) => {
-					context.waitUntil(promise);
-				},
-			});
-
 			const locals: AdvancedRuntime = {
 				runtime: {
 					waitUntil: (promise: Promise<any>) => {

packages/integrations/cloudflare/src/server.directory.ts

@@ -41,19 +41,6 @@ export function createExports(manifest: SSRManifest) {
 				request.headers.get('cf-connecting-ip')
 			);
 
-			// `getRuntime()` is deprecated, currently available additionally to new Astro.locals.runtime
-			// TODO: remove `getRuntime()` in Astro 3.0
-			Reflect.set(request, Symbol.for('runtime'), {
-				...context,
-				waitUntil: (promise: Promise<any>) => {
-					context.waitUntil(promise);
-				},
-				name: 'cloudflare',
-				next,
-				caches,
-				cf: request.cf,
-			});
-
 			const locals: DirectoryRuntime = {
 				runtime: {
 					waitUntil: (promise: Promise<any>) => {