wrangler 0.0.0-e3cab74 → 0.0.0-e3e3243

package/src/pages.tsx

@@ -22,11 +22,15 @@ import type { BuilderCallback } from "yargs";
 // and also modifies some `stream/web` and `undici` prototypes, so we
 // don't want to do this if pages commands aren't being called.
 
+export const pagesBetaWarning =
+  "🚧 'wrangler pages <command>' is a beta command. Please report any issues to https://github.com/cloudflare/wrangler2/issues/new/choose";
+
 const EXIT_CALLBACKS: (() => void)[] = [];
 const EXIT = (message?: string, code?: number) => {
   if (message) console.log(message);
   if (code) process.exitCode = code;
   EXIT_CALLBACKS.forEach((callback) => callback());
+  RUNNING_BUILDERS.forEach((builder) => builder.stop?.());
   process.exit(code);
 };
 
@@ -759,7 +763,8 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
               description: "Auto reload HTML pages when change is detected",
             },
             // TODO: Miniflare user options
-          });
+          })
+          .epilogue(pagesBetaWarning);
       },
       async ({
         local,
@@ -773,6 +778,9 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
         "live-reload": liveReload,
         _: [_pages, _dev, ...remaining],
       }) => {
+        // Beta message for `wrangler pages <commands>` usage
+        console.log(pagesBetaWarning);
+
         if (!local) {
           console.error("Only local mode is supported at the moment.");
           return;
@@ -805,13 +813,15 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
 
           console.log(`Compiling worker to "${scriptPath}"...`);
 
-          await buildFunctions({
-            scriptPath,
-            functionsDirectory,
-            sourcemap: true,
-            watch: true,
-            onEnd: () => scriptReadyResolve(),
-          });
+          try {
+            await buildFunctions({
+              scriptPath,
+              functionsDirectory,
+              sourcemap: true,
+              watch: true,
+              onEnd: () => scriptReadyResolve(),
+            });
+          } catch {}
 
           watch([functionsDirectory], {
             persistent: true,
@@ -895,7 +905,9 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
           // User bindings
           bindings: {
             ...Object.fromEntries(
-              bindings.map((binding) => binding.toString().split("="))
+              bindings
+                .map((binding) => binding.toString().split("="))
+                .map(([key, ...values]) => [key, values.join("=")])
             ),
           },
 
@@ -1014,7 +1026,8 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
                 description:
                   "Watch for changes to the functions and automatically rebuild the Worker script",
               },
-            }),
+            })
+            .epilogue(pagesBetaWarning),
         async ({
           directory,
           "script-path": scriptPath,
@@ -1024,6 +1037,9 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
           fallbackService,
           watch,
         }) => {
+          // Beta message for `wrangler pages <commands>` usage
+          console.log(pagesBetaWarning);
+
           await buildFunctions({
             scriptPath,
             outputConfigPath,

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,33 @@ function rewriteRemoteHostToLocalHostInHeaders(
 export function usePreviewServer({
   previewToken,
   publicRoot,
-  port,
+  localProtocol,
+  localPort: port,
+  ip,
 }: {
   previewToken: CfPreviewToken | undefined;
   publicRoot: undefined | string;
-  port: number;
+  localProtocol: "https" | "http";
+  localPort: number;
+  ip: string;
 }) {
   /** 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 +124,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 +139,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 +150,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 +174,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 +214,8 @@ export function usePreviewServer({
         rewriteRemoteHostToLocalHostInHeaders(
           responseHeaders,
           previewToken.host,
-          port
+          port,
+          localProtocol
         );
         for (const name of Object.keys(responseHeaders)) {
           if (name.startsWith(":")) {
@@ -195,8 +233,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 +267,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 +277,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 +289,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, ip);
+        console.log(`⬣ Listening at ${localProtocol}://${ip}:${port}`);
       })
       .catch((err) => {
         console.error(`⬣ Failed to start server: ${err}`);
       });
 
     return () => {
-      proxy.close();
+      proxyServer.close();
     };
-  }, [port, proxy]);
+  }, [port, ip, proxyServer, localProtocol]);
 }
 
 function createHandleAssetsRequest(
@@ -288,8 +333,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 +370,8 @@ function createProxyServer() {
 function createStreamHandler(
   previewToken: CfPreviewToken,
   remote: ClientHttp2Session,
-  port: number
+  localPort: number,
+  localProtocol: "https" | "http"
 ) {
   return function handleStream(
     stream: ServerHttp2Stream,
@@ -331,7 +384,8 @@ function createStreamHandler(
       rewriteRemoteHostToLocalHostInHeaders(
         responseHeaders,
         previewToken.host,
-        port
+        localPort,
+        localProtocol
       );
       stream.respond(responseHeaders);
       request.pipe(stream, { end: true });
@@ -348,29 +402,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,22 +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;
-  format: CfScriptFormat | undefined;
-  entry: { file: string; directory: string };
+  accountId: string;
+  entry: Entry;
   rules: Config["rules"];
   name: string | undefined;
   env: string | undefined;
@@ -29,6 +27,7 @@ type Props = {
   legacyEnv: boolean | undefined;
   jsxFactory: undefined | string;
   jsxFragment: undefined | string;
+  tsconfig: undefined | string;
   experimentalPublic: boolean;
 };
 
@@ -38,33 +37,22 @@ function sleep(ms: number) {
 
 export default async function publish(props: Props): Promise<void> {
   // TODO: warn if git/hg has uncommitted changes
-  const { config } = props;
-
-  // TODO: should we automatically fallback to top level config if there is no matching environment??
-  const envRootObj = (props.env && config.env[props.env]) || config;
+  const { config, accountId } = props;
 
   assert(
-    envRootObj.compatibility_date || props.compatibilityDate,
+    props.compatibilityDate || config.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."
   );
 
-  const triggers = props.triggers || envRootObj.triggers?.crons;
+  const triggers = props.triggers || config.triggers?.crons;
   const routes =
-    props.routes ??
-    envRootObj.routes ??
-    (envRootObj.route ? [envRootObj.route] : []) ??
-    [];
-
-  const { account_id: accountId, workers_dev: deployToWorkersDev } = config;
-
-  if (accountId === undefined) {
-    throw new Error("No account_id provided.");
-  }
+    props.routes ?? config.routes ?? (config.route ? [config.route] : []) ?? [];
 
-  const jsxFactory = props.jsxFactory || envRootObj.jsx_factory;
-  const jsxFragment = props.jsxFragment || envRootObj.jsx_fragment;
+  // deployToWorkersDev defaults to true only if there aren't any routes defined
+  const deployToWorkersDev = config.workers_dev ?? routes.length === 0;
 
-  assert(config.account_id, "missing account id");
+  const jsxFactory = props.jsxFactory || config.jsx_factory;
+  const jsxFragment = props.jsxFragment || config.jsx_fragment;
 
   const scriptName = props.name;
   assert(
@@ -72,14 +60,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."
@@ -89,28 +69,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
@@ -138,8 +97,8 @@ export default async function publish(props: Props): Promise<void> {
         serveAssetsFromWorker: props.experimentalPublic,
         jsxFactory,
         jsxFragment,
-        format,
         rules: props.rules,
+        tsconfig: props.tsconfig ?? config.tsconfig,
       }
     );
 
@@ -198,12 +157,12 @@ export default async function publish(props: Props): Promise<void> {
     );
 
     const bindings: CfWorkerInit["bindings"] = {
-      kv_namespaces: (envRootObj.kv_namespaces || []).concat(
+      kv_namespaces: (config.kv_namespaces || []).concat(
         assets.namespace
           ? { binding: "__STATIC_CONTENT", id: assets.namespace }
           : []
       ),
-      vars: envRootObj.vars,
+      vars: config.vars,
       wasm_modules: config.wasm_modules,
       text_blobs: {
         ...config.text_blobs,
@@ -212,9 +171,9 @@ export default async function publish(props: Props): Promise<void> {
             __STATIC_CONTENT_MANIFEST: "__STATIC_CONTENT_MANIFEST",
           }),
       },
-      durable_objects: envRootObj.durable_objects,
-      r2_buckets: envRootObj.r2_buckets,
-      unsafe: envRootObj.unsafe?.bindings,
+      durable_objects: config.durable_objects,
+      r2_buckets: config.r2_buckets,
+      unsafe: config.unsafe?.bindings,
     };
 
     if (assets.manifest) {
@@ -235,8 +194,9 @@ export default async function publish(props: Props): Promise<void> {
       bindings,
       migrations,
       modules,
-      compatibility_date: config.compatibility_date,
-      compatibility_flags: config.compatibility_flags,
+      compatibility_date: props.compatibilityDate ?? config.compatibility_date,
+      compatibility_flags:
+        props.compatibilityFlags ?? config.compatibility_flags,
       usage_model: config.usage_model,
     };
 
@@ -252,22 +212,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`
@@ -306,6 +261,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(
@@ -366,3 +323,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,