wrangler 0.0.0-e22f9d7 → 0.0.0-e2b7352

package/src/pages.tsx

@@ -1,32 +1,36 @@
 /* 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, writeFileSync } 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 = [];
+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);
 };
 
@@ -122,7 +126,9 @@ async function spawnProxyProcess({
       },
     }
   );
-  EXIT_CALLBACKS.push(() => proxy.kill());
+  EXIT_CALLBACKS.push(() => {
+    proxy.kill();
+  });
 
   proxy.stdout.on("data", (data) => {
     console.log(`[proxy]: ${data}`);
@@ -664,16 +670,17 @@ 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)
+      JSON.stringify({ ...config, baseURL }, null, 2)
     );
   }
 
@@ -756,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,
@@ -768,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;
@@ -792,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)
         );
 
@@ -802,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,
@@ -827,6 +840,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)
@@ -862,11 +878,13 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
         // internally just waits for that promise to resolve.
         await scriptReadyPromise;
 
-        // 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);
+        // `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,
@@ -887,17 +905,19 @@ 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);
-                  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}`);
@@ -935,12 +955,10 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
         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") {
-            const childProcess = await open(`http://127.0.0.1:${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) {
@@ -957,12 +975,14 @@ 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 [directory]",
         "Compile a folder of Cloudflare Pages Functions into a single Worker",
@@ -1006,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,
@@ -1016,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,
@@ -1029,3 +1053,9 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
       )
     );
 };
+
+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;
+}