wrangler 0.0.0-e1c615f → 0.0.0-e3a458e

package/src/package-manager.ts

@@ -0,0 +1,126 @@
+import { existsSync } from "node:fs";
+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(cwd: string): Promise<PackageManager> {
+  const [hasYarn, hasNpm] = await Promise.all([supportsYarn(), supportsNpm()]);
+  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, 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, cwd };
+    }
+  } else if (hasYarnLock) {
+    if (hasYarn) {
+      console.log(
+        "Using yarn as package manager, as there is already a yarn.lock file."
+      );
+      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, cwd };
+    }
+  }
+
+  if (hasNpm) {
+    console.log("Using npm as package manager.");
+    return { ...NpmPackageManager, cwd };
+  } else if (hasYarn) {
+    console.log("Using yarn as package manager.");
+    return { ...YarnPackageManager, cwd };
+  } else {
+    throw new Error(
+      "Unable to find a package manager. Supported managers are: npm and yarn."
+    );
+  }
+}
+
+/**
+ * Get the name of the given `packageManager`.
+ */
+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,
+    });
+  },
+
+  /** Install all the dependencies in the local package.json. */
+  async install(): Promise<void> {
+    await execa("npm", ["install"], {
+      stdio: "inherit",
+      cwd: this.cwd,
+    });
+  },
+};
+
+/**
+ * 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,
+    });
+  },
+
+  /** Install all the dependencies in the local package.json. */
+  async install(): Promise<void> {
+    await execa("yarn", ["install"], {
+      stdio: "inherit",
+      cwd: this.cwd,
+    });
+  },
+};
+
+async function supports(name: string): Promise<boolean> {
+  try {
+    execaCommandSync(`${name} --version`, { stdio: "ignore" });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function supportsYarn(): Promise<boolean> {
+  return supports("yarn");
+}
+
+function supportsNpm(): Promise<boolean> {
+  return supports("npm");
+}

package/src/pages.tsx

@@ -1,28 +1,28 @@
 /* eslint-disable no-shadow */
 
-import assert from "assert";
-import type { BuilderCallback } from "yargs";
-import { join } from "path";
-import { tmpdir } from "os";
-import { existsSync, lstatSync, readFileSync } from "fs";
-import { execSync, spawn } from "child_process";
-import { URL } from "url";
-import { getType } from "mime";
-import open from "open";
+import { execSync, spawn } from "node:child_process";
+import { existsSync, lstatSync, readFileSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { URL } from "node:url";
 import { watch } from "chokidar";
-import type { BuildResult } from "esbuild";
+import { getType } from "mime";
 import { buildWorker } from "../pages/functions/buildWorker";
-import type { Config } from "../pages/functions/routes";
-import { writeRoutesModule } from "../pages/functions/routes";
 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";
+import type { BuildResult } from "esbuild";
+import type { MiniflareOptions } from "miniflare";
+import type { BuilderCallback } from "yargs";
 
 // Defer importing miniflare until we really need it. This takes ~0.5s
 // and also modifies some `stream/web` and `undici` prototypes, so we
 // don't want to do this if pages commands aren't being called.
-import type { Headers, Request, fetch } from "@miniflare/core";
-import type { MiniflareOptions } from "miniflare";
 
-const EXIT_CALLBACKS = [];
+const EXIT_CALLBACKS: (() => void)[] = [];
 const EXIT = (message?: string, code?: number) => {
   if (message) console.log(message);
   if (code) process.exitCode = code;
@@ -122,7 +122,9 @@ async function spawnProxyProcess({
       },
     }
   );
-  EXIT_CALLBACKS.push(() => proxy.kill());
+  EXIT_CALLBACKS.push(() => {
+    proxy.kill();
+  });
 
   proxy.stdout.on("data", (data) => {
     console.log(`[proxy]: ${data}`);
@@ -642,16 +644,20 @@ const RUNNING_BUILDERS: BuildResult[] = [];
 
 async function buildFunctions({
   scriptPath,
+  outputConfigPath,
   functionsDirectory,
   minify = false,
   sourcemap = false,
+  fallbackService = "ASSETS",
   watch = false,
   onEnd,
 }: {
   scriptPath: string;
+  outputConfigPath?: string;
   functionsDirectory: string;
   minify?: boolean;
   sourcemap?: boolean;
+  fallbackService?: string;
   watch?: boolean;
   onEnd?: () => void;
 }) {
@@ -660,12 +666,20 @@ async function buildFunctions({
   );
 
   const routesModule = join(tmpdir(), "./functionsRoutes.mjs");
+  const baseURL = toUrlPath("/");
 
   const config: Config = await generateConfigFromFileTree({
     baseDir: functionsDirectory,
-    baseURL: "/",
+    baseURL,
   });
 
+  if (outputConfigPath) {
+    writeFileSync(
+      outputConfigPath,
+      JSON.stringify({ ...config, baseURL }, null, 2)
+    );
+  }
+
   await writeRoutesModule({
     config,
     srcDir: functionsDirectory,
@@ -678,6 +692,7 @@ async function buildFunctions({
       outfile: scriptPath,
       minify,
       sourcemap,
+      fallbackService,
       watch,
       onEnd,
     })
@@ -738,6 +753,11 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
               description: "Durable Object to bind (NAME=CLASS)",
               alias: "o",
             },
+            "live-reload": {
+              type: "boolean",
+              default: false,
+              description: "Auto reload HTML pages when change is detected",
+            },
             // TODO: Miniflare user options
           });
       },
@@ -750,7 +770,8 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
         binding: bindings = [],
         kv: kvs = [],
         do: durableObjects = [],
-        "--": remaining = [],
+        "live-reload": liveReload,
+        _: [_pages, _dev, ...remaining],
       }) => {
         if (!local) {
           console.error("Only local mode is supported at the moment.");
@@ -774,7 +795,10 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
 
         let miniflareArgs: MiniflareOptions = {};
 
-        let scriptReady = true;
+        let scriptReadyResolve: () => void;
+        const scriptReadyPromise = new Promise<void>(
+          (resolve) => (scriptReadyResolve = resolve)
+        );
 
         if (usingFunctions) {
           const scriptPath = join(tmpdir(), "./functionsWorker.js");
@@ -786,22 +810,19 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
             functionsDirectory,
             sourcemap: true,
             watch: true,
-            onEnd: () => {
-              scriptReady = true;
-            },
+            onEnd: () => scriptReadyResolve(),
           });
 
           watch([functionsDirectory], {
             persistent: true,
+            ignoreInitial: true,
           }).on("all", async () => {
             await buildFunctions({
               scriptPath,
               functionsDirectory,
               sourcemap: true,
               watch: true,
-              onEnd: () => {
-                scriptReady = true;
-              },
+              onEnd: () => scriptReadyResolve(),
             });
           });
 
@@ -809,6 +830,9 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
             scriptPath,
           };
         } else {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          scriptReadyResolve!();
+
           const scriptPath =
             directory !== undefined
               ? join(directory, singleWorkerScriptPath)
@@ -838,11 +862,19 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
         const { Miniflare, Log, LogLevel } = await import("miniflare");
         const { Response, fetch } = await import("@miniflare/core");
 
-        // Should only be called if no proxyPort, using `assert.fail()` here
-        // means the type of `assetsFetch` is still `typeof fetch`
-        const assetsFetch = proxyPort
-          ? () => assert.fail()
-          : await generateAssetsFetch(directory);
+        // Wait for esbuild to finish building before starting Miniflare.
+        // This must be before the call to `new Miniflare`, as that will
+        // asynchronously start loading the script. `await startServer()`
+        // internally just waits for that promise to resolve.
+        await scriptReadyPromise;
+
+        // `assetsFetch()` will only be called if there is `proxyPort` defined.
+        // We only define `proxyPort`, above, when there is no `directory` defined.
+        const assetsFetch =
+          directory !== undefined
+            ? await generateAssetsFetch(directory)
+            : invalidAssetsFetch;
+
         const miniflare = new Miniflare({
           port,
           watch: true,
@@ -863,17 +895,17 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
           // User bindings
           bindings: {
             ...Object.fromEntries(
-              bindings.map((binding) => binding.toString().split("="))
+              bindings.map((binding) => binding.toString().split("=", 1))
             ),
           },
 
           // env.ASSETS.fetch
           serviceBindings: {
-            async ASSETS(request) {
+            async ASSETS(request: Request) {
               if (proxyPort) {
                 try {
                   const url = new URL(request.url);
-                  url.host = `127.0.0.1:${proxyPort}`;
+                  url.host = `localhost:${proxyPort}`;
                   return await fetch(url, request);
                 } catch (thrown) {
                   console.error(`Could not proxy request: ${thrown}`);
@@ -903,22 +935,27 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
           kvPersist: true,
           durableObjectsPersist: true,
           cachePersist: true,
+          liveReload,
 
           ...miniflareArgs,
         });
 
-        // Wait for esbuild to finish building the script
-        while (!scriptReady) {}
-
         try {
           // `startServer` might throw if user code contains errors
           const server = await miniflare.startServer();
-          console.log(`Serving at http://127.0.0.1:${port}/`);
+          console.log(`Serving at http://localhost:${port}/`);
 
           if (process.env.BROWSER !== "none") {
-            try {
-              await open(`http://127.0.0.1:${port}/`);
-            } catch {}
+            await openInBrowser(`http://localhost:${port}/`);
+          }
+
+          if (directory !== undefined && liveReload) {
+            watch([directory], {
+              persistent: true,
+              ignoreInitial: true,
+            }).on("all", async () => {
+              await miniflare.reload();
+            });
           }
 
           EXIT_CALLBACKS.push(() => {
@@ -926,43 +963,83 @@ 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);
         }
       }
     )
-    .command("functions", "Cloudflare Pages Functions", (yargs) =>
+    .command("functions", false, (yargs) =>
+      // we hide this command from help output because
+      // it's not meant to be used directly right now
       yargs.command(
-        "build",
+        "build [directory]",
         "Compile a folder of Cloudflare Pages Functions into a single Worker",
         (yargs) =>
-          yargs.options({
-            "script-path": {
+          yargs
+            .positional("directory", {
               type: "string",
-              default: "_worker.js",
-              description: "The location of the output Worker script",
-            },
-            minify: {
-              type: "boolean",
-              default: false,
-              description: "Minify the output Worker script",
-            },
-            sourcemap: {
-              type: "boolean",
-              default: false,
-              description: "Generate a sourcemap for the output Worker script",
-            },
-          }),
-        async ({ "script-path": scriptPath, minify, sourcemap }) => {
-          const functionsDirectory = "./functions";
-
+              default: "functions",
+              description: "The directory of Pages Functions",
+            })
+            .options({
+              "script-path": {
+                type: "string",
+                default: "_worker.js",
+                description: "The location of the output Worker script",
+              },
+              "output-config-path": {
+                type: "string",
+                description: "The location for the output config file",
+              },
+              minify: {
+                type: "boolean",
+                default: false,
+                description: "Minify the output Worker script",
+              },
+              sourcemap: {
+                type: "boolean",
+                default: false,
+                description:
+                  "Generate a sourcemap for the output Worker script",
+              },
+              "fallback-service": {
+                type: "string",
+                default: "ASSETS",
+                description:
+                  "The service to fallback to at the end of the `next` chain. Setting to '' will fallback to the global `fetch`.",
+              },
+              watch: {
+                type: "boolean",
+                default: false,
+                description:
+                  "Watch for changes to the functions and automatically rebuild the Worker script",
+              },
+            }),
+        async ({
+          directory,
+          "script-path": scriptPath,
+          "output-config-path": outputConfigPath,
+          minify,
+          sourcemap,
+          fallbackService,
+          watch,
+        }) => {
           await buildFunctions({
             scriptPath,
-            functionsDirectory,
+            outputConfigPath,
+            functionsDirectory: directory,
             minify,
             sourcemap,
+            fallbackService,
+            watch,
           });
         }
       )
     );
 };
+
+const invalidAssetsFetch: typeof fetch = () => {
+  throw new Error(
+    "Trying to fetch assets directly when there is no `directory` option specified, and not in `local` mode."
+  );
+};

package/src/parse.ts

@@ -0,0 +1,183 @@
+import * as fs from "node:fs";
+import { resolve } from "node:path";
+import TOML from "@iarna/toml";
+import { formatMessagesSync } from "esbuild";
+
+export type Message = {
+  text: string;
+  location?: Location;
+  notes?: Message[];
+  kind?: "warning" | "error";
+};
+
+export type Location = File & {
+  line: number;
+  column: number;
+  length?: number;
+  lineText?: string;
+  suggestion?: string;
+};
+
+export type File = {
+  file?: string;
+  fileText?: string;
+};
+
+/**
+ * Formats a `Message` using esbuild's pretty-printing algorithm.
+ */
+export function formatMessage(
+  { text, notes, location, kind = "error" }: Message,
+  color = true
+): string {
+  const input = { text, notes, location };
+  delete input.location?.fileText;
+  for (const note of notes ?? []) {
+    delete note.location?.fileText;
+  }
+  const lines = formatMessagesSync([input], {
+    color,
+    kind: kind,
+    terminalWidth: process.stderr.columns,
+  });
+  return lines.join("\n");
+}
+
+/**
+ * An error that's thrown when something fails to parse.
+ */
+export class ParseError extends Error implements Message {
+  readonly text: string;
+  readonly notes: Message[];
+  readonly location?: Location;
+  readonly kind: "warning" | "error";
+
+  constructor({ text, notes, location, kind }: Message) {
+    super(text);
+    this.name = this.constructor.name;
+    this.text = text;
+    this.notes = notes ?? [];
+    this.location = location;
+    this.kind = kind ?? "error";
+  }
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+const TOML_ERROR_NAME = "TomlError";
+const TOML_ERROR_SUFFIX = " at row ";
+
+type TomlError = Error & {
+  line: number;
+  col: number;
+};
+
+/**
+ * A wrapper around `TOML.parse` that throws a `ParseError`.
+ */
+export function parseTOML(input: string, file?: string): object {
+  try {
+    return TOML.parse(input);
+  } catch (err) {
+    const { name, message, line, col } = err as TomlError;
+    if (name !== TOML_ERROR_NAME) {
+      throw err;
+    }
+    const text = message.substring(0, message.lastIndexOf(TOML_ERROR_SUFFIX));
+    const lineText = input.split("\n")[line];
+    const location = {
+      lineText,
+      line: line + 1,
+      column: col - 1,
+      file,
+      fileText: input,
+    };
+    throw new ParseError({ text, location });
+  }
+}
+
+const JSON_ERROR_SUFFIX = " in JSON at position ";
+
+/**
+ * A wrapper around `JSON.parse` that throws a `ParseError`.
+ */
+export function parseJSON(input: string, file?: string): any {
+  try {
+    return JSON.parse(input);
+  } catch (err) {
+    const { message } = err as Error;
+    const index = message.lastIndexOf(JSON_ERROR_SUFFIX);
+    if (index < 0) {
+      throw err;
+    }
+    const text = message.substring(0, index);
+    const position = parseInt(
+      message.substring(index + JSON_ERROR_SUFFIX.length)
+    );
+    const location = indexLocation({ file, fileText: input }, position);
+    throw new ParseError({ text, location });
+  }
+}
+
+/**
+ * Reads a file and parses it based on its type.
+ */
+export function readFileSync(file: string): string {
+  try {
+    return fs.readFileSync(file, { encoding: "utf-8" });
+  } catch (err) {
+    const { message } = err as Error;
+    throw new ParseError({
+      text: `Could not read file: ${file}`,
+      notes: [
+        {
+          text: message.replace(file, resolve(file)),
+        },
+      ],
+    });
+  }
+}
+
+/**
+ * Calculates the line and column location from an index.
+ */
+export function indexLocation(file: File, index: number): Location {
+  let lineText,
+    line = 0,
+    column = 0,
+    cursor = 0;
+  const { fileText = "" } = file;
+  for (const row of fileText.split("\n")) {
+    line++;
+    cursor += row.length + 1;
+    if (cursor >= index) {
+      lineText = row;
+      column = row.length - (cursor - index);
+      break;
+    }
+  }
+  return { lineText, line, column, ...file };
+}
+
+/**
+ * Guesses the line and column location of a search query.
+ */
+export function searchLocation(file: File, query: unknown): Location {
+  let lineText,
+    length,
+    line = 0,
+    column = 0;
+  const queryText = String(query);
+  const { fileText = "" } = file;
+  for (const content of fileText.split("\n")) {
+    line++;
+    const index = content.indexOf(queryText);
+    if (index >= 0) {
+      lineText = content;
+      column = index;
+      length = queryText.length;
+      break;
+    }
+  }
+  return { lineText, line, column, length, ...file };
+}

package/src/paths.ts

@@ -0,0 +1,26 @@
+import { assert } from "console";
+
+type DiscriminatedPath<Discriminator extends string> = string & {
+  _discriminator: Discriminator;
+};
+
+/**
+ * A branded string that expects to be URL compatible.
+ *
+ * Require this type when you want callers to ensure that they have converted file-path strings into URL-safe paths.
+ */
+export type UrlPath = DiscriminatedPath<"UrlPath">;
+
+/**
+ * Convert a file-path string to a URL-path string.
+ *
+ * Use this helper to convert a `string` to a `UrlPath` when it is not clear whether the string needs normalizing.
+ * Replaces all back-slashes with forward-slashes, and throws an error if the path contains a drive letter (e.g. `C:`).
+ */
+export function toUrlPath(path: string): UrlPath {
+  assert(
+    !/^[a-z]:/i.test(path),
+    "Tried to convert a Windows file path with a drive to a URL path."
+  );
+  return path.replace(/\\/g, "/") as UrlPath;
+}