wrangler 0.0.0-e043479 → 0.0.0-e0b9366

package/src/module-collection.ts

@@ -2,8 +2,8 @@ import crypto from "node:crypto";
 import { readFile } from "node:fs/promises";
 import path from "node:path";
 import globToRegExp from "glob-to-regexp";
-import type { CfModule, CfModuleType, CfScriptFormat } from "./api/worker";
 import type { Config, ConfigModuleRuleType } from "./config";
+import type { CfModule, CfModuleType, CfScriptFormat } from "./worker";
 import type esbuild from "esbuild";
 
 const RuleTypeToModuleType: Record<ConfigModuleRuleType, CfModuleType> = {
@@ -28,9 +28,15 @@ export const DEFAULT_MODULE_RULES: Config["rules"] = [
   { type: "CompiledWasm", globs: ["**/*.wasm"] },
 ];
 
-export default function makeModuleCollector(props: {
+export default function createModuleCollector(props: {
   format: CfScriptFormat;
   rules?: Config["rules"];
+  // a collection of "legacy" style module references, which are just file names
+  // we will eventually deprecate this functionality, hence the verbose greppable name
+  wrangler1xlegacyModuleReferences: {
+    rootDirectory: string;
+    fileNames: Set<string>;
+  };
 }): {
   modules: CfModule[];
   plugin: esbuild.Plugin;
@@ -41,6 +47,10 @@ export default function makeModuleCollector(props: {
     ...DEFAULT_MODULE_RULES!,
   ];
 
+  // First, we want to add some validations to the module rules
+  // We want to warn if rules are accidentally configured in such a way that
+  // subsequent rules will never match because `fallthrough` hasn't been set
+
   const completedRuleLocations: Record<string, number> = {};
   let index = 0;
   const rulesToRemove: Config["rules"] = [];
@@ -92,6 +102,79 @@ export default function makeModuleCollector(props: {
           modules.splice(0);
         });
 
+        // ~ start  legacy module specifier support ~
+
+        // This section detects usage of "legacy" 1.x style module specifiers
+        // and modifies them so they "work" in wrangler v2, but with a warning
+
+        const rulesMatchers = rules.flatMap((rule) => {
+          return rule.globs.map((glob) => {
+            const regex = globToRegExp(glob);
+            return {
+              regex,
+              rule,
+            };
+          });
+        });
+
+        build.onResolve(
+          {
+            filter: new RegExp(
+              [...props.wrangler1xlegacyModuleReferences.fileNames]
+                .map((fileName) => `^${fileName}$`)
+                .join("|")
+            ),
+          },
+          async (args: esbuild.OnResolveArgs) => {
+            if (
+              args.kind !== "import-statement" &&
+              args.kind !== "require-call"
+            ) {
+              return;
+            }
+            // In the future, this will simply throw an error
+            console.warn(
+              `Deprecation warning: detected a legacy module import in "./${path.relative(
+                process.cwd(),
+                args.importer
+              )}". This will stop working in the future. Replace references to "${
+                args.path
+              }" with "./${args.path}";`
+            );
+
+            // take the file and massage it to a
+            // transportable/manageable format
+            const filePath = path.join(
+              props.wrangler1xlegacyModuleReferences.rootDirectory,
+              args.path
+            );
+            const fileContent = await readFile(filePath);
+            const fileHash = crypto
+              .createHash("sha1")
+              .update(fileContent)
+              .digest("hex");
+            const fileName = `./${fileHash}-${path.basename(args.path)}`;
+
+            const { rule } =
+              rulesMatchers.find(({ regex }) => regex.test(fileName)) || {};
+            if (rule) {
+              // add the module to the array
+              modules.push({
+                name: fileName,
+                content: fileContent,
+                type: RuleTypeToModuleType[rule.type],
+              });
+              return {
+                path: fileName, // change the reference to the changed module
+                external: props.format === "modules", // mark it as external in the bundle
+                namespace: `wrangler-module-${rule.type}`, // just a tag, this isn't strictly necessary
+                watchFiles: [filePath], // we also add the file to esbuild's watch list
+              };
+            }
+          }
+        );
+        // ~ end legacy module specifier support ~
+
         rules?.forEach((rule) => {
           if (rule.type === "ESModule" || rule.type === "CommonJS") return; // TODO: we should treat these as js files, and use the jsx loader
 

package/src/open-in-browser.ts

@@ -1,12 +1,24 @@
 import open from "open";
+
 /**
  * An extremely simple wrapper around the open command.
  * Specifically, it adds an 'error' event handler so that when this function
  * is called in environments where we can't open the browser (e.g. github codespaces,
  * stackblitz, remote servers), it doesn't just crash the process.
+ *
+ * @param url the URL to point the browser at
+ * @param options open a chromium-based browser instead of the default
  */
-export default async function openInBrowser(url: string): Promise<void> {
-  const childProcess = await open(url);
+export default async function openInBrowser(
+  url: string,
+  { forceChromium }: { forceChromium: boolean } = { forceChromium: false }
+): Promise<void> {
+  const options: open.Options | undefined = forceChromium
+    ? {
+        app: [{ name: open.apps.chrome }, { name: open.apps.edge }],
+      }
+    : undefined;
+  const childProcess = await open(url, options);
   childProcess.on("error", () => {
     console.warn(`Failed to open ${url} in a browser`);
   });

package/src/pages.tsx

@@ -895,7 +895,7 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
           // User bindings
           bindings: {
             ...Object.fromEntries(
-              bindings.map((binding) => binding.toString().split("="))
+              bindings.map((binding) => binding.toString().split("=", 1))
             ),
           },
 

package/src/proxy.ts

@@ -1,17 +1,21 @@
-import { createServer } from "node:http";
+import { createServer as createHttpServer } from "node:http";
 import { connect } from "node:http2";
+import { createServer as createHttpsServer } from "node:https";
 import WebSocket from "faye-websocket";
 import { useEffect, useRef, useState } from "react";
 import serveStatic from "serve-static";
-import type { CfPreviewToken } from "./api/preview";
+import { getHttpsOptions } from "./https-options";
+import { reportError } from "./reporting";
+import type { CfPreviewToken } from "./create-worker-preview";
 import type {
   IncomingHttpHeaders,
   RequestListener,
   IncomingMessage,
   ServerResponse,
-  Server,
+  Server as HttpServer,
 } from "node:http";
 import type { ClientHttp2Session, ServerHttp2Stream } from "node:http2";
+import type { Server as HttpsServer } from "node:https";
 import type ws from "ws";
 
 interface IWebsocket extends ws {
@@ -47,13 +51,17 @@ function addCfPreviewTokenHeader(
 function rewriteRemoteHostToLocalHostInHeaders(
   headers: IncomingHttpHeaders,
   remoteHost: string,
-  localPort: number
+  localPort: number,
+  localProtocol: "https" | "http"
 ) {
   for (const [name, value] of Object.entries(headers)) {
     // Rewrite the remote host to the local host.
     if (typeof value === "string" && value.includes(remoteHost)) {
       headers[name] = value
-        .replaceAll(`https://${remoteHost}`, `http://localhost:${localPort}`)
+        .replaceAll(
+          `https://${remoteHost}`,
+          `${localProtocol}://localhost:${localPort}`
+        )
         .replaceAll(remoteHost, `localhost:${localPort}`);
     }
   }
@@ -62,15 +70,31 @@ function rewriteRemoteHostToLocalHostInHeaders(
 export function usePreviewServer({
   previewToken,
   publicRoot,
-  port,
+  localProtocol,
+  localPort: port,
 }: {
   previewToken: CfPreviewToken | undefined;
   publicRoot: undefined | string;
-  port: number;
+  localProtocol: "https" | "http";
+  localPort: number;
 }) {
   /** Creates an HTTP/1 proxy that sends requests over HTTP/2. */
-  const proxyServer = useRef<Server>();
-  const proxy = (proxyServer.current ??= createProxyServer());
+  const [proxyServer, setProxyServer] = useState<HttpServer | HttpsServer>();
+
+  /**
+   * Create the instance of the local proxy server that will pass on
+   * requests to the preview worker.
+   */
+  useEffect(() => {
+    if (proxyServer === undefined) {
+      createProxyServer(localProtocol)
+        .then((proxy) => setProxyServer(proxy))
+        .catch(async (err) => {
+          console.error("Failed to create proxy server.", err);
+          await reportError(err);
+        });
+    }
+  }, [proxyServer, localProtocol]);
 
   /**
    * When we're not connected / getting a fresh token on changes,
@@ -98,6 +122,10 @@ export function usePreviewServer({
   }
 
   useEffect(() => {
+    if (proxyServer === undefined) {
+      return;
+    }
+
     // If we don't have a token, that means either we're just starting up,
     // or we're refreshing the token.
     if (!previewToken) {
@@ -109,8 +137,8 @@ export function usePreviewServer({
         // store the stream in a buffer so we can replay it later
         streamBufferRef.current.push({ stream, headers });
       };
-      proxy.on("stream", bufferStream);
-      cleanupListeners.push(() => proxy.off("stream", bufferStream));
+      proxyServer.on("stream", bufferStream);
+      cleanupListeners.push(() => proxyServer.off("stream", bufferStream));
 
       const bufferRequestResponse = (
         request: IncomingMessage,
@@ -120,8 +148,10 @@ export function usePreviewServer({
         requestResponseBufferRef.current.push({ request, response });
       };
 
-      proxy.on("request", bufferRequestResponse);
-      cleanupListeners.push(() => proxy.off("request", bufferRequestResponse));
+      proxyServer.on("request", bufferRequestResponse);
+      cleanupListeners.push(() =>
+        proxyServer.off("request", bufferRequestResponse)
+      );
       return () => {
         cleanupListeners.forEach((cleanup) => cleanup());
       };
@@ -142,9 +172,14 @@ export function usePreviewServer({
     cleanupListeners.push(() => remote.off("close", retryServerSetup));
 
     /** HTTP/2 -> HTTP/2  */
-    const handleStream = createStreamHandler(previewToken, remote, port);
-    proxy.on("stream", handleStream);
-    cleanupListeners.push(() => proxy.off("stream", handleStream));
+    const handleStream = createStreamHandler(
+      previewToken,
+      remote,
+      port,
+      localProtocol
+    );
+    proxyServer.on("stream", handleStream);
+    cleanupListeners.push(() => proxyServer.off("stream", handleStream));
 
     // flush and replay buffered streams
     streamBufferRef.current.forEach((buffer) =>
@@ -177,7 +212,8 @@ export function usePreviewServer({
         rewriteRemoteHostToLocalHostInHeaders(
           responseHeaders,
           previewToken.host,
-          port
+          port,
+          localProtocol
         );
         for (const name of Object.keys(responseHeaders)) {
           if (name.startsWith(":")) {
@@ -195,8 +231,10 @@ export function usePreviewServer({
       ? createHandleAssetsRequest(assetPath, handleRequest)
       : handleRequest;
 
-    proxy.on("request", actualHandleRequest);
-    cleanupListeners.push(() => proxy.off("request", actualHandleRequest));
+    proxyServer.on("request", actualHandleRequest);
+    cleanupListeners.push(() =>
+      proxyServer.off("request", actualHandleRequest)
+    );
 
     // flush and replay buffered requests
     requestResponseBufferRef.current.forEach(({ request, response }) =>
@@ -227,8 +265,8 @@ export function usePreviewServer({
         remoteWebsocketClient.close();
       });
     };
-    proxy.on("upgrade", handleUpgrade);
-    cleanupListeners.push(() => proxy.off("upgrade", handleUpgrade));
+    proxyServer.on("upgrade", handleUpgrade);
+    cleanupListeners.push(() => proxyServer.off("upgrade", handleUpgrade));
 
     return () => {
       cleanupListeners.forEach((cleanup) => cleanup());
@@ -237,7 +275,8 @@ export function usePreviewServer({
     previewToken,
     publicRoot,
     port,
-    proxy,
+    localProtocol,
+    proxyServer,
     // We use a state value as a sigil to trigger reconnecting the server.
     // It's not used inside the effect, so react-hooks/exhaustive-deps
     // doesn't complain if it's not included in the dependency array.
@@ -248,19 +287,23 @@ export function usePreviewServer({
   // Start/stop the server whenever the
   // containing component is mounted/unmounted.
   useEffect(() => {
+    if (proxyServer === undefined) {
+      return;
+    }
+
     waitForPortToBeAvailable(port, { retryPeriod: 200, timeout: 2000 })
       .then(() => {
-        proxy.listen(port);
-        console.log(`⬣ Listening at http://localhost:${port}`);
+        proxyServer.listen(port);
+        console.log(`⬣ Listening at ${localProtocol}://localhost:${port}`);
       })
       .catch((err) => {
         console.error(`⬣ Failed to start server: ${err}`);
       });
 
     return () => {
-      proxy.close();
+      proxyServer.close();
     };
-  }, [port, proxy]);
+  }, [port, proxyServer, localProtocol]);
 }
 
 function createHandleAssetsRequest(
@@ -288,8 +331,15 @@ const HTTP1_HEADERS = new Set([
   "http2-settings",
 ]);
 
-function createProxyServer() {
-  return createServer()
+async function createProxyServer(
+  localProtocol: "https" | "http"
+): Promise<HttpServer | HttpsServer> {
+  const server: HttpServer | HttpsServer =
+    localProtocol === "https"
+      ? createHttpsServer(await getHttpsOptions())
+      : createHttpServer();
+
+  return server
     .on("request", function (req, res) {
       // log all requests
       console.log(
@@ -318,7 +368,8 @@ function createProxyServer() {
 function createStreamHandler(
   previewToken: CfPreviewToken,
   remote: ClientHttp2Session,
-  port: number
+  localPort: number,
+  localProtocol: "https" | "http"
 ) {
   return function handleStream(
     stream: ServerHttp2Stream,
@@ -331,7 +382,8 @@ function createStreamHandler(
       rewriteRemoteHostToLocalHostInHeaders(
         responseHeaders,
         previewToken.host,
-        port
+        localPort,
+        localProtocol
       );
       stream.respond(responseHeaders);
       request.pipe(stream, { end: true });
@@ -348,29 +400,39 @@ export async function waitForPortToBeAvailable(
 ): Promise<void> {
   return new Promise((resolve, reject) => {
     const timeout = setTimeout(() => {
-      reject(new Error(`Timed out waiting for port ${port}`));
+      doReject(new Error(`Timed out waiting for port ${port}`));
     }, options.timeout);
 
+    const interval = setInterval(checkPort, options.retryPeriod);
+    checkPort();
+
+    function doResolve() {
+      clearTimeout(timeout);
+      clearInterval(interval);
+      resolve();
+    }
+
+    function doReject(err: unknown) {
+      clearInterval(interval);
+      clearTimeout(timeout);
+      reject(err);
+    }
+
     function checkPort() {
       // Testing whether a port is 'available' involves simply
       // trying to make a server listen on that port, and retrying
       // until it succeeds.
-      const server = createServer();
+      const server = createHttpServer();
       server.on("error", (err) => {
         // @ts-expect-error non standard property on Error
-        if (err.code === "EADDRINUSE") {
-          setTimeout(checkPort, options.retryPeriod);
-        } else {
-          reject(err);
+        if (err.code !== "EADDRINUSE") {
+          doReject(err);
         }
       });
       server.listen(port, () => {
         server.close();
-        clearTimeout(timeout);
-        resolve();
+        doResolve();
       });
     }
-
-    checkPort();
   });
 }

package/src/publish.ts

@@ -2,23 +2,20 @@ import assert from "node:assert";
 import { readFileSync } from "node:fs";
 import path from "node:path";
 import { URLSearchParams } from "node:url";
-import { execaCommand } from "execa";
 import tmp from "tmp-promise";
-import { toFormData } from "./api/form_data";
 import { bundleWorker } from "./bundle";
 import { fetchResult } from "./cfetch";
-import { fileExists } from "./entry";
-import guessWorkerFormat from "./guess-worker-format";
+import { createWorkerUploadForm } from "./create-worker-upload-form";
 import { syncAssets } from "./sites";
-import type { CfScriptFormat, CfWorkerInit } from "./api/worker";
 import type { Config } from "./config";
+import type { Entry } from "./entry";
 import type { AssetPaths } from "./sites";
+import type { CfWorkerInit } from "./worker";
 
 type Props = {
   config: Config;
   accountId: string;
-  format: CfScriptFormat | undefined;
-  entry: { file: string; directory: string };
+  entry: Entry;
   rules: Config["rules"];
   name: string | undefined;
   env: string | undefined;
@@ -45,7 +42,7 @@ export default async function publish(props: Props): Promise<void> {
   const envRootObj = (props.env && config.env[props.env]) || config;
 
   assert(
-    envRootObj.compatibility_date || props.compatibilityDate,
+    props.compatibilityDate || envRootObj.compatibility_date,
     "A compatibility_date is required when publishing. Add one to your wrangler.toml file, or pass it in your terminal as --compatibility_date. See https://developers.cloudflare.com/workers/platform/compatibility-dates for more information."
   );
 
@@ -56,7 +53,7 @@ export default async function publish(props: Props): Promise<void> {
     (envRootObj.route ? [envRootObj.route] : []) ??
     [];
 
-  const { workers_dev: deployToWorkersDev } = config;
+  const deployToWorkersDev = envRootObj.workers_dev;
 
   const jsxFactory = props.jsxFactory || envRootObj.jsx_factory;
   const jsxFragment = props.jsxFragment || envRootObj.jsx_fragment;
@@ -67,14 +64,6 @@ export default async function publish(props: Props): Promise<void> {
     'You need to provide a name when publishing a worker. Either pass it as a cli arg with `--name <name>` or in your config file as `name = "<name>"`'
   );
 
-  if (config.site?.["entry-point"]) {
-    console.warn(
-      "Deprecation notice: The `site.entry-point` config field is no longer used.\n" +
-        "The entry-point should be specified via the command line (e.g. `wrangler publish path/to/script`) or the `main` config field.\n" +
-        "Please remove the `site.entry-point` field from the `wrangler.toml` file."
-    );
-  }
-
   assert(
     !config.site || config.site.bucket,
     "A [site] definition requires a `bucket` field with a path to the site's public directory."
@@ -84,28 +73,7 @@ export default async function publish(props: Props): Promise<void> {
   try {
     const envName = props.env ?? "production";
 
-    if (config.build.command) {
-      // TODO: add a deprecation message here?
-      console.log("running:", config.build.command);
-      await execaCommand(config.build.command, {
-        shell: true,
-        stdout: "inherit",
-        stderr: "inherit",
-        timeout: 1000 * 30,
-        ...(config.build.cwd && { cwd: config.build.cwd }),
-      });
-
-      if (fileExists(props.entry.file) === false) {
-        throw new Error(
-          `Could not resolve "${path.relative(
-            process.cwd(),
-            props.entry.file
-          )}".`
-        );
-      }
-    }
-
-    const format = await guessWorkerFormat(props.entry, props.format);
+    const { format } = props.entry;
 
     if (props.experimentalPublic && format === "service-worker") {
       // TODO: check config too
@@ -133,7 +101,6 @@ export default async function publish(props: Props): Promise<void> {
         serveAssetsFromWorker: props.experimentalPublic,
         jsxFactory,
         jsxFragment,
-        format,
         rules: props.rules,
       }
     );
@@ -230,9 +197,11 @@ export default async function publish(props: Props): Promise<void> {
       bindings,
       migrations,
       modules,
-      compatibility_date: config.compatibility_date,
-      compatibility_flags: config.compatibility_flags,
-      usage_model: config.usage_model,
+      compatibility_date:
+        props.compatibilityDate ?? envRootObj.compatibility_date,
+      compatibility_flags:
+        props.compatibilityFlags ?? envRootObj.compatibility_flags,
+      usage_model: envRootObj.usage_model,
     };
 
     const start = Date.now();
@@ -247,22 +216,17 @@ export default async function publish(props: Props): Promise<void> {
       workerUrl,
       {
         method: "PUT",
-        body: toFormData(worker),
+        body: createWorkerUploadForm(worker),
       },
       new URLSearchParams({ available_on_subdomain: "true" })
     );
 
     const uploadMs = Date.now() - start;
-    console.log("Uploaded", workerName, formatTime(uploadMs));
     const deployments: Promise<string[]>[] = [];
 
     if (deployToWorkersDev) {
       // Deploy to a subdomain of `workers.dev`
-      const userSubdomain = (
-        await fetchResult<{ subdomain: string }>(
-          `/accounts/${accountId}/workers/subdomain`
-        )
-      ).subdomain;
+      const userSubdomain = await getSubdomain(accountId);
       const scriptURL =
         props.legacyEnv || !props.env
           ? `${scriptName}.${userSubdomain}.workers.dev`
@@ -301,6 +265,8 @@ export default async function publish(props: Props): Promise<void> {
       });
     }
 
+    console.log("Uploaded", workerName, formatTime(uploadMs));
+
     // Update routing table for the script.
     if (routes.length > 0) {
       deployments.push(
@@ -361,3 +327,28 @@ export default async function publish(props: Props): Promise<void> {
 function formatTime(duration: number) {
   return `(${(duration / 1000).toFixed(2)} sec)`;
 }
+
+async function getSubdomain(accountId: string): Promise<string> {
+  try {
+    const { subdomain } = await fetchResult(
+      `/accounts/${accountId}/workers/subdomain`
+    );
+    return subdomain;
+  } catch (e) {
+    const error = e as { code?: number };
+    if (typeof error === "object" && !!error && error.code === 10007) {
+      // 10007 error code: not found
+      // https://api.cloudflare.com/#worker-subdomain-get-subdomain
+
+      const errorMessage =
+        "Error: You need to register a workers.dev subdomain before publishing to workers.dev";
+      const solutionMessage =
+        "You can either publish your worker to one or more routes by specifying them in wrangler.toml, or register a workers.dev subdomain here:";
+      const onboardingLink = `https://dash.cloudflare.com/${accountId}/workers/onboarding`;
+
+      throw new Error(`${errorMessage}\n${solutionMessage}\n${onboardingLink}`);
+    } else {
+      throw e;
+    }
+  }
+}

package/src/reporting.ts

@@ -1,7 +1,7 @@
-import { appendFile, readFile } from "fs/promises";
 import * as fs from "node:fs";
+import { readFile, writeFile } from "node:fs/promises";
 import os from "node:os";
-import path from "path/posix";
+import path from "node:path";
 import TOML from "@iarna/toml";
 import { RewriteFrames } from "@sentry/integrations";
 import {
@@ -22,6 +22,14 @@ export function initReporting() {
     initialScope: {
       tags: { [pkj.name]: pkj.version },
     },
+    beforeBreadcrumb: (_breadcrumb, _hint) => {
+      // eventually, we might want to actually start dropping our own breadcrumbs.
+      // until then, we want to just ignore all of them, since sentry will
+      // automatically include breadcrumbs for things like console output,
+      // which can include unsanitized data that the user logs
+      // from their worker during development
+      return null;
+    },
     dsn: "https://5089b76bf8a64a9c949bf5c2b5e8003c@o51786.ingest.sentry.io/6190959",
     tracesSampleRate: 1.0,
     integrations: [
@@ -43,12 +51,20 @@ export function initReporting() {
 
 async function appendReportingDecision(userInput: "true" | "false") {
   const homePath = path.join(os.homedir(), ".wrangler/config/");
-  fs.mkdirSync(homePath, { recursive: true });
-  await appendFile(
-    path.join(homePath, "reporting.toml"),
-    `error_tracking_opt = ${userInput} # Sentry \nerror_tracking_opt_date = ${new Date().toISOString()} # Sentry Date Decision \n`,
-    { encoding: "utf-8" }
-  );
+  const reportingConfigLocation = path.join(homePath, "reporting.toml");
+  try {
+    fs.mkdirSync(homePath, { recursive: true });
+    await writeFile(
+      reportingConfigLocation,
+      `error_tracking_opt = ${userInput} # Sentry \nerror_tracking_opt_date = ${new Date().toISOString()} # Sentry Date Decision \n`,
+      "utf-8"
+    );
+  } catch (err) {
+    console.warn(
+      `Unable to create wrangler's error reporting configuration file at ${reportingConfigLocation}: `,
+      err
+    );
+  }
 }
 
 function exceptionTransaction(error: Error, origin = "") {
@@ -72,7 +88,7 @@ export async function reportError(err: Error, origin = "") {
       message: "Would you like to submit a report when an error occurs?",
       choices: [
         { title: "Always", value: true },
-        { title: "Yes", value: "once" },
+        { title: "Only this time", value: "once" },
         { title: "No", value: false },
       ],
       initial: 2,