wrangler 2.0.7 → 2.0.11

package/src/__tests__/secret.test.ts

@@ -148,7 +148,7 @@ describe("wrangler secret", () => {
         }
         expect(std.out).toMatchInlineSnapshot(`
           "
-          If you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new."
+          If you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new/choose"
         `);
         expect(std.err).toMatchInlineSnapshot(`
           "X [ERROR] Missing script name
@@ -204,7 +204,7 @@ describe("wrangler secret", () => {
 
         expect(std.out).toMatchInlineSnapshot(`
           "
-          If you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new."
+          If you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new/choose"
         `);
         expect(std.warn).toMatchInlineSnapshot(`""`);
       });
@@ -372,7 +372,7 @@ describe("wrangler secret", () => {
       }
       expect(std.out).toMatchInlineSnapshot(`
         "
-        If you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new."
+        If you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new/choose"
       `);
       expect(std.err).toMatchInlineSnapshot(`
         "X [ERROR] Missing script name
@@ -468,7 +468,7 @@ describe("wrangler secret", () => {
       }
       expect(std.out).toMatchInlineSnapshot(`
         "
-        If you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new."
+        If you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new/choose"
       `);
       expect(std.err).toMatchInlineSnapshot(`
         "X [ERROR] Missing script name

package/src/__tests__/whoami.test.tsx

@@ -9,6 +9,8 @@ import { runInTempDir } from "./helpers/run-in-tmp";
 import type { UserInfo } from "../whoami";
 
 describe("getUserInfo()", () => {
+  const ENV_COPY = process.env;
+
   runInTempDir({ homedir: "./home" });
   const std = mockConsoleMethods();
   const { setIsTTY } = useMockIsTTY();
@@ -17,6 +19,10 @@ describe("getUserInfo()", () => {
     setIsTTY(true);
   });
 
+  afterEach(() => {
+    process.env = ENV_COPY;
+  });
+
   it("should return undefined if there is no config file", async () => {
     const userInfo = await getUserInfo();
     expect(userInfo).toBeUndefined();
@@ -28,6 +34,34 @@ describe("getUserInfo()", () => {
     expect(userInfo).toBeUndefined();
   });
 
+  it("should say it's using an API token when one is set", async () => {
+    process.env = {
+      CLOUDFLARE_API_TOKEN: "123456789",
+    };
+    setMockResponse("/user", () => {
+      return { email: "user@example.com" };
+    });
+    setMockResponse("/accounts", () => {
+      return [
+        { name: "Account One", id: "account-1" },
+        { name: "Account Two", id: "account-2" },
+        { name: "Account Three", id: "account-3" },
+      ];
+    });
+
+    const userInfo = await getUserInfo();
+    expect(userInfo).toEqual({
+      authType: "API",
+      apiToken: "123456789",
+      email: "user@example.com",
+      accounts: [
+        { name: "Account One", id: "account-1" },
+        { name: "Account Two", id: "account-2" },
+        { name: "Account Three", id: "account-3" },
+      ],
+    });
+  });
+
   it("should return the user's email and accounts if authenticated via config token", async () => {
     writeAuthConfigFile({ oauth_token: "some-oauth-token" });
 

package/src/cfetch/index.ts

@@ -10,6 +10,7 @@ export { getCloudflareAPIBaseURL as getCloudflareApiBaseUrl } from "./internal";
 export interface FetchError {
   code: number;
   message: string;
+  error_chain?: FetchError[];
 }
 export interface FetchResult<ResponseType = unknown> {
   success: boolean;
@@ -85,9 +86,9 @@ function throwFetchError(
   response: FetchResult<unknown>
 ): never {
   const error = new ParseError({
-    text: "Received a bad response from the API",
+    text: `A request to the Cloudflare API (${resource}) failed.`,
     notes: response.errors.map((err) => ({
-      text: err.code ? `${err.message} [code: ${err.code}]` : err.message,
+      text: renderError(err),
     })),
   });
   // add the first error code directly to this error
@@ -104,3 +105,17 @@ function hasCursor(result_info: unknown): result_info is { cursor: string } {
   const cursor = (result_info as { cursor: string } | undefined)?.cursor;
   return cursor !== undefined && cursor !== null && cursor !== "";
 }
+
+function renderError(err: FetchError, level = 0): string {
+  const chainedMessages =
+    err.error_chain
+      ?.map(
+        (chainedError) =>
+          `\n${"  ".repeat(level)}- ${renderError(chainedError, level + 1)}`
+      )
+      .join("\n") ?? "";
+  return (
+    (err.code ? `${err.message} [code: ${err.code}]` : err.message) +
+    chainedMessages
+  );
+}

package/src/cfetch/internal.ts

@@ -1,7 +1,9 @@
+import assert from "node:assert";
 import { fetch, Headers } from "undici";
+import { version as wranglerVersion } from "../../package.json";
 import { getEnvironmentVariableFactory } from "../environment-variables";
 import { ParseError, parseJSON } from "../parse";
-import { getAPIToken, loginOrRefreshIfRequired } from "../user";
+import { loginOrRefreshIfRequired, requireApiToken } from "../user";
 import type { URLSearchParams } from "node:url";
 import type { RequestInit, HeadersInit } from "undici";
 
@@ -29,10 +31,15 @@ export async function fetchInternal<ResponseType>(
   queryParams?: URLSearchParams,
   abortSignal?: AbortSignal
 ): Promise<ResponseType> {
+  assert(
+    resource.startsWith("/"),
+    `CF API fetch - resource path must start with a "/" but got "${resource}"`
+  );
   await requireLoggedIn();
   const apiToken = requireApiToken();
   const headers = cloneHeaders(init.headers);
   addAuthorizationHeaderIfUnspecified(headers, apiToken);
+  addUserAgent(headers);
 
   const queryString = queryParams ? `?${queryParams.toString()}` : "";
   const method = init.method ?? "GET";
@@ -88,14 +95,6 @@ async function requireLoggedIn(): Promise<void> {
   }
 }
 
-function requireApiToken(): string {
-  const authToken = getAPIToken();
-  if (!authToken) {
-    throw new Error("No API token found.");
-  }
-  return authToken;
-}
-
 function addAuthorizationHeaderIfUnspecified(
   headers: Record<string, string>,
   apiToken: string
@@ -105,6 +104,10 @@ function addAuthorizationHeaderIfUnspecified(
   }
 }
 
+function addUserAgent(headers: Record<string, string>): void {
+  headers["User-Agent"] = `wrangler/${wranglerVersion}`;
+}
+
 /**
  * The implementation for fetching a kv value from the cloudflare API.
  * We special-case this one call, because it's the only API call that

package/src/config/config.ts

@@ -184,7 +184,7 @@ export interface DevConfig {
   /**
    * Host to forward requests to, defaults to the host of the first route of project
    */
-  host: Config["route"];
+  host: string | undefined;
 }
 
 export type RawDevConfig = Partial<DevConfig>;

package/src/config/validation-helpers.ts

@@ -277,12 +277,21 @@ export const isObjectWith =
         !properties.every((prop) => prop in value))
     ) {
       diagnostics.errors.push(
-        `Expected "${field}" to be of type object, containing properties ${properties}, but got ${JSON.stringify(
+        `Expected "${field}" to be of type object, containing only properties ${properties}, but got ${JSON.stringify(
           value
         )}.`
       );
       return false;
     }
+    // it's an object with the field as desired,
+    // but let's also check for unexpected fields
+    if (value !== undefined) {
+      const restFields = Object.keys(value).filter(
+        (key) => !properties.includes(key)
+      );
+      validateAdditionalProperties(diagnostics, field, restFields, []);
+    }
+
     return true;
   };
 

package/src/config/validation.ts

@@ -94,22 +94,6 @@ export function normalizeAndValidateConfig(
     "boolean"
   );
 
-  validateOptionalProperty(
-    diagnostics,
-    "",
-    "minify",
-    rawConfig.minify,
-    "boolean"
-  );
-
-  validateOptionalProperty(
-    diagnostics,
-    "",
-    "node_compat",
-    rawConfig.node_compat,
-    "boolean"
-  );
-
   // TODO: set the default to false to turn on service environments as the default
   const isLegacyEnv =
     (args as { "legacy-env": boolean | undefined })["legacy-env"] ??
@@ -400,29 +384,38 @@ function normalizeAndValidateMigrations(
     return [];
   } else {
     for (let i = 0; i < rawMigrations.length; i++) {
-      const migration = rawMigrations[i];
+      const { tag, new_classes, renamed_classes, deleted_classes, ...rest } =
+        rawMigrations[i];
+
+      validateAdditionalProperties(
+        diagnostics,
+        "migrations",
+        Object.keys(rest),
+        []
+      );
+
       validateRequiredProperty(
         diagnostics,
         `migrations[${i}]`,
         `tag`,
-        migration.tag,
+        tag,
         "string"
       );
       validateOptionalTypedArray(
         diagnostics,
         `migrations[${i}].new_classes`,
-        migration.new_classes,
+        new_classes,
         "string"
       );
-      if (migration.renamed_classes !== undefined) {
-        if (!Array.isArray(migration.renamed_classes)) {
+      if (renamed_classes !== undefined) {
+        if (!Array.isArray(renamed_classes)) {
           diagnostics.errors.push(
             `Expected "migrations[${i}].renamed_classes" to be an array of "{from: string, to: string}" objects but got ${JSON.stringify(
-              migration.renamed_classes
+              renamed_classes
             )}.`
           );
         } else if (
-          migration.renamed_classes.some(
+          renamed_classes.some(
             (c) =>
               typeof c !== "object" ||
               !isRequiredProperty(c, "from", "string") ||
@@ -431,7 +424,7 @@ function normalizeAndValidateMigrations(
         ) {
           diagnostics.errors.push(
             `Expected "migrations[${i}].renamed_classes" to be an array of "{from: string, to: string}" objects but got ${JSON.stringify(
-              migration.renamed_classes
+              renamed_classes
             )}.`
           );
         }
@@ -439,7 +432,7 @@ function normalizeAndValidateMigrations(
       validateOptionalTypedArray(
         diagnostics,
         `migrations[${i}].deleted_classes`,
-        migration.deleted_classes,
+        deleted_classes,
         "string"
       );
     }
@@ -453,13 +446,32 @@ function normalizeAndValidateMigrations(
         (binding) => !binding.script_name
       );
       if (exportedDurableObjects.length > 0 && rawMigrations.length === 0) {
-        diagnostics.warnings.push(
-          `In wrangler.toml, you have configured [durable_objects] exported by this Worker (${exportedDurableObjects
-            .map((durable) => durable.class_name || "(unnamed)")
-            .join(
+        if (
+          !exportedDurableObjects.some(
+            (exportedDurableObject) =>
+              typeof exportedDurableObject.class_name !== "string"
+          )
+        ) {
+          const durableObjectClassnames = exportedDurableObjects.map(
+            (durable) => durable.class_name
+          );
+
+          diagnostics.warnings.push(
+            `In wrangler.toml, you have configured [durable_objects] exported by this Worker (${durableObjectClassnames.join(
               ", "
-            )}), but no [migrations] for them. This may not work as expected until you add a [migrations] section to your wrangler.toml. Refer to https://developers.cloudflare.com/workers/learning/using-durable-objects/#durable-object-migrations-in-wranglertoml for more details.`
-        );
+            )}), but no [migrations] for them. This may not work as expected until you add a [migrations] section to your wrangler.toml. Add this configuration to your wrangler.toml:
+
+  \`\`\`
+  [[migrations]]
+  tag = "v1" # Should be unique for each entry
+  new_classes = [${durableObjectClassnames
+    .map((name) => `"${name}"`)
+    .join(", ")}]
+  \`\`\`
+
+Refer to https://developers.cloudflare.com/workers/learning/using-durable-objects/#durable-object-migrations-in-wranglertoml for more details.`
+          );
+        }
       }
     }
 
@@ -928,8 +940,22 @@ function normalizeAndValidateEnvironment(
       }
     ),
     zone_id: rawEnv.zone_id,
-    minify: rawEnv.minify,
-    node_compat: rawEnv.node_compat,
+    minify: inheritable(
+      diagnostics,
+      topLevelEnv,
+      rawEnv,
+      "minify",
+      isBoolean,
+      undefined
+    ),
+    node_compat: inheritable(
+      diagnostics,
+      topLevelEnv,
+      rawEnv,
+      "node_compat",
+      isBoolean,
+      undefined
+    ),
   };
 
   return environment;

package/src/create-worker-preview.ts

@@ -63,7 +63,7 @@ async function sessionToken(
 ): Promise<CfPreviewToken> {
   const { accountId } = account;
   const initUrl = ctx.zone
-    ? `/zones/${ctx.zone.id}/workers/edge-preview`
+    ? `/zones/${ctx.zone}/workers/edge-preview`
     : `/accounts/${accountId}/workers/subdomain/edge-preview`;
 
   const { exchange_url } = await fetchResult<{ exchange_url: string }>(
@@ -111,7 +111,7 @@ async function createPreviewToken(
   );
 
   const { accountId } = account;
-  const scriptId = ctx.zone ? randomId() : worker.name || host.split(".")[0];
+  const scriptId = worker.name || (ctx.zone ? randomId() : host.split(".")[0]);
   const url =
     ctx.env && !ctx.legacyEnv
       ? `/accounts/${accountId}/workers/services/${scriptId}/environments/${ctx.env}/edge-preview`
@@ -139,19 +139,19 @@ async function createPreviewToken(
 
   return {
     value: preview_token,
-    host: ctx.zone
-      ? ctx.zone.host
-      : worker.name
-      ? `${
-          worker.name
-          // TODO: this should also probably have the env prefix
-          // but it doesn't appear to work yet, instead giving us the
-          // "There is nothing here yet" screen
-          // ctx.env && !ctx.legacyEnv
-          //   ? `${ctx.env}.${worker.name}`
-          //   : worker.name
-        }.${host.split(".").slice(1).join(".")}`
-      : host,
+    host:
+      ctx.host ??
+      (worker.name
+        ? `${
+            worker.name
+            // TODO: this should also probably have the env prefix
+            // but it doesn't appear to work yet, instead giving us the
+            // "There is nothing here yet" screen
+            // ctx.env && !ctx.legacyEnv
+            //   ? `${ctx.env}.${worker.name}`
+            //   : worker.name
+          }.${host.split(".").slice(1).join(".")}`
+        : host),
 
     inspectorUrl,
     prewarmUrl,

package/src/dev/dev.tsx

@@ -9,12 +9,10 @@ import { withErrorBoundary, useErrorHandler } from "react-error-boundary";
 import onExit from "signal-exit";
 import tmp from "tmp-promise";
 import { fetch } from "undici";
-import { printBindings } from "../config";
 import { runCustomBuild } from "../entry";
 import { openInspector } from "../inspect";
 import { logger } from "../logger";
 import openInBrowser from "../open-in-browser";
-import { getAPIToken } from "../user";
 import { Local } from "./local";
 import { Remote } from "./remote";
 import { useEsbuild } from "./use-esbuild";
@@ -55,16 +53,11 @@ export type DevProps = {
   };
   env: string | undefined;
   legacyEnv: boolean;
-  zone:
-    | {
-        id: string;
-        host: string;
-      }
-    | undefined;
+  zone: string | undefined;
+  host: string | undefined;
 };
 
 export function DevImplementation(props: DevProps): JSX.Element {
-  const apiToken = props.initialMode === "remote" ? getAPIToken() : undefined;
   const directory = useTmpDir();
 
   useCustomBuild(props.entry, props.build);
@@ -106,24 +99,20 @@ export function DevImplementation(props: DevProps): JSX.Element {
     nodeCompat: props.nodeCompat,
   });
 
-  printBindings(props.bindings);
-
   // only load the UI if we're running in a supported environment
   const { isRawModeSupported } = useStdin();
   return isRawModeSupported ? (
-    <InteractiveDevSession {...props} bundle={bundle} apiToken={apiToken} />
+    <InteractiveDevSession {...props} bundle={bundle} />
   ) : (
     <DevSession
       {...props}
       bundle={bundle}
-      apiToken={apiToken}
       local={props.initialMode === "local"}
     />
   );
 }
 
 type InteractiveDevSessionProps = DevProps & {
-  apiToken: string | undefined;
   bundle: EsbuildBundle | undefined;
 };
 
@@ -186,7 +175,6 @@ function DevSession(props: DevSessionProps) {
       bundle={props.bundle}
       format={props.entry.format}
       accountId={props.accountId}
-      apiToken={props.apiToken}
       bindings={props.bindings}
       assetPaths={props.assetPaths}
       public={props.public}
@@ -200,6 +188,7 @@ function DevSession(props: DevSessionProps) {
       env={props.env}
       legacyEnv={props.legacyEnv}
       zone={props.zone}
+      host={props.host}
     />
   );
 }

package/src/dev/remote.tsx

@@ -1,4 +1,3 @@
-import assert from "node:assert";
 import { readFile } from "node:fs/promises";
 import path from "node:path";
 import { useState, useEffect, useRef } from "react";
@@ -7,6 +6,7 @@ import useInspector from "../inspect";
 import { logger } from "../logger";
 import { usePreviewServer } from "../proxy";
 import { syncAssets } from "../sites";
+import { requireApiToken, requireAuth } from "../user";
 import type { CfPreviewToken } from "../create-worker-preview";
 import type { AssetPaths } from "../sites";
 import type { CfModule, CfWorkerInit, CfScriptFormat } from "../worker";
@@ -23,24 +23,21 @@ export function Remote(props: {
   localProtocol: "https" | "http";
   inspectorPort: number;
   accountId: string | undefined;
-  apiToken: string | undefined;
   bindings: CfWorkerInit["bindings"];
   compatibilityDate: string;
   compatibilityFlags: string[] | undefined;
   usageModel: "bundled" | "unbound" | undefined;
   env: string | undefined;
   legacyEnv: boolean | undefined;
-  zone: { id: string; host: string } | undefined;
+  zone: string | undefined;
+  host: string | undefined;
 }) {
-  assert(props.accountId, "accountId is required");
-  assert(props.apiToken, "apiToken is required");
   const previewToken = useWorker({
     name: props.name,
     bundle: props.bundle,
     format: props.format,
     modules: props.bundle ? props.bundle.modules : [],
     accountId: props.accountId,
-    apiToken: props.apiToken,
     bindings: props.bindings,
     assetPaths: props.assetPaths,
     port: props.port,
@@ -50,6 +47,7 @@ export function Remote(props: {
     env: props.env,
     legacyEnv: props.legacyEnv,
     zone: props.zone,
+    host: props.host,
   });
 
   usePreviewServer({
@@ -73,8 +71,7 @@ export function useWorker(props: {
   bundle: EsbuildBundle | undefined;
   format: CfScriptFormat | undefined;
   modules: CfModule[];
-  accountId: string;
-  apiToken: string;
+  accountId: string | undefined;
   bindings: CfWorkerInit["bindings"];
   assetPaths: AssetPaths | undefined;
   port: number;
@@ -83,7 +80,8 @@ export function useWorker(props: {
   usageModel: "bundled" | "unbound" | undefined;
   env: string | undefined;
   legacyEnv: boolean | undefined;
-  zone: { id: string; host: string } | undefined;
+  zone: string | undefined;
+  host: string | undefined;
 }): CfPreviewToken | undefined {
   const {
     name,
@@ -91,7 +89,6 @@ export function useWorker(props: {
     format,
     modules,
     accountId,
-    apiToken,
     bindings,
     assetPaths,
     compatibilityDate,
@@ -105,6 +102,9 @@ export function useWorker(props: {
   // something's "happened" in our system; We make a ref and
   // mark it once we log our initial message. Refs are vars!
   const startedRef = useRef(false);
+  // This ref holds the actual accountId being used, the `accountId` prop could be undefined
+  // as it is only what is retrieved from the wrangler.toml config.
+  const accountIdRef = useRef(accountId);
 
   useEffect(() => {
     const abortController = new AbortController();
@@ -119,8 +119,13 @@ export function useWorker(props: {
         logger.log("⎔ Detected changes, restarted server.");
       }
 
+      // Ensure we have an account id, even if it means logging in here.
+      accountIdRef.current = await requireAuth({
+        account_id: accountIdRef.current,
+      });
+
       const assets = await syncAssets(
-        accountId,
+        accountIdRef.current,
         // When we're using the newer service environments, we wouldn't
         // have added the env name on to the script name. However, we must
         // include it in the kv namespace name regardless (since there's no
@@ -173,10 +178,15 @@ export function useWorker(props: {
         await createWorkerPreview(
           init,
           {
-            accountId,
-            apiToken,
+            accountId: accountIdRef.current,
+            apiToken: requireApiToken(),
+          },
+          {
+            env: props.env,
+            legacyEnv: props.legacyEnv,
+            zone: props.zone,
+            host: props.host,
           },
-          { env: props.env, legacyEnv: props.legacyEnv, zone: props.zone },
           abortController.signal
         )
       );
@@ -193,7 +203,7 @@ export function useWorker(props: {
             "Error: You need to register a workers.dev subdomain before running the dev command in remote mode";
           const solutionMessage =
             "You can either enable local mode by pressing l, or register a workers.dev subdomain here:";
-          const onboardingLink = `https://dash.cloudflare.com/${accountId}/workers/onboarding`;
+          const onboardingLink = `https://dash.cloudflare.com/${accountIdRef.current}/workers/onboarding`;
           logger.error(
             `${errorMessage}\n${solutionMessage}\n${onboardingLink}`
           );
@@ -211,7 +221,6 @@ export function useWorker(props: {
     bundle,
     format,
     accountId,
-    apiToken,
     port,
     assetPaths,
     compatibilityDate,
@@ -222,6 +231,7 @@ export function useWorker(props: {
     props.env,
     props.legacyEnv,
     props.zone,
+    props.host,
   ]);
   return token;
 }

package/src/dialogs.tsx

@@ -1,5 +1,6 @@
 import chalk from "chalk";
 import { Box, Text, useInput, render } from "ink";
+import SelectInput from "ink-select-input";
 import TextInput from "ink-text-input";
 import * as React from "react";
 import { useState } from "react";
@@ -85,3 +86,50 @@ export async function prompt(
     );
   });
 }
+
+type SelectOption = {
+  value: string;
+  label: string;
+};
+
+type SelectProps = {
+  text: string;
+  options: SelectOption[];
+  initialIndex: number;
+  onSelect: (value: string) => void;
+};
+
+function Select(props: SelectProps) {
+  return (
+    <Box flexDirection="column">
+      <Text>{props.text}</Text>
+      <SelectInput
+        initialIndex={props.initialIndex}
+        items={props.options}
+        onSelect={async (selected) => {
+          props.onSelect(selected.value);
+        }}
+      />
+    </Box>
+  );
+}
+
+export function select(
+  text: string,
+  options: SelectOption[],
+  initialIndex: number
+): Promise<string> {
+  return new Promise((resolve) => {
+    const { unmount } = render(
+      <Select
+        text={text}
+        options={options}
+        initialIndex={initialIndex}
+        onSelect={(option: string) => {
+          unmount();
+          resolve(option);
+        }}
+      />
+    );
+  });
+}