wrangler 0.0.7 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wrangler",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "author": "wrangler@cloudflare.com",
   "description": "Command-line interface for all things Cloudflare Workers",
   "bin": {
@@ -37,7 +37,7 @@
   ],
   "dependencies": {
     "esbuild": "0.14.1",
-    "miniflare": "2.0.0-rc.5",
+    "miniflare": "2.0.0",
     "path-to-regexp": "^6.2.0",
     "semiver": "^1.1.0"
   },
@@ -47,8 +47,8 @@
   "devDependencies": {
     "@babel/types": "^7.16.0",
     "@iarna/toml": "^2.2.5",
-    "@types/mime": "^2.0.3",
     "@types/estree": "^0.0.50",
+    "@types/mime": "^2.0.3",
     "@types/react": "^17.0.37",
     "@types/serve-static": "^1.13.10",
     "@types/signal-exit": "^3.0.1",
@@ -59,6 +59,7 @@
     "chokidar": "^3.5.2",
     "clipboardy": "^3.0.0",
     "command-exists": "^1.2.9",
+    "devtools-protocol": "^0.0.955664",
     "execa": "^6.0.0",
     "faye-websocket": "^0.11.4",
     "finalhandler": "^1.1.2",
@@ -67,6 +68,7 @@
     "ink": "^3.2.0",
     "ink-select-input": "^4.2.1",
     "ink-table": "^3.0.0",
+    "ink-testing-library": "^2.1.0",
     "ink-text-input": "^4.0.2",
     "mime": "^3.0.0",
     "node-fetch": "^3.1.0",

package/pages/functions/buildWorker.ts

@@ -6,6 +6,7 @@ type Options = {
   outfile: string;
   minify?: boolean;
   sourcemap?: boolean;
+  fallbackService?: string;
   watch?: boolean;
   onEnd?: () => void;
 };
@@ -15,6 +16,7 @@ export function buildWorker({
   outfile = "bundle.js",
   minify = false,
   sourcemap = false,
+  fallbackService = "ASSETS",
   watch = false,
   onEnd = () => {},
 }: Options) {
@@ -31,6 +33,9 @@ export function buildWorker({
     sourcemap,
     watch,
     allowOverwrite: true,
+    define: {
+      __FALLBACK_SERVICE__: JSON.stringify(fallbackService),
+    },
     plugins: [
       {
         name: "wrangler notifier and monitor",

package/pages/functions/filepath-routing.test.ts

@@ -1,8 +1,15 @@
 import { compareRoutes } from "./filepath-routing";
 
 describe("compareRoutes()", () => {
+  test("routes / last", () => {
+    expect(compareRoutes("/", "/foo")).toBeGreaterThanOrEqual(1);
+    expect(compareRoutes("/", "/:foo")).toBeGreaterThanOrEqual(1);
+    expect(compareRoutes("/", "/:foo*")).toBeGreaterThanOrEqual(1);
+  });
+
   test("routes with fewer segments come after those with more segments", () => {
-    expect(compareRoutes("/foo", "/foo/bar")).toBe(1);
+    expect(compareRoutes("/foo", "/foo/bar")).toBeGreaterThanOrEqual(1);
+    expect(compareRoutes("/foo", "/foo/bar/cat")).toBeGreaterThanOrEqual(1);
   });
 
   test("routes with wildcard segments come after those without", () => {

package/pages/functions/filepath-routing.ts

@@ -3,9 +3,8 @@ import fs from "fs/promises";
 import { transform } from "esbuild";
 import * as acorn from "acorn";
 import * as acornWalk from "acorn-walk";
-import type { Config } from "./routes";
-import type { Identifier } from "estree";
-import type { ExportNamedDeclaration } from "@babel/types";
+import type { Config, RouteConfig } from "./routes";
+import type { ExportNamedDeclaration, Identifier } from "estree";
 
 type Arguments = {
   baseDir: string;
@@ -16,10 +15,7 @@ export async function generateConfigFromFileTree({
   baseDir,
   baseURL,
 }: Arguments) {
-  let routeEntries: [
-    string,
-    { [key in "module" | "middleware"]?: string[] }
-  ][] = [] as any;
+  let routeEntries: [string, RouteConfig][] = [];
 
   if (!baseURL.startsWith("/")) {
     baseURL = `/${baseURL}`;
@@ -31,7 +27,7 @@ export async function generateConfigFromFileTree({
 
   await forEachFile(baseDir, async (filepath) => {
     const ext = path.extname(filepath);
-    if (/\.(mjs|js|ts)/.test(ext)) {
+    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",
@@ -43,8 +39,10 @@ export async function generateConfigFromFileTree({
         sourceType: "module",
       });
       acornWalk.simple(ast, {
-        ExportNamedDeclaration(_node) {
-          const node: ExportNamedDeclaration = _node as any;
+        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"`
@@ -164,7 +162,7 @@ export function compareRoutes(a: string, b: string) {
       method = null;
     }
 
-    const segments = segmentedPath.slice(1).split("/");
+    const segments = segmentedPath.slice(1).split("/").filter(Boolean);
     return [method, segments];
   }
 

package/pages/functions/identifiers.ts

@@ -68,7 +68,7 @@ export const validIdentifierRegex = new RegExp(
   "u"
 );
 
-export const isValidIdentifer = (identifier: string) =>
+export const isValidIdentifier = (identifier: string) =>
   validIdentifierRegex.test(identifier);
 
 export const normalizeIdentifier = (identifier: string) =>

package/pages/functions/routes.ts

@@ -1,6 +1,6 @@
 import path from "path";
 import fs from "fs/promises";
-import { isValidIdentifer, normalizeIdentifier } from "./identifiers";
+import { isValidIdentifier, normalizeIdentifier } from "./identifiers";
 
 export const HTTP_METHODS = [
   "HEAD",
@@ -15,7 +15,7 @@ export type HTTPMethod = typeof HTTP_METHODS[number];
 export function isHTTPMethod(
   maybeHTTPMethod: string
 ): maybeHTTPMethod is HTTPMethod {
-  return HTTP_METHODS.includes(maybeHTTPMethod as any);
+  return (HTTP_METHODS as readonly string[]).includes(maybeHTTPMethod);
 }
 
 export type RoutesCollection = Array<{
@@ -27,14 +27,16 @@ export type RoutesCollection = Array<{
 
 export type Config = {
   routes?: RoutesConfig;
-  schedules?: any;
+  schedules?: unknown;
 };
 
 export type RoutesConfig = {
-  [route: string]: {
-    middleware?: string | string[];
-    module?: string | string[];
-  };
+  [route: string]: RouteConfig;
+};
+
+export type RouteConfig = {
+  middleware?: string | string[];
+  module?: string | string[];
 };
 
 type ImportMap = Map<
@@ -91,7 +93,7 @@ export function parseConfig(config: Config, baseDir: string) {
       }
 
       // ensure the module name (if provided) is a valid identifier to guard against injection attacks
-      if (name !== "default" && !isValidIdentifer(name)) {
+      if (name !== "default" && !isValidIdentifier(name)) {
         throw new Error(`Invalid module identifier "${name}"`);
       }
 

package/pages/functions/template-worker.ts

@@ -2,11 +2,11 @@ import { match } from "path-to-regexp";
 import type { HTTPMethod } from "./routes";
 
 /* TODO: Grab these from @cloudflare/workers-types instead */
-type Params<P extends string = any> = Record<P, string | string[]>;
+type Params<P extends string = string> = Record<P, string | string[]>;
 
 type EventContext<Env, P extends string, Data> = {
   request: Request;
-  waitUntil: (promise: Promise<any>) => void;
+  waitUntil: (promise: Promise<unknown>) => void;
   next: (input?: Request | string, init?: RequestInit) => Promise<Response>;
   env: Env & { ASSETS: { fetch: typeof fetch } };
   params: Params<P>;
@@ -15,7 +15,7 @@ type EventContext<Env, P extends string, Data> = {
 
 declare type PagesFunction<
   Env = unknown,
-  P extends string = any,
+  P extends string = string,
   Data extends Record<string, unknown> = Record<string, unknown>
 > = (context: EventContext<Env, P, Data>) => Response | Promise<Response>;
 /* end @cloudflare/workers-types */
@@ -29,22 +29,25 @@ type RouteHandler = {
 
 // 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 Env = {
-  [name: string]: any;
+  [name: string]: unknown;
   ASSETS: { fetch(url: string, init: RequestInit): Promise<Response> };
 };
 
 type WorkerContext = {
-  waitUntil: (promise: Promise<any>) => void;
+  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) {
   const requestPath = new URL(request.url).pathname;
 
-  // First, iterate through the routes and execute "middlewares" on partial route matches
-  for (const route of routes) {
+  // 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)
@@ -86,9 +89,13 @@ function* executeRequest(request: Request, env: Env) {
     }
   }
 
-  // Finally, yield to the asset-server
+  // Finally, yield to the fallback service (`env.ASSETS.fetch` in Pages' case)
   return {
-    handler: () => env.ASSETS.fetch(request.url, request),
+    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,
   };
 }
@@ -105,7 +112,11 @@ export default {
       const { value } = handlerIterator.next();
       if (value) {
         const { handler, params } = value;
-        const context: EventContext<unknown, any, any> = {
+        const context: EventContext<
+          unknown,
+          string,
+          Record<string, unknown>
+        > = {
           request: new Request(request.clone()),
           next,
           params,

package/src/__tests__/dev.test.tsx

@@ -0,0 +1,66 @@
+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()).toMatchInlineSnapshot(`
+      "Something went wrong:
+      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,
+  site,
+  compatibilityDate,
+  compatibilityFlags,
+  usageModel,
+  buildCommand = {},
+}: Partial<DevProps>) {
+  return render(
+    <Dev
+      name={name}
+      entry={entry}
+      port={port}
+      buildCommand={buildCommand}
+      format={format}
+      initialMode={initialMode}
+      jsxFactory={jsxFactory}
+      jsxFragment={jsxFragment}
+      accountId={accountId}
+      site={site}
+      public={publicDir}
+      compatibilityDate={compatibilityDate}
+      compatibilityFlags={compatibilityFlags}
+      usageModel={usageModel}
+      bindings={bindings}
+    />
+  );
+}

package/src/__tests__/jest.setup.ts

@@ -1,6 +1,10 @@
+import { mockFetchInternal } from "./mock-cfetch";
 import { confirm, prompt } from "../dialogs";
+import { fetchInternal } from "../cfetch/internal";
+
+jest.mock("../cfetch/internal");
+(fetchInternal as jest.Mock).mockImplementation(mockFetchInternal);
 
-jest.mock("../cfetch", () => jest.requireActual("./mock-cfetch"));
 jest.mock("../dialogs");
 
 // By default (if not configured by mockConfirm()) calls to `confirm()` should throw.