wrangler 0.0.0-e2b7352 → 0.0.0-e305903a

package/templates/pages-template-plugin.ts

@@ -0,0 +1,167 @@
+import { match } from "path-to-regexp";
+
+//note: this explicitly does not include the * character, as pages requires this
+const escapeRegex = /[.+?^${}()|[\]\\]/g;
+
+type HTTPMethod =
+	| "HEAD"
+	| "OPTIONS"
+	| "GET"
+	| "POST"
+	| "PUT"
+	| "PATCH"
+	| "DELETE";
+
+/* TODO: Grab these from @cloudflare/workers-types instead */
+type Params<P extends string = string> = Record<P, string | string[]>;
+
+type EventContext<Env, P extends string, Data> = {
+	request: Request;
+	functionPath: string;
+	waitUntil: (promise: Promise<unknown>) => void;
+	next: (input?: Request | string, init?: RequestInit) => Promise<Response>;
+	env: Env & { ASSETS: { fetch: typeof fetch } };
+	params: Params<P>;
+	data: Data;
+};
+
+type EventPluginContext<Env, P extends string, Data, PluginArgs> = {
+	request: Request;
+	functionPath: string;
+	waitUntil: (promise: Promise<unknown>) => void;
+	next: (input?: Request | string, init?: RequestInit) => Promise<Response>;
+	env: Env & { ASSETS: { fetch: typeof fetch } };
+	params: Params<P>;
+	data: Data;
+	pluginArgs: PluginArgs;
+};
+
+declare type PagesFunction<
+	Env = unknown,
+	P extends string = string,
+	Data extends Record<string, unknown> = Record<string, unknown>
+> = (context: EventContext<Env, P, Data>) => Response | Promise<Response>;
+
+declare type PagesPluginFunction<
+	Env = unknown,
+	P extends string = string,
+	Data extends Record<string, unknown> = Record<string, unknown>,
+	PluginArgs = unknown
+> = (
+	context: EventPluginContext<Env, P, Data, PluginArgs>
+) => Response | Promise<Response>;
+/* end @cloudflare/workers-types */
+
+type RouteHandler = {
+	routePath: string;
+	mountPath: string;
+	method?: HTTPMethod;
+	modules: PagesFunction[];
+	middlewares: PagesFunction[];
+};
+
+// inject `routes` via ESBuild
+declare const routes: RouteHandler[];
+
+function* executeRequest(request: Request, relativePathname: string) {
+	// First, iterate through the routes (backwards) and execute "middlewares" on partial route matches
+	for (const route of [...routes].reverse()) {
+		if (route.method && route.method !== request.method) {
+			continue;
+		}
+
+		// replaces with "\\$&", this prepends a backslash to the matched string, e.g. "[" becomes "\["
+		const routeMatcher = match(route.routePath.replace(escapeRegex, "\\$&"), {
+			end: false,
+		});
+		const mountMatcher = match(route.mountPath.replace(escapeRegex, "\\$&"), {
+			end: false,
+		});
+		const matchResult = routeMatcher(relativePathname);
+		const mountMatchResult = mountMatcher(relativePathname);
+		if (matchResult && mountMatchResult) {
+			for (const handler of route.middlewares.flat()) {
+				yield {
+					handler,
+					params: matchResult.params as Params,
+					path: mountMatchResult.path,
+				};
+			}
+		}
+	}
+
+	// Then look for the first exact route match and execute its "modules"
+	for (const route of routes) {
+		if (route.method && route.method !== request.method) {
+			continue;
+		}
+
+		const routeMatcher = match(route.routePath.replace(escapeRegex, "\\$&"), {
+			end: true,
+		});
+		const mountMatcher = match(route.mountPath.replace(escapeRegex, "\\$&"), {
+			end: false,
+		});
+		const matchResult = routeMatcher(relativePathname);
+		const mountMatchResult = mountMatcher(relativePathname);
+		if (matchResult && mountMatchResult && route.modules.length) {
+			for (const handler of route.modules.flat()) {
+				yield {
+					handler,
+					params: matchResult.params as Params,
+					path: matchResult.path,
+				};
+			}
+			break;
+		}
+	}
+}
+
+export default function (pluginArgs) {
+	const onRequest: PagesPluginFunction = async (workerContext) => {
+		let { request } = workerContext;
+		const { env, next, data } = workerContext;
+
+		const url = new URL(request.url);
+		const relativePathname = `/${
+			url.pathname.split(workerContext.functionPath)[1] || ""
+		}`.replace(/^\/\//, "/");
+
+		const handlerIterator = executeRequest(request, relativePathname);
+		const pluginNext = async (input?: RequestInfo, init?: RequestInit) => {
+			if (input !== undefined) {
+				request = new Request(input, init);
+			}
+
+			const result = handlerIterator.next();
+			// Note we can't use `!result.done` because this doesn't narrow to the correct type
+			if (result.done === false) {
+				const { handler, params, path } = result.value;
+				const context = {
+					request,
+					functionPath: workerContext.functionPath + path,
+					next: pluginNext,
+					params,
+					data,
+					pluginArgs,
+					env,
+					waitUntil: workerContext.waitUntil.bind(workerContext),
+				};
+
+				const response = await handler(context);
+
+				// https://fetch.spec.whatwg.org/#null-body-status
+				return new Response(
+					[101, 204, 205, 304].includes(response.status) ? null : response.body,
+					{ ...response, headers: new Headers(response.headers) }
+				);
+			} else {
+				return next();
+			}
+		};
+
+		return pluginNext();
+	};
+
+	return onRequest;
+}

package/templates/pages-template-worker.ts

@@ -0,0 +1,172 @@
+import { match } from "path-to-regexp";
+
+//note: this explicitly does not include the * character, as pages requires this
+const escapeRegex = /[.+?^${}()|[\]\\]/g;
+
+type HTTPMethod =
+	| "HEAD"
+	| "OPTIONS"
+	| "GET"
+	| "POST"
+	| "PUT"
+	| "PATCH"
+	| "DELETE";
+
+/* TODO: Grab these from @cloudflare/workers-types instead */
+type Params<P extends string = string> = Record<P, string | string[]>;
+
+type EventContext<Env, P extends string, Data> = {
+	request: Request;
+	functionPath: string;
+	waitUntil: (promise: Promise<unknown>) => void;
+	next: (input?: Request | string, init?: RequestInit) => Promise<Response>;
+	env: Env & { ASSETS: { fetch: typeof fetch } };
+	params: Params<P>;
+	data: Data;
+};
+
+declare type PagesFunction<
+	Env = unknown,
+	P extends string = string,
+	Data extends Record<string, unknown> = Record<string, unknown>
+> = (context: EventContext<Env, P, Data>) => Response | Promise<Response>;
+/* end @cloudflare/workers-types */
+
+type RouteHandler = {
+	routePath: string;
+	mountPath: string;
+	method?: HTTPMethod;
+	modules: PagesFunction[];
+	middlewares: PagesFunction[];
+};
+
+// inject `routes` via ESBuild
+declare const routes: RouteHandler[];
+// define `__FALLBACK_SERVICE__` via ESBuild
+declare const __FALLBACK_SERVICE__: string;
+
+// expect an ASSETS fetcher binding pointing to the asset-server stage
+type FetchEnv = {
+	[name: string]: { fetch: typeof fetch };
+	ASSETS: { fetch: typeof fetch };
+};
+
+type WorkerContext = {
+	waitUntil: (promise: Promise<unknown>) => void;
+};
+
+function* executeRequest(request: Request) {
+	const requestPath = new URL(request.url).pathname;
+
+	// First, iterate through the routes (backwards) and execute "middlewares" on partial route matches
+	for (const route of [...routes].reverse()) {
+		if (route.method && route.method !== request.method) {
+			continue;
+		}
+
+		// replaces with "\\$&", this prepends a backslash to the matched string, e.g. "[" becomes "\["
+		const routeMatcher = match(route.routePath.replace(escapeRegex, "\\$&"), {
+			end: false,
+		});
+		const mountMatcher = match(route.mountPath.replace(escapeRegex, "\\$&"), {
+			end: false,
+		});
+		const matchResult = routeMatcher(requestPath);
+		const mountMatchResult = mountMatcher(requestPath);
+		if (matchResult && mountMatchResult) {
+			for (const handler of route.middlewares.flat()) {
+				yield {
+					handler,
+					params: matchResult.params as Params,
+					path: mountMatchResult.path,
+				};
+			}
+		}
+	}
+
+	// Then look for the first exact route match and execute its "modules"
+	for (const route of routes) {
+		if (route.method && route.method !== request.method) {
+			continue;
+		}
+		const routeMatcher = match(route.routePath.replace(escapeRegex, "\\$&"), {
+			end: true,
+		});
+		const mountMatcher = match(route.mountPath.replace(escapeRegex, "\\$&"), {
+			end: false,
+		});
+		const matchResult = routeMatcher(requestPath);
+		const mountMatchResult = mountMatcher(requestPath);
+		if (matchResult && mountMatchResult && route.modules.length) {
+			for (const handler of route.modules.flat()) {
+				yield {
+					handler,
+					params: matchResult.params as Params,
+					path: matchResult.path,
+				};
+			}
+			break;
+		}
+	}
+}
+
+export default {
+	async fetch(request: Request, env: FetchEnv, workerContext: WorkerContext) {
+		const handlerIterator = executeRequest(request);
+		const data = {}; // arbitrary data the user can set between functions
+		const next = async (input?: RequestInfo, init?: RequestInit) => {
+			if (input !== undefined) {
+				let url = input;
+				if (typeof input === "string") {
+					url = new URL(input, request.url).toString();
+				}
+				request = new Request(url, init);
+			}
+
+			const result = handlerIterator.next();
+			// Note we can't use `!result.done` because this doesn't narrow to the correct type
+			if (result.done === false) {
+				const { handler, params, path } = result.value;
+				const context = {
+					request: new Request(request.clone()),
+					functionPath: path,
+					next,
+					params,
+					data,
+					env,
+					waitUntil: workerContext.waitUntil.bind(workerContext),
+				};
+
+				const response = await handler(context);
+
+				if (!(response instanceof Response)) {
+					throw new Error("Your Pages function should return a Response");
+				}
+
+				return cloneResponse(response);
+			} else if (__FALLBACK_SERVICE__) {
+				// There are no more handlers so finish with the fallback service (`env.ASSETS.fetch` in Pages' case)
+				const response = await env[__FALLBACK_SERVICE__].fetch(request);
+				return cloneResponse(response);
+			} else {
+				// There was not fallback service so actually make the request to the origin.
+				const response = await fetch(request);
+				return cloneResponse(response);
+			}
+		};
+
+		try {
+			return next();
+		} catch (err) {
+			return new Response("Internal Error", { status: 500 });
+		}
+	},
+};
+
+// This makes a Response mutable
+const cloneResponse = (response: Response) =>
+	// https://fetch.spec.whatwg.org/#null-body-status
+	new Response(
+		[101, 204, 205, 304].includes(response.status) ? null : response.body,
+		response
+	);

package/templates/serve-static-assets.ts

@@ -0,0 +1,63 @@
+// @ts-expect-error
+import worker from "__ENTRY_POINT__";
+import {
+	getAssetFromKV,
+	NotFoundError,
+	MethodNotAllowedError,
+	// @ts-expect-error
+} from "__KV_ASSET_HANDLER__";
+// @ts-expect-error
+import manifest from "__STATIC_CONTENT_MANIFEST";
+import type * as kvAssetHandler from "@cloudflare/kv-asset-handler";
+
+const ASSET_MANIFEST = JSON.parse(manifest);
+
+// @ts-expect-error
+export * from "__ENTRY_POINT__";
+
+export default {
+	async fetch(
+		request: Request,
+		env: { __STATIC_CONTENT: string },
+		ctx: ExecutionContext
+	) {
+		let options = {
+			ASSET_MANIFEST,
+			ASSET_NAMESPACE: env.__STATIC_CONTENT,
+			cacheControl: __CACHE_CONTROL_OPTIONS__,
+			serveSinglePageApp: __SERVE_SINGLE_PAGE_APP__,
+		};
+
+		try {
+			const page = await (
+				getAssetFromKV as typeof kvAssetHandler.getAssetFromKV
+			)(
+				{
+					request,
+					waitUntil(promise: Promise<unknown>) {
+						return ctx.waitUntil(promise);
+					},
+				},
+				options
+			);
+
+			// allow headers to be altered
+			const response = new Response(page.body, page);
+
+			response.headers.set("X-XSS-Protection", "1; mode=block");
+			response.headers.set("X-Content-Type-Options", "nosniff");
+			response.headers.set("X-Frame-Options", "DENY");
+			response.headers.set("Referrer-Policy", "unsafe-url");
+			response.headers.set("Feature-Policy", "none");
+
+			return response;
+		} catch (e) {
+			if (e instanceof NotFoundError || e instanceof MethodNotAllowedError) {
+				// if a known error is thrown then serve from actual worker
+				return await worker.fetch(request, env, ctx);
+			}
+			// otherwise it's a real error, so throw it
+			throw e;
+		}
+	},
+};

package/templates/service-bindings-module-facade.js

@@ -0,0 +1,54 @@
+import worker from "__ENTRY_POINT__";
+const Workers = __WORKERS__;
+
+export * from "__ENTRY_POINT__";
+
+export default {
+	async fetch(req, env, ctx) {
+		const facadeEnv = { ...env };
+		// For every Worker definition that's available,
+		// create a fetcher for it on the facade env.
+		// for const [name,  binding] of env
+		// if Workers[name]
+		// const details = Workers[name];
+
+		for (const [name, details] of Object.entries(Workers)) {
+			if (details) {
+				facadeEnv[name] = {
+					async fetch(...reqArgs) {
+						const reqFromArgs = new Request(...reqArgs);
+						if (details.headers) {
+							for (const [key, value] of Object.entries(details.headers)) {
+								// In remote mode, you need to add a couple of headers
+								// to make sure it's talking to the 'dev' preview session
+								// (much like wrangler dev already does via proxy.ts)
+								reqFromArgs.headers.set(key, value);
+							}
+							return env[name].fetch(reqFromArgs);
+						}
+
+						const url = new URL(reqFromArgs.url);
+						url.protocol = details.protocol;
+						url.host = details.host;
+						if (details.port !== undefined) url.port = details.port;
+
+						const request = new Request(url.toString(), reqFromArgs);
+						return fetch(request);
+					},
+				};
+			} else {
+				// This means there's no dev binding available.
+				// Let's use whatever's available, or put a shim with a message.
+				facadeEnv[name] = facadeEnv[name] || {
+					async fetch() {
+						return new Response(
+							`You should start up wrangler dev --local on the ${name} worker`,
+							{ status: 404 }
+						);
+					},
+				};
+			}
+		}
+		return worker.fetch(req, facadeEnv, ctx);
+	},
+};

package/templates/service-bindings-sw-facade.js

@@ -0,0 +1,42 @@
+import "__ENTRY_POINT__";
+const Workers = __WORKERS__;
+
+// For every Worker definition that's available,
+// create a fetcher for it on the facade env.
+for (const [name, details] of Object.entries(Workers)) {
+	if (details) {
+		globalThis[name] = {
+			async fetch(...reqArgs) {
+				const reqFromArgs = new Request(...reqArgs);
+				if (details.headers) {
+					for (const [key, value] of Object.entries(details.headers)) {
+						// In remote mode, you need to add a couple of headers
+						// to make sure it's talking to the 'dev' preview session
+						// (much like wrangler dev already does via proxy.ts)
+						reqFromArgs.headers.set(key, value);
+					}
+					return env[name].fetch(reqFromArgs);
+				}
+
+				const url = new URL(reqFromArgs.url);
+				url.protocol = details.protocol;
+				url.host = details.host;
+				if (details.port !== undefined) url.port = details.port;
+
+				const request = new Request(url.toString(), reqFromArgs);
+				return fetch(request);
+			},
+		};
+	} else {
+		// This means it's a local mode binding
+		// but hasn't started up locally yet.
+		globalThis[name] = {
+			async fetch() {
+				return new Response(
+					`You should start up wrangler dev --local on the ${name} worker`,
+					{ status: 404 }
+				);
+			},
+		};
+	}
+}