wrangler 0.0.0-e2a26a0 → 0.0.0-e322475

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wrangler",
-  "version": "0.0.0-e2a26a0",
+  "version": "0.0.0-e322475",
   "author": "wrangler@cloudflare.com",
   "description": "Command-line interface for all things Cloudflare Workers",
   "bin": {
@@ -9,9 +9,9 @@
   },
   "license": "MIT OR Apache-2.0",
   "bugs": {
-    "url": "https://github.com/cloudflare/wrangler/issues"
+    "url": "https://github.com/cloudflare/wrangler2/issues"
   },
-  "homepage": "https://github.com/cloudflare/wrangler#readme",
+  "homepage": "https://github.com/cloudflare/wrangler2#readme",
   "keywords": [
     "wrangler",
     "cloudflare",
@@ -36,69 +36,95 @@
     "cli"
   ],
   "dependencies": {
-    "esbuild": "0.14.14",
-    "miniflare": "2.2.0",
+    "@cloudflare/kv-asset-handler": "^0.2.0",
+    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
+    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
+    "blake3-wasm": "^2.1.5",
+    "esbuild": "0.14.34",
+    "miniflare": "^2.5.1",
+    "nanoid": "^3.3.3",
     "path-to-regexp": "^6.2.0",
+    "selfsigned": "^2.0.1",
     "semiver": "^1.1.0",
-    "xxhash-addon": "^1.4.0"
+    "xxhash-wasm": "^1.0.1"
   },
   "optionalDependencies": {
     "fsevents": "~2.3.2"
   },
   "devDependencies": {
-    "@babel/types": "^7.16.0",
-    "@iarna/toml": "^2.2.5",
-    "@types/estree": "^0.0.50",
+    "@iarna/toml": "^3.0.0",
+    "@types/command-exists": "^1.2.0",
+    "@types/glob-to-regexp": "0.4.1",
     "@types/mime": "^2.0.3",
+    "@types/prompts": "^2.0.14",
     "@types/react": "^17.0.37",
     "@types/serve-static": "^1.13.10",
     "@types/signal-exit": "^3.0.1",
-    "@types/ws": "^8.2.1",
-    "@types/yargs": "^17.0.7",
-    "acorn": "^8.6.0",
-    "acorn-walk": "^8.2.0",
-    "chokidar": "^3.5.2",
+    "@types/supports-color": "^8.1.1",
+    "@types/ws": "^8.5.3",
+    "@types/yargs": "^17.0.10",
+    "@webcontainer/env": "^1.0.1",
+    "chokidar": "^3.5.3",
     "clipboardy": "^3.0.0",
     "cmd-shim": "^4.1.0",
     "command-exists": "^1.2.9",
+    "concurrently": "^7.2.2",
     "devtools-protocol": "^0.0.955664",
-    "execa": "^6.0.0",
+    "dotenv": "^16.0.0",
+    "execa": "^6.1.0",
     "faye-websocket": "^0.11.4",
-    "finalhandler": "^1.1.2",
-    "find-up": "^6.2.0",
+    "finalhandler": "^1.2.0",
+    "find-up": "^6.3.0",
+    "get-port": "^6.1.2",
+    "glob-to-regexp": "0.4.1",
+    "http-terminator": "^3.2.0",
     "ignore": "^5.2.0",
     "ink": "^3.2.0",
     "ink-select-input": "^4.2.1",
+    "ink-spinner": "^4.0.3",
     "ink-table": "^3.0.0",
     "ink-testing-library": "^2.1.0",
-    "ink-text-input": "^4.0.2",
+    "ink-text-input": "^4.0.3",
     "jest-fetch-mock": "^3.0.3",
+    "jest-websocket-mock": "^2.3.0",
     "mime": "^3.0.0",
     "open": "^8.4.0",
+    "p-queue": "^7.2.0",
+    "pretty-bytes": "^6.0.0",
+    "prompts": "^2.4.2",
     "react": "^17.0.2",
     "react-error-boundary": "^3.1.4",
-    "serve-static": "^1.14.1",
-    "signal-exit": "^3.0.6",
+    "serve-static": "^1.15.0",
+    "signal-exit": "^3.0.7",
+    "supports-color": "^9.2.2",
+    "timeago.js": "^4.0.2",
     "tmp-promise": "^3.0.3",
-    "undici": "4.13.0",
-    "ws": "^8.3.0",
-    "yargs": "^17.3.0"
+    "ts-dedent": "^2.2.0",
+    "undici": "^5.5.1",
+    "update-check": "^1.5.4",
+    "ws": "^8.5.0",
+    "yargs": "^17.4.1"
   },
   "files": [
     "src",
     "bin",
     "pages",
     "miniflare-config-stubs",
+    "miniflare-dist",
     "wrangler-dist",
     "templates",
     "vendor",
-    "import_meta_url.js"
+    "import_meta_url.js",
+    "kv-asset-handler.js",
+    "Cloudflare_CA.pem"
   ],
   "scripts": {
-    "clean": "rm -rf wrangler-dist",
+    "clean": "rm -rf wrangler-dist miniflare-dist",
     "check:type": "tsc",
     "bundle": "node -r esbuild-register scripts/bundle.ts",
     "build": "npm run clean && npm run bundle",
+    "dev": "npm run clean && concurrently -c black,blue 'npm run bundle -- --watch' 'npm run check:type -- --watch --preserveWatchOutput'",
+    "prepublishOnly": "SOURCEMAPS=false npm run build",
     "start": "npm run bundle && NODE_OPTIONS=--enable-source-maps ./bin/wrangler.js",
     "test": "jest --silent=false --verbose=true",
     "test-watch": "npm run test -- --runInBand --testTimeout=50000 --watch"
@@ -111,10 +137,11 @@
     "testTimeout": 30000,
     "testRegex": ".*.(test|spec)\\.[jt]sx?$",
     "transformIgnorePatterns": [
-      "node_modules/(?!find-up|locate-path|p-locate|p-limit|yocto-queue|path-exists|execa|strip-final-newline|npm-run-path|path-key|onetime|mimic-fn|human-signals|is-stream)"
+      "node_modules/(?!find-up|locate-path|p-locate|p-limit|p-timeout|p-queue|yocto-queue|path-exists|execa|strip-final-newline|npm-run-path|path-key|onetime|mimic-fn|human-signals|is-stream|get-port|supports-color|pretty-bytes)"
     ],
     "moduleNameMapper": {
-      "clipboardy": "<rootDir>/src/__tests__/helpers/clipboardy-mock.js"
+      "clipboardy": "<rootDir>/src/__tests__/helpers/clipboardy-mock.js",
+      "miniflare/cli": "<rootDir>/../../node_modules/miniflare/dist/src/cli.js"
     },
     "transform": {
       "^.+\\.c?(t|j)sx?$": [

package/pages/functions/buildPlugin.ts

@@ -0,0 +1,105 @@
+import { access, lstat } from "node:fs/promises";
+import { dirname, relative, resolve } from "node:path";
+import NodeGlobalsPolyfills from "@esbuild-plugins/node-globals-polyfill";
+import NodeModulesPolyfills from "@esbuild-plugins/node-modules-polyfill";
+import { build } from "esbuild";
+
+type Options = {
+  routesModule: string;
+  outfile: string;
+  minify?: boolean;
+  sourcemap?: boolean;
+  watch?: boolean;
+  nodeCompat?: boolean;
+  onEnd?: () => void;
+};
+
+export function buildPlugin({
+  routesModule,
+  outfile = "bundle.js",
+  minify = false,
+  sourcemap = false,
+  watch = false,
+  nodeCompat,
+  onEnd = () => {},
+}: Options) {
+  return build({
+    entryPoints: [resolve(__dirname, "../pages/functions/template-plugin.ts")],
+    inject: [routesModule],
+    bundle: true,
+    format: "esm",
+    target: "esnext",
+    outfile,
+    minify,
+    sourcemap,
+    watch,
+    allowOverwrite: true,
+    define: { ...(nodeCompat ? { global: "globalThis" } : {}) },
+    plugins: [
+      {
+        name: "wrangler notifier and monitor",
+        setup(pluginBuild) {
+          pluginBuild.onEnd((result) => {
+            if (result.errors.length > 0) {
+              console.error(
+                `${result.errors.length} error(s) and ${result.warnings.length} warning(s) when compiling Worker.`
+              );
+            } else if (result.warnings.length > 0) {
+              console.warn(
+                `${result.warnings.length} warning(s) when compiling Worker.`
+              );
+              onEnd();
+            } else {
+              console.log("Compiled Worker successfully.");
+              onEnd();
+            }
+          });
+        },
+      },
+      {
+        name: "Assets",
+        setup(pluginBuild) {
+          if (pluginBuild.initialOptions.outfile) {
+            const outdir = dirname(pluginBuild.initialOptions.outfile);
+
+            pluginBuild.onResolve({ filter: /^assets:/ }, async (args) => {
+              const directory = resolve(
+                args.resolveDir,
+                args.path.slice("assets:".length)
+              );
+
+              const exists = await access(directory)
+                .then(() => true)
+                .catch(() => false);
+
+              const isDirectory =
+                exists && (await lstat(directory)).isDirectory();
+
+              if (!isDirectory) {
+                return {
+                  errors: [
+                    {
+                      text: `'${directory}' does not exist or is not a directory.`,
+                    },
+                  ],
+                };
+              }
+
+              const path = `assets:./${relative(outdir, directory)}`;
+
+              return { path, external: true, namespace: "assets" };
+            });
+          }
+        },
+      },
+      ...(nodeCompat
+        ? [
+            NodeGlobalsPolyfills({
+              buffer: true,
+            }),
+            NodeModulesPolyfills(),
+          ]
+        : []),
+    ],
+  });
+}

package/pages/functions/buildWorker.ts

@@ -1,5 +1,9 @@
-import path from "node:path";
+import { access, cp, lstat, rm } from "node:fs/promises";
+import { join, resolve } from "node:path";
+import NodeGlobalsPolyfills from "@esbuild-plugins/node-globals-polyfill";
+import NodeModulesPolyfills from "@esbuild-plugins/node-modules-polyfill";
 import { build } from "esbuild";
+import { nanoid } from "nanoid";
 
 type Options = {
   routesModule: string;
@@ -9,6 +13,8 @@ type Options = {
   fallbackService?: string;
   watch?: boolean;
   onEnd?: () => void;
+  buildOutputDirectory?: string;
+  nodeCompat?: boolean;
 };
 
 export function buildWorker({
@@ -19,11 +25,11 @@ export function buildWorker({
   fallbackService = "ASSETS",
   watch = false,
   onEnd = () => {},
+  buildOutputDirectory,
+  nodeCompat,
 }: Options) {
   return build({
-    entryPoints: [
-      path.resolve(__dirname, "../pages/functions/template-worker.ts"),
-    ],
+    entryPoints: [resolve(__dirname, "../pages/functions/template-worker.ts")],
     inject: [routesModule],
     bundle: true,
     format: "esm",
@@ -35,6 +41,7 @@ export function buildWorker({
     allowOverwrite: true,
     define: {
       __FALLBACK_SERVICE__: JSON.stringify(fallbackService),
+      ...(nodeCompat ? { global: "globalThis" } : {}),
     },
     plugins: [
       {
@@ -57,6 +64,88 @@ export function buildWorker({
           });
         },
       },
+      {
+        name: "Assets",
+        setup(pluginBuild) {
+          const identifiers = new Map<string, string>();
+
+          pluginBuild.onResolve({ filter: /^assets:/ }, async (args) => {
+            const directory = resolve(
+              args.resolveDir,
+              args.path.slice("assets:".length)
+            );
+
+            const exists = await access(directory)
+              .then(() => true)
+              .catch(() => false);
+
+            const isDirectory =
+              exists && (await lstat(directory)).isDirectory();
+
+            if (!isDirectory) {
+              return {
+                errors: [
+                  {
+                    text: `'${directory}' does not exist or is not a directory.`,
+                  },
+                ],
+              };
+            }
+
+            // TODO: Consider hashing the contents rather than using a unique identifier every time?
+            identifiers.set(directory, nanoid());
+            if (!buildOutputDirectory) {
+              console.warn(
+                "You're attempting to import static assets as part of your Pages Functions, but have not specified a directory in which to put them. You must use 'wrangler pages dev <directory>' rather than 'wrangler pages dev -- <command>' to import static assets in Functions."
+              );
+            }
+            return { path: directory, namespace: "assets" };
+          });
+
+          pluginBuild.onLoad(
+            { filter: /.*/, namespace: "assets" },
+            async (args) => {
+              const identifier = identifiers.get(args.path);
+
+              if (buildOutputDirectory) {
+                const staticAssetsOutputDirectory = join(
+                  buildOutputDirectory,
+                  "cdn-cgi",
+                  "pages-plugins",
+                  identifier as string
+                );
+                await rm(staticAssetsOutputDirectory, {
+                  force: true,
+                  recursive: true,
+                });
+                await cp(args.path, staticAssetsOutputDirectory, {
+                  force: true,
+                  recursive: true,
+                });
+
+                return {
+                  // TODO: Watch args.path for changes and re-copy when updated
+                  contents: `export const onRequest = ({ request, env, functionPath }) => {
+                    const url = new URL(request.url)
+                    const relativePathname = \`/\${url.pathname.split(functionPath)[1] || ''}\`.replace(/^\\/\\//, '/');
+                    url.pathname = '/cdn-cgi/pages-plugins/${identifier}' + relativePathname
+                    request = new Request(url.toString(), request)
+                    return env.ASSETS.fetch(request)
+                  }`,
+                };
+              }
+            }
+          );
+        },
+      },
+      ...(nodeCompat
+        ? [
+            NodeGlobalsPolyfills({
+              buffer: true,
+            }),
+            NodeModulesPolyfills(),
+          ]
+        : []),
     ],
   });
 }

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

@@ -1,47 +1,234 @@
+import { writeFileSync, mkdirSync } from "fs";
+import { runInTempDir } from "../../src/__tests__/helpers/run-in-tmp";
 import { toUrlPath } from "../../src/paths";
-import { compareRoutes } from "./filepath-routing";
-
-describe("compareRoutes()", () => {
-  const url = toUrlPath;
-  test("routes / last", () => {
-    expect(compareRoutes([url("/")], [url("/foo")])).toBeGreaterThanOrEqual(1);
-    expect(compareRoutes([url("/")], [url("/:foo")])).toBeGreaterThanOrEqual(1);
-    expect(compareRoutes([url("/")], [url("/:foo*")])).toBeGreaterThanOrEqual(
-      1
-    );
-  });
+import { compareRoutes, generateConfigFromFileTree } from "./filepath-routing";
+import type { UrlPath } from "../../src/paths";
+import type { HTTPMethod, RouteConfig } from "./routes";
 
-  test("routes with fewer segments come after those with more segments", () => {
-    expect(
-      compareRoutes([url("/foo")], [url("/foo/bar")])
-    ).toBeGreaterThanOrEqual(1);
-    expect(
-      compareRoutes([url("/foo")], [url("/foo/bar/cat")])
-    ).toBeGreaterThanOrEqual(1);
-  });
+describe("filepath-routing", () => {
+  describe("compareRoutes()", () => {
+    test("routes / last", () => {
+      expect(
+        compareRoutes(routeConfig("/"), routeConfig("/foo"))
+      ).toBeGreaterThanOrEqual(1);
+      expect(
+        compareRoutes(routeConfig("/"), routeConfig("/:foo"))
+      ).toBeGreaterThanOrEqual(1);
+      expect(
+        compareRoutes(routeConfig("/"), routeConfig("/:foo*"))
+      ).toBeGreaterThanOrEqual(1);
+    });
 
-  test("routes with wildcard segments come after those without", () => {
-    expect(compareRoutes([url("/:foo*")], [url("/foo")])).toBe(1);
-    expect(compareRoutes([url("/:foo*")], [url("/:foo")])).toBe(1);
-  });
+    test("routes with fewer segments come after those with more segments", () => {
+      expect(
+        compareRoutes(routeConfig("/foo"), routeConfig("/foo/bar"))
+      ).toBeGreaterThanOrEqual(1);
+      expect(
+        compareRoutes(routeConfig("/foo"), routeConfig("/foo/bar/cat"))
+      ).toBeGreaterThanOrEqual(1);
+    });
 
-  test("routes with dynamic segments come after those without", () => {
-    expect(compareRoutes([url("/:foo")], [url("/foo")])).toBe(1);
-  });
+    test("routes with wildcard segments come after those without", () => {
+      expect(compareRoutes(routeConfig("/:foo*"), routeConfig("/foo"))).toBe(1);
+      expect(compareRoutes(routeConfig("/:foo*"), routeConfig("/:foo"))).toBe(
+        1
+      );
+    });
 
-  test("routes with dynamic segments occurring earlier come after those with dynamic segments in later positions", () => {
-    expect(compareRoutes([url("/foo/:id/bar")], [url("/foo/bar/:id")])).toBe(1);
-  });
+    test("routes with dynamic segments come after those without", () => {
+      expect(compareRoutes(routeConfig("/:foo"), routeConfig("/foo"))).toBe(1);
+    });
 
-  test("routes with no HTTP method come after those specifying a method", () => {
-    expect(compareRoutes([url("/foo")], [url("/foo"), "GET"])).toBe(1);
-  });
+    test("routes with dynamic segments occurring earlier come after those with dynamic segments in later positions", () => {
+      expect(
+        compareRoutes(routeConfig("/foo/:id/bar"), routeConfig("/foo/bar/:id"))
+      ).toBe(1);
+    });
+
+    test("routes with no HTTP method come after those specifying a method", () => {
+      expect(
+        compareRoutes(routeConfig("/foo"), routeConfig("/foo", "GET"))
+      ).toBe(1);
+    });
+
+    test("two equal routes are sorted according to their original position in the list", () => {
+      expect(
+        compareRoutes(routeConfig("/foo", "GET"), routeConfig("/foo", "GET"))
+      ).toBe(0);
+    });
 
-  test("two equal routes are sorted according to their original position in the list", () => {
-    expect(compareRoutes([url("/foo"), "GET"], [url("/foo"), "GET"])).toBe(0);
+    test("it returns -1 if the first argument should appear first in the list", () => {
+      expect(
+        compareRoutes(routeConfig("/foo", "GET"), routeConfig("/foo"))
+      ).toBe(-1);
+    });
   });
 
-  test("it returns -1 if the first argument should appear first in the list", () => {
-    expect(compareRoutes([url("/foo"), "GET"], [url("/foo")])).toBe(-1);
+  describe("generateConfigFromFileTree", () => {
+    runInTempDir();
+
+    it("should generate a route entry for each file in the tree", async () => {
+      writeFileSync(
+        "foo.ts",
+        `
+      export function onRequestGet() {}
+      export function onRequestPost() {}
+      `
+      );
+      writeFileSync(
+        "bar.ts",
+        `
+      export function onRequestPut() {}
+      export function onRequestDelete() {}
+      `
+      );
+
+      mkdirSync("todos");
+
+      writeFileSync(
+        "todos/[id].ts",
+        `
+      export function onRequestPost() {}
+      export function onRequestDelete() {}
+      `
+      );
+
+      mkdirSync("authors");
+      mkdirSync("authors/[authorId]");
+      mkdirSync("authors/[authorId]/todos");
+
+      writeFileSync(
+        "authors/[authorId]/todos/[todoId].ts",
+        `
+      export function onRequestPost() {}
+      `
+      );
+
+      mkdirSync("books");
+
+      writeFileSync(
+        "books/[[title]].ts",
+        `
+      export function onRequestPost() {}
+      `
+      );
+
+      mkdirSync("cats");
+      mkdirSync("cats/[[breed]]");
+
+      writeFileSync(
+        "cats/[[breed]]/blah.ts",
+        `
+      export function onRequestPost() {}
+      `
+      );
+
+      // This won't actually work at runtime.
+      writeFileSync(
+        "cats/[[breed]]/[[name]].ts",
+        `
+      export function onRequestPost() {}
+      `
+      );
+
+      const entries = await generateConfigFromFileTree({
+        baseDir: ".",
+        baseURL: "/base" as UrlPath,
+      });
+      expect(entries).toMatchInlineSnapshot(`
+        Object {
+          "routes": Array [
+            Object {
+              "method": "POST",
+              "module": Array [
+                "authors/[authorId]/todos/[todoId].ts:onRequestPost",
+              ],
+              "mountPath": "/base/authors/:authorId/todos",
+              "routePath": "/base/authors/:authorId/todos/:todoId",
+            },
+            Object {
+              "method": "POST",
+              "module": Array [
+                "cats/[[breed]]/blah.ts:onRequestPost",
+              ],
+              "mountPath": "/base/cats/:breed*",
+              "routePath": "/base/cats/:breed*/blah",
+            },
+            Object {
+              "method": "POST",
+              "module": Array [
+                "cats/[[breed]]/[[name]].ts:onRequestPost",
+              ],
+              "mountPath": "/base/cats/:breed*",
+              "routePath": "/base/cats/:breed*/:name*",
+            },
+            Object {
+              "method": "DELETE",
+              "module": Array [
+                "todos/[id].ts:onRequestDelete",
+              ],
+              "mountPath": "/base/todos",
+              "routePath": "/base/todos/:id",
+            },
+            Object {
+              "method": "POST",
+              "module": Array [
+                "todos/[id].ts:onRequestPost",
+              ],
+              "mountPath": "/base/todos",
+              "routePath": "/base/todos/:id",
+            },
+            Object {
+              "method": "POST",
+              "module": Array [
+                "books/[[title]].ts:onRequestPost",
+              ],
+              "mountPath": "/base/books",
+              "routePath": "/base/books/:title*",
+            },
+            Object {
+              "method": "DELETE",
+              "module": Array [
+                "bar.ts:onRequestDelete",
+              ],
+              "mountPath": "/base/",
+              "routePath": "/base/bar",
+            },
+            Object {
+              "method": "PUT",
+              "module": Array [
+                "bar.ts:onRequestPut",
+              ],
+              "mountPath": "/base/",
+              "routePath": "/base/bar",
+            },
+            Object {
+              "method": "GET",
+              "module": Array [
+                "foo.ts:onRequestGet",
+              ],
+              "mountPath": "/base/",
+              "routePath": "/base/foo",
+            },
+            Object {
+              "method": "POST",
+              "module": Array [
+                "foo.ts:onRequestPost",
+              ],
+              "mountPath": "/base/",
+              "routePath": "/base/foo",
+            },
+          ],
+        }
+      `);
+    });
   });
 });
+
+function routeConfig(routePath: string, method?: string): RouteConfig {
+  return {
+    routePath: toUrlPath(routePath),
+    mountPath: toUrlPath("/"),
+    method: method as HTTPMethod,
+  };
+}