wrangler 2.0.8 → 2.0.12

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/bundle.ts

@@ -154,9 +154,7 @@ export async function bundleWorker(
   };
 }
 
-type EntryPoint =
-  | { stdin: esbuild.StdinOptions; nodePaths: string[] }
-  | { entryPoints: string[] };
+type EntryPoint = { stdin: esbuild.StdinOptions } | { entryPoints: string[] };
 
 /**
  * Create an object that describes the entry point for esbuild.
@@ -177,11 +175,17 @@ function getEntryPoint(
             path.join(__dirname, "../templates/static-asset-facade.js"),
             "utf8"
           )
-          .replace("__ENTRY_POINT__", entryFile),
+          // on windows, escape backslashes in the path (`\`)
+          .replace("__ENTRY_POINT__", entryFile.replaceAll("\\", "\\\\"))
+          .replace(
+            "__KV_ASSET_HANDLER__",
+            path
+              .join(__dirname, "../kv-asset-handler.js")
+              .replaceAll("\\", "\\\\")
+          ),
         sourcefile: "static-asset-facade.js",
         resolveDir: path.dirname(entryFile),
       },
-      nodePaths: [path.join(__dirname, "../vendor")],
     };
   } else {
     return { entryPoints: [entryFile] };

package/src/cfetch/internal.ts

@@ -1,8 +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";
 
@@ -30,6 +31,10 @@ 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);
@@ -90,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

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/environment.ts

@@ -175,7 +175,7 @@ interface EnvironmentInheritable {
     /** The directory in which the command is executed. */
     cwd?: string;
     /** The directory to watch for changes while using wrangler dev, defaults to the current working directory */
-    watch_dir?: string;
+    watch_dir?: string | string[];
     /**
      * Deprecated field previously used to configure the build and upload of the script.
      * @deprecated

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

@@ -227,19 +227,23 @@ function normalizeAndValidateBuild(
   rawBuild: Config["build"],
   configPath: string | undefined
 ): Config["build"] & { deprecatedUpload: DeprecatedUpload } {
-  const { command, cwd, watch_dir, upload, ...rest } = rawBuild;
+  const { command, cwd, watch_dir = "./src", upload, ...rest } = rawBuild;
   const deprecatedUpload: DeprecatedUpload = { ...upload };
   validateAdditionalProperties(diagnostics, "build", Object.keys(rest), []);
 
   validateOptionalProperty(diagnostics, "build", "command", command, "string");
   validateOptionalProperty(diagnostics, "build", "cwd", cwd, "string");
-  validateOptionalProperty(
-    diagnostics,
-    "build",
-    "watch_dir",
-    watch_dir,
-    "string"
-  );
+  if (Array.isArray(watch_dir)) {
+    validateTypedArray(diagnostics, "build.watch_dir", watch_dir, "string");
+  } else {
+    validateOptionalProperty(
+      diagnostics,
+      "build",
+      "watch_dir",
+      watch_dir,
+      "string"
+    );
+  }
 
   deprecated(
     diagnostics,
@@ -288,13 +292,18 @@ function normalizeAndValidateBuild(
       // - `configPath` will always be defined since `build` can only
       // be configured in `wrangler.toml`, but who knows, that may
       // change in the future, so we do a check anyway
-      command
-        ? configPath
-          ? path.relative(
+      command && configPath
+        ? Array.isArray(watch_dir)
+          ? watch_dir.map((dir) =>
+              path.relative(
+                process.cwd(),
+                path.join(path.dirname(configPath), `${dir}`)
+              )
+            )
+          : path.relative(
               process.cwd(),
-              path.join(path.dirname(configPath), watch_dir || "./src")
+              path.join(path.dirname(configPath), `${watch_dir}`)
             )
-          : watch_dir || "./src"
         : watch_dir,
     cwd,
     deprecatedUpload,

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

@@ -13,7 +13,6 @@ 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";
@@ -21,7 +20,6 @@ import type { Config } from "../config";
 import type { Entry } from "../entry";
 import type { AssetPaths } from "../sites";
 import type { CfWorkerInit } from "../worker";
-import type { EsbuildBundle } from "./use-esbuild";
 
 export type DevProps = {
   name?: string;
@@ -47,27 +45,14 @@ export type DevProps = {
   usageModel: "bundled" | "unbound" | undefined;
   minify: boolean | undefined;
   nodeCompat: boolean | undefined;
-  build: {
-    command?: string | undefined;
-    cwd?: string | undefined;
-    watch_dir?: string | undefined;
-  };
+  build: Config["build"];
   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);
-
   if (props.public && props.entry.format === "service-worker") {
     throw new Error(
       "You cannot use the service-worker format with a `public` directory."
@@ -92,39 +77,16 @@ export function DevImplementation(props: DevProps): JSX.Element {
     );
   }
 
-  const bundle = useEsbuild({
-    entry: props.entry,
-    destination: directory,
-    staticRoot: props.public,
-    jsxFactory: props.jsxFactory,
-    rules: props.rules,
-    jsxFragment: props.jsxFragment,
-    serveAssetsFromWorker: !!props.public,
-    tsconfig: props.tsconfig,
-    minify: props.minify,
-    nodeCompat: props.nodeCompat,
-  });
-
   // 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} />
   ) : (
-    <DevSession
-      {...props}
-      bundle={bundle}
-      apiToken={apiToken}
-      local={props.initialMode === "local"}
-    />
+    <DevSession {...props} local={props.initialMode === "local"} />
   );
 }
 
-type InteractiveDevSessionProps = DevProps & {
-  apiToken: string | undefined;
-  bundle: EsbuildBundle | undefined;
-};
-
-function InteractiveDevSession(props: InteractiveDevSessionProps) {
+function InteractiveDevSession(props: DevProps) {
   const toggles = useHotkeys(
     {
       local: props.initialMode === "local",
@@ -157,15 +119,36 @@ function InteractiveDevSession(props: InteractiveDevSessionProps) {
   );
 }
 
-type DevSessionProps = InteractiveDevSessionProps & { local: boolean };
+type DevSessionProps = DevProps & {
+  local: boolean;
+};
 
 function DevSession(props: DevSessionProps) {
+  useCustomBuild(props.entry, props.build);
+
+  const directory = useTmpDir();
+
+  const bundle = useEsbuild({
+    entry: props.entry,
+    destination: directory,
+    staticRoot: props.public,
+    jsxFactory: props.jsxFactory,
+    rules: props.rules,
+    jsxFragment: props.jsxFragment,
+    // In dev for remote mode, we serve --experimental-assets from the local proxy before we send the request to the worker.
+    serveAssetsFromWorker: !!props.public && !!props.local,
+    tsconfig: props.tsconfig,
+    minify: props.minify,
+    nodeCompat: props.nodeCompat,
+  });
+
   return props.local ? (
     <Local
       name={props.name}
-      bundle={props.bundle}
+      bundle={bundle}
       format={props.entry.format}
       compatibilityDate={props.compatibilityDate}
+      localProtocol={props.localProtocol}
       compatibilityFlags={props.compatibilityFlags}
       bindings={props.bindings}
       assetPaths={props.assetPaths}
@@ -180,10 +163,9 @@ function DevSession(props: DevSessionProps) {
   ) : (
     <Remote
       name={props.name}
-      bundle={props.bundle}
+      bundle={bundle}
       format={props.entry.format}
       accountId={props.accountId}
-      apiToken={props.apiToken}
       bindings={props.bindings}
       assetPaths={props.assetPaths}
       public={props.public}
@@ -197,6 +179,7 @@ function DevSession(props: DevSessionProps) {
       env={props.env}
       legacyEnv={props.legacyEnv}
       zone={props.zone}
+      host={props.host}
     />
   );
 }
@@ -228,14 +211,7 @@ function useTmpDir(): string | undefined {
   return directory?.name;
 }
 
-function useCustomBuild(
-  expectedEntry: Entry,
-  build: {
-    command?: string | undefined;
-    cwd?: string | undefined;
-    watch_dir?: string | undefined;
-  }
-): void {
+function useCustomBuild(expectedEntry: Entry, build: Config["build"]): void {
   useEffect(() => {
     if (!build.command) return;
     let watcher: ReturnType<typeof watch> | undefined;

package/src/dev/local.tsx

@@ -21,6 +21,7 @@ interface LocalProps {
   compatibilityDate: string;
   compatibilityFlags: string[] | undefined;
   bindings: CfWorkerInit["bindings"];
+  localProtocol: "http" | "https";
   assetPaths: AssetPaths | undefined;
   public: string | undefined;
   port: number;
@@ -54,6 +55,7 @@ function useLocalWorker({
   rules,
   enableLocalPersistence,
   ip,
+  localProtocol,
   crons,
 }: LocalProps) {
   // TODO: pass vars via command line
@@ -82,11 +84,6 @@ function useLocalWorker({
         abortSignal: abortController.signal,
       });
 
-      if (publicDirectory) {
-        throw new Error(
-          '⎔ A "public" folder is not yet supported in local mode.'
-        );
-      }
       if (bindings.services && bindings.services.length > 0) {
         throw new Error(
           "⎔ Service bindings are not yet supported in local mode."
@@ -164,6 +161,7 @@ function useLocalWorker({
         name: workerName,
         port,
         scriptPath,
+        https: localProtocol === "https",
         host: ip,
         modules: format === "modules",
         modulesRules: (rules || [])
@@ -251,12 +249,16 @@ function useLocalWorker({
         process.stdout.write(data);
       });
 
+      // parse the node inspector url (which may be received in chunks) from stderr
+      let stderrData = "";
       local.current.stderr?.on("data", (data: Buffer) => {
+        stderrData += data.toString();
         const matches =
-          /Debugger listening on (ws:\/\/127\.0\.0\.1:\d+\/[A-Za-z0-9-]+)/.exec(
-            data.toString()
+          /Debugger listening on (ws:\/\/127\.0\.0\.1:\d+\/[A-Za-z0-9-]+)[\r|\n]/.exec(
+            stderrData
           );
         if (matches) {
+          local.current?.stderr?.removeAllListeners("data");
           setInspectorUrl(matches[1]);
         }
       });
@@ -298,6 +300,7 @@ function useLocalWorker({
     workerName,
     format,
     port,
+    localProtocol,
     ip,
     bindings.durable_objects?.bindings,
     bindings.kv_namespaces,

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,26 +23,24 @@ 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,
+    public: props.public,
     port: props.port,
     compatibilityDate: props.compatibilityDate,
     compatibilityFlags: props.compatibilityFlags,
@@ -50,6 +48,7 @@ export function Remote(props: {
     env: props.env,
     legacyEnv: props.legacyEnv,
     zone: props.zone,
+    host: props.host,
   });
 
   usePreviewServer({
@@ -73,17 +72,18 @@ 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;
+  public: string | undefined;
   port: number;
   compatibilityDate: string | undefined;
   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;
 }): CfPreviewToken | undefined {
   const {
     name,
@@ -91,7 +91,6 @@ export function useWorker(props: {
     format,
     modules,
     accountId,
-    apiToken,
     bindings,
     assetPaths,
     compatibilityDate,
@@ -105,6 +104,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,14 +121,19 @@ 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
         // concept of service environments for kv namespaces yet).
         name + (!props.legacyEnv && props.env ? `-${props.env}` : ""),
-        assetPaths,
+        props.public ? undefined : assetPaths,
         true,
         false
       ); // TODO: cancellable?
@@ -173,10 +180,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 +205,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,9 +223,9 @@ export function useWorker(props: {
     bundle,
     format,
     accountId,
-    apiToken,
     port,
     assetPaths,
+    props.public,
     compatibilityDate,
     compatibilityFlags,
     usageModel,
@@ -222,6 +234,7 @@ export function useWorker(props: {
     props.env,
     props.legacyEnv,
     props.zone,
+    props.host,
   ]);
   return token;
 }

package/src/dev/use-esbuild.ts

@@ -14,7 +14,6 @@ export type EsbuildBundle = {
   entry: Entry;
   type: "esm" | "commonjs";
   modules: CfModule[];
-  serveAssetsFromWorker: boolean;
 };
 
 export function useEsbuild({
@@ -67,8 +66,7 @@ export function useEsbuild({
 
       const { resolvedEntryPointPath, bundleType, modules, stop } =
         await bundleWorker(entry, destination, {
-          // In dev, we serve assets from the local proxy before we send the request to the worker.
-          serveAssetsFromWorker: false,
+          serveAssetsFromWorker,
           jsxFactory,
           jsxFragment,
           rules,
@@ -87,7 +85,6 @@ export function useEsbuild({
         path: resolvedEntryPointPath,
         type: bundleType,
         modules,
-        serveAssetsFromWorker,
       });
     }