wrangler 0.0.0-e2a26a0 → 0.0.0-e3e3243

package/src/module-collection.ts

@@ -1,21 +1,96 @@
 import crypto from "node:crypto";
 import { readFile } from "node:fs/promises";
 import path from "node:path";
-import type { CfModule } from "./api/worker";
+import globToRegExp from "glob-to-regexp";
+import type { Config, ConfigModuleRuleType } from "./config";
+import type { CfModule, CfModuleType, CfScriptFormat } from "./worker";
 import type esbuild from "esbuild";
 
+const RuleTypeToModuleType: Record<ConfigModuleRuleType, CfModuleType> = {
+  ESModule: "esm",
+  CommonJS: "commonjs",
+  CompiledWasm: "compiled-wasm",
+  Data: "buffer",
+  Text: "text",
+};
+
 // This is a combination of an esbuild plugin and a mutable array
 // that we use to collect module references from source code.
 // There will be modules that _shouldn't_ be inlined directly into
 // the bundle. (eg. wasm modules, some text files, etc). We can include
-// those files as modules in the multi part forker form upload. This
+// those files as modules in the multi part worker form upload. This
 // plugin+array is used to collect references to these modules, reference
 // them correctly in the bundle, and add them to the form upload.
 
-export default function makeModuleCollector(): {
+export const DEFAULT_MODULE_RULES: Config["rules"] = [
+  { type: "Text", globs: ["**/*.txt", "**/*.html"] },
+  { type: "Data", globs: ["**/*.bin"] },
+  { type: "CompiledWasm", globs: ["**/*.wasm"] },
+];
+
+export default function createModuleCollector(props: {
+  format: CfScriptFormat;
+  rules?: Config["rules"];
+  // a collection of "legacy" style module references, which are just file names
+  // we will eventually deprecate this functionality, hence the verbose greppable name
+  wrangler1xlegacyModuleReferences: {
+    rootDirectory: string;
+    fileNames: Set<string>;
+  };
+}): {
   modules: CfModule[];
   plugin: esbuild.Plugin;
 } {
+  const rules: Config["rules"] = [
+    ...(props.rules || []),
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    ...DEFAULT_MODULE_RULES!,
+  ];
+
+  // First, we want to add some validations to the module rules
+  // We want to warn if rules are accidentally configured in such a way that
+  // subsequent rules will never match because `fallthrough` hasn't been set
+
+  const completedRuleLocations: Record<string, number> = {};
+  let index = 0;
+  const rulesToRemove: Config["rules"] = [];
+  for (const rule of rules) {
+    if (rule.type in completedRuleLocations) {
+      if (rules[completedRuleLocations[rule.type]].fallthrough !== false) {
+        if (index < (props.rules || []).length) {
+          console.warn(
+            `The module rule at position ${index} (${JSON.stringify(
+              rule
+            )}) has the same type as a previous rule (at position ${
+              completedRuleLocations[rule.type]
+            }, ${JSON.stringify(
+              rules[completedRuleLocations[rule.type]]
+            )}). This rule will be ignored. To the previous rule, add \`fallthrough = true\` to allow this one to also be used, or \`fallthrough = false\` to silence this warning.`
+          );
+        } else {
+          console.warn(
+            `The default module rule ${JSON.stringify(
+              rule
+            )} has the same type as a previous rule (at position ${
+              completedRuleLocations[rule.type]
+            }, ${JSON.stringify(
+              rules[completedRuleLocations[rule.type]]
+            )}). This rule will be ignored. To the previous rule, add \`fallthrough = true\` to allow the default one to also be used, or \`fallthrough = false\` to silence this warning.`
+          );
+        }
+      }
+
+      rulesToRemove.push(rule);
+    }
+    if (!(rule.type in completedRuleLocations) && rule.fallthrough !== true) {
+      completedRuleLocations[rule.type] = index;
+    }
+    index++;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  rulesToRemove.forEach((rule) => rules!.splice(rules!.indexOf(rule), 1));
+
   const modules: CfModule[] = [];
   return {
     modules,
@@ -23,40 +98,160 @@ export default function makeModuleCollector(): {
       name: "wrangler-module-collector",
       setup(build) {
         build.onStart(() => {
-          // reset the moduels collection
+          // reset the module collection array
           modules.splice(0);
         });
 
-        build.onResolve(
-          // filter on "known" file types,
-          // we can expand this list later
-          { filter: /.*\.(wasm)$/ },
-          async (args: esbuild.OnResolveArgs) => {
-            // take the file and massage it to a
-            // transportable/manageable format
-            const filePath = path.join(args.resolveDir, args.path);
-            const fileContent = await readFile(filePath);
-            const fileHash = crypto
-              .createHash("sha1")
-              .update(fileContent)
-              .digest("hex");
-            const fileName = `${fileHash}-${path.basename(args.path)}`;
-
-            // add the module to the array
-            modules.push({
-              name: fileName,
-              content: fileContent,
-              type: "compiled-wasm",
-            });
+        // ~ start  legacy module specifier support ~
+
+        // This section detects usage of "legacy" 1.x style module specifiers
+        // and modifies them so they "work" in wrangler v2, but with a warning
 
+        const rulesMatchers = rules.flatMap((rule) => {
+          return rule.globs.map((glob) => {
+            const regex = globToRegExp(glob);
             return {
-              path: fileName, // change the reference to the changed module
-              external: true, // mark it as external in the bundle
-              namespace: "wrangler-module-collector-ns", // just a tag, this isn't strictly necessary
-              watchFiles: [filePath], // we also add the file to esbuild's watch list
+              regex,
+              rule,
             };
-          }
-        );
+          });
+        });
+
+        if (props.wrangler1xlegacyModuleReferences.fileNames.size > 0) {
+          build.onResolve(
+            {
+              filter: new RegExp(
+                "^(" +
+                  [...props.wrangler1xlegacyModuleReferences.fileNames].join(
+                    "|"
+                  ) +
+                  ")$"
+              ),
+            },
+            async (args: esbuild.OnResolveArgs) => {
+              if (
+                args.kind !== "import-statement" &&
+                args.kind !== "require-call"
+              ) {
+                return;
+              }
+              // In the future, this will simply throw an error
+              console.warn(
+                `Deprecation warning: detected a legacy module import in "./${path.relative(
+                  process.cwd(),
+                  args.importer
+                )}". This will stop working in the future. Replace references to "${
+                  args.path
+                }" with "./${args.path}";`
+              );
+
+              // take the file and massage it to a
+              // transportable/manageable format
+              const filePath = path.join(
+                props.wrangler1xlegacyModuleReferences.rootDirectory,
+                args.path
+              );
+              const fileContent = await readFile(filePath);
+              const fileHash = crypto
+                .createHash("sha1")
+                .update(fileContent)
+                .digest("hex");
+              const fileName = `./${fileHash}-${path.basename(args.path)}`;
+
+              const { rule } =
+                rulesMatchers.find(({ regex }) => regex.test(fileName)) || {};
+              if (rule) {
+                // add the module to the array
+                modules.push({
+                  name: fileName,
+                  content: fileContent,
+                  type: RuleTypeToModuleType[rule.type],
+                });
+                return {
+                  path: fileName, // change the reference to the changed module
+                  external: props.format === "modules", // mark it as external in the bundle
+                  namespace: `wrangler-module-${rule.type}`, // just a tag, this isn't strictly necessary
+                  watchFiles: [filePath], // we also add the file to esbuild's watch list
+                };
+              }
+            }
+          );
+        }
+
+        // ~ end legacy module specifier support ~
+
+        rules?.forEach((rule) => {
+          if (rule.type === "ESModule" || rule.type === "CommonJS") return; // TODO: we should treat these as js files, and use the jsx loader
+
+          rule.globs.forEach((glob) => {
+            build.onResolve(
+              { filter: globToRegExp(glob) },
+              async (args: esbuild.OnResolveArgs) => {
+                // take the file and massage it to a
+                // transportable/manageable format
+
+                const filePath = path.join(args.resolveDir, args.path);
+                const fileContent = await readFile(filePath);
+                const fileHash = crypto
+                  .createHash("sha1")
+                  .update(fileContent)
+                  .digest("hex");
+                const fileName = `./${fileHash}-${path.basename(args.path)}`;
+
+                // add the module to the array
+                modules.push({
+                  name: fileName,
+                  content: fileContent,
+                  type: RuleTypeToModuleType[rule.type],
+                });
+
+                return {
+                  path: fileName, // change the reference to the changed module
+                  external: props.format === "modules", // mark it as external in the bundle
+                  namespace: `wrangler-module-${rule.type}`, // just a tag, this isn't strictly necessary
+                  watchFiles: [filePath], // we also add the file to esbuild's watch list
+                };
+              }
+            );
+
+            if (props.format === "service-worker") {
+              build.onLoad(
+                { filter: globToRegExp(glob) },
+                async (args: esbuild.OnLoadArgs) => {
+                  return {
+                    // We replace the the module with an identifier
+                    // that we'll separately add to the form upload
+                    // as part of [wasm_modules]/[text_blobs]. This identifier has to be a valid
+                    // JS identifier, so we replace all non alphanumeric characters
+                    // with an underscore.
+                    // TODO: what of "Data"?
+                    contents: `export default ${args.path.replace(
+                      /[^a-zA-Z0-9_$]/g,
+                      "_"
+                    )};`,
+                  };
+                }
+              );
+            }
+          });
+        });
+
+        rulesToRemove.forEach((rule) => {
+          rule.globs.forEach((glob) => {
+            build.onResolve(
+              { filter: globToRegExp(glob) },
+              async (args: esbuild.OnResolveArgs) => {
+                throw new Error(
+                  `The file ${
+                    args.path
+                  } matched a module rule in your configuration (${JSON.stringify(
+                    rule
+                  )}), but was ignored because a previous rule with the same type was not marked as \`fallthrough = true\`.`
+                );
+              }
+            );
+          });
+        });
       },
     },
   };

package/src/open-in-browser.ts

@@ -0,0 +1,25 @@
+import open from "open";
+
+/**
+ * An extremely simple wrapper around the open command.
+ * Specifically, it adds an 'error' event handler so that when this function
+ * is called in environments where we can't open the browser (e.g. github codespaces,
+ * stackblitz, remote servers), it doesn't just crash the process.
+ *
+ * @param url the URL to point the browser at
+ * @param options open a chromium-based browser instead of the default
+ */
+export default async function openInBrowser(
+  url: string,
+  { forceChromium }: { forceChromium: boolean } = { forceChromium: false }
+): Promise<void> {
+  const options: open.Options | undefined = forceChromium
+    ? {
+        app: [{ name: open.apps.chrome }, { name: open.apps.edge }],
+      }
+    : undefined;
+  const childProcess = await open(url, options);
+  childProcess.on("error", () => {
+    console.warn(`Failed to open ${url} in a browser`);
+  });
+}

package/src/package-manager.ts

@@ -3,49 +3,51 @@ import { join } from "node:path";
 import { execa, execaCommandSync } from "execa";
 
 export interface PackageManager {
+  cwd: string;
+  type: "npm" | "yarn";
   addDevDeps(...packages: string[]): Promise<void>;
   install(): Promise<void>;
 }
 
-export async function getPackageManager(root: string): Promise<PackageManager> {
+export async function getPackageManager(cwd: string): Promise<PackageManager> {
   const [hasYarn, hasNpm] = await Promise.all([supportsYarn(), supportsNpm()]);
-  const hasYarnLock = existsSync(join(root, "yarn.lock"));
-  const hasNpmLock = existsSync(join(root, "package-lock.json"));
+  const hasYarnLock = existsSync(join(cwd, "yarn.lock"));
+  const hasNpmLock = existsSync(join(cwd, "package-lock.json"));
 
   if (hasNpmLock) {
     if (hasNpm) {
       console.log(
         "Using npm as package manager, as there is already a package-lock.json file."
       );
-      return NpmPackageManager;
+      return { ...NpmPackageManager, cwd };
     } else if (hasYarn) {
       console.log("Using yarn as package manager.");
       console.warn(
         "There is already a package-lock.json file but could not find npm on the PATH."
       );
-      return YarnPackageManager;
+      return { ...YarnPackageManager, cwd };
     }
   } else if (hasYarnLock) {
     if (hasYarn) {
       console.log(
         "Using yarn as package manager, as there is already a yarn.lock file."
       );
-      return YarnPackageManager;
+      return { ...YarnPackageManager, cwd };
     } else if (hasNpm) {
       console.log("Using npm as package manager.");
       console.warn(
         "There is already a yarn.lock file but could not find yarn on the PATH."
       );
-      return NpmPackageManager;
+      return { ...NpmPackageManager, cwd };
     }
   }
 
   if (hasNpm) {
     console.log("Using npm as package manager.");
-    return NpmPackageManager;
+    return { ...NpmPackageManager, cwd };
   } else if (hasYarn) {
     console.log("Using yarn as package manager.");
-    return YarnPackageManager;
+    return { ...YarnPackageManager, cwd };
   } else {
     throw new Error(
       "Unable to find a package manager. Supported managers are: npm and yarn."
@@ -56,22 +58,21 @@ export async function getPackageManager(root: string): Promise<PackageManager> {
 /**
  * Get the name of the given `packageManager`.
  */
-export function getPackageManagerName(packageManager: unknown): string {
-  return packageManager === NpmPackageManager
-    ? "npm"
-    : packageManager === YarnPackageManager
-    ? "yarn"
-    : "unknown";
+export function getPackageManagerName(packageManager: PackageManager): string {
+  return packageManager.type ?? "unknown";
 }
 
 /**
  * Manage packages using npm
  */
 const NpmPackageManager: PackageManager = {
+  cwd: process.cwd(),
+  type: "npm",
   /** Add and install a new devDependency into the local package.json. */
   async addDevDeps(...packages: string[]): Promise<void> {
     await execa("npm", ["install", ...packages, "--save-dev"], {
       stdio: "inherit",
+      cwd: this.cwd,
     });
   },
 
@@ -79,6 +80,7 @@ const NpmPackageManager: PackageManager = {
   async install(): Promise<void> {
     await execa("npm", ["install"], {
       stdio: "inherit",
+      cwd: this.cwd,
     });
   },
 };
@@ -87,10 +89,13 @@ const NpmPackageManager: PackageManager = {
  * Manage packages using yarn
  */
 const YarnPackageManager: PackageManager = {
+  cwd: process.cwd(),
+  type: "yarn",
   /** Add and install a new devDependency into the local package.json. */
   async addDevDeps(...packages: string[]): Promise<void> {
     await execa("yarn", ["add", ...packages, "--dev"], {
       stdio: "inherit",
+      cwd: this.cwd,
     });
   },
 
@@ -98,6 +103,7 @@ const YarnPackageManager: PackageManager = {
   async install(): Promise<void> {
     await execa("yarn", ["install"], {
       stdio: "inherit",
+      cwd: this.cwd,
     });
   },
 };

package/src/pages.tsx

@@ -7,10 +7,10 @@ import { join } from "node:path";
 import { URL } from "node:url";
 import { watch } from "chokidar";
 import { getType } from "mime";
-import open from "open";
 import { buildWorker } from "../pages/functions/buildWorker";
 import { generateConfigFromFileTree } from "../pages/functions/filepath-routing";
 import { writeRoutesModule } from "../pages/functions/routes";
+import openInBrowser from "./open-in-browser";
 import { toUrlPath } from "./paths";
 import type { Config } from "../pages/functions/routes";
 import type { Headers, Request, fetch } from "@miniflare/core";
@@ -22,11 +22,15 @@ import type { BuilderCallback } from "yargs";
 // and also modifies some `stream/web` and `undici` prototypes, so we
 // don't want to do this if pages commands aren't being called.
 
+export const pagesBetaWarning =
+  "🚧 'wrangler pages <command>' is a beta command. Please report any issues to https://github.com/cloudflare/wrangler2/issues/new/choose";
+
 const EXIT_CALLBACKS: (() => void)[] = [];
 const EXIT = (message?: string, code?: number) => {
   if (message) console.log(message);
   if (code) process.exitCode = code;
   EXIT_CALLBACKS.forEach((callback) => callback());
+  RUNNING_BUILDERS.forEach((builder) => builder.stop?.());
   process.exit(code);
 };
 
@@ -759,7 +763,8 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
               description: "Auto reload HTML pages when change is detected",
             },
             // TODO: Miniflare user options
-          });
+          })
+          .epilogue(pagesBetaWarning);
       },
       async ({
         local,
@@ -771,8 +776,11 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
         kv: kvs = [],
         do: durableObjects = [],
         "live-reload": liveReload,
-        "--": remaining = [],
+        _: [_pages, _dev, ...remaining],
       }) => {
+        // Beta message for `wrangler pages <commands>` usage
+        console.log(pagesBetaWarning);
+
         if (!local) {
           console.error("Only local mode is supported at the moment.");
           return;
@@ -795,8 +803,8 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
 
         let miniflareArgs: MiniflareOptions = {};
 
-        let scriptReadyResolve;
-        const scriptReadyPromise = new Promise(
+        let scriptReadyResolve: () => void;
+        const scriptReadyPromise = new Promise<void>(
           (resolve) => (scriptReadyResolve = resolve)
         );
 
@@ -805,13 +813,15 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
 
           console.log(`Compiling worker to "${scriptPath}"...`);
 
-          await buildFunctions({
-            scriptPath,
-            functionsDirectory,
-            sourcemap: true,
-            watch: true,
-            onEnd: () => scriptReadyResolve(),
-          });
+          try {
+            await buildFunctions({
+              scriptPath,
+              functionsDirectory,
+              sourcemap: true,
+              watch: true,
+              onEnd: () => scriptReadyResolve(),
+            });
+          } catch {}
 
           watch([functionsDirectory], {
             persistent: true,
@@ -830,7 +840,8 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
             scriptPath,
           };
         } else {
-          scriptReadyResolve();
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          scriptReadyResolve!();
 
           const scriptPath =
             directory !== undefined
@@ -894,13 +905,15 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
           // User bindings
           bindings: {
             ...Object.fromEntries(
-              bindings.map((binding) => binding.toString().split("="))
+              bindings
+                .map((binding) => binding.toString().split("="))
+                .map(([key, ...values]) => [key, values.join("=")])
             ),
           },
 
           // env.ASSETS.fetch
           serviceBindings: {
-            async ASSETS(request) {
+            async ASSETS(request: Request) {
               if (proxyPort) {
                 try {
                   const url = new URL(request.url);
@@ -945,9 +958,7 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
           console.log(`Serving at http://localhost:${port}/`);
 
           if (process.env.BROWSER !== "none") {
-            const childProcess = await open(`http://localhost:${port}/`);
-            // fail silently if the open command doesn't work (e.g. in GitHub Codespaces)
-            childProcess.on("error", (_err) => {});
+            await openInBrowser(`http://localhost:${port}/`);
           }
 
           if (directory !== undefined && liveReload) {
@@ -964,7 +975,7 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
             miniflare.dispose().catch((err) => miniflare.log.error(err));
           });
         } catch (e) {
-          miniflare.log.error(e);
+          miniflare.log.error(e as Error);
           EXIT("Could not start Miniflare.", 1);
         }
       }
@@ -1015,7 +1026,8 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
                 description:
                   "Watch for changes to the functions and automatically rebuild the Worker script",
               },
-            }),
+            })
+            .epilogue(pagesBetaWarning),
         async ({
           directory,
           "script-path": scriptPath,
@@ -1025,6 +1037,9 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
           fallbackService,
           watch,
         }) => {
+          // Beta message for `wrangler pages <commands>` usage
+          console.log(pagesBetaWarning);
+
           await buildFunctions({
             scriptPath,
             outputConfigPath,