wrangler 0.0.0-e043479 → 0.0.0-e0b9366

package/src/config/validation.ts

@@ -19,8 +19,17 @@ import {
   validateOptionalTypedArray,
   validateRequiredProperty,
   validateTypedArray,
+  all,
+  isMutuallyExclusiveWith,
+  inheritableInLegacyEnvironments,
 } from "./validation-helpers";
-import type { Config, DeprecatedUpload, RawConfig } from "./config";
+import type {
+  Config,
+  DeprecatedUpload,
+  DevConfig,
+  RawConfig,
+  RawDevConfig,
+} from "./config";
 import type { RawEnvironment, Environment, Rule } from "./environment";
 import type { ValidatorFn } from "./validation-helpers";
 
@@ -61,6 +70,15 @@ export function normalizeAndValidateConfig(
     true
   );
 
+  deprecated(
+    diagnostics,
+    rawConfig,
+    `site.entry-point`,
+    `The \`site.entry-point\` config field is no longer used.\nThe entry-point should be specified via the command line or the \`main\` config field.`,
+    false,
+    true
+  );
+
   const { deprecatedUpload, ...build } = normalizeAndValidateBuild(
     diagnostics,
     rawConfig,
@@ -136,7 +154,7 @@ export function normalizeAndValidateConfig(
     diagnostics,
     "top-level",
     Object.keys(rawConfig),
-    Object.keys(config)
+    [...Object.keys(config), "miniflare"]
   );
 
   return { config, diagnostics };
@@ -222,7 +240,7 @@ function normalizeAndValidateMainField(
       return path.resolve(directory, rawMain);
     } else {
       diagnostics.errors.push(
-        `ERROR: "main" should be a string but got ${JSON.stringify(rawMain)}`
+        `Expected "main" to be a string but got ${JSON.stringify(rawMain)}`
       );
       return;
     }
@@ -239,8 +257,8 @@ function normalizeAndValidateMainField(
  */
 function normalizeAndValidateDev(
   diagnostics: Diagnostics,
-  rawDev: Config["dev"]
-): Config["dev"] {
+  rawDev: RawDevConfig
+): DevConfig {
   const {
     ip = "127.0.0.1",
     port = 8787,
@@ -258,14 +276,16 @@ function normalizeAndValidateDev(
     "dev",
     "local_protocol",
     local_protocol,
-    "string"
+    "string",
+    ["http", "https"]
   );
   validateOptionalProperty(
     diagnostics,
     "dev",
     "upstream_protocol",
     upstream_protocol,
-    "string"
+    "string",
+    ["http", "https"]
   );
   validateOptionalProperty(diagnostics, "dev", "host", host, "string");
   return { ip, port, local_protocol, upstream_protocol, host };
@@ -304,7 +324,7 @@ function normalizeAndValidateMigrations(
       if (migration.renamed_classes !== undefined) {
         if (!Array.isArray(migration.renamed_classes)) {
           diagnostics.errors.push(
-            `"migrations[${i}].renamed_classes" should be an array of "{from: string, to: string}" objects but got ${JSON.stringify(
+            `Expected "migrations[${i}].renamed_classes" to be an array of "{from: string, to: string}" objects but got ${JSON.stringify(
               migration.renamed_classes
             )}.`
           );
@@ -317,7 +337,7 @@ function normalizeAndValidateMigrations(
           )
         ) {
           diagnostics.errors.push(
-            `"migrations[${i}].renamed_classes" should be an array of "{from: string, to: string}" objects but got ${JSON.stringify(
+            `Expected "migrations[${i}].renamed_classes" to be an array of "{from: string, to: string}" objects but got ${JSON.stringify(
               migration.renamed_classes
             )}.`
           );
@@ -342,25 +362,12 @@ function normalizeAndValidateSite(
   rawSite: Config["site"]
 ): Config["site"] {
   if (rawSite !== undefined) {
-    const {
-      bucket,
-      "entry-point": entryPoint,
-      include = [],
-      exclude = [],
-      ...rest
-    } = rawSite;
+    const { bucket, include = [], exclude = [], ...rest } = rawSite;
     validateAdditionalProperties(diagnostics, "site", Object.keys(rest), []);
     validateRequiredProperty(diagnostics, "site", "bucket", bucket, "string");
-    validateOptionalProperty(
-      diagnostics,
-      "site",
-      "entry_point",
-      entryPoint,
-      "string"
-    );
     validateTypedArray(diagnostics, "sites.include", include, "string");
     validateTypedArray(diagnostics, "sites.exclude", exclude, "string");
-    return { bucket, "entry-point": entryPoint, include, exclude };
+    return { bucket, include, exclude };
   }
   return undefined;
 }
@@ -470,7 +477,7 @@ function normalizeAndValidateEnvironment(
     config,
     rawEnv,
     "routes",
-    isStringArray,
+    all(isStringArray, isMutuallyExclusiveWith(rawEnv, "route")),
     undefined
   );
   const workers_dev = inheritable(
@@ -531,7 +538,14 @@ function normalizeAndValidateEnvironment(
       deprecatedRules,
       envName
     ),
-    name: inheritable(diagnostics, config, rawEnv, "name", isString, undefined),
+    name: inheritableInLegacyEnvironments(
+      diagnostics,
+      config,
+      rawEnv,
+      "name",
+      isString,
+      undefined
+    ),
     route,
     routes,
     triggers: inheritable(
@@ -623,7 +637,7 @@ const validateAndNormalizeRules = (
     // Only create errors/warnings for the top-level environment
     if (rawEnv.rules && deprecatedRules) {
       diagnostics.errors.push(
-        `ERROR: You cannot configure both [rules] and [build.upload.rules] in your wrangler.toml. Delete the \`build.upload\` section.`
+        `You cannot configure both [rules] and [build.upload.rules] in your wrangler.toml. Delete the \`build.upload\` section.`
       );
     } else if (deprecatedRules) {
       diagnostics.warnings.push(
@@ -673,7 +687,9 @@ const validateRules =
 
 const validateRule: ValidatorFn = (diagnostics, field, value) => {
   if (typeof value !== "object" || value === null) {
-    diagnostics.errors.push(`ERROR: should be an object.`);
+    diagnostics.errors.push(
+      `"${field}" should be an object but got ${JSON.stringify(value)}.`
+    );
     return false;
   }
   // Rules must have a type string and glob string array, and optionally a fallthrough boolean.
@@ -690,7 +706,7 @@ const validateRule: ValidatorFn = (diagnostics, field, value) => {
     ])
   ) {
     diagnostics.errors.push(
-      `ERROR: bindings should have a string "type" field, which contains one of "ESModule", "CommonJS", "CompiledWasm", "Text", or "Data".`
+      `bindings should have a string "type" field, which contains one of "ESModule", "CommonJS", "CompiledWasm", "Text", or "Data".`
     );
     isValid = false;
   }
@@ -701,7 +717,7 @@ const validateRule: ValidatorFn = (diagnostics, field, value) => {
 
   if (!isOptionalProperty(rule, "fallthrough", "boolean")) {
     diagnostics.errors.push(
-      `ERROR: should, optionally, have a boolean "fallthrough" field.`
+      `binding should, optionally, have a boolean "fallthrough" field.`
     );
     isValid = false;
   }
@@ -820,29 +836,29 @@ const getBindingNames = (value: unknown): string[] =>
  */
 const validateDurableObjectBinding: ValidatorFn = (
   diagnostics,
-  _field,
+  field,
   value
 ) => {
   if (typeof value !== "object" || value === null) {
-    diagnostics.errors.push(`ERROR: should be an object.`);
+    diagnostics.errors.push(
+      `Expected "${field}" to be an object but got ${JSON.stringify(value)}`
+    );
     return false;
   }
 
   // Durable Object bindings must have a name and class_name, and optionally a script_name.
   let isValid = true;
   if (!isRequiredProperty(value, "name", "string")) {
-    diagnostics.errors.push(
-      `ERROR: bindings should have a string "name" field.`
-    );
+    diagnostics.errors.push(`binding should have a string "name" field.`);
     isValid = false;
   }
   if (!isRequiredProperty(value, "class_name", "string")) {
-    diagnostics.errors.push(`ERROR: should have a string "class_name" field.`);
+    diagnostics.errors.push(`binding should have a string "class_name" field.`);
     isValid = false;
   }
   if (!isOptionalProperty(value, "script_name", "string")) {
     diagnostics.errors.push(
-      `ERROR: should, optionally, have a string "script_name" field.`
+      `binding should, optionally, have a string "script_name" field.`
     );
     isValid = false;
   }
@@ -855,16 +871,18 @@ const validateDurableObjectBinding: ValidatorFn = (
  *
  * TODO: further validation of known unsafe bindings.
  */
-const validateUnsafeBinding: ValidatorFn = (diagnostics, _field, value) => {
+const validateUnsafeBinding: ValidatorFn = (diagnostics, field, value) => {
   if (typeof value !== "object" || value === null) {
-    diagnostics.errors.push(`ERROR: should be an object.`);
+    diagnostics.errors.push(
+      `Expected ${field} to be an object but got ${JSON.stringify(value)}.`
+    );
     return false;
   }
 
   let isValid = true;
   // Unsafe bindings must have a name and type.
   if (!isRequiredProperty(value, "name", "string")) {
-    diagnostics.errors.push(`ERROR: should have a string "name" field.`);
+    diagnostics.errors.push(`binding should have a string "name" field.`);
     isValid = false;
   }
   if (isRequiredProperty(value, "type", "string")) {
@@ -883,7 +901,7 @@ const validateUnsafeBinding: ValidatorFn = (diagnostics, _field, value) => {
       );
     }
   } else {
-    diagnostics.errors.push(`ERROR: should have a string "type" field.`);
+    diagnostics.errors.push(`binding should have a string "type" field.`);
     isValid = false;
   }
   return isValid;

package/src/{api/preview.ts → create-worker-preview.ts}

@@ -1,7 +1,7 @@
 import { URL } from "node:url";
 import { fetch } from "undici";
-import { fetchResult } from "../cfetch";
-import { toFormData } from "./form_data";
+import { fetchResult } from "./cfetch";
+import { createWorkerUploadForm } from "./create-worker-upload-form";
 import type { CfAccount, CfWorkerContext, CfWorkerInit } from "./worker";
 
 /**
@@ -93,7 +93,7 @@ function randomId(): string {
 /**
  * Creates a preview token.
  */
-export async function previewToken(
+async function createPreviewToken(
   account: CfAccount,
   worker: CfWorkerInit,
   ctx: CfWorkerContext
@@ -114,7 +114,7 @@ export async function previewToken(
     ? { routes: ["*/*"] } // TODO: should we support routes here? how?
     : { workers_dev: true };
 
-  const formData = toFormData(worker);
+  const formData = createWorkerUploadForm(worker);
   formData.set("wrangler-session-config", JSON.stringify(mode));
 
   const { preview_token } = await fetchResult<{ preview_token: string }>(url, {
@@ -145,3 +145,22 @@ export async function previewToken(
     prewarmUrl,
   };
 }
+
+/**
+ * A stub to create a Cloudflare Worker preview.
+ *
+ * @example
+ * const {value, host} = await createWorker(init, acct);
+ */
+export async function createWorkerPreview(
+  init: CfWorkerInit,
+  account: CfAccount,
+  ctx: CfWorkerContext
+): Promise<CfPreviewToken> {
+  const token = await createPreviewToken(account, init, ctx);
+  const response = await fetch(token.prewarmUrl.href, { method: "POST" });
+  if (!response.ok) {
+    // console.error("worker failed to prewarm: ", response.statusText);
+  }
+  return token;
+}

package/src/{api/form_data.ts → create-worker-upload-form.ts}

@@ -51,7 +51,7 @@ export interface WorkerMetadata {
 /**
  * Creates a `FormData` upload from a `CfWorkerInit`.
  */
-export function toFormData(worker: CfWorkerInit): FormData {
+export function createWorkerUploadForm(worker: CfWorkerInit): FormData {
   const formData = new FormData();
   const {
     main,

package/src/dev/dev.tsx

@@ -0,0 +1,357 @@
+import { spawn } from "node:child_process";
+import { watch } from "chokidar";
+import clipboardy from "clipboardy";
+import commandExists from "command-exists";
+import { Box, Text, useApp, useInput } from "ink";
+import React, { useState, useEffect, useRef } from "react";
+import { withErrorBoundary, useErrorHandler } from "react-error-boundary";
+import onExit from "signal-exit";
+import tmp from "tmp-promise";
+import { fetch } from "undici";
+import { runCustomBuild } from "../entry";
+import openInBrowser from "../open-in-browser";
+import { reportError } from "../reporting";
+import { getAPIToken } from "../user";
+import { Local } from "./local";
+import { Remote } from "./remote";
+import { useEsbuild } from "./use-esbuild";
+import type { Config } from "../config";
+import type { Entry } from "../entry";
+import type { AssetPaths } from "../sites";
+import type { CfWorkerInit } from "../worker";
+
+export type DevProps = {
+  name?: string;
+  entry: Entry;
+  port?: number;
+  inspectorPort: number;
+  rules: Config["rules"];
+  accountId: undefined | string;
+  initialMode: "local" | "remote";
+  jsxFactory: undefined | string;
+  jsxFragment: undefined | string;
+  upstreamProtocol: "https" | "http";
+  localProtocol: "https" | "http";
+  enableLocalPersistence: boolean;
+  bindings: CfWorkerInit["bindings"];
+  public: undefined | string;
+  assetPaths: undefined | AssetPaths;
+  compatibilityDate: undefined | string;
+  compatibilityFlags: undefined | string[];
+  usageModel: undefined | "bundled" | "unbound";
+  buildCommand: {
+    command?: undefined | string;
+    cwd?: undefined | string;
+    watch_dir?: undefined | string;
+  };
+  env: string | undefined;
+  legacyEnv: boolean;
+  zone:
+    | {
+        id: string;
+        host: string;
+      }
+    | undefined;
+};
+
+export function DevImplementation(props: DevProps): JSX.Element {
+  const port = props.port ?? 8787;
+  const apiToken = props.initialMode === "remote" ? getAPIToken() : undefined;
+  const directory = useTmpDir();
+
+  useCustomBuild(props.entry, props.buildCommand);
+
+  if (props.public && props.entry.format === "service-worker") {
+    throw new Error(
+      "You cannot use the service worker format with a `public` directory."
+    );
+  }
+
+  if (props.bindings.wasm_modules && props.entry.format === "modules") {
+    throw new Error(
+      "You cannot configure [wasm_modules] with an ES module worker. Instead, import the .wasm module directly in your code"
+    );
+  }
+
+  if (props.bindings.text_blobs && props.entry.format === "modules") {
+    throw new Error(
+      "You cannot configure [text_blobs] with an ES module worker. Instead, import the file directly in your code, and optionally configure `[build.upload.rules]` in your wrangler.toml"
+    );
+  }
+
+  const bundle = useEsbuild({
+    entry: props.entry,
+    destination: directory,
+    staticRoot: props.public,
+    jsxFactory: props.jsxFactory,
+    rules: props.rules,
+    jsxFragment: props.jsxFragment,
+    serveAssetsFromWorker: !!props.public,
+  });
+
+  const toggles = useHotkeys(
+    {
+      local: props.initialMode === "local",
+      tunnel: false,
+    },
+    port,
+    props.inspectorPort,
+    props.localProtocol
+  );
+
+  useTunnel(toggles.tunnel);
+
+  return (
+    <>
+      {toggles.local ? (
+        <Local
+          name={props.name}
+          bundle={bundle}
+          format={props.entry.format}
+          bindings={props.bindings}
+          assetPaths={props.assetPaths}
+          public={props.public}
+          port={port}
+          rules={props.rules}
+          inspectorPort={props.inspectorPort}
+          enableLocalPersistence={props.enableLocalPersistence}
+        />
+      ) : (
+        <Remote
+          name={props.name}
+          bundle={bundle}
+          format={props.entry.format}
+          accountId={props.accountId}
+          apiToken={apiToken}
+          bindings={props.bindings}
+          assetPaths={props.assetPaths}
+          public={props.public}
+          port={port}
+          localProtocol={props.localProtocol}
+          inspectorPort={props.inspectorPort}
+          compatibilityDate={props.compatibilityDate}
+          compatibilityFlags={props.compatibilityFlags}
+          usageModel={props.usageModel}
+          env={props.env}
+          legacyEnv={props.legacyEnv}
+          zone={props.zone}
+        />
+      )}
+      <Box borderStyle="round" paddingLeft={1} paddingRight={1}>
+        <Text>
+          {`B to open a browser, D to open Devtools, L to ${
+            toggles.local ? "turn off" : "turn on"
+          } local mode, X to exit`}
+        </Text>
+      </Box>
+    </>
+  );
+}
+
+export interface DirectorySyncResult {
+  name: string;
+  removeCallback: () => void;
+}
+
+function useTmpDir(): string | undefined {
+  const [directory, setDirectory] = useState<DirectorySyncResult>();
+  const handleError = useErrorHandler();
+  useEffect(() => {
+    let dir: DirectorySyncResult | undefined;
+    try {
+      dir = tmp.dirSync({ unsafeCleanup: true });
+      setDirectory(dir);
+      return;
+    } catch (err) {
+      console.error("failed to create tmp dir");
+      handleError(err);
+    }
+    return () => {
+      dir?.removeCallback();
+    };
+  }, [handleError]);
+  return directory?.name;
+}
+
+function useCustomBuild(
+  expectedEntry: Entry,
+  build: {
+    command?: undefined | string;
+    cwd?: undefined | string;
+    watch_dir?: undefined | string;
+  }
+): void {
+  useEffect(() => {
+    if (!build.command) return;
+    let watcher: ReturnType<typeof watch> | undefined;
+    if (build.watch_dir) {
+      watcher = watch(build.watch_dir, {
+        persistent: true,
+        ignoreInitial: true,
+      }).on("all", (_event, filePath) => {
+        //TODO: we should buffer requests to the proxy until this completes
+        console.log(`The file ${filePath} changed, restarting build...`);
+        runCustomBuild(expectedEntry.file, build).catch((err) => {
+          console.error("Custom build failed:", err);
+        });
+      });
+    }
+
+    return () => {
+      watcher?.close();
+    };
+  }, [build, expectedEntry.file]);
+}
+
+function sleep(period: number) {
+  return new Promise((resolve) => setTimeout(resolve, period));
+}
+const SLEEP_DURATION = 2000;
+// really need a first class api for this
+const hostNameRegex = /userHostname="(.*)"/g;
+async function findTunnelHostname() {
+  let hostName: string | undefined;
+  while (!hostName) {
+    try {
+      const resp = await fetch("http://localhost:8789/metrics");
+      const data = await resp.text();
+      const matches = Array.from(data.matchAll(hostNameRegex));
+      hostName = matches[0][1];
+    } catch (err) {
+      await sleep(SLEEP_DURATION);
+    }
+  }
+  return hostName;
+}
+
+/**
+ * Create a tunnel to the remote worker.
+ * We've disabled this for now until we figure out a better user experience.
+ */
+function useTunnel(toggle: boolean) {
+  const tunnel = useRef<ReturnType<typeof spawn>>();
+  const removeSignalExitListener = useRef<() => void>();
+  // TODO: test if cloudflared is available, if not
+  // point them to a url where they can get docs to install it
+  useEffect(() => {
+    async function startTunnel() {
+      if (toggle) {
+        try {
+          await commandExists("cloudflared");
+        } catch (e) {
+          console.error(
+            "To share your worker on the Internet, please install `cloudflared` from https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation"
+          );
+          return;
+        }
+        console.log("⎔ Starting a tunnel...");
+        tunnel.current = spawn("cloudflared", [
+          "tunnel",
+          "--url",
+          "http://localhost:8787",
+          "--metrics",
+          "localhost:8789",
+        ]);
+
+        tunnel.current.on("close", (code) => {
+          if (code) {
+            console.log(`Tunnel process exited with code ${code}`);
+          }
+        });
+
+        removeSignalExitListener.current = onExit((_code, _signal) => {
+          console.log("⎔ Shutting down local tunnel.");
+          tunnel.current?.kill();
+          tunnel.current = undefined;
+        });
+
+        const hostName = await findTunnelHostname();
+        await clipboardy.write(hostName);
+        console.log(`⬣ Sharing at ${hostName}, copied to clipboard.`);
+      }
+    }
+
+    startTunnel().catch(async (err) => {
+      console.error("tunnel:", err);
+      await reportError(err);
+    });
+
+    return () => {
+      if (tunnel.current) {
+        console.log("⎔ Shutting down tunnel.");
+        tunnel.current?.kill();
+        tunnel.current = undefined;
+        removeSignalExitListener.current && removeSignalExitListener.current();
+        removeSignalExitListener.current = undefined;
+      }
+    };
+  }, [toggle]);
+}
+
+type useHotkeysInitialState = {
+  local: boolean;
+  tunnel: boolean;
+};
+function useHotkeys(
+  initial: useHotkeysInitialState,
+  port: number,
+  inspectorPort: number,
+  localProtocol: "http" | "https"
+) {
+  // UGH, we should put port in context instead
+  const [toggles, setToggles] = useState(initial);
+  useInput(
+    async (
+      input,
+      // eslint-disable-next-line unused-imports/no-unused-vars
+      key
+    ) => {
+      switch (input.toLowerCase()) {
+        // open browser
+        case "b": {
+          await openInBrowser(`${localProtocol}://localhost:${port}`);
+          break;
+        }
+        // toggle inspector
+        case "d": {
+          await openInBrowser(
+            `https://built-devtools.pages.dev/js_app?experiments=true&v8only=true&ws=localhost:${inspectorPort}/ws`,
+            { forceChromium: true }
+          );
+          break;
+        }
+        // toggle local
+        case "l":
+          setToggles((previousToggles) => ({
+            ...previousToggles,
+            local: !previousToggles.local,
+          }));
+          break;
+        // shut down
+        case "q":
+        case "x":
+          process.exit(0);
+          break;
+        default:
+          // nothing?
+          break;
+      }
+    }
+  );
+  return toggles;
+}
+
+function ErrorFallback(props: { error: Error }) {
+  const { exit } = useApp();
+  useEffect(() => exit(props.error));
+  return (
+    <>
+      <Text>Something went wrong:</Text>
+      <Text>{props.error.stack}</Text>
+    </>
+  );
+}
+
+export default withErrorBoundary(DevImplementation, {
+  FallbackComponent: ErrorFallback,
+});