wrangler 0.0.0-e60dc909 → 0.0.0-e61444cb

package/templates/startDevWorker/ProxyWorker.ts

@@ -0,0 +1,334 @@
+import {
+	createDeferred,
+	DeferredPromise,
+	urlFromParts,
+} from "../../src/api/startDevWorker/utils";
+import type {
+	ProxyData,
+	ProxyWorkerIncomingRequestBody,
+	ProxyWorkerOutgoingRequestBody,
+} from "../../src/api/startDevWorker/events";
+
+interface Env {
+	PROXY_CONTROLLER: Fetcher;
+	PROXY_CONTROLLER_AUTH_SECRET: string;
+	DURABLE_OBJECT: DurableObjectNamespace;
+}
+
+// request.cf.hostMetadata is verbose to type using the workers-types Request -- this allows us to have Request correctly typed in this scope
+type Request = Parameters<
+	NonNullable<
+		ExportedHandler<Env, unknown, ProxyWorkerIncomingRequestBody>["fetch"]
+	>
+>[0];
+
+const LIVE_RELOAD_PROTOCOL = "WRANGLER_PROXYWORKER_LIVE_RELOAD_PROTOCOL";
+export default {
+	fetch(req, env) {
+		const singleton = env.DURABLE_OBJECT.idFromName("");
+		const inspectorProxy = env.DURABLE_OBJECT.get(singleton);
+
+		return inspectorProxy.fetch(req);
+	},
+} as ExportedHandler<Env, unknown, ProxyWorkerIncomingRequestBody>;
+
+export class ProxyWorker implements DurableObject {
+	constructor(
+		readonly state: DurableObjectState,
+		readonly env: Env
+	) {}
+
+	proxyData?: ProxyData;
+	requestQueue = new Map<Request, DeferredPromise<Response>>();
+	requestRetryQueue = new Map<Request, DeferredPromise<Response>>();
+
+	fetch(request: Request) {
+		if (isRequestForLiveReloadWebsocket(request)) {
+			// requests for live-reload websocket
+
+			return this.handleLiveReloadWebSocket(request);
+		}
+
+		if (isRequestFromProxyController(request, this.env)) {
+			// requests from ProxyController
+
+			return this.processProxyControllerRequest(request);
+		}
+
+		// regular requests to be proxied
+		const deferred = createDeferred<Response>();
+
+		this.requestQueue.set(request, deferred);
+		this.processQueue();
+
+		return deferred.promise;
+	}
+
+	handleLiveReloadWebSocket(request: Request) {
+		const { 0: response, 1: liveReload } = new WebSocketPair();
+		const websocketProtocol =
+			request.headers.get("Sec-WebSocket-Protocol") ?? "";
+
+		this.state.acceptWebSocket(liveReload, ["live-reload"]);
+
+		return new Response(null, {
+			status: 101,
+			webSocket: response,
+			headers: { "Sec-WebSocket-Protocol": websocketProtocol },
+		});
+	}
+
+	processProxyControllerRequest(request: Request) {
+		const event = request.cf?.hostMetadata;
+		switch (event?.type) {
+			case "pause":
+				this.proxyData = undefined;
+				break;
+
+			case "play":
+				this.proxyData = event.proxyData;
+				this.processQueue();
+				this.state
+					.getWebSockets("live-reload")
+					.forEach((ws) => ws.send("reload"));
+
+				break;
+		}
+
+		return new Response(null, { status: 204 });
+	}
+
+	/**
+	 * Process requests that are being retried first, then process newer requests.
+	 * Requests that are being retried are, by definition, older than requests which haven't been processed yet.
+	 * We don't need to be more accurate than this re ordering, since the requests are being fired off synchronously.
+	 */
+	*getOrderedQueue() {
+		yield* this.requestRetryQueue;
+		yield* this.requestQueue;
+	}
+
+	processQueue() {
+		const { proxyData } = this; // store proxyData at the moment this function was called
+		if (proxyData === undefined) return;
+
+		for (const [request, deferredResponse] of this.getOrderedQueue()) {
+			this.requestRetryQueue.delete(request);
+			this.requestQueue.delete(request);
+
+			const outerUrl = new URL(request.url);
+			const headers = new Headers(request.headers);
+
+			// override url parts for proxying
+			const userWorkerUrl = new URL(request.url);
+			Object.assign(userWorkerUrl, proxyData.userWorkerUrl);
+
+			// set request.url in the UserWorker
+			const innerUrl = new URL(request.url);
+			Object.assign(innerUrl, proxyData.userWorkerInnerUrlOverrides);
+			headers.set("MF-Original-URL", innerUrl.href);
+			headers.set("MF-Disable-Pretty-Error", "true"); // disables the UserWorker miniflare instance from rendering the pretty error -- instead the ProxyWorker miniflare instance will intercept the json error response and render the pretty error page
+
+			// Preserve client `Accept-Encoding`, rather than using Worker's default
+			// of `Accept-Encoding: br, gzip`
+			const encoding = request.cf?.clientAcceptEncoding;
+			if (encoding !== undefined) headers.set("Accept-Encoding", encoding);
+
+			rewriteUrlRelatedHeaders(headers, outerUrl, innerUrl);
+
+			// merge proxyData headers with the request headers
+			for (const [key, value] of Object.entries(proxyData.headers ?? {})) {
+				if (value === undefined) continue;
+
+				if (key.toLowerCase() === "cookie") {
+					const existing = request.headers.get("cookie") ?? "";
+					headers.set("cookie", `${existing};${value}`);
+				} else {
+					headers.set(key, value);
+				}
+			}
+
+			// explicitly NOT await-ing this promise, we are in a loop and want to process the whole queue quickly + synchronously
+			void fetch(userWorkerUrl, new Request(request, { headers }))
+				.then((res) => {
+					res = new Response(res.body, res);
+					rewriteUrlRelatedHeaders(res.headers, innerUrl, outerUrl);
+
+					if (isHtmlResponse(res)) {
+						res = insertLiveReloadScript(request, res, this.env, proxyData);
+					}
+
+					deferredResponse.resolve(res);
+				})
+				.catch((error: Error) => {
+					// errors here are network errors or from response post-processing
+					// to catch only network errors, use the 2nd param of the fetch.then()
+
+					// we have crossed an async boundary, so proxyData may have changed
+					// if proxyData.userWorkerUrl has changed, it means there is a new downstream UserWorker
+					// and that this error is stale since it was for a request to the old UserWorker
+					// so here we construct a newUserWorkerUrl so we can compare it to the (old) userWorkerUrl
+					const newUserWorkerUrl =
+						this.proxyData && urlFromParts(this.proxyData.userWorkerUrl);
+
+					// only report errors if the downstream proxy has NOT changed
+					if (userWorkerUrl.href === newUserWorkerUrl?.href) {
+						void sendMessageToProxyController(this.env, {
+							type: "error",
+							error: {
+								name: error.name,
+								message: error.message,
+								stack: error.stack,
+								cause: error.cause,
+							},
+						});
+
+						deferredResponse.reject(error);
+					}
+
+					// if the request can be retried (subset of idempotent requests which have no body), requeue it
+					else if (request.method === "GET" || request.method === "HEAD") {
+						this.requestRetryQueue.set(request, deferredResponse);
+						// we would only end up here if the downstream UserWorker is chang*ing*
+						// i.e. we are in a `pause`d state and expecting a `play` message soon
+						// this request will be processed (retried) when the `play` message arrives
+						// for that reason, we do not need to call `this.processQueue` here
+						// (but, also, it can't hurt to call it since it bails when
+						// in a `pause`d state i.e. `this.proxyData` is undefined)
+					}
+
+					// if the request cannot be retried, respond with 503 Service Unavailable
+					// important to note, this is not an (unexpected) error -- it is an acceptable flow of local development
+					// it would be incorrect to retry non-idempotent requests
+					// and would require cloning all body streams to avoid stream reuse (which is inefficient but not out of the question in the future)
+					// this is a good enough UX for now since it solves the most common GET use-case
+					else {
+						deferredResponse.resolve(
+							new Response(
+								"Your worker restarted mid-request. Please try sending the request again. Only GET or HEAD requests are retried automatically.",
+								{
+									status: 503,
+									headers: { "Retry-After": "0" },
+								}
+							)
+						);
+					}
+				});
+		}
+	}
+}
+
+function isRequestFromProxyController(req: Request, env: Env): boolean {
+	return req.headers.get("Authorization") === env.PROXY_CONTROLLER_AUTH_SECRET;
+}
+function isHtmlResponse(res: Response): boolean {
+	return res.headers.get("content-type")?.startsWith("text/html") ?? false;
+}
+function isRequestForLiveReloadWebsocket(req: Request): boolean {
+	const websocketProtocol = req.headers.get("Sec-WebSocket-Protocol");
+	const isWebSocketUpgrade = req.headers.get("Upgrade") === "websocket";
+
+	return isWebSocketUpgrade && websocketProtocol === LIVE_RELOAD_PROTOCOL;
+}
+
+function sendMessageToProxyController(
+	env: Env,
+	message: ProxyWorkerOutgoingRequestBody
+) {
+	return env.PROXY_CONTROLLER.fetch("http://dummy", {
+		method: "POST",
+		body: JSON.stringify(message),
+	});
+}
+
+function insertLiveReloadScript(
+	request: Request,
+	response: Response,
+	env: Env,
+	proxyData: ProxyData
+) {
+	const htmlRewriter = new HTMLRewriter();
+
+	// if preview-token-expired response, errorDetails will contain "Invalid Workers Preview configuration"
+	let errorDetails = "";
+	htmlRewriter.on("#cf-error-details", {
+		text(element) {
+			errorDetails += element.text;
+		},
+	});
+
+	htmlRewriter.onDocument({
+		end(end) {
+			if (
+				response.status === 400 &&
+				errorDetails.includes("Invalid Workers Preview configuration")
+			) {
+				void sendMessageToProxyController(env, {
+					type: "previewTokenExpired",
+					proxyData,
+				});
+			}
+
+			// if liveReload enabled, append a script tag
+			// TODO: compare to existing nodejs implementation
+			if (proxyData.liveReload) {
+				const websocketUrl = new URL(request.url);
+				websocketUrl.protocol =
+					websocketUrl.protocol === "http:" ? "ws:" : "wss:";
+
+				end.append(
+					`
+					<script>
+						(function() {
+							var ws;
+							function recover() {
+								ws = null;
+								setTimeout(initLiveReload, 100);
+							}
+							function initLiveReload() {
+								if (ws) return;
+                var origin = (location.protocol === "http:" ? "ws://" : "wss://") + location.host;
+								ws = new WebSocket(origin + "/cdn-cgi/live-reload", "${LIVE_RELOAD_PROTOCOL}");
+								ws.onclose = recover;
+								ws.onerror = recover;
+								ws.onmessage = location.reload.bind(location);
+							}
+						})();
+					</script>
+				`,
+					{ html: true }
+				);
+			}
+		},
+	});
+
+	return htmlRewriter.transform(response);
+}
+
+/**
+ * Rewrite references to URLs in request/response headers.
+ *
+ * This function is used to map the URLs in headers like Origin and Access-Control-Allow-Origin
+ * so that this proxy is transparent to the Client Browser and User Worker.
+ */
+function rewriteUrlRelatedHeaders(headers: Headers, from: URL, to: URL) {
+	const setCookie = headers.getAll("Set-Cookie");
+	headers.delete("Set-Cookie");
+	headers.forEach((value, key) => {
+		if (typeof value === "string" && value.includes(from.host)) {
+			headers.set(
+				key,
+				value.replaceAll(from.origin, to.origin).replaceAll(from.host, to.host)
+			);
+		}
+	});
+	for (const cookie of setCookie) {
+		headers.append(
+			"Set-Cookie",
+			cookie.replace(
+				new RegExp(`Domain=${from.hostname}($|;|,)`),
+				`Domain=${to.hostname}$1`
+			)
+		);
+	}
+}

package/templates/tsconfig.init.json

@@ -1,106 +1,22 @@
 {
 	"compilerOptions": {
-		/* Visit https://aka.ms/tsconfig.json to read more about this file */
-
-		/* Projects */
-		// "incremental": true,                              /* Enable incremental compilation */
-		// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
-		// "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
-		// "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
-		// "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
-		// "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
-
-		/* Language and Environment */
 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
 		"lib": [
 			"es2021"
 		] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
-		"jsx": "react" /* Specify what JSX code is generated. */,
-		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
-		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
-		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
-		// "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
-		// "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
-		// "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
-		// "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
-		// "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
-
-		/* Modules */
-		"module": "es2022" /* Specify what module code is generated. */,
-		// "rootDir": "./",                                  /* Specify the root folder within your source files. */
-		"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
-		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-		// "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
-		// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-		// "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
+		"jsx": "react-jsx" /* Specify what JSX code is generated. */,
+		"module": "ESNext" /* Specify what module code is generated. */,
+		"moduleResolution": "Bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
 		"types": [
-			"@cloudflare/workers-types",
-			"jest"
+			"@cloudflare/workers-types"
 		] /* Specify type package names to be included without being referenced in a source file. */,
-		// "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
 		"resolveJsonModule": true /* Enable importing .json files */,
-		// "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
-
-		/* JavaScript Support */
 		"allowJs": true /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */,
-		"checkJs": false /* Enable error reporting in type-checked JavaScript files. */,
-		// "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
-
-		/* Emit */
-		// "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
-		// "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
-		// "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-		// "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
-		// "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
-		// "outDir": "./",                                   /* Specify an output folder for all emitted files. */
-		// "removeComments": true,                           /* Disable emitting comments. */
 		"noEmit": true /* Disable emitting files from a compilation. */,
-		// "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
-		// "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
-		// "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
-		// "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
-		// "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
-		// "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
-		// "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
-		// "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
-		// "newLine": "crlf",                                /* Set the newline character for emitting files. */
-		// "stripInternal": true,                            /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
-		// "noEmitHelpers": true,                            /* Disable generating custom helper functions like `__extends` in compiled output. */
-		// "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
-		// "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
-		// "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
-		// "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
-
-		/* Interop Constraints */
 		"isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
 		"allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
-		// "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
-		// "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
-
-		/* Type Checking */
 		"strict": true /* Enable all strict type-checking options. */,
-		// "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
-		// "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
-		// "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-		// "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
-		// "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
-		// "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
-		// "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
-		// "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
-		// "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
-		// "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
-		// "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-		// "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-		// "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-		// "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
-		// "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
-		// "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
-		// "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
-		// "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
-
-		/* Completeness */
-		// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+		"noUncheckedIndexedAccess": true,
 		"skipLibCheck": true /* Skip type checking all .d.ts files. */
 	}
 }

package/templates/tsconfig.json

@@ -1,5 +1,5 @@
 {
-	"extends": "../tsconfig.json",
+	"extends": "@cloudflare/workers-tsconfig/tsconfig.json",
 	"compilerOptions": {
 		"types": ["@cloudflare/workers-types"]
 	},