wrangler 0.0.0-e22f9d7 → 0.0.0-e273e09

package/pages/functions/filepath-routing.ts

@@ -1,173 +1,134 @@
-import path from "path";
-import fs from "fs/promises";
-import { transform } from "esbuild";
-import * as acorn from "acorn";
-import * as acornWalk from "acorn-walk";
-import type { Config, RouteConfig } from "./routes";
-import type { ExportNamedDeclaration, Identifier } from "estree";
-
-type Arguments = {
-  baseDir: string;
-  baseURL: string;
-};
+import fs from "node:fs/promises";
+import path from "node:path";
+import { build } from "esbuild";
+import { toUrlPath } from "../../src/paths";
+import type { UrlPath } from "../../src/paths";
+import type { HTTPMethod, RouteConfig } from "./routes";
 
 export async function generateConfigFromFileTree({
   baseDir,
   baseURL,
-}: Arguments) {
-  let routeEntries: [string, RouteConfig][] = [];
+}: {
+  baseDir: string;
+  baseURL: UrlPath;
+}) {
+  let routeEntries: RouteConfig[] = [];
 
   if (!baseURL.startsWith("/")) {
-    baseURL = `/${baseURL}`;
+    baseURL = `/${baseURL}` as UrlPath;
   }
 
   if (baseURL.endsWith("/")) {
-    baseURL = baseURL.slice(0, -1);
+    baseURL = baseURL.slice(0, -1) as UrlPath;
   }
 
   await forEachFile(baseDir, async (filepath) => {
     const ext = path.extname(filepath);
     if (/^\.(mjs|js|ts|tsx|jsx)$/.test(ext)) {
-      // transform the code to ensure we're working with vanilla JS + ESM
-      const { code } = await transform(await fs.readFile(filepath, "utf-8"), {
-        loader: ext === ".ts" ? "ts" : "js",
+      const { metafile } = await build({
+        metafile: true,
+        write: false,
+        bundle: false,
+        entryPoints: [path.resolve(filepath)],
       });
-
-      // parse each file into an AST and search for module exports that match "onRequest" and friends
-      const ast = acorn.parse(code, {
-        ecmaVersion: "latest",
-        sourceType: "module",
-      });
-      acornWalk.simple(ast, {
-        ExportNamedDeclaration(_node: unknown) {
-          // This dynamic cast assumes that the AST generated by acornWalk will generate nodes that
-          // are compatible with the eslint AST nodes.
-          const node = _node as ExportNamedDeclaration;
-
-          // this is an array because multiple things can be exported from a single statement
-          // i.e. `export {foo, bar}` or `export const foo = "f", bar = "b"`
-          const exportNames: string[] = [];
-
-          if (node.declaration) {
-            const declaration = node.declaration;
-
-            // `export async function onRequest() {...}`
-            if (declaration.type === "FunctionDeclaration") {
-              exportNames.push(declaration.id.name);
-            }
-
-            // `export const onRequestGet = () => {}, onRequestPost = () => {}`
-            if (declaration.type === "VariableDeclaration") {
-              exportNames.push(
-                ...declaration.declarations.map(
-                  (variableDeclarator) =>
-                    (variableDeclarator.id as unknown as Identifier).name
-                )
-              );
-            }
+      const exportNames: string[] = [];
+      if (metafile) {
+        for (const output in metafile?.outputs) {
+          exportNames.push(...metafile.outputs[output].exports);
+        }
+      }
+      for (const exportName of exportNames) {
+        const [match, method = ""] = (exportName.match(
+          /^onRequest(Get|Post|Put|Patch|Delete|Options|Head)?$/
+        ) ?? []) as (string | undefined)[];
+
+        if (match) {
+          const basename = path.basename(filepath).slice(0, -ext.length);
+
+          const isIndexFile = basename === "index";
+          // TODO: deprecate _middleware_ in favor of _middleware
+          const isMiddlewareFile =
+            basename === "_middleware" || basename === "_middleware_";
+
+          let routePath = path
+            .relative(baseDir, filepath)
+            .slice(0, -ext.length);
+          let mountPath = path.dirname(routePath);
+
+          if (isIndexFile || isMiddlewareFile) {
+            routePath = path.dirname(routePath);
           }
 
-          // `export {foo, bar}`
-          if (node.specifiers.length) {
-            exportNames.push(
-              ...node.specifiers.map(
-                (exportSpecifier) =>
-                  (exportSpecifier.exported as unknown as Identifier).name
-              )
-            );
+          if (routePath === ".") {
+            routePath = "";
           }
-
-          for (const exportName of exportNames) {
-            const [match, method] =
-              exportName.match(
-                /^onRequest(Get|Post|Put|Patch|Delete|Options|Head)?$/
-              ) ?? [];
-
-            if (match) {
-              const basename = path.basename(filepath).slice(0, -ext.length);
-
-              const isIndexFile = basename === "index";
-              // TODO: deprecate _middleware_ in favor of _middleware
-              const isMiddlewareFile =
-                basename === "_middleware" || basename === "_middleware_";
-
-              let routePath = path
-                .relative(baseDir, filepath)
-                .slice(0, -ext.length);
-
-              if (isIndexFile || isMiddlewareFile) {
-                routePath = path.dirname(routePath);
-              }
-
-              if (routePath === ".") {
-                routePath = "";
-              }
-
-              routePath = `${baseURL}/${routePath}`;
-
-              routePath = routePath.replace(/\[\[(.+)]]/g, ":$1*"); // transform [[id]] => :id*
-              routePath = routePath.replace(/\[(.+)]/g, ":$1"); // transform [id] => :id
-
-              if (method) {
-                routePath = `${method.toUpperCase()} ${routePath}`;
-              }
-
-              routeEntries.push([
-                routePath,
-                {
-                  [isMiddlewareFile ? "middleware" : "module"]: [
-                    `${path.relative(baseDir, filepath)}:${exportName}`,
-                  ],
-                },
-              ]);
-            }
+          if (mountPath === ".") {
+            mountPath = "";
           }
-        },
-      });
+
+          routePath = `${baseURL}/${routePath}`;
+          mountPath = `${baseURL}/${mountPath}`;
+
+          routePath = routePath.replace(/\[\[([^\]]+)\]\]/g, ":$1*"); // transform [[id]] => :id*
+          routePath = routePath.replaceAll(/\[([^\]]+)\]/g, ":$1"); // transform [id] => :id
+          mountPath = mountPath.replace(/\[\[([^\]]+)\]\]/g, ":$1*"); // transform [[id]] => :id*
+          mountPath = mountPath.replaceAll(/\[([^\]]+)\]/g, ":$1"); // transform [id] => :id
+
+          // These are used as module specifiers so UrlPaths are okay to use even on Windows
+          const modulePath = toUrlPath(path.relative(baseDir, filepath));
+
+          const routeEntry: RouteConfig = {
+            routePath: toUrlPath(routePath),
+            mountPath: toUrlPath(mountPath),
+            method: method.toUpperCase() as HTTPMethod,
+            [isMiddlewareFile ? "middleware" : "module"]: [
+              `${modulePath}:${exportName}`,
+            ],
+          };
+
+          routeEntries.push(routeEntry);
+        }
+      }
     }
   });
-
   // Combine together any routes (index routes) which contain both a module and a middleware
   routeEntries = routeEntries.reduce(
-    (acc: typeof routeEntries, [routePath, routeHandler]) => {
+    (acc: typeof routeEntries, { routePath, ...rest }) => {
       const existingRouteEntry = acc.find(
-        (routeEntry) => routeEntry[0] === routePath
+        (routeEntry) =>
+          routeEntry.routePath === routePath &&
+          routeEntry.method === rest.method
       );
       if (existingRouteEntry !== undefined) {
-        existingRouteEntry[1] = {
-          ...existingRouteEntry[1],
-          ...routeHandler,
-        };
+        Object.assign(existingRouteEntry, rest);
       } else {
-        acc.push([routePath, routeHandler]);
+        acc.push({ routePath, ...rest });
       }
       return acc;
     },
     []
   );
 
-  routeEntries.sort(([pathA], [pathB]) => compareRoutes(pathA, pathB));
+  routeEntries.sort((a, b) => compareRoutes(a, b));
 
-  return { routes: Object.fromEntries(routeEntries) } as Config;
+  return {
+    routes: routeEntries,
+  };
 }
 
 // Ensure routes are produced in order of precedence so that
 // more specific routes aren't occluded from matching due to
 // less specific routes appearing first in the route list.
-export function compareRoutes(a: string, b: string) {
-  function parseRoutePath(routePath: string) {
-    let [method, segmentedPath] = routePath.split(" ");
-    if (!segmentedPath) {
-      segmentedPath = method;
-      method = null;
-    }
-
-    const segments = segmentedPath.slice(1).split("/").filter(Boolean);
-    return [method, segments];
+export function compareRoutes(
+  { routePath: routePathA, method: methodA }: RouteConfig,
+  { routePath: routePathB, method: methodB }: RouteConfig
+) {
+  function parseRoutePath(routePath: UrlPath): string[] {
+    return routePath.slice(1).split("/").filter(Boolean);
   }
 
-  const [methodA, segmentsA] = parseRoutePath(a);
-  const [methodB, segmentsB] = parseRoutePath(b);
+  const segmentsA = parseRoutePath(routePathA);
+  const segmentsB = parseRoutePath(routePathB);
 
   // sort routes with fewer segments after those with more segments
   if (segmentsA.length !== segmentsB.length) {
@@ -193,8 +154,8 @@ export function compareRoutes(a: string, b: string) {
   if (methodA && !methodB) return -1;
   if (!methodA && methodB) return 1;
 
-  // all else equal, just sort them lexicographically
-  return a.localeCompare(b);
+  // all else equal, just sort the paths lexicographically
+  return routePathA.localeCompare(routePathB);
 }
 
 async function forEachFile<T>(
@@ -204,7 +165,7 @@ async function forEachFile<T>(
   const searchPaths = [baseDir];
   const returnValues: T[] = [];
 
-  while (searchPaths.length) {
+  while (isNotEmpty(searchPaths)) {
     const cwd = searchPaths.shift();
     const dir = await fs.readdir(cwd, { withFileTypes: true });
     for (const entry of dir) {
@@ -219,3 +180,10 @@ async function forEachFile<T>(
 
   return returnValues;
 }
+
+interface NonEmptyArray<T> extends Array<T> {
+  shift(): T;
+}
+function isNotEmpty<T>(array: T[]): array is NonEmptyArray<T> {
+  return array.length > 0;
+}

package/pages/functions/routes.ts

@@ -1,6 +1,7 @@
-import path from "path";
-import fs from "fs/promises";
+import fs from "node:fs/promises";
+import path from "node:path";
 import { isValidIdentifier, normalizeIdentifier } from "./identifiers";
+import type { UrlPath } from "../../src/paths";
 
 export const HTTP_METHODS = [
   "HEAD",
@@ -19,22 +20,22 @@ export function isHTTPMethod(
 }
 
 export type RoutesCollection = Array<{
-  routePath: string;
-  methods: HTTPMethod[];
+  routePath: UrlPath;
+  mountPath: UrlPath;
+  method?: HTTPMethod;
   modules: string[];
   middlewares: string[];
 }>;
 
 export type Config = {
-  routes?: RoutesConfig;
+  routes?: RouteConfig[];
   schedules?: unknown;
 };
 
-export type RoutesConfig = {
-  [route: string]: RouteConfig;
-};
-
 export type RouteConfig = {
+  routePath: UrlPath;
+  mountPath: UrlPath;
+  method?: HTTPMethod;
   middleware?: string | string[];
   module?: string | string[];
 };
@@ -114,16 +115,12 @@ export function parseConfig(config: Config, baseDir: string) {
     });
   }
 
-  for (const [route, props] of Object.entries(config.routes)) {
-    let [_methods, routePath] = route.split(" ");
-    if (!routePath) {
-      routePath = _methods;
-      _methods = "";
-    }
-
+  for (const { routePath, mountPath, method, ...props } of config.routes ??
+    []) {
     routes.push({
       routePath,
-      methods: _methods.split("|").filter(isHTTPMethod),
+      mountPath,
+      method,
       middlewares: parseModuleIdentifiers(props.middleware),
       modules: parseModuleIdentifiers(props.module),
     });
@@ -148,7 +145,8 @@ export const routes = [
     .map(
       (route) => `  {
       routePath: "${route.routePath}",
-      methods: ${JSON.stringify(route.methods)},
+      mountPath: "${route.mountPath}",
+      method: "${route.method}",
       middlewares: [${route.middlewares.join(", ")}],
       modules: [${route.modules.join(", ")}],
     },`

package/pages/functions/template-plugin.ts

@@ -0,0 +1,147 @@
+import { match } from "path-to-regexp";
+import type { HTTPMethod } from "./routes";
+
+/* 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;
+    }
+
+    const routeMatcher = match(route.routePath, { end: false });
+    const mountMatcher = match(route.mountPath, { 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, { end: true });
+    const mountMatcher = match(route.mountPath, { 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/pages/functions/template-worker.ts

@@ -6,6 +6,7 @@ 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 } };
@@ -22,7 +23,8 @@ declare type PagesFunction<
 
 type RouteHandler = {
   routePath: string;
-  methods: HTTPMethod[];
+  mountPath: string;
+  method?: HTTPMethod;
   modules: PagesFunction[];
   middlewares: PagesFunction[];
 };
@@ -33,35 +35,34 @@ declare const routes: RouteHandler[];
 declare const __FALLBACK_SERVICE__: string;
 
 // expect an ASSETS fetcher binding pointing to the asset-server stage
-type Env = {
-  [name: string]: unknown;
-  ASSETS: { fetch(url: string, init: RequestInit): Promise<Response> };
+type FetchEnv = {
+  [name: string]: { fetch: typeof fetch };
+  ASSETS: { fetch: typeof fetch };
 };
 
 type WorkerContext = {
   waitUntil: (promise: Promise<unknown>) => void;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- `env` can be used by __FALLBACK_SERVICE_FETCH__
-function* executeRequest(request: Request, env: Env) {
+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.methods.length &&
-      !route.methods.includes(request.method as HTTPMethod)
-    ) {
+    if (route.method && route.method !== request.method) {
       continue;
     }
 
     const routeMatcher = match(route.routePath, { end: false });
+    const mountMatcher = match(route.mountPath, { end: false });
     const matchResult = routeMatcher(requestPath);
-    if (matchResult) {
+    const mountMatchResult = mountMatcher(requestPath);
+    if (matchResult && mountMatchResult) {
       for (const handler of route.middlewares.flat()) {
         yield {
           handler,
           params: matchResult.params as Params,
+          path: mountMatchResult.path,
         };
       }
     }
@@ -69,55 +70,47 @@ function* executeRequest(request: Request, env: Env) {
 
   // Then look for the first exact route match and execute its "modules"
   for (const route of routes) {
-    if (
-      route.methods.length &&
-      !route.methods.includes(request.method as HTTPMethod)
-    ) {
+    if (route.method && route.method !== request.method) {
       continue;
     }
 
     const routeMatcher = match(route.routePath, { end: true });
+    const mountMatcher = match(route.mountPath, { end: false });
     const matchResult = routeMatcher(requestPath);
-    if (matchResult && route.modules.length) {
+    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;
     }
   }
-
-  // Finally, yield to the fallback service (`env.ASSETS.fetch` in Pages' case)
-  return {
-    handler: () =>
-      __FALLBACK_SERVICE__
-        ? // @ts-expect-error expecting __FALLBACK_SERVICE__ to be the name of a service binding, so fetch should be defined
-          env[__FALLBACK_SERVICE__].fetch(request)
-        : fetch(request),
-    params: {} as Params,
-  };
 }
 
 export default {
-  async fetch(request: Request, env: Env, workerContext: WorkerContext) {
-    const handlerIterator = executeRequest(request, env);
+  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) {
-        request = new Request(input, init);
+        let url = input;
+        if (typeof input === "string") {
+          url = new URL(input, request.url).toString();
+        }
+        request = new Request(url, init);
       }
 
-      const { value } = handlerIterator.next();
-      if (value) {
-        const { handler, params } = value;
-        const context: EventContext<
-          unknown,
-          string,
-          Record<string, unknown>
-        > = {
+      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,
@@ -130,8 +123,14 @@ export default {
         // https://fetch.spec.whatwg.org/#null-body-status
         return new Response(
           [101, 204, 205, 304].includes(response.status) ? null : response.body,
-          response
+          { ...response, headers: new Headers(response.headers) }
         );
+      } else if (__FALLBACK_SERVICE__) {
+        // There are no more handlers so finish with the fallback service (`env.ASSETS.fetch` in Pages' case)
+        return env[__FALLBACK_SERVICE__].fetch(request);
+      } else {
+        // There was not fallback service so actually make the request to the origin.
+        return fetch(request);
       }
     };