wrangler 2.0.6 → 2.0.9

package/src/dev/dev.tsx

@@ -10,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";
@@ -53,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);
@@ -107,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;
 };
 
@@ -182,7 +175,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}
@@ -196,6 +188,7 @@ function DevSession(props: DevSessionProps) {
       env={props.env}
       legacyEnv={props.legacyEnv}
       zone={props.zone}
+      host={props.host}
     />
   );
 }
@@ -378,10 +371,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/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;
+}