wrangler 2.0.11 → 2.0.12

package/src/__tests__/publish.test.ts

@@ -1404,6 +1404,69 @@ addEventListener('fetch', event => {});`
       expect(std.err).toMatchInlineSnapshot(`""`);
     });
 
+    it("should upload all the files in the directory specified by `--experimental-public`", async () => {
+      const assets = [
+        { filePath: "file-1.txt", content: "Content of file-1" },
+        { filePath: "file-2.txt", content: "Content of file-2" },
+      ];
+      const kvNamespace = {
+        title: "__test-name-workers_sites_assets",
+        id: "__test-name-workers_sites_assets-id",
+      };
+      writeWranglerToml({
+        main: "./index.js",
+      });
+      writeWorkerSource();
+      writeAssets(assets);
+      mockUploadWorkerRequest({
+        expectedMainModule: "stdin.js",
+      });
+      mockSubDomainRequest();
+      mockListKVNamespacesRequest(kvNamespace);
+      mockKeyListRequest(kvNamespace.id, []);
+      mockUploadAssetsToKVRequest(kvNamespace.id, assets);
+      await runWrangler("publish --experimental-public assets");
+
+      expect(std.out).toMatchInlineSnapshot(`
+        "Reading file-1.txt...
+        Uploading as file-1.2ca234f380.txt...
+        Reading file-2.txt...
+        Uploading as file-2.5938485188.txt...
+        ↗️  Done syncing assets
+        Uploaded test-name (TIMINGS)
+        Published test-name (TIMINGS)
+          test-name.test-sub-domain.workers.dev"
+      `);
+      expect(std.err).toMatchInlineSnapshot(`""`);
+    });
+
+    it("should error if --experimental-public and --site are used together", async () => {
+      writeWranglerToml({
+        main: "./index.js",
+      });
+      writeWorkerSource();
+      await expect(
+        runWrangler("publish --experimental-public abc --site xyz")
+      ).rejects.toThrowErrorMatchingInlineSnapshot(
+        `"Cannot use --experimental-public and a Site configuration together."`
+      );
+    });
+
+    it("should error if --experimental-public and config.site are used together", async () => {
+      writeWranglerToml({
+        main: "./index.js",
+        site: {
+          bucket: "xyz",
+        },
+      });
+      writeWorkerSource();
+      await expect(
+        runWrangler("publish --experimental-public abc")
+      ).rejects.toThrowErrorMatchingInlineSnapshot(
+        `"Cannot use --experimental-public and a Site configuration together."`
+      );
+    });
+
     it("should not contain backslash for assets with nested directories", async () => {
       const assets = [
         { filePath: "subdir/file-1.txt", content: "Content of file-1" },
@@ -2098,34 +2161,25 @@ addEventListener('fetch', event => {});`
       mockSubDomainRequest();
       mockListKVNamespacesRequest(kvNamespace);
       mockKeyListRequest(kvNamespace.id, []);
+      const requests = mockUploadAssetsToKVRequest(kvNamespace.id);
+
+      await runWrangler("publish");
 
       // We expect this to be uploaded in 3 batches
       // The first batch has 11 files (88mb)
+      expect(requests[0].uploads.length).toEqual(11);
       // The next batch has 5 files (93mb)
+      expect(requests[1].uploads.length).toEqual(5);
       // And the last one has 4 files (98mb)
+      expect(requests[2].uploads.length).toEqual(4);
 
-      // Since the bulk upload api endpoint stays the same
-      // We're going to have to clear the mock as soon as it's resolved
-      // And immediately add a mock for another one
-      // Welcome to a callback pyramid in 2022
-
-      const removeFirstBulkUploadMockFn = mockUploadAssetsToKVRequest(
-        kvNamespace.id,
-        assets.slice(0, 11),
-        () => {
-          removeFirstBulkUploadMockFn();
-          const removeSecondBulkUploadMockFn = mockUploadAssetsToKVRequest(
-            kvNamespace.id,
-            assets.slice(11, 16),
-            () => {
-              removeSecondBulkUploadMockFn();
-              mockUploadAssetsToKVRequest(kvNamespace.id, assets.slice(16, 20));
-            }
-          );
+      let assetIndex = 0;
+      for (const request of requests) {
+        for (const upload of request.uploads) {
+          checkAssetUpload(assets[assetIndex], upload);
+          assetIndex++;
         }
-      );
-
-      await runWrangler("publish");
+      }
 
       expect(std).toMatchInlineSnapshot(`
         Object {
@@ -2276,6 +2330,59 @@ addEventListener('fetch', event => {});`
       `);
       expect(std.err).toMatchInlineSnapshot(`""`);
     });
+
+    it("should generate an asset manifest with keys relative to site.bucket", async () => {
+      const assets = [
+        { filePath: "file-1.txt", content: "Content of file-1" },
+        { filePath: "file-2.txt", content: "Content of file-2" },
+      ];
+      const kvNamespace = {
+        title: "__test-name-workers_sites_assets",
+        id: "__test-name-workers_sites_assets-id",
+      };
+
+      writeWranglerToml({
+        main: "./src/index.js",
+        site: {
+          bucket: "assets",
+        },
+      });
+      writeWorkerSource({ basePath: "src", type: "esm" });
+      writeAssets(assets);
+      mockUploadWorkerRequest({
+        expectedBindings: [
+          {
+            name: "__STATIC_CONTENT",
+            namespace_id: "__test-name-workers_sites_assets-id",
+            type: "kv_namespace",
+          },
+        ],
+        expectedModules: {
+          __STATIC_CONTENT_MANIFEST:
+            '{"file-1.txt":"file-1.2ca234f380.txt","file-2.txt":"file-2.5938485188.txt"}',
+        },
+      });
+      mockSubDomainRequest();
+      mockListKVNamespacesRequest(kvNamespace);
+      mockKeyListRequest(kvNamespace.id, []);
+      mockUploadAssetsToKVRequest(kvNamespace.id, assets);
+
+      process.chdir("./src");
+      await runWrangler("publish");
+      process.chdir("../");
+
+      expect(std.out).toMatchInlineSnapshot(`
+        "Reading file-1.txt...
+        Uploading as file-1.2ca234f380.txt...
+        Reading file-2.txt...
+        Uploading as file-2.5938485188.txt...
+        ↗️  Done syncing assets
+        Uploaded test-name (TIMINGS)
+        Published test-name (TIMINGS)
+          test-name.test-sub-domain.workers.dev"
+      `);
+      expect(std.err).toMatchInlineSnapshot(`""`);
+    });
   });
 
   describe("workers_dev setting", () => {
@@ -5258,6 +5365,7 @@ function mockUploadWorkerRequest(
   options: {
     available_on_subdomain?: boolean;
     expectedEntry?: string;
+    expectedMainModule?: string;
     expectedType?: "esm" | "sw";
     expectedBindings?: unknown;
     expectedModules?: Record<string, string>;
@@ -5271,6 +5379,7 @@ function mockUploadWorkerRequest(
   const {
     available_on_subdomain = true,
     expectedEntry,
+    expectedMainModule = "index.js",
     expectedType = "esm",
     expectedBindings,
     expectedModules = {},
@@ -5294,6 +5403,7 @@ function mockUploadWorkerRequest(
         expect(envName).toEqual(env);
       }
       expect(queryParams.get("include_subdomain_availability")).toEqual("true");
+      expect(queryParams.get("excludeScript")).toEqual("true");
       const formBody = body as FormData;
       if (expectedEntry !== undefined) {
         expect(await (formBody.get("index.js") as File).text()).toMatch(
@@ -5304,7 +5414,7 @@ function mockUploadWorkerRequest(
         formBody.get("metadata") as string
       ) as WorkerMetadata;
       if (expectedType === "esm") {
-        expect(metadata.main_module).toEqual("index.js");
+        expect(metadata.main_module).toEqual(expectedMainModule);
       } else {
         expect(metadata.body_part).toEqual("index.js");
       }
@@ -5565,51 +5675,60 @@ function mockListKVNamespacesRequest(...namespaces: KVNamespaceInfo[]) {
   );
 }
 
+interface ExpectedAsset {
+  filePath: string;
+  content: string;
+  expiration?: number;
+  expiration_ttl?: number;
+}
+interface StaticAssetUpload {
+  key: string;
+  base64: boolean;
+  value: string;
+  expiration: number | undefined;
+  expiration_ttl: number | undefined;
+}
+
 /** Create a mock handler for the request that tries to do a bulk upload of assets to a KV namespace. */
 function mockUploadAssetsToKVRequest(
   expectedNamespaceId: string,
-  assets: {
-    filePath: string;
-    content: string;
-    expiration?: number;
-    expiration_ttl?: number;
-  }[],
-  onUpload?: () => void
+  assets?: ExpectedAsset[]
 ) {
-  return setMockResponse(
+  const requests: {
+    uploads: StaticAssetUpload[];
+  }[] = [];
+  setMockResponse(
     "/accounts/:accountId/storage/kv/namespaces/:namespaceId/bulk",
     "PUT",
     ([_url, accountId, namespaceId], { body }) => {
       expect(accountId).toEqual("some-account-id");
       expect(namespaceId).toEqual(expectedNamespaceId);
       const uploads = JSON.parse(body as string);
-      expect(assets.length).toEqual(uploads.length);
-      for (let i = 0; i < uploads.length; i++) {
-        const asset = assets[i];
-        const upload = uploads[i];
-        // The asset key consists of:
-        // - the basename of the filepath
-        // - some hash value
-        // - the extension
-        const keyMatcher = new RegExp(
-          "^" +
-            asset.filePath
-              .replace(/(\.[^.]+)$/, ".[a-z0-9]+$1")
-              .replace(/\./g, "\\.")
-        );
-        expect(upload.key).toMatch(keyMatcher);
-        // The asset value is base64 encoded.
-        expect(upload.base64).toBe(true);
-        expect(Buffer.from(upload.value, "base64").toString()).toEqual(
-          asset.content
-        );
-        expect(upload.expiration).toEqual(asset.expiration);
-        expect(upload.expiration_ttl).toEqual(asset.expiration_ttl);
+      if (assets) {
+        expect(assets.length).toEqual(uploads.length);
+        for (let i = 0; i < uploads.length; i++) {
+          checkAssetUpload(assets[i], uploads[i]);
+        }
+      } else {
+        requests.push({ uploads });
       }
-      onUpload?.();
-      return null;
     }
   );
+  return requests;
+}
+
+function checkAssetUpload(asset: ExpectedAsset, upload: StaticAssetUpload) {
+  // The asset key consists of: `<basename>.<hash>.<extension>`
+  const keyMatcher = new RegExp(
+    "^" +
+      asset.filePath.replace(/(\.[^.]+)$/, ".[a-z0-9]+$1").replace(/\./g, "\\.")
+  );
+  expect(upload.key).toMatch(keyMatcher);
+  // The asset value is base64 encoded.
+  expect(upload.base64).toBe(true);
+  expect(Buffer.from(upload.value, "base64").toString()).toEqual(asset.content);
+  expect(upload.expiration).toEqual(asset.expiration);
+  expect(upload.expiration_ttl).toEqual(asset.expiration_ttl);
 }
 
 /** Create a mock handler for thr request that does a bulk delete of unused assets */

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