wrangler 0.0.0-e14e589 → 0.0.0-e2a26a0

package/pages/functions/routes.ts

@@ -0,0 +1,160 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { toUrlPath } from "../../src/paths";
+import { isValidIdentifier, normalizeIdentifier } from "./identifiers";
+import type { UrlPath } from "../../src/paths";
+
+export const HTTP_METHODS = [
+  "HEAD",
+  "OPTIONS",
+  "GET",
+  "POST",
+  "PUT",
+  "PATCH",
+  "DELETE",
+] as const;
+export type HTTPMethod = typeof HTTP_METHODS[number];
+export function isHTTPMethod(
+  maybeHTTPMethod: string
+): maybeHTTPMethod is HTTPMethod {
+  return (HTTP_METHODS as readonly string[]).includes(maybeHTTPMethod);
+}
+
+export type RoutesCollection = Array<{
+  routePath: UrlPath;
+  methods: HTTPMethod[];
+  modules: string[];
+  middlewares: string[];
+}>;
+
+export type Config = {
+  routes?: RoutesConfig;
+  schedules?: unknown;
+};
+
+export type RoutesConfig = {
+  [route: UrlPath]: RouteConfig;
+};
+
+export type RouteConfig = {
+  middleware?: string | string[];
+  module?: string | string[];
+};
+
+type ImportMap = Map<
+  string,
+  {
+    filepath: string;
+    name: string;
+    identifier: string;
+  }
+>;
+
+type Arguments = {
+  config: Config;
+  outfile: string;
+  srcDir: string;
+};
+
+export async function writeRoutesModule({
+  config,
+  srcDir,
+  outfile = "_routes.js",
+}: Arguments) {
+  const { importMap, routes } = parseConfig(config, srcDir);
+  const routesModule = generateRoutesModule(importMap, routes);
+
+  await fs.writeFile(outfile, routesModule);
+
+  return outfile;
+}
+
+export function parseConfig(config: Config, baseDir: string) {
+  const routes: RoutesCollection = [];
+  const importMap: ImportMap = new Map();
+  const identifierCount = new Map<string, number>(); // to keep track of identifier collisions
+
+  function parseModuleIdentifiers(paths: string | string[] | undefined) {
+    if (typeof paths === "undefined") {
+      paths = [];
+    }
+
+    if (typeof paths === "string") {
+      paths = [paths];
+    }
+
+    return paths.map((modulePath) => {
+      const [filepath, name = "default"] = modulePath.split(":");
+      let { identifier } = importMap.get(modulePath) ?? {};
+
+      const resolvedPath = path.resolve(baseDir, filepath);
+
+      // ensure the filepath isn't attempting to resolve to anything outside of the project
+      if (path.relative(baseDir, resolvedPath).startsWith("..")) {
+        throw new Error(`Invalid module path "${filepath}"`);
+      }
+
+      // ensure the module name (if provided) is a valid identifier to guard against injection attacks
+      if (name !== "default" && !isValidIdentifier(name)) {
+        throw new Error(`Invalid module identifier "${name}"`);
+      }
+
+      if (!identifier) {
+        identifier = normalizeIdentifier(`__${filepath}_${name}`);
+
+        let count = identifierCount.get(identifier) ?? 0;
+        identifierCount.set(identifier, ++count);
+
+        if (count > 1) {
+          identifier += `_${count}`;
+        }
+
+        importMap.set(modulePath, { filepath: resolvedPath, name, identifier });
+      }
+
+      return identifier;
+    });
+  }
+
+  for (const [route, props] of Object.entries(config.routes ?? {})) {
+    let [_methods, routePath] = route.split(" ");
+    if (!routePath) {
+      routePath = _methods;
+      _methods = "";
+    }
+
+    routes.push({
+      routePath: toUrlPath(routePath),
+      methods: _methods.split("|").filter(isHTTPMethod),
+      middlewares: parseModuleIdentifiers(props.middleware),
+      modules: parseModuleIdentifiers(props.module),
+    });
+  }
+
+  return { routes, importMap };
+}
+
+export function generateRoutesModule(
+  importMap: ImportMap,
+  routes: RoutesCollection
+) {
+  return `${[...importMap.values()]
+    .map(
+      ({ filepath, name, identifier }) =>
+        `import { ${name} as ${identifier} } from ${JSON.stringify(filepath)}`
+    )
+    .join("\n")}
+
+export const routes = [
+  ${routes
+    .map(
+      (route) => `  {
+      routePath: "${route.routePath}",
+      methods: ${JSON.stringify(route.methods)},
+      middlewares: [${route.middlewares.join(", ")}],
+      modules: [${route.modules.join(", ")}],
+    },`
+    )
+    .join("\n")}
+  ]`;
+}

package/pages/functions/template-worker.ts

@@ -0,0 +1,136 @@
+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;
+  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;
+  methods: 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, _env: FetchEnv) {
+  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)
+    ) {
+      continue;
+    }
+
+    const routeMatcher = match(route.routePath, { end: false });
+    const matchResult = routeMatcher(requestPath);
+    if (matchResult) {
+      for (const handler of route.middlewares.flat()) {
+        yield {
+          handler,
+          params: matchResult.params as Params,
+        };
+      }
+    }
+  }
+
+  // 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)
+    ) {
+      continue;
+    }
+
+    const routeMatcher = match(route.routePath, { end: true });
+    const matchResult = routeMatcher(requestPath);
+    if (matchResult && route.modules.length) {
+      for (const handler of route.modules.flat()) {
+        yield {
+          handler,
+          params: matchResult.params as Params,
+        };
+      }
+      break;
+    }
+  }
+}
+
+export default {
+  async fetch(request: Request, env: FetchEnv, workerContext: WorkerContext) {
+    const handlerIterator = executeRequest(request, env);
+    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);
+      }
+
+      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 } = result.value;
+        const context = {
+          request: new Request(request.clone()),
+          next,
+          params,
+          data,
+          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
+        );
+      } 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);
+      }
+    };
+
+    try {
+      return next();
+    } catch (err) {
+      return new Response("Internal Error", { status: 500 });
+    }
+  },
+};

package/src/__tests__/dev.test.tsx

@@ -0,0 +1,71 @@
+import { render } from "ink-testing-library";
+import patchConsole from "patch-console";
+import React from "react";
+import Dev from "../dev";
+import type { DevProps } from "../dev";
+
+describe("Dev component", () => {
+  let restoreConsole;
+  beforeEach(() => (restoreConsole = patchConsole(() => {})));
+  afterEach(() => restoreConsole());
+
+  it("should throw if format is service-worker and there is a public directory", () => {
+    const { lastFrame } = renderDev({
+      format: "service-worker",
+      accountId: "some-account-id",
+      public: "some/public/path",
+    });
+    expect(lastFrame()?.split("\n").slice(0, 2).join("\n"))
+      .toMatchInlineSnapshot(`
+      "Something went wrong:
+      Error: You cannot use the service worker format with a \`public\` directory."
+    `);
+  });
+});
+
+/**
+ * Helper function to make it easier to setup and render the `Dev` component.
+ *
+ * All the `Dev` props are optional here, with sensible defaults for testing.
+ */
+function renderDev({
+  name,
+  entry = "some/entry.ts",
+  port,
+  format,
+  accountId,
+  initialMode = "remote",
+  jsxFactory,
+  jsxFragment,
+  bindings = {},
+  public: publicDir,
+  assetPaths,
+  compatibilityDate,
+  compatibilityFlags,
+  usageModel,
+  buildCommand = {},
+  enableLocalPersistence = false,
+  env = undefined,
+}: Partial<DevProps>) {
+  return render(
+    <Dev
+      name={name}
+      entry={entry}
+      env={env}
+      port={port}
+      buildCommand={buildCommand}
+      format={format}
+      initialMode={initialMode}
+      jsxFactory={jsxFactory}
+      jsxFragment={jsxFragment}
+      accountId={accountId}
+      assetPaths={assetPaths}
+      public={publicDir}
+      compatibilityDate={compatibilityDate}
+      compatibilityFlags={compatibilityFlags}
+      usageModel={usageModel}
+      bindings={bindings}
+      enableLocalPersistence={enableLocalPersistence}
+    />
+  );
+}

package/src/__tests__/helpers/cmd-shim.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The typings file available at `@types/cmd-shim` are out of date.
+ */
+module "cmd-shim" {
+  /**
+   *
+   * Create a cmd shim at `to` for the command line program at `from`.
+   *
+   */
+  export default function cmdShim(from: string, to: string): Promise<void>;
+}

package/src/__tests__/helpers/mock-account-id.ts

@@ -0,0 +1,30 @@
+const ORIGINAL_CF_API_TOKEN = process.env.CF_API_TOKEN;
+const ORIGINAL_CF_ACCOUNT_ID = process.env.CF_ACCOUNT_ID;
+
+/**
+ * Mock the API token so that we don't need to read it from user configuration files.
+ */
+export function mockApiToken({
+  apiToken = "some-api-token",
+}: { apiToken?: string } = {}) {
+  beforeEach(() => {
+    process.env.CF_API_TOKEN = apiToken;
+  });
+  afterEach(() => {
+    process.env.CF_API_TOKEN = ORIGINAL_CF_API_TOKEN;
+  });
+}
+
+/**
+ * Mock the current account ID so that we don't need to read it from configuration files.
+ */
+export function mockAccountId({
+  accountId = "some-account-id",
+}: { accountId?: string } = {}) {
+  beforeEach(() => {
+    process.env.CF_ACCOUNT_ID = accountId;
+  });
+  afterEach(() => {
+    process.env.CF_ACCOUNT_ID = ORIGINAL_CF_ACCOUNT_ID;
+  });
+}

package/src/__tests__/helpers/mock-bin.ts

@@ -0,0 +1,33 @@
+import { chmodSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { basename, resolve } from "node:path";
+import cmdShim from "cmd-shim";
+
+const nodeShebang = "#!/usr/bin/env node";
+
+/**
+ * Create a binary file in a temp directory and make it available on the PATH.
+ */
+export async function mockBinary(binaryName: string, code: string) {
+  // Ensure there is a directory to put the mock binary in.
+  const tmpDir = resolve(mkdtempSync(".mock-binary-"));
+
+  // Use a fake extension on Windows because we will create a cmd-shim to run the binary.
+  const extension = process.platform === "win32" ? ".x-mock-bin" : "";
+  const filePath = resolve(tmpDir, `${binaryName}${extension}`);
+  writeFileSync(filePath, nodeShebang + "\n" + code);
+  chmodSync(filePath, 0o777);
+
+  if (process.platform === "win32") {
+    await cmdShim(filePath, basename(filePath, ".x-mock-bin"));
+  }
+
+  // Update PATH using the appropriate separator for the platform.
+  const oldPath = process.env.PATH;
+  const sep = process.platform === "win32" ? ";" : ":";
+  process.env.PATH = tmpDir + sep + oldPath;
+
+  return function unMock() {
+    rmSync(tmpDir, { recursive: true });
+    process.env.PATH = process.env.PATH?.replace(tmpDir + sep, "");
+  };
+}

package/src/__tests__/helpers/mock-cfetch.ts

@@ -0,0 +1,207 @@
+import { URL, URLSearchParams } from "node:url";
+import { pathToRegexp } from "path-to-regexp";
+import { CF_API_BASE_URL } from "../../cfetch";
+import type { FetchResult } from "../../cfetch";
+import type { RequestInit } from "undici";
+
+/**
+ * The signature of the function that will handle a mock request.
+ */
+export type MockHandler<ResponseType> = (
+  uri: RegExpExecArray,
+  init: RequestInit,
+  queryParams: URLSearchParams
+) => ResponseType | Promise<ResponseType>;
+
+type RemoveMockFn = () => void;
+
+interface MockFetch<ResponseType> {
+  regexp: RegExp;
+  method: string | undefined;
+  handler: MockHandler<ResponseType>;
+}
+const mocks: MockFetch<unknown>[] = [];
+
+/**
+ * The mock implementation of `cfApi.fetch()`.
+ *
+ * This function will attempt to match the given request to one of the mock handlers configured by calls to `setMock`.
+ *
+ * Once found the handler will be used to generate a mock response.
+ */
+export async function mockFetchInternal(
+  resource: string,
+  init: RequestInit = {},
+  queryParams: URLSearchParams = new URLSearchParams()
+) {
+  for (const { regexp, method, handler } of mocks) {
+    const resourcePath = new URL(resource, CF_API_BASE_URL).pathname;
+    const uri = regexp.exec(resourcePath);
+    // Do the resource path and (if specified) the HTTP method match?
+    if (uri !== null && (!method || method === (init.method ?? "GET"))) {
+      // The `resource` regular expression will extract the labelled groups from the URL.
+      // These are passed through to the `handler` call, to allow it to do additional checks or behaviour.
+      return await handler(uri, init, queryParams); // TODO: should we have some kind of fallthrough system? we'll see.
+    }
+  }
+  throw new Error(
+    `no mocks found for ${init.method ?? "any HTTP"} request to ${resource}`
+  );
+}
+
+/**
+ * Specify an expected resource path that is to be handled, resulting in a raw JSON response.
+ *
+ * @param resource The path of the resource to be matched.
+ * This can include wildcards whose value will be passed to the `handler`.
+ * @param handler The function that will generate the mock response for this request.
+ */
+export function setMockRawResponse<ResponseType>(
+  resource: string,
+  handler: MockHandler<ResponseType>
+): RemoveMockFn;
+/**
+ * Specify an expected resource path that is to be handled, resulting in a raw JSON response.
+ *
+ * @param resource The path of the resource to be matched.
+ * This can include wildcards whose value will be passed to the `handler`.
+ * @param method The HTTP method (e.g. GET, POST, etc) that the request must have to match this mock handler.
+ * @param handler The function that will generate the mock response for this request.
+ */
+export function setMockRawResponse<ResponseType>(
+  resource: string,
+  method: string,
+  handler: MockHandler<ResponseType>
+): RemoveMockFn;
+/**
+ * Specify an expected resource path that is to be handled, resulting in a raw JSON response.
+ */
+export function setMockRawResponse<ResponseType>(
+  resource: string,
+  ...args: [string, MockHandler<ResponseType>] | [MockHandler<ResponseType>]
+): RemoveMockFn {
+  const handler = args.pop() as MockHandler<ResponseType>;
+  const method = args.pop() as string;
+  const mock = {
+    resource,
+    method,
+    handler,
+    regexp: pathToRegexp(resource),
+  };
+  mocks.push(mock);
+  return () => {
+    const mockIndex = mocks.indexOf(mock);
+    if (mockIndex !== -1) {
+      mocks.splice(mockIndex, 1);
+    }
+  };
+}
+
+/**
+ * Specify an expected resource path that is to be handled, resulting in a `FetchRequest`.
+ *
+ * The mock `handler` should return the `result`, which will then be wrapped in a `FetchRequest` object.
+ *
+ * @param resource The path of the resource to be matched.
+ * This can include wildcards whose value will be passed to the `handler`.
+ * @param handler The function that will generate the mock response for this request.
+ */
+export function setMockResponse<ResponseType>(
+  resource: string,
+  handler: MockHandler<ResponseType>
+): RemoveMockFn;
+/**
+ * Specify an expected resource path that is to be handled, resulting in a FetchRequest..
+ *
+ * @param resource The path of the resource to be matched.
+ * This can include wildcards whose value will be passed to the `handler`.
+ * @param method The HTTP method (e.g. GET, POST, etc) that the request must have to match this mock handler.
+ * @param handler The function that will generate the mock response for this request.
+ */
+export function setMockResponse<ResponseType>(
+  resource: string,
+  method: string,
+  handler: MockHandler<ResponseType>
+): RemoveMockFn;
+/**
+ * Specify an expected resource path that is to be handled, resulting in a FetchRequest.
+ */
+export function setMockResponse<ResponseType>(
+  resource: string,
+  ...args: [string, MockHandler<ResponseType>] | [MockHandler<ResponseType>]
+): RemoveMockFn {
+  const handler = args.pop() as MockHandler<ResponseType>;
+  const method = args.pop() as string;
+  return setMockRawResponse(resource, method, (...handlerArgs) =>
+    createFetchResult(handler(...handlerArgs))
+  );
+}
+
+/**
+ * A helper to make it easier to create `FetchResult` objects in tests.
+ */
+export async function createFetchResult<ResponseType>(
+  result: ResponseType | Promise<ResponseType>,
+  success = true,
+  errors = [],
+  messages = [],
+  result_info?: unknown
+): Promise<FetchResult<ResponseType>> {
+  return result_info
+    ? {
+        result: await result,
+        success,
+        errors,
+        messages,
+        result_info,
+      }
+    : {
+        result: await result,
+        success,
+        errors,
+        messages,
+      };
+}
+
+/**
+ * Remove all the configured mock handlers.
+ *
+ * This should be called in an `afterEach()` block to ensure that mock handlers do not leak between tests.
+ */
+export function unsetAllMocks() {
+  mocks.length = 0;
+}
+
+/**
+ * We special-case fetching the request for `kv:key get`, because it's
+ * the only cloudflare API endpoint that returns a plain string as the
+ * value, and not as the "standard" FetchResult-style json. Hence, we also
+ * special-case mocking it here.
+ */
+
+const kvGetMocks = new Map<string, string>();
+
+export function mockFetchKVGetValue(
+  accountId: string,
+  namespaceId: string,
+  key: string
+) {
+  const mapKey = `${accountId}/${namespaceId}/${key}`;
+  if (kvGetMocks.has(mapKey)) {
+    return kvGetMocks.get(mapKey);
+  }
+  throw new Error(`no mock value found for \`kv:key get\` - ${mapKey}`);
+}
+
+export function setMockFetchKVGetValue(
+  accountId: string,
+  namespaceId: string,
+  key: string,
+  value: string
+) {
+  kvGetMocks.set(`${accountId}/${namespaceId}/${key}`, value);
+}
+
+export function unsetMockFetchKVGetValues() {
+  kvGetMocks.clear();
+}