wrangler 0.0.0-e043479 → 0.0.0-e0b9366

package/src/index.tsx

@@ -3,17 +3,19 @@ import { writeFile, mkdir } from "node:fs/promises";
 import path from "node:path";
 import { setTimeout } from "node:timers/promises";
 import TOML from "@iarna/toml";
+import chalk from "chalk";
 import { findUp } from "find-up";
 import getPort from "get-port";
 import { render } from "ink";
 import React from "react";
 import onExit from "signal-exit";
+import supportsColor from "supports-color";
 import makeCLI from "yargs";
 import { version as wranglerVersion } from "../package.json";
-import { toFormData } from "./api/form_data";
 import { fetchResult } from "./cfetch";
 import { findWranglerToml, readConfig } from "./config";
-import Dev from "./dev";
+import { createWorkerUploadForm } from "./create-worker-upload-form";
+import Dev from "./dev/dev";
 import { confirm, prompt } from "./dialogs";
 import { getEntry } from "./entry";
 import {
@@ -45,7 +47,6 @@ import {
   login,
   logout,
   listScopes,
-  initialise as initialiseUserConfig,
   loginOrRefreshIfRequired,
   getAccountId,
   validateScopeKeys,
@@ -55,6 +56,7 @@ import { whoami } from "./whoami";
 import type { Config } from "./config";
 import type { TailCLIFilters } from "./tail";
 import type { RawData } from "ws";
+import type { CommandModule } from "yargs";
 import type Yargs from "yargs";
 
 type ConfigPath = string | undefined;
@@ -81,6 +83,22 @@ ${TOML.stringify({ rules: config.build.upload.rules })}`
   return rules;
 }
 
+function printWranglerBanner() {
+  // Let's not print this in tests
+  if (typeof jest !== "undefined") {
+    return;
+  }
+  const text = ` ⛅️ wrangler ${wranglerVersion} `;
+
+  console.log(
+    text +
+      "\n" +
+      (supportsColor.stdout
+        ? chalk.hex("#FF8800")("-".repeat(text.length))
+        : "-".repeat(text.length))
+  );
+}
+
 function isLegacyEnv(args: unknown, config: Config): boolean {
   return (
     (args as { "legacy-env": boolean | undefined })["legacy-env"] ??
@@ -102,6 +120,9 @@ function getScriptName(
     : shortScriptName;
 }
 
+/**
+ * Ensure that a user is logged in, and a valid account_id is available.
+ */
 async function requireAuth(
   config: Config,
   isInteractive = true
@@ -200,7 +221,15 @@ export async function main(argv: string[]): Promise<void> {
     .scriptName("wrangler")
     .wrap(null);
 
-  // the default is to simply print the help menu
+  // Default help command that supports the subcommands
+  const subHelp: CommandModule = {
+    command: ["*"],
+    handler: async (args) => {
+      setImmediate(() =>
+        wrangler.parse([...args._.map((a) => `${a}`), "--help"])
+      );
+    },
+  };
   wrangler.command(
     ["*"],
     false,
@@ -241,7 +270,7 @@ export async function main(argv: string[]): Promise<void> {
     () => {
       // "👯 [DEPRECATED]. Scaffold a Cloudflare Workers project from a public GitHub repository.",
       throw new DeprecationError(
-        "`wrangler generate` has been deprecated, please refer to TODO://some/path for alternatives"
+        "`wrangler generate` has been deprecated, please refer to https://github.com/cloudflare/wrangler2/blob/main/docs/deprecations.md#generate for alternatives"
       );
     }
   );
@@ -263,6 +292,7 @@ export async function main(argv: string[]): Promise<void> {
         });
     },
     async (args) => {
+      printWranglerBanner();
       if ("type" in args) {
         let message = "The --type option is no longer supported.";
         if (args.type === "webpack") {
@@ -569,7 +599,7 @@ export async function main(argv: string[]): Promise<void> {
     () => {
       // "[DEPRECATED] 🦀 Build your project (if applicable)",
       throw new DeprecationError(
-        "`wrangler build` has been deprecated, please refer to TODO://some/path for alternatives"
+        "`wrangler build` has been deprecated, please refer to https://github.com/cloudflare/wrangler2/blob/main/docs/deprecations.md#build for alternatives"
       );
     }
   );
@@ -596,6 +626,7 @@ export async function main(argv: string[]): Promise<void> {
       // TODO: scopes
     },
     async (args) => {
+      printWranglerBanner();
       if (args["scopes-list"]) {
         listScopes();
         return;
@@ -630,6 +661,7 @@ export async function main(argv: string[]): Promise<void> {
     // "🚪 Logout from Cloudflare",
     () => {},
     async () => {
+      printWranglerBanner();
       await logout();
     }
   );
@@ -640,6 +672,7 @@ export async function main(argv: string[]): Promise<void> {
     "🕵️  Retrieve your user info and test your auth config",
     () => {},
     async () => {
+      printWranglerBanner();
       await whoami();
     }
   );
@@ -652,7 +685,7 @@ export async function main(argv: string[]): Promise<void> {
     () => {
       // "🕵️  Authenticate Wrangler with a Cloudflare API Token",
       throw new DeprecationError(
-        "`wrangler config` has been deprecated, please refer to TODO://some/path for alternatives"
+        "`wrangler config` has been deprecated, please refer to https://github.com/cloudflare/wrangler2/blob/main/docs/deprecations.md#config for alternatives"
       );
     }
   );
@@ -717,9 +750,8 @@ export async function main(argv: string[]): Promise<void> {
             "Host to forward requests to, defaults to the zone of project",
         })
         .option("local-protocol", {
-          default: "http",
           describe: "Protocol to listen to requests on, defaults to http.",
-          choices: ["http", "https"],
+          choices: ["http", "https"] as const,
         })
         .option("experimental-public", {
           describe: "Static assets to be served",
@@ -742,10 +774,9 @@ export async function main(argv: string[]): Promise<void> {
           array: true,
         })
         .option("upstream-protocol", {
-          default: "https",
           describe:
             "Protocol to forward requests to host on, defaults to https.",
-          choices: ["http", "https"],
+          choices: ["http", "https"] as const,
         })
         .option("jsx-factory", {
           describe: "The function that is called for each JSX element",
@@ -767,11 +798,12 @@ export async function main(argv: string[]): Promise<void> {
         });
     },
     async (args) => {
+      printWranglerBanner();
       const config = readConfig(
         (args.config as ConfigPath) ||
           (args.script && findWranglerToml(path.dirname(args.script)))
       );
-      const entry = getEntry(config, "dev", args.script);
+      const entry = await getEntry(args, config, "dev");
 
       if (args["experimental-public"]) {
         console.warn(
@@ -785,11 +817,14 @@ export async function main(argv: string[]): Promise<void> {
         );
       }
 
-      if (config.site?.["entry-point"]) {
+      const upstreamProtocol =
+        (args["upstream-protocol"] as "http" | "https") ||
+        config.dev.upstream_protocol;
+      if (upstreamProtocol === "http") {
         console.warn(
-          "Deprecation notice: The `site.entry-point` config field is no longer used.\n" +
-            "The entry-point is specified via the command line (e.g. `wrangler dev path/to/script`).\n" +
-            "Please remove the `site.entry-point` field from the `wrangler.toml` file."
+          "Setting upstream-protocol to http is not currently implemented.\n" +
+            "If this is required in your project, please add your use case to the following issue:\n" +
+            "https://github.com/cloudflare/wrangler2/issues/583."
         );
       }
 
@@ -874,10 +909,16 @@ export async function main(argv: string[]): Promise<void> {
           rules={getRules(config)}
           legacyEnv={isLegacyEnv(args, config)}
           buildCommand={config.build || {}}
-          format={args.format || config.build?.upload?.format}
           initialMode={args.local ? "local" : "remote"}
           jsxFactory={args["jsx-factory"] || envRootObj?.jsx_factory}
           jsxFragment={args["jsx-fragment"] || envRootObj?.jsx_fragment}
+          upstreamProtocol={upstreamProtocol}
+          localProtocol={
+            // The typings are not quite clever enough to handle element accesses, only property accesses,
+            // so we need to cast here.
+            (args["local-protocol"] as "http" | "https") ||
+            config.dev.local_protocol
+          }
           enableLocalPersistence={
             args["experimental-enable-local-persistence"] || false
           }
@@ -1016,6 +1057,7 @@ export async function main(argv: string[]): Promise<void> {
         });
     },
     async (args) => {
+      printWranglerBanner();
       if (args["experimental-public"]) {
         console.warn(
           "🚨  The --experimental-public field is experimental and will change in the future."
@@ -1031,7 +1073,7 @@ export async function main(argv: string[]): Promise<void> {
         (args.config as ConfigPath) ||
           (args.script && findWranglerToml(path.dirname(args.script)))
       );
-      const entry = getEntry(config, "publish", args.script);
+      const entry = await getEntry(args, config, "publish");
 
       if (args.latest) {
         console.warn(
@@ -1052,7 +1094,6 @@ export async function main(argv: string[]): Promise<void> {
         accountId,
         name: getScriptName(args, config),
         rules: getRules(config),
-        format: args.format || config.build?.upload?.format,
         entry,
         env: args.env,
         compatibilityDate: args.latest
@@ -1129,6 +1170,9 @@ export async function main(argv: string[]): Promise<void> {
       );
     },
     async (args) => {
+      if (args.format === "pretty") {
+        printWranglerBanner();
+      }
       const config = readConfig(args.config as ConfigPath);
 
       const scriptName = getScriptName(args, config);
@@ -1243,7 +1287,7 @@ export async function main(argv: string[]): Promise<void> {
       );
 
       const config = readConfig(args.config as ConfigPath);
-      const entry = getEntry(config, "dev");
+      const entry = await getEntry({}, config, "dev");
 
       const accountId = await requireAuth(config);
 
@@ -1259,10 +1303,11 @@ export async function main(argv: string[]): Promise<void> {
           zone={undefined}
           legacyEnv={isLegacyEnv(args, config)}
           buildCommand={config.build || {}}
-          format={config.build?.upload?.format}
           initialMode={args.local ? "local" : "remote"}
           jsxFactory={envRootObj?.jsx_factory}
           jsxFragment={envRootObj?.jsx_fragment}
+          upstreamProtocol={config.dev.upstream_protocol}
+          localProtocol={config.dev.local_protocol}
           enableLocalPersistence={false}
           accountId={accountId}
           assetPaths={undefined}
@@ -1313,7 +1358,7 @@ export async function main(argv: string[]): Promise<void> {
     }
   );
 
-  // route
+  // [DEPRECATED] route
   wrangler.command(
     "route",
     false, // I think we want to hide this command
@@ -1338,21 +1383,21 @@ export async function main(argv: string[]): Promise<void> {
                 type: "string",
               });
           },
-          async (args) => {
-            console.log(":route list", args);
-            // TODO: use environment (current wrangler doesn't do so?)
-            // TODO: don't get `zone_id` from config at all and require the command line arg `--zone`.
-            const config = readConfig(args.config as ConfigPath);
-            const zone = args.zone || config.zone_id;
-            if (!zone) {
-              throw new Error("missing zone id");
-            }
-
-            console.log(await fetchResult(`/zones/${zone}/workers/routes`));
+          () => {
+            // "👯 [DEPRECATED]. Use wrangler.toml to manage routes.
+            const deprecationNotice =
+              "`wrangler route list` has been deprecated.";
+            const futureRoutes =
+              "Refer to wrangler.toml for a list of routes the worker will be deployed to upon publishing.";
+            const presentRoutes =
+              "Refer to the Cloudflare Dashboard to see the routes this worker is currently running on.";
+            throw new DeprecationError(
+              `${deprecationNotice}\n${futureRoutes}\n${presentRoutes}`
+            );
           }
         )
         .command(
-          "delete <id>",
+          "delete",
           "Delete a route associated with a zone",
           (yargs) => {
             return yargs
@@ -1369,22 +1414,22 @@ export async function main(argv: string[]): Promise<void> {
                 describe: "Perform on a specific environment",
               });
           },
-          async (args) => {
-            console.log(":route delete", args);
-            // TODO: use environment (current wrangler doesn't do so?)
-            const config = readConfig(args.config as ConfigPath);
-            const zone = args.zone || config.zone_id;
-            if (!zone) {
-              throw new Error("missing zone id");
-            }
-
-            console.log(
-              await fetchResult(`/zones/${zone}/workers/routes/${args.id}`, {
-                method: "DELETE",
-              })
-            );
+          () => {
+            // "👯 [DEPRECATED]. Use wrangler.toml to manage routes.
+            const deprecationNotice =
+              "`wrangler route delete` has been deprecated.";
+            const shouldDo =
+              "Remove the unwanted route(s) from wrangler.toml and run `wrangler publish` to remove your worker from those routes.";
+            throw new DeprecationError(`${deprecationNotice}\n${shouldDo}`);
           }
         );
+    },
+    () => {
+      // "👯 [DEPRECATED]. Use wrangler.toml to manage routes.
+      const deprecationNotice = "`wrangler route` has been deprecated.";
+      const shouldDo =
+        "Please use wrangler.toml and/or `wrangler publish --routes` to modify routes";
+      throw new DeprecationError(`${deprecationNotice}\n${shouldDo}`);
     }
   );
 
@@ -1398,7 +1443,7 @@ export async function main(argv: string[]): Promise<void> {
     },
     () => {
       throw new DeprecationError(
-        "`wrangler subdomain` has been deprecated, please refer to TODO://some/path for alternatives"
+        "`wrangler subdomain` has been deprecated, please refer to https://github.com/cloudflare/wrangler2/blob/main/docs/deprecations.md#subdomain for alternatives"
       );
     }
   );
@@ -1409,6 +1454,7 @@ export async function main(argv: string[]): Promise<void> {
     "🤫 Generate a secret that can be referenced in the worker script",
     (secretYargs) => {
       return secretYargs
+        .command(subHelp)
         .command(
           "put <key>",
           "Create or update a secret variable for a script",
@@ -1429,6 +1475,7 @@ export async function main(argv: string[]): Promise<void> {
               });
           },
           async (args) => {
+            printWranglerBanner();
             const config = readConfig(args.config as ConfigPath);
 
             const scriptName = getScriptName(args, config);
@@ -1474,7 +1521,7 @@ export async function main(argv: string[]): Promise<void> {
                   : `/accounts/${accountId}/workers/scripts/${scriptName}`,
                 {
                   method: "PUT",
-                  body: toFormData({
+                  body: createWorkerUploadForm({
                     name: scriptName,
                     main: {
                       name: scriptName,
@@ -1528,6 +1575,7 @@ export async function main(argv: string[]): Promise<void> {
           "delete <key>",
           "Delete a secret variable from a script",
           (yargs) => {
+            printWranglerBanner();
             return yargs
               .positional("key", {
                 describe: "The variable name to be accessible in the script",
@@ -1621,6 +1669,7 @@ export async function main(argv: string[]): Promise<void> {
     "🗂️  Interact with your Workers KV Namespaces",
     (namespaceYargs) => {
       return namespaceYargs
+        .command(subHelp)
         .command(
           "create <namespace>",
           "Create a new namespace",
@@ -1641,6 +1690,7 @@ export async function main(argv: string[]): Promise<void> {
               });
           },
           async (args) => {
+            printWranglerBanner();
             if (args._.length > 2) {
               const extraArgs = args._.slice(2).join(" ");
               throw new CommandLineArgsError(
@@ -1726,6 +1776,7 @@ export async function main(argv: string[]): Promise<void> {
               });
           },
           async (args) => {
+            printWranglerBanner();
             const config = readConfig(args.config as ConfigPath);
 
             let id;
@@ -1772,6 +1823,7 @@ export async function main(argv: string[]): Promise<void> {
     "🔑 Individually manage Workers KV key-value pairs",
     (kvKeyYargs) => {
       return kvKeyYargs
+        .command(subHelp)
         .command(
           "put <key> [value]",
           "Writes a single key/value pair to the given namespace.",
@@ -1819,6 +1871,7 @@ export async function main(argv: string[]): Promise<void> {
               .check(demandOneOfOption("value", "path"));
           },
           async ({ key, ttl, expiration, ...args }) => {
+            printWranglerBanner();
             const config = readConfig(args.config as ConfigPath);
             const namespaceId = getNamespaceId(args, config);
             // One of `args.path` and `args.value` must be defined
@@ -1963,6 +2016,7 @@ export async function main(argv: string[]): Promise<void> {
               });
           },
           async ({ key, ...args }) => {
+            printWranglerBanner();
             const config = readConfig(args.config as ConfigPath);
             const namespaceId = getNamespaceId(args, config);
 
@@ -1987,6 +2041,7 @@ export async function main(argv: string[]): Promise<void> {
     "💪 Interact with multiple Workers KV key-value pairs at once",
     (kvBulkYargs) => {
       return kvBulkYargs
+        .command(subHelp)
         .command(
           "put <filename>",
           "Upload multiple key-value pairs to a namespace",
@@ -2016,6 +2071,7 @@ export async function main(argv: string[]): Promise<void> {
               });
           },
           async ({ filename, ...args }) => {
+            printWranglerBanner();
             // The simplest implementation I could think of.
             // This could be made more efficient with a streaming parser/uploader
             // but we'll do that in the future if needed.
@@ -2125,6 +2181,7 @@ export async function main(argv: string[]): Promise<void> {
               });
           },
           async ({ filename, ...args }) => {
+            printWranglerBanner();
             const config = readConfig(args.config as ConfigPath);
             const namespaceId = getNamespaceId(args, config);
 
@@ -2186,77 +2243,83 @@ export async function main(argv: string[]): Promise<void> {
     }
   );
 
-  wrangler.command("pages", "⚡️ Configure Cloudflare Pages", pages);
+  wrangler.command("pages", "⚡️ Configure Cloudflare Pages", (pagesYargs) =>
+    pages(pagesYargs.command(subHelp))
+  );
 
   wrangler.command("r2", "📦 Interact with an R2 store", (r2Yargs) => {
-    return r2Yargs.command("bucket", "Manage R2 buckets", (r2BucketYargs) => {
-      r2BucketYargs.command(
-        "create <name>",
-        "Create a new R2 bucket",
-        (yargs) => {
-          return yargs.positional("name", {
-            describe: "The name of the new bucket",
-            type: "string",
-            demandOption: true,
-          });
-        },
-        async (args) => {
-          // We expect three values in `_`: `r2`, `bucket`, `create`.
-          if (args._.length > 3) {
-            const extraArgs = args._.slice(3).join(" ");
-            throw new CommandLineArgsError(
-              `Unexpected additional positional arguments "${extraArgs}".`
-            );
+    return r2Yargs
+      .command(subHelp)
+      .command("bucket", "Manage R2 buckets", (r2BucketYargs) => {
+        r2BucketYargs.command(
+          "create <name>",
+          "Create a new R2 bucket",
+          (yargs) => {
+            return yargs.positional("name", {
+              describe: "The name of the new bucket",
+              type: "string",
+              demandOption: true,
+            });
+          },
+          async (args) => {
+            printWranglerBanner();
+            // We expect three values in `_`: `r2`, `bucket`, `create`.
+            if (args._.length > 3) {
+              const extraArgs = args._.slice(3).join(" ");
+              throw new CommandLineArgsError(
+                `Unexpected additional positional arguments "${extraArgs}".`
+              );
+            }
+
+            const config = readConfig(args.config as ConfigPath);
+
+            const accountId = await requireAuth(config);
+
+            console.log(`Creating bucket ${args.name}.`);
+            await createR2Bucket(accountId, args.name);
+            console.log(`Created bucket ${args.name}.`);
           }
+        );
 
+        r2BucketYargs.command("list", "List R2 buckets", {}, async (args) => {
           const config = readConfig(args.config as ConfigPath);
 
           const accountId = await requireAuth(config);
 
-          console.log(`Creating bucket ${args.name}.`);
-          await createR2Bucket(accountId, args.name);
-          console.log(`Created bucket ${args.name}.`);
-        }
-      );
+          console.log(JSON.stringify(await listR2Buckets(accountId), null, 2));
+        });
 
-      r2BucketYargs.command("list", "List R2 buckets", {}, async (args) => {
-        const config = readConfig(args.config as ConfigPath);
+        r2BucketYargs.command(
+          "delete <name>",
+          "Delete an R2 bucket",
+          (yargs) => {
+            return yargs.positional("name", {
+              describe: "The name of the bucket to delete",
+              type: "string",
+              demandOption: true,
+            });
+          },
+          async (args) => {
+            printWranglerBanner();
+            // We expect three values in `_`: `r2`, `bucket`, `delete`.
+            if (args._.length > 3) {
+              const extraArgs = args._.slice(3).join(" ");
+              throw new CommandLineArgsError(
+                `Unexpected additional positional arguments "${extraArgs}".`
+              );
+            }
 
-        const accountId = await requireAuth(config);
+            const config = readConfig(args.config as ConfigPath);
 
-        console.log(JSON.stringify(await listR2Buckets(accountId), null, 2));
-      });
+            const accountId = await requireAuth(config);
 
-      r2BucketYargs.command(
-        "delete <name>",
-        "Delete an R2 bucket",
-        (yargs) => {
-          return yargs.positional("name", {
-            describe: "The name of the bucket to delete",
-            type: "string",
-            demandOption: true,
-          });
-        },
-        async (args) => {
-          // We expect three values in `_`: `r2`, `bucket`, `delete`.
-          if (args._.length > 3) {
-            const extraArgs = args._.slice(3).join(" ");
-            throw new CommandLineArgsError(
-              `Unexpected additional positional arguments "${extraArgs}".`
-            );
+            console.log(`Deleting bucket ${args.name}.`);
+            await deleteR2Bucket(accountId, args.name);
+            console.log(`Deleted bucket ${args.name}.`);
           }
-
-          const config = readConfig(args.config as ConfigPath);
-
-          const accountId = await requireAuth(config);
-
-          console.log(`Deleting bucket ${args.name}.`);
-          await deleteR2Bucket(accountId, args.name);
-          console.log(`Deleted bucket ${args.name}.`);
-        }
-      );
-      return r2BucketYargs;
-    });
+        );
+        return r2BucketYargs;
+      });
   });
 
   wrangler
@@ -2276,7 +2339,6 @@ export async function main(argv: string[]): Promise<void> {
   wrangler.exitProcess(false);
 
   try {
-    await initialiseUserConfig();
     await wrangler.parse();
   } catch (e) {
     if (e instanceof CommandLineArgsError) {

package/src/inspect.ts

@@ -5,6 +5,7 @@ import { URL } from "node:url";
 import { useEffect, useRef, useState } from "react";
 import WebSocket, { WebSocketServer } from "ws";
 import { version } from "../package.json";
+import { waitForPortToBeAvailable } from "./proxy";
 import type Protocol from "devtools-protocol";
 import type { IncomingMessage, Server, ServerResponse } from "node:http";
 import type { MessageEvent } from "ws";
@@ -153,7 +154,14 @@ export default function useInspector(props: InspectorProps) {
    * of the component lifecycle. Convenient.
    */
   useEffect(() => {
-    server.listen(props.port);
+    async function startInspectorProxy() {
+      await waitForPortToBeAvailable(props.port, {
+        retryPeriod: 200,
+        timeout: 2000,
+      });
+      server.listen(props.port);
+    }
+    startInspectorProxy().catch((err) => console.error(err));
     return () => {
       server.close();
       // Also disconnect any open websockets/devtools connections