wrangler 0.0.0-e178d6fb → 0.0.0-e1c2f5b9

package/src/paths.ts

@@ -1,4 +1,5 @@
-import { assert } from "console";
+import { assert } from "node:console";
+import { relative, basename, resolve } from "node:path";
 
 type DiscriminatedPath<Discriminator extends string> = string & {
 	_discriminator: Discriminator;
@@ -17,10 +18,54 @@ export type UrlPath = DiscriminatedPath<"UrlPath">;
  * Use this helper to convert a `string` to a `UrlPath` when it is not clear whether the string needs normalizing.
  * Replaces all back-slashes with forward-slashes, and throws an error if the path contains a drive letter (e.g. `C:`).
  */
-export function toUrlPath(path: string): UrlPath {
+export function toUrlPath(filePath: string): UrlPath {
 	assert(
-		!/^[a-z]:/i.test(path),
+		!/^[a-z]:/i.test(filePath),
 		"Tried to convert a Windows file path with a drive to a URL path."
 	);
-	return path.replace(/\\/g, "/") as UrlPath;
+	return filePath.replace(/\\/g, "/") as UrlPath;
+}
+
+/**
+ * Get a human-readable path, relative to process.cwd(), prefixed with ./ if
+ * in a nested subdirectory, to aid with readability.
+ * Only used for logging e.g. `Loading DB at ${readableRelative(dbPath)}`:
+ *
+ * E.g. (assuming process.cwd() is /pwd)
+ *
+ *	readableRelative('/pwd/wrangler.toml') => 'wrangler.toml'
+ *	readableRelative('/wrangler.toml') => '../wrangler.toml'
+ *	readableRelative('/pwd/subdir/wrangler.toml') => './subdir/wrangler.toml'
+ *
+ * */
+export function readableRelative(to: string) {
+	const relativePath = relative(process.cwd(), to);
+	if (
+		// No directory nesting, return as-is
+		basename(relativePath) === relativePath ||
+		// Outside current directory
+		relativePath.startsWith(".")
+	) {
+		return relativePath;
+	} else {
+		return "./" + relativePath;
+	}
+}
+
+/**
+ * The __RELATIVE_PACKAGE_PATH__ is defined either in the esbuild config (for production)
+ * or the jest.setup.ts (for unit testing).
+ */
+declare const __RELATIVE_PACKAGE_PATH__: string;
+
+/**
+ * Use this function (rather than node.js constants like `__dirname`) to specify
+ * paths that are relative to the base path of the Wrangler package.
+ *
+ * It is important to use this function because it reliably maps to the root of the package
+ * no matter whether the code has been bundled or not.
+ */
+export function getBasePath(): string {
+	// eslint-disable-next-line no-restricted-globals
+	return resolve(__dirname, __RELATIVE_PACKAGE_PATH__);
 }

package/src/proxy.ts

@@ -1,12 +1,14 @@
 import { createServer as createHttpServer } from "node:http";
 import { connect } from "node:http2";
 import { createServer as createHttpsServer } from "node:https";
-import WebSocket from "faye-websocket";
+import https from "node:https";
+import { networkInterfaces } from "node:os";
 import { createHttpTerminator } from "http-terminator";
 import { useEffect, useRef, useState } from "react";
 import serveStatic from "serve-static";
 import { getHttpsOptions } from "./https-options";
 import { logger } from "./logger";
+import { getAccessToken } from "./user/access";
 import type { CfPreviewToken } from "./create-worker-preview";
 import type { HttpTerminator } from "http-terminator";
 import type {
@@ -18,12 +20,7 @@ import type {
 } from "node:http";
 import type { ClientHttp2Session, ServerHttp2Stream } from "node:http2";
 import type { Server as HttpsServer } from "node:https";
-import type ws from "ws";
-
-interface IWebsocket extends ws {
-	// Pipe implements .on("message", ...)
-	pipe<T>(fn: T): IWebsocket;
-}
+import type { Duplex, Writable } from "node:stream";
 
 /**
  * `usePreviewServer` is a React hook that creates a local development
@@ -46,6 +43,27 @@ function addCfPreviewTokenHeader(
 	headers["cf-workers-preview-token"] = previewTokenValue;
 }
 
+export async function addCfAccessToken(
+	headers: IncomingHttpHeaders,
+	domain: string,
+	accessTokenRef: { current: string | undefined | null }
+) {
+	if (accessTokenRef.current === null) {
+		return;
+	}
+	if (typeof accessTokenRef.current === "string") {
+		headers[
+			"cookie"
+		] = `${headers["cookie"]};CF_Authorization=${accessTokenRef.current}`;
+		return;
+	}
+	const token = await getAccessToken(domain);
+	accessTokenRef.current = token;
+	if (token)
+		headers[
+			"cookie"
+		] = `${headers["cookie"]};CF_Authorization=${accessTokenRef.current}`;
+}
 /**
  * Rewrite references in request headers
  * from the preview host to the local host.
@@ -69,11 +87,107 @@ function rewriteRemoteHostToLocalHostInHeaders(
 	}
 }
 
+function writeHead(
+	socket: Writable,
+	res: Pick<
+		IncomingMessage,
+		"httpVersion" | "statusCode" | "statusMessage" | "headers"
+	>
+) {
+	socket.write(
+		`HTTP/${res.httpVersion} ${res.statusCode} ${res.statusMessage}\r\n`
+	);
+	for (const [key, values] of Object.entries(res.headers)) {
+		if (Array.isArray(values)) {
+			for (const value of values) socket.write(`${key}: ${value}\r\n`);
+		} else {
+			socket.write(`${key}: ${values}\r\n`);
+		}
+	}
+	socket.write("\r\n");
+}
+
 type PreviewProxy = {
 	server: HttpServer | HttpsServer;
 	terminator: HttpTerminator;
 };
 
+export async function startPreviewServer({
+	previewToken,
+	assetDirectory,
+	localProtocol,
+	localPort: port,
+	ip,
+	onReady,
+}: {
+	previewToken: CfPreviewToken;
+	assetDirectory: string | undefined;
+	localProtocol: "https" | "http";
+	localPort: number;
+	ip: string;
+	onReady: ((readyIp: string, readyPort: number) => void) | undefined;
+}) {
+	try {
+		const abortController = new AbortController();
+
+		const server = await createProxyServer(localProtocol);
+		const proxy = {
+			server,
+			terminator: createHttpTerminator({
+				server,
+				gracefulTerminationTimeout: 0,
+			}),
+		};
+
+		// We have a token. Let's proxy requests to the preview end point.
+		const streamBufferRef = { current: [] };
+		const requestResponseBufferRef = { current: [] };
+		const accessTokenRef = { current: undefined };
+		const cleanupListeners = configureProxyServer({
+			proxy,
+			previewToken,
+			streamBufferRef,
+			requestResponseBufferRef,
+			retryServerSetup: () => {}, // no-op outside of React
+			assetDirectory,
+			localProtocol,
+			port,
+			accessTokenRef,
+		});
+
+		await waitForPortToBeAvailable(port, {
+			retryPeriod: 200,
+			timeout: 2000,
+			abortSignal: abortController.signal,
+		});
+
+		proxy.server.on("listening", () => {
+			const address = proxy.server.address();
+			const usedPort =
+				address && typeof address === "object" ? address.port : port;
+			logger.log(`⬣ Listening at ${localProtocol}://${ip}:${usedPort}`);
+			const accessibleHosts = ip !== "0.0.0.0" ? [ip] : getAccessibleHosts();
+			for (const accessibleHost of accessibleHosts) {
+				logger.log(`- ${localProtocol}://${accessibleHost}:${usedPort}`);
+			}
+			onReady?.(ip, usedPort);
+		});
+
+		proxy.server.listen(port, ip);
+		return {
+			stop: () => {
+				abortController.abort();
+				cleanupListeners?.forEach((cleanup) => cleanup());
+			},
+		};
+	} catch (err) {
+		if ((err as { code: string }).code !== "ABORT_ERR") {
+			logger.error(`Failed to start server: ${err}`);
+		}
+		logger.error("Failed to create proxy server:", err);
+	}
+}
+
 export function usePreviewServer({
 	previewToken,
 	assetDirectory,
@@ -125,6 +239,7 @@ export function usePreviewServer({
 	const requestResponseBufferRef = useRef<
 		{ request: IncomingMessage; response: ServerResponse }[]
 	>([]);
+	const accessTokenRef = useRef<string | undefined | null>(undefined);
 
 	/**
 	 * The session doesn't last forever, and will eventually drop
@@ -138,156 +253,19 @@ export function usePreviewServer({
 	}
 
 	useEffect(() => {
-		if (proxy === undefined) {
-			return;
-		}
-
-		// If we don't have a token, that means either we're just starting up,
-		// or we're refreshing the token.
-		if (!previewToken) {
-			const cleanupListeners: (() => void)[] = [];
-			const bufferStream = (
-				stream: ServerHttp2Stream,
-				headers: IncomingHttpHeaders
-			) => {
-				// store the stream in a buffer so we can replay it later
-				streamBufferRef.current.push({ stream, headers });
-			};
-			proxy.server.on("stream", bufferStream);
-			cleanupListeners.push(() => proxy.server.off("stream", bufferStream));
-
-			const bufferRequestResponse = (
-				request: IncomingMessage,
-				response: ServerResponse
-			) => {
-				// store the request and response in a buffer so we can replay it later
-				requestResponseBufferRef.current.push({ request, response });
-			};
-
-			proxy.server.on("request", bufferRequestResponse);
-			cleanupListeners.push(() =>
-				proxy.server.off("request", bufferRequestResponse)
-			);
-			return () => {
-				cleanupListeners.forEach((cleanup) => cleanup());
-			};
-		}
-
-		// We have a token. Let's proxy requests to the preview end point.
-		const cleanupListeners: (() => void)[] = [];
-
-		// create a ClientHttp2Session
-		const remote = connect(`https://${previewToken.host}`);
-		cleanupListeners.push(() => remote.destroy());
-
-		// As mentioned above, the session may die at any point,
-		// so we need to restart the effect.
-		remote.on("close", retryServerSetup);
-		cleanupListeners.push(() => remote.off("close", retryServerSetup));
-
-		/** HTTP/2 -> HTTP/2  */
-		const handleStream = createStreamHandler(
+		const cleanupListeners = configureProxyServer({
+			proxy,
 			previewToken,
-			remote,
+			streamBufferRef,
+			requestResponseBufferRef,
+			retryServerSetup,
+			assetDirectory,
+			localProtocol,
 			port,
-			localProtocol
-		);
-		proxy.server.on("stream", handleStream);
-		cleanupListeners.push(() => proxy.server.off("stream", handleStream));
-
-		// flush and replay buffered streams
-		streamBufferRef.current.forEach((buffer) =>
-			handleStream(buffer.stream, buffer.headers)
-		);
-		streamBufferRef.current = [];
-
-		/** HTTP/1 -> HTTP/2  */
-		const handleRequest: RequestListener = (
-			message: IncomingMessage,
-			response: ServerResponse
-		) => {
-			const { httpVersionMajor, headers, method, url } = message;
-			if (httpVersionMajor >= 2) {
-				return; // Already handled by the "stream" event.
-			}
-			addCfPreviewTokenHeader(headers, previewToken.value);
-			headers[":method"] = method;
-			headers[":path"] = url;
-			headers[":authority"] = previewToken.host;
-			headers[":scheme"] = "https";
-			for (const name of Object.keys(headers)) {
-				if (HTTP1_HEADERS.has(name.toLowerCase())) {
-					delete headers[name];
-				}
-			}
-			const request = message.pipe(remote.request(headers));
-			request.on("response", (responseHeaders) => {
-				const status = responseHeaders[":status"] ?? 500;
-
-				// log all requests to terminal
-				logger.log(new Date().toLocaleTimeString(), method, url, status);
-
-				rewriteRemoteHostToLocalHostInHeaders(
-					responseHeaders,
-					previewToken.host,
-					port,
-					localProtocol
-				);
-				for (const name of Object.keys(responseHeaders)) {
-					if (name.startsWith(":")) {
-						delete responseHeaders[name];
-					}
-				}
-				response.writeHead(status, responseHeaders);
-				request.pipe(response, { end: true });
-			});
-		};
-
-		// If an asset path is defined, check the file system
-		// for a file first and serve if it exists.
-		const actualHandleRequest = assetDirectory
-			? createHandleAssetsRequest(assetDirectory, handleRequest)
-			: handleRequest;
-
-		proxy.server.on("request", actualHandleRequest);
-		cleanupListeners.push(() =>
-			proxy.server.off("request", actualHandleRequest)
-		);
-
-		// flush and replay buffered requests
-		requestResponseBufferRef.current.forEach(({ request, response }) =>
-			actualHandleRequest(request, response)
-		);
-		requestResponseBufferRef.current = [];
-
-		/** HTTP/1 -> WebSocket (over HTTP/1)  */
-		const handleUpgrade = (
-			message: IncomingMessage,
-			socket: WebSocket,
-			body: Buffer
-		) => {
-			const { headers, url } = message;
-			addCfPreviewTokenHeader(headers, previewToken.value);
-			headers["host"] = previewToken.host;
-			const localWebsocket = new WebSocket(message, socket, body) as IWebsocket;
-			// TODO(soon): Custom WebSocket protocol is not working?
-			const remoteWebsocketClient = new WebSocket.Client(
-				`wss://${previewToken.host}${url}`,
-				[],
-				{ headers }
-			) as IWebsocket;
-			localWebsocket.pipe(remoteWebsocketClient).pipe(localWebsocket);
-			// We close down websockets whenever we refresh the token.
-			cleanupListeners.push(() => {
-				localWebsocket.close();
-				remoteWebsocketClient.close();
-			});
-		};
-		proxy.server.on("upgrade", handleUpgrade);
-		cleanupListeners.push(() => proxy.server.off("upgrade", handleUpgrade));
-
+			accessTokenRef,
+		});
 		return () => {
-			cleanupListeners.forEach((cleanup) => cleanup());
+			cleanupListeners?.forEach((cleanup) => cleanup());
 		};
 	}, [
 		previewToken,
@@ -317,7 +295,15 @@ export function usePreviewServer({
 		})
 			.then(() => {
 				proxy.server.on("listening", () => {
-					logger.log(`⬣ Listening at ${localProtocol}://${ip}:${port}`);
+					const address = proxy.server.address();
+					const usedPort =
+						address && typeof address === "object" ? address.port : port;
+					logger.log(`⬣ Listening at ${localProtocol}://${ip}:${usedPort}`);
+					const accessibleHosts =
+						ip !== "0.0.0.0" ? [ip] : getAccessibleHosts();
+					for (const accessibleHost of accessibleHosts) {
+						logger.log(`- ${localProtocol}://${accessibleHost}:${usedPort}`);
+					}
 				});
 				proxy.server.listen(port, ip);
 			})
@@ -338,6 +324,220 @@ export function usePreviewServer({
 	}, [port, ip, proxy, localProtocol]);
 }
 
+function configureProxyServer({
+	proxy,
+	previewToken,
+	streamBufferRef,
+	requestResponseBufferRef,
+	retryServerSetup,
+	port,
+	localProtocol,
+	assetDirectory,
+	accessTokenRef,
+}: {
+	proxy: PreviewProxy | undefined;
+	previewToken: CfPreviewToken | undefined;
+	// normally the type of streamBufferRef should be
+	// React.MutableRefObject<T>, but we don't want to require react
+	streamBufferRef: {
+		current: { stream: ServerHttp2Stream; headers: IncomingHttpHeaders }[];
+	};
+	// normally the type of requestResponseBufferRef should be
+	// React.MutableRefObject<T>, but we don't want to require react
+	requestResponseBufferRef: {
+		current: { request: IncomingMessage; response: ServerResponse }[];
+	};
+	retryServerSetup: () => void;
+	port: number;
+	localProtocol: "https" | "http";
+	assetDirectory: string | undefined;
+	accessTokenRef: { current: string | null | undefined };
+}) {
+	if (proxy === undefined) {
+		return;
+	}
+
+	// If we don't have a token, that means either we're just starting up,
+	// or we're refreshing the token.
+	if (!previewToken) {
+		const cleanupListeners: (() => void)[] = [];
+		const bufferStream = (
+			stream: ServerHttp2Stream,
+			headers: IncomingHttpHeaders
+		) => {
+			// store the stream in a buffer so we can replay it later
+			streamBufferRef.current.push({ stream, headers });
+		};
+		proxy.server.on("stream", bufferStream);
+		cleanupListeners.push(() => proxy.server.off("stream", bufferStream));
+
+		const bufferRequestResponse = (
+			request: IncomingMessage,
+			response: ServerResponse
+		) => {
+			// store the request and response in a buffer so we can replay it later
+			requestResponseBufferRef.current.push({ request, response });
+		};
+
+		proxy.server.on("request", bufferRequestResponse);
+		cleanupListeners.push(() =>
+			proxy.server.off("request", bufferRequestResponse)
+		);
+		return cleanupListeners;
+	}
+
+	// We have a token. Let's proxy requests to the preview end point.
+	const cleanupListeners: (() => void)[] = [];
+
+	// create a ClientHttp2Session
+	logger.debug("PREVIEW URL:", `https://${previewToken.host}`);
+	const remote = connect(`https://${previewToken.host}`);
+	cleanupListeners.push(() => remote.destroy());
+
+	// As mentioned above, the session may die at any point,
+	// so we need to restart the effect.
+	remote.on("close", retryServerSetup);
+	cleanupListeners.push(() => remote.off("close", retryServerSetup));
+
+	/** HTTP/2 -> HTTP/2  */
+	const handleStream = createStreamHandler(
+		previewToken,
+		remote,
+		port,
+		localProtocol,
+		accessTokenRef
+	);
+	proxy.server.on("stream", handleStream);
+	cleanupListeners.push(() => proxy.server.off("stream", handleStream));
+
+	// flush and replay buffered streams
+	streamBufferRef.current.forEach(
+		(buffer: { stream: ServerHttp2Stream; headers: IncomingHttpHeaders }) =>
+			handleStream(buffer.stream, buffer.headers)
+	);
+	streamBufferRef.current = [];
+
+	/** HTTP/1 -> HTTP/2  */
+	const handleRequest: RequestListener = async (
+		message: IncomingMessage,
+		response: ServerResponse
+	) => {
+		const { httpVersionMajor, headers, method, url } = message;
+		if (httpVersionMajor >= 2) {
+			return; // Already handled by the "stream" event.
+		}
+		await addCfAccessToken(headers, previewToken.host, accessTokenRef);
+		addCfPreviewTokenHeader(headers, previewToken.value);
+		headers[":method"] = method;
+		headers[":path"] = url;
+		headers[":authority"] = previewToken.host;
+		headers[":scheme"] = "https";
+		for (const name of Object.keys(headers)) {
+			if (HTTP1_HEADERS.has(name.toLowerCase())) {
+				delete headers[name];
+			}
+		}
+		const request = message.pipe(remote.request(headers));
+		logger.debug(
+			"WORKER REQUEST",
+			new Date().toLocaleTimeString(),
+			method,
+			url
+		);
+		logger.debug("HEADERS", JSON.stringify(headers, null, 2));
+		logger.debug("PREVIEW TOKEN", previewToken);
+
+		request.on("response", (responseHeaders) => {
+			const status = responseHeaders[":status"] ?? 500;
+			// log all requests to terminal
+			logger.log(new Date().toLocaleTimeString(), method, url, status);
+
+			rewriteRemoteHostToLocalHostInHeaders(
+				responseHeaders,
+				previewToken.host,
+				port,
+				localProtocol
+			);
+			for (const name of Object.keys(responseHeaders)) {
+				if (name.startsWith(":")) {
+					delete responseHeaders[name];
+				}
+			}
+			response.writeHead(status, responseHeaders);
+			request.pipe(response, { end: true });
+		});
+	};
+
+	// If an asset path is defined, check the file system
+	// for a file first and serve if it exists.
+	const actualHandleRequest = assetDirectory
+		? createHandleAssetsRequest(assetDirectory, handleRequest)
+		: handleRequest;
+
+	proxy.server.on("request", actualHandleRequest);
+	cleanupListeners.push(() => proxy.server.off("request", actualHandleRequest));
+
+	// flush and replay buffered requests
+	requestResponseBufferRef.current.forEach(
+		({
+			request,
+			response,
+		}: {
+			request: IncomingMessage;
+			response: ServerResponse;
+		}) => actualHandleRequest(request, response)
+	);
+	requestResponseBufferRef.current = [];
+
+	/** HTTP/1 -> WebSocket (over HTTP/1)  */
+	const handleUpgrade = async (
+		originalMessage: IncomingMessage,
+		originalSocket: Duplex,
+		originalHead: Buffer
+	) => {
+		const { headers, method, url } = originalMessage;
+		await addCfAccessToken(headers, previewToken.host, accessTokenRef);
+		addCfPreviewTokenHeader(headers, previewToken.value);
+		headers["host"] = previewToken.host;
+
+		if (originalHead?.byteLength) originalSocket.unshift(originalHead);
+
+		const runtimeRequest = https.request(
+			{
+				hostname: previewToken.host,
+				path: url,
+				method,
+				headers,
+			},
+			(runtimeResponse) => {
+				if (!(runtimeResponse as { upgrade?: boolean }).upgrade) {
+					writeHead(originalSocket, runtimeResponse);
+					runtimeResponse.pipe(originalSocket);
+				}
+			}
+		);
+
+		runtimeRequest.on(
+			"upgrade",
+			(runtimeResponse, runtimeSocket, runtimeHead) => {
+				if (runtimeHead?.byteLength) runtimeSocket.unshift(runtimeHead);
+				writeHead(originalSocket, {
+					httpVersion: "1.1",
+					statusCode: 101,
+					statusMessage: "Switching Protocols",
+					headers: runtimeResponse.headers,
+				});
+				runtimeSocket.pipe(originalSocket).pipe(runtimeSocket);
+			}
+		);
+		originalMessage.pipe(runtimeRequest);
+	};
+
+	proxy.server.on("upgrade", handleUpgrade);
+	cleanupListeners.push(() => proxy.server.off("upgrade", handleUpgrade));
+	return cleanupListeners;
+}
+
 function createHandleAssetsRequest(
 	assetDirectory: string,
 	handleRequest: RequestListener
@@ -392,12 +592,14 @@ function createStreamHandler(
 	previewToken: CfPreviewToken,
 	remote: ClientHttp2Session,
 	localPort: number,
-	localProtocol: "https" | "http"
+	localProtocol: "https" | "http",
+	accessTokenRef: { current: string | undefined | null }
 ) {
-	return function handleStream(
+	return async function handleStream(
 		stream: ServerHttp2Stream,
 		headers: IncomingHttpHeaders
 	) {
+		await addCfAccessToken(headers, previewToken.host, accessTokenRef);
 		addCfPreviewTokenHeader(headers, previewToken.value);
 		headers[":authority"] = previewToken.host;
 		const request = stream.pipe(remote.request(headers));
@@ -449,6 +651,11 @@ export async function waitForPortToBeAvailable(
 		}
 
 		function checkPort() {
+			if (port === 0) {
+				doResolve();
+				return;
+			}
+
 			// Testing whether a port is 'available' involves simply
 			// trying to make a server listen on that port, and retrying
 			// until it succeeds.
@@ -474,3 +681,14 @@ export async function waitForPortToBeAvailable(
 		}
 	});
 }
+
+function getAccessibleHosts(): string[] {
+	const hosts: string[] = [];
+	Object.values(networkInterfaces()).forEach((net) => {
+		net?.forEach(({ family, address }) => {
+			// @ts-expect-error the `family` property is numeric as of Node.js 18.0.0
+			if (family === "IPv4" || family === 4) hosts.push(address);
+		});
+	});
+	return hosts;
+}