wrangler 0.0.0-e2f9bb2 → 0.0.0-e3278fa

package/src/create-worker-upload-form.ts

@@ -32,20 +32,24 @@ export interface WorkerMetadata {
   compatibility_flags?: string[];
   usage_model?: "bundled" | "unbound";
   migrations?: CfDurableObjectMigrations;
+  // If you add any new binding types here, also add it to safeBindings
+  // under validateUnsafeBinding in config/validation.ts
   bindings: (
-    | { type: "kv_namespace"; name: string; namespace_id: string }
     | { type: "plain_text"; name: string; text: string }
     | { type: "json"; name: string; json: unknown }
     | { type: "wasm_module"; name: string; part: string }
     | { type: "text_blob"; name: string; part: string }
     | { type: "data_blob"; name: string; part: string }
+    | { type: "kv_namespace"; name: string; namespace_id: string }
     | {
         type: "durable_object_namespace";
         name: string;
         class_name: string;
         script_name?: string;
+        environment?: string;
       }
     | { type: "r2_bucket"; name: string; bucket_name: string }
+    | { type: "service"; name: string; service: string; environment?: string }
   )[];
 }
 
@@ -67,6 +71,14 @@ export function createWorkerUploadForm(worker: CfWorkerInit): FormData {
 
   const metadataBindings: WorkerMetadata["bindings"] = [];
 
+  Object.entries(bindings.vars || {})?.forEach(([key, value]) => {
+    if (typeof value === "string") {
+      metadataBindings.push({ name: key, type: "plain_text", text: value });
+    } else {
+      metadataBindings.push({ name: key, type: "json", json: value });
+    }
+  });
+
   bindings.kv_namespaces?.forEach(({ id, binding }) => {
     metadataBindings.push({
       name: binding,
@@ -76,12 +88,13 @@ export function createWorkerUploadForm(worker: CfWorkerInit): FormData {
   });
 
   bindings.durable_objects?.bindings.forEach(
-    ({ name, class_name, script_name }) => {
+    ({ name, class_name, script_name, environment }) => {
       metadataBindings.push({
         name,
         type: "durable_object_namespace",
         class_name: class_name,
         ...(script_name && { script_name }),
+        ...(environment && { environment }),
       });
     }
   );
@@ -94,12 +107,13 @@ export function createWorkerUploadForm(worker: CfWorkerInit): FormData {
     });
   });
 
-  Object.entries(bindings.vars || {})?.forEach(([key, value]) => {
-    if (typeof value === "string") {
-      metadataBindings.push({ name: key, type: "plain_text", text: value });
-    } else {
-      metadataBindings.push({ name: key, type: "json", json: value });
-    }
+  bindings.services?.forEach(({ binding, service, environment }) => {
+    metadataBindings.push({
+      name: binding,
+      type: "service",
+      service,
+      ...(environment && { environment }),
+    });
   });
 
   for (const [name, filePath] of Object.entries(bindings.wasm_modules || {})) {

package/src/dev/dev.tsx

@@ -1,4 +1,5 @@
 import { spawn } from "node:child_process";
+import * as path from "node:path";
 import { watch } from "chokidar";
 import clipboardy from "clipboardy";
 import commandExists from "command-exists";
@@ -9,9 +10,9 @@ import onExit from "signal-exit";
 import tmp from "tmp-promise";
 import { fetch } from "undici";
 import { runCustomBuild } from "../entry";
+import { openInspector } from "../inspect";
 import { logger } from "../logger";
 import openInBrowser from "../open-in-browser";
-import { getAPIToken } from "../user";
 import { Local } from "./local";
 import { Remote } from "./remote";
 import { useEsbuild } from "./use-esbuild";
@@ -52,16 +53,11 @@ export type DevProps = {
   };
   env: string | undefined;
   legacyEnv: boolean;
-  zone:
-    | {
-        id: string;
-        host: string;
-      }
-    | undefined;
+  zone: string | undefined;
+  host: string | undefined;
 };
 
 export function DevImplementation(props: DevProps): JSX.Element {
-  const apiToken = props.initialMode === "remote" ? getAPIToken() : undefined;
   const directory = useTmpDir();
 
   useCustomBuild(props.entry, props.build);
@@ -106,19 +102,17 @@ export function DevImplementation(props: DevProps): JSX.Element {
   // only load the UI if we're running in a supported environment
   const { isRawModeSupported } = useStdin();
   return isRawModeSupported ? (
-    <InteractiveDevSession {...props} bundle={bundle} apiToken={apiToken} />
+    <InteractiveDevSession {...props} bundle={bundle} />
   ) : (
     <DevSession
       {...props}
       bundle={bundle}
-      apiToken={apiToken}
       local={props.initialMode === "local"}
     />
   );
 }
 
 type InteractiveDevSessionProps = DevProps & {
-  apiToken: string | undefined;
   bundle: EsbuildBundle | undefined;
 };
 
@@ -164,6 +158,7 @@ function DevSession(props: DevSessionProps) {
       bundle={props.bundle}
       format={props.entry.format}
       compatibilityDate={props.compatibilityDate}
+      localProtocol={props.localProtocol}
       compatibilityFlags={props.compatibilityFlags}
       bindings={props.bindings}
       assetPaths={props.assetPaths}
@@ -181,7 +176,6 @@ function DevSession(props: DevSessionProps) {
       bundle={props.bundle}
       format={props.entry.format}
       accountId={props.accountId}
-      apiToken={props.apiToken}
       bindings={props.bindings}
       assetPaths={props.assetPaths}
       public={props.public}
@@ -195,6 +189,7 @@ function DevSession(props: DevSessionProps) {
       env={props.env}
       legacyEnv={props.legacyEnv}
       zone={props.zone}
+      host={props.host}
     />
   );
 }
@@ -242,9 +237,11 @@ function useCustomBuild(
         persistent: true,
         ignoreInitial: true,
       }).on("all", (_event, filePath) => {
+        const relativeFile =
+          path.relative(expectedEntry.directory, expectedEntry.file) || ".";
         //TODO: we should buffer requests to the proxy until this completes
         logger.log(`The file ${filePath} changed, restarting build...`);
-        runCustomBuild(expectedEntry.file, build).catch((err) => {
+        runCustomBuild(expectedEntry.file, relativeFile, build).catch((err) => {
           logger.error("Custom build failed:", err);
         });
       });
@@ -253,7 +250,7 @@ function useCustomBuild(
     return () => {
       watcher?.close();
     };
-  }, [build, expectedEntry.file]);
+  }, [build, expectedEntry]);
 }
 
 function sleep(period: number) {
@@ -375,10 +372,7 @@ function useHotkeys(
         }
         // toggle inspector
         case "d": {
-          await openInBrowser(
-            `https://built-devtools.pages.dev/js_app?experiments=true&v8only=true&ws=localhost:${inspectorPort}/ws`,
-            { forceChromium: true }
-          );
+          await openInspector(inspectorPort);
           break;
         }
         // toggle local

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
@@ -87,6 +89,11 @@ function useLocalWorker({
           '⎔ 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."
+        );
+      }
 
       // In local mode, we want to copy all referenced modules into
       // the output bundle directory before starting up
@@ -159,6 +166,7 @@ function useLocalWorker({
         name: workerName,
         port,
         scriptPath,
+        https: localProtocol === "https",
         host: ip,
         modules: format === "modules",
         modulesRules: (rules || [])
@@ -293,10 +301,12 @@ function useLocalWorker({
     workerName,
     format,
     port,
+    localProtocol,
     ip,
     bindings.durable_objects?.bindings,
     bindings.kv_namespaces,
     bindings.vars,
+    bindings.services,
     compatibilityDate,
     compatibilityFlags,
     localPersistencePath,

package/src/dev/remote.tsx

@@ -1,4 +1,3 @@
-import assert from "node:assert";
 import { readFile } from "node:fs/promises";
 import path from "node:path";
 import { useState, useEffect, useRef } from "react";
@@ -7,6 +6,7 @@ import useInspector from "../inspect";
 import { logger } from "../logger";
 import { usePreviewServer } from "../proxy";
 import { syncAssets } from "../sites";
+import { requireApiToken, requireAuth } from "../user";
 import type { CfPreviewToken } from "../create-worker-preview";
 import type { AssetPaths } from "../sites";
 import type { CfModule, CfWorkerInit, CfScriptFormat } from "../worker";
@@ -23,24 +23,21 @@ export function Remote(props: {
   localProtocol: "https" | "http";
   inspectorPort: number;
   accountId: string | undefined;
-  apiToken: string | undefined;
   bindings: CfWorkerInit["bindings"];
   compatibilityDate: string;
   compatibilityFlags: string[] | undefined;
   usageModel: "bundled" | "unbound" | undefined;
   env: string | undefined;
   legacyEnv: boolean | undefined;
-  zone: { id: string; host: string } | undefined;
+  zone: string | undefined;
+  host: string | undefined;
 }) {
-  assert(props.accountId, "accountId is required");
-  assert(props.apiToken, "apiToken is required");
   const previewToken = useWorker({
     name: props.name,
     bundle: props.bundle,
     format: props.format,
     modules: props.bundle ? props.bundle.modules : [],
     accountId: props.accountId,
-    apiToken: props.apiToken,
     bindings: props.bindings,
     assetPaths: props.assetPaths,
     port: props.port,
@@ -50,6 +47,7 @@ export function Remote(props: {
     env: props.env,
     legacyEnv: props.legacyEnv,
     zone: props.zone,
+    host: props.host,
   });
 
   usePreviewServer({
@@ -73,8 +71,7 @@ export function useWorker(props: {
   bundle: EsbuildBundle | undefined;
   format: CfScriptFormat | undefined;
   modules: CfModule[];
-  accountId: string;
-  apiToken: string;
+  accountId: string | undefined;
   bindings: CfWorkerInit["bindings"];
   assetPaths: AssetPaths | undefined;
   port: number;
@@ -83,7 +80,8 @@ export function useWorker(props: {
   usageModel: "bundled" | "unbound" | undefined;
   env: string | undefined;
   legacyEnv: boolean | undefined;
-  zone: { id: string; host: string } | undefined;
+  zone: string | undefined;
+  host: string | undefined;
 }): CfPreviewToken | undefined {
   const {
     name,
@@ -91,7 +89,6 @@ export function useWorker(props: {
     format,
     modules,
     accountId,
-    apiToken,
     bindings,
     assetPaths,
     compatibilityDate,
@@ -105,6 +102,9 @@ export function useWorker(props: {
   // something's "happened" in our system; We make a ref and
   // mark it once we log our initial message. Refs are vars!
   const startedRef = useRef(false);
+  // This ref holds the actual accountId being used, the `accountId` prop could be undefined
+  // as it is only what is retrieved from the wrangler.toml config.
+  const accountIdRef = useRef(accountId);
 
   useEffect(() => {
     const abortController = new AbortController();
@@ -119,8 +119,13 @@ export function useWorker(props: {
         logger.log("⎔ Detected changes, restarted server.");
       }
 
+      // Ensure we have an account id, even if it means logging in here.
+      accountIdRef.current = await requireAuth({
+        account_id: accountIdRef.current,
+      });
+
       const assets = await syncAssets(
-        accountId,
+        accountIdRef.current,
         // When we're using the newer service environments, we wouldn't
         // have added the env name on to the script name. However, we must
         // include it in the kv namespace name regardless (since there's no
@@ -173,10 +178,15 @@ export function useWorker(props: {
         await createWorkerPreview(
           init,
           {
-            accountId,
-            apiToken,
+            accountId: accountIdRef.current,
+            apiToken: requireApiToken(),
+          },
+          {
+            env: props.env,
+            legacyEnv: props.legacyEnv,
+            zone: props.zone,
+            host: props.host,
           },
-          { env: props.env, legacyEnv: props.legacyEnv, zone: props.zone },
           abortController.signal
         )
       );
@@ -185,7 +195,21 @@ export function useWorker(props: {
       // we want to log the error, but not end the process
       // since it could recover after the developer fixes whatever's wrong
       if ((err as { code: string }).code !== "ABORT_ERR") {
-        logger.error("Error on remote worker:", err);
+        // instead of logging the raw API error to the user,
+        // give them friendly instructions
+        // for error 10063 (workers.dev subdomain required)
+        if (err.code === 10063) {
+          const errorMessage =
+            "Error: You need to register a workers.dev subdomain before running the dev command in remote mode";
+          const solutionMessage =
+            "You can either enable local mode by pressing l, or register a workers.dev subdomain here:";
+          const onboardingLink = `https://dash.cloudflare.com/${accountIdRef.current}/workers/onboarding`;
+          logger.error(
+            `${errorMessage}\n${solutionMessage}\n${onboardingLink}`
+          );
+        } else {
+          logger.error("Error on remote worker:", err);
+        }
       }
     });
 
@@ -197,7 +221,6 @@ export function useWorker(props: {
     bundle,
     format,
     accountId,
-    apiToken,
     port,
     assetPaths,
     compatibilityDate,
@@ -208,6 +231,7 @@ export function useWorker(props: {
     props.env,
     props.legacyEnv,
     props.zone,
+    props.host,
   ]);
   return token;
 }

package/src/dialogs.tsx

@@ -1,5 +1,6 @@
 import chalk from "chalk";
 import { Box, Text, useInput, render } from "ink";
+import SelectInput from "ink-select-input";
 import TextInput from "ink-text-input";
 import * as React from "react";
 import { useState } from "react";
@@ -85,3 +86,50 @@ export async function prompt(
     );
   });
 }
+
+type SelectOption = {
+  value: string;
+  label: string;
+};
+
+type SelectProps = {
+  text: string;
+  options: SelectOption[];
+  initialIndex: number;
+  onSelect: (value: string) => void;
+};
+
+function Select(props: SelectProps) {
+  return (
+    <Box flexDirection="column">
+      <Text>{props.text}</Text>
+      <SelectInput
+        initialIndex={props.initialIndex}
+        items={props.options}
+        onSelect={async (selected) => {
+          props.onSelect(selected.value);
+        }}
+      />
+    </Box>
+  );
+}
+
+export function select(
+  text: string,
+  options: SelectOption[],
+  initialIndex: number
+): Promise<string> {
+  return new Promise((resolve) => {
+    const { unmount } = render(
+      <Select
+        text={text}
+        options={options}
+        initialIndex={initialIndex}
+        onSelect={(option: string) => {
+          unmount();
+          resolve(option);
+        }}
+      />
+    );
+  });
+}

package/src/durable.ts

@@ -0,0 +1,102 @@
+import assert from "node:assert";
+import { fetchResult } from "./cfetch";
+import { logger } from "./logger";
+import type { Config } from "./config";
+import type { CfWorkerInit } from "./worker";
+
+/**
+ * For a given Worker + migrations config, figure out which migrations
+ * to upload based on the current migration tag of the deployed Worker.
+ */
+export async function getMigrationsToUpload(
+  scriptName: string,
+  props: {
+    accountId: string | undefined;
+    config: Config;
+    legacyEnv: boolean | undefined;
+    env: string | undefined;
+  }
+): Promise<CfWorkerInit["migrations"]> {
+  const { config, accountId } = props;
+
+  assert(accountId, "Missing accountId");
+  // if config.migrations
+  let migrations;
+  if (config.migrations.length > 0) {
+    // get current migration tag
+    type ScriptData = { id: string; migration_tag?: string };
+    let script: ScriptData | undefined;
+    if (!props.legacyEnv) {
+      try {
+        if (props.env) {
+          const scriptData = await fetchResult<{
+            script: ScriptData;
+          }>(
+            `/accounts/${accountId}/workers/services/${scriptName}/environments/${props.env}`
+          );
+          script = scriptData.script;
+        } else {
+          const scriptData = await fetchResult<{
+            default_environment: {
+              script: ScriptData;
+            };
+          }>(`/accounts/${accountId}/workers/services/${scriptName}`);
+          script = scriptData.default_environment.script;
+        }
+      } catch (err) {
+        if (
+          ![
+            10090, // corresponds to workers.api.error.service_not_found, so the script wasn't previously published at all
+            10092, // workers.api.error.environment_not_found, so the script wasn't published to this environment yet
+          ].includes((err as { code: number }).code)
+        ) {
+          throw err;
+        }
+        // else it's a 404, no script found, and we can proceed
+      }
+    } else {
+      const scripts = await fetchResult<ScriptData[]>(
+        `/accounts/${accountId}/workers/scripts`
+      );
+      script = scripts.find(({ id }) => id === scriptName);
+    }
+
+    if (script?.migration_tag) {
+      // was already published once
+      const scriptMigrationTag = script.migration_tag;
+      const foundIndex = config.migrations.findIndex(
+        (migration) => migration.tag === scriptMigrationTag
+      );
+      if (foundIndex === -1) {
+        logger.warn(
+          `The published script ${scriptName} has a migration tag "${script.migration_tag}, which was not found in wrangler.toml. You may have already deleted it. Applying all available migrations to the script...`
+        );
+        migrations = {
+          old_tag: script.migration_tag,
+          new_tag: config.migrations[config.migrations.length - 1].tag,
+          steps: config.migrations.map(({ tag: _tag, ...rest }) => rest),
+        };
+      } else {
+        if (foundIndex !== config.migrations.length - 1) {
+          // there are new migrations to send up
+          migrations = {
+            old_tag: script.migration_tag,
+            new_tag: config.migrations[config.migrations.length - 1].tag,
+            steps: config.migrations
+              .slice(foundIndex + 1)
+              .map(({ tag: _tag, ...rest }) => rest),
+          };
+        }
+        // else, we're up to date, no migrations to send
+      }
+    } else {
+      // first time publishing durable objects to this script,
+      // so we send all the migrations
+      migrations = {
+        new_tag: config.migrations[config.migrations.length - 1].tag,
+        steps: config.migrations.map(({ tag: _tag, ...rest }) => rest),
+      };
+    }
+  }
+  return migrations;
+}

package/src/entry.ts

@@ -1,5 +1,5 @@
 import assert from "node:assert";
-import { existsSync } from "node:fs";
+import { existsSync, statSync } from "node:fs";
 import path from "node:path";
 import * as esbuild from "esbuild";
 import { execaCommand } from "execa";
@@ -45,11 +45,16 @@ export async function getEntry(
     file = path.resolve(directory, config.main);
   }
 
-  await runCustomBuild(file, config.build);
+  const relativeFile = path.relative(directory, file) || ".";
+  await runCustomBuild(file, relativeFile, config.build);
 
   if (fileExists(file) === false) {
     throw new Error(
-      `Could not resolve "${path.relative(process.cwd(), file)}".`
+      getMissingEntryPointMessage(
+        `The entry-point file at "${relativeFile}" was not found.`,
+        file,
+        relativeFile
+      )
     );
   }
   const format = await guessWorkerFormat(
@@ -90,7 +95,8 @@ export async function getEntry(
 }
 
 export async function runCustomBuild(
-  expectedEntry: string,
+  expectedEntryAbsolute: string,
+  expectedEntryRelative: string,
   build: Config["build"]
 ) {
   if (build?.command) {
@@ -105,12 +111,14 @@ export async function runCustomBuild(
       ...(build.cwd && { cwd: build.cwd }),
     });
 
-    if (fileExists(expectedEntry) === false) {
+    if (fileExists(expectedEntryAbsolute) === false) {
       throw new Error(
-        `Could not resolve "${path.relative(
-          process.cwd(),
-          expectedEntry
-        )}" after running custom build: ${build.command}`
+        getMissingEntryPointMessage(
+          `The expected output file at "${expectedEntryRelative}" was not found after running custom build: ${build.command}.\n` +
+            "The `main` property in wrangler.toml should point to the file generated by the custom build.",
+          expectedEntryAbsolute,
+          expectedEntryRelative
+        )
       );
     }
   }
@@ -265,3 +273,50 @@ function generateAddScriptNameExamples(
     })
     .join("\n");
 }
+
+/**
+ * Generate an appropriate message for when the entry-point is missing.
+ *
+ * To be more helpful to developers, we check whether there is a suitable file
+ * nearby to the expected file path.
+ */
+function getMissingEntryPointMessage(
+  message: string,
+  absoluteEntryPointPath: string,
+  relativeEntryPointPath: string
+): string {
+  if (
+    existsSync(absoluteEntryPointPath) &&
+    statSync(absoluteEntryPointPath).isDirectory()
+  ) {
+    // The expected entry-point is a directory, so offer further guidance.
+    message += `\nThe provided entry-point path, "${relativeEntryPointPath}", points to a directory, rather than a file.\n`;
+
+    // Perhaps we can even guess what the correct path should be...
+    const possiblePaths: string[] = [];
+    for (const basenamePath of [
+      "worker",
+      "dist/worker",
+      "index",
+      "dist/index",
+    ]) {
+      for (const extension of [".ts", ".tsx", ".js", ".jsx"]) {
+        const filePath = basenamePath + extension;
+        if (fileExists(path.resolve(absoluteEntryPointPath, filePath))) {
+          possiblePaths.push(path.join(relativeEntryPointPath, filePath));
+        }
+      }
+    }
+
+    if (possiblePaths.length > 0) {
+      message +=
+        `\nDid you mean to set the main field to${
+          possiblePaths.length > 1 ? " one of" : ""
+        }:\n` +
+        "```\n" +
+        possiblePaths.map((filePath) => `main = "./${filePath}"\n`).join("") +
+        "```";
+    }
+  }
+  return message;
+}