wrangler 2.0.9 → 2.0.14

package/src/__tests__/user.test.ts

@@ -46,6 +46,7 @@ describe("User", () => {
 
       expect(std.out).toMatchInlineSnapshot(`
         "Attempting to login via OAuth...
+        Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth?response_type=code&client_id=54d11594-84e4-41aa-b438-e81b8fa78ee7&redirect_uri=http%3A%2F%2Flocalhost%3A8976%2Foauth%2Fcallback&scope=account%3Aread%20user%3Aread%20workers%3Awrite%20workers_kv%3Awrite%20workers_routes%3Awrite%20workers_scripts%3Awrite%20workers_tail%3Aread%20pages%3Awrite%20zone%3Aread%20offline_access&state=MOCK_STATE_PARAM&code_challenge=MOCK_CODE_CHALLENGE&code_challenge_method=S256
         Successfully logged in."
       `);
 

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/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/dev/dev.tsx

@@ -20,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;
@@ -46,11 +45,7 @@ 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: string | undefined;
@@ -58,10 +53,6 @@ export type DevProps = {
 };
 
 export function DevImplementation(props: DevProps): JSX.Element {
-  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."
@@ -86,37 +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} />
+    <InteractiveDevSession {...props} />
   ) : (
-    <DevSession
-      {...props}
-      bundle={bundle}
-      local={props.initialMode === "local"}
-    />
+    <DevSession {...props} local={props.initialMode === "local"} />
   );
 }
 
-type InteractiveDevSessionProps = DevProps & {
-  bundle: EsbuildBundle | undefined;
-};
-
-function InteractiveDevSession(props: InteractiveDevSessionProps) {
+function InteractiveDevSession(props: DevProps) {
   const toggles = useHotkeys(
     {
       local: props.initialMode === "local",
@@ -149,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}
@@ -172,7 +163,7 @@ function DevSession(props: DevSessionProps) {
   ) : (
     <Remote
       name={props.name}
-      bundle={props.bundle}
+      bundle={bundle}
       format={props.entry.format}
       accountId={props.accountId}
       bindings={props.bindings}
@@ -220,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

@@ -40,6 +40,7 @@ export function Remote(props: {
     accountId: props.accountId,
     bindings: props.bindings,
     assetPaths: props.assetPaths,
+    public: props.public,
     port: props.port,
     compatibilityDate: props.compatibilityDate,
     compatibilityFlags: props.compatibilityFlags,
@@ -74,6 +75,7 @@ export function useWorker(props: {
   accountId: string | undefined;
   bindings: CfWorkerInit["bindings"];
   assetPaths: AssetPaths | undefined;
+  public: string | undefined;
   port: number;
   compatibilityDate: string | undefined;
   compatibilityFlags: string[] | undefined;
@@ -131,7 +133,7 @@ export function useWorker(props: {
         // 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?
@@ -223,6 +225,7 @@ export function useWorker(props: {
     accountId,
     port,
     assetPaths,
+    props.public,
     compatibilityDate,
     compatibilityFlags,
     usageModel,

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,
       });
     }
 

package/src/generate-auth-url.ts

@@ -0,0 +1,33 @@
+interface GenerateAuthUrlProps {
+  authUrl: string;
+  clientId: string;
+  callbackUrl: string;
+  scopes: string[];
+  stateQueryParam: string;
+  codeChallenge: string;
+}
+
+/**
+ * generateAuthUrl was extracted from getAuthURL in user.tsx
+ * to make it possible to mock the generated URL
+ */
+export const generateAuthUrl = ({
+  authUrl,
+  clientId,
+  callbackUrl,
+  scopes,
+  stateQueryParam,
+  codeChallenge,
+}: GenerateAuthUrlProps) => {
+  return (
+    authUrl +
+    `?response_type=code&` +
+    `client_id=${encodeURIComponent(clientId)}&` +
+    `redirect_uri=${encodeURIComponent(callbackUrl)}&` +
+    // we add offline_access manually for every request
+    `scope=${encodeURIComponent([...scopes, "offline_access"].join(" "))}&` +
+    `state=${stateQueryParam}&` +
+    `code_challenge=${encodeURIComponent(codeChallenge)}&` +
+    `code_challenge_method=S256`
+  );
+};

package/src/generate-random-state.ts

@@ -0,0 +1,16 @@
+import { webcrypto as crypto } from "node:crypto";
+import { PKCE_CHARSET } from "./user";
+
+/**
+ * Generates random state to be passed for anti-csrf.
+ * extracted from  user.tsx to make it possible to
+ * mock the generated URL
+ */
+export function generateRandomState(lengthOfState: number): string {
+  const output = new Uint32Array(lengthOfState);
+  // @ts-expect-error crypto's types aren't there yet
+  crypto.getRandomValues(output);
+  return Array.from(output)
+    .map((num: number) => PKCE_CHARSET[num % PKCE_CHARSET.length])
+    .join("");
+}