wrangler 0.0.0-e2f9bb2 → 0.0.0-e322475

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";
@@ -19,7 +20,6 @@ import type { Config } from "../config";
 import type { Entry } from "../entry";
 import type { AssetPaths } from "../sites";
 import type { CfWorkerInit } from "../worker";
-import type { EsbuildBundle } from "./use-esbuild";
 
 export type DevProps = {
   name?: string;
@@ -38,37 +38,28 @@ export type DevProps = {
   enableLocalPersistence: boolean;
   bindings: CfWorkerInit["bindings"];
   crons: Config["triggers"]["crons"];
-  public: string | undefined;
+  isWorkersSite: boolean;
   assetPaths: AssetPaths | undefined;
   compatibilityDate: string;
   compatibilityFlags: string[] | undefined;
   usageModel: "bundled" | "unbound" | undefined;
   minify: boolean | undefined;
   nodeCompat: boolean | undefined;
-  build: {
-    command?: string | undefined;
-    cwd?: string | undefined;
-    watch_dir?: string | undefined;
-  };
+  build: Config["build"];
   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);
-
-  if (props.public && props.entry.format === "service-worker") {
+  if (
+    !props.isWorkersSite &&
+    props.assetPaths &&
+    props.entry.format === "service-worker"
+  ) {
     throw new Error(
-      "You cannot use the service-worker format with a `public` directory."
+      "You cannot use the service-worker format with an `assets` directory yet. For information on how to migrate to the module-worker format, see: https://developers.cloudflare.com/workers/learning/migrating-to-module-workers/"
     );
   }
 
@@ -90,39 +81,16 @@ export function DevImplementation(props: DevProps): JSX.Element {
     );
   }
 
-  const bundle = useEsbuild({
-    entry: props.entry,
-    destination: directory,
-    staticRoot: props.public,
-    jsxFactory: props.jsxFactory,
-    rules: props.rules,
-    jsxFragment: props.jsxFragment,
-    serveAssetsFromWorker: !!props.public,
-    tsconfig: props.tsconfig,
-    minify: props.minify,
-    nodeCompat: props.nodeCompat,
-  });
-
   // 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} />
   ) : (
-    <DevSession
-      {...props}
-      bundle={bundle}
-      apiToken={apiToken}
-      local={props.initialMode === "local"}
-    />
+    <DevSession {...props} local={props.initialMode === "local"} />
   );
 }
 
-type InteractiveDevSessionProps = DevProps & {
-  apiToken: string | undefined;
-  bundle: EsbuildBundle | undefined;
-};
-
-function InteractiveDevSession(props: InteractiveDevSessionProps) {
+function InteractiveDevSession(props: DevProps) {
   const toggles = useHotkeys(
     {
       local: props.initialMode === "local",
@@ -155,19 +123,40 @@ function InteractiveDevSession(props: InteractiveDevSessionProps) {
   );
 }
 
-type DevSessionProps = InteractiveDevSessionProps & { local: boolean };
+type DevSessionProps = DevProps & {
+  local: boolean;
+};
 
 function DevSession(props: DevSessionProps) {
+  useCustomBuild(props.entry, props.build);
+
+  const directory = useTmpDir();
+
+  const bundle = useEsbuild({
+    entry: props.entry,
+    destination: directory,
+    jsxFactory: props.jsxFactory,
+    rules: props.rules,
+    jsxFragment: props.jsxFragment,
+    serveAssetsFromWorker: Boolean(
+      props.assetPaths && !props.isWorkersSite && props.local
+    ),
+    tsconfig: props.tsconfig,
+    minify: props.minify,
+    nodeCompat: props.nodeCompat,
+  });
+
   return props.local ? (
     <Local
       name={props.name}
-      bundle={props.bundle}
+      bundle={bundle}
       format={props.entry.format}
       compatibilityDate={props.compatibilityDate}
+      localProtocol={props.localProtocol}
       compatibilityFlags={props.compatibilityFlags}
       bindings={props.bindings}
       assetPaths={props.assetPaths}
-      public={props.public}
+      isWorkersSite={props.isWorkersSite}
       port={props.port}
       ip={props.ip}
       rules={props.rules}
@@ -178,13 +167,12 @@ function DevSession(props: DevSessionProps) {
   ) : (
     <Remote
       name={props.name}
-      bundle={props.bundle}
+      bundle={bundle}
       format={props.entry.format}
       accountId={props.accountId}
-      apiToken={props.apiToken}
       bindings={props.bindings}
       assetPaths={props.assetPaths}
-      public={props.public}
+      isWorkersSite={props.isWorkersSite}
       port={props.port}
       ip={props.ip}
       localProtocol={props.localProtocol}
@@ -195,6 +183,7 @@ function DevSession(props: DevSessionProps) {
       env={props.env}
       legacyEnv={props.legacyEnv}
       zone={props.zone}
+      host={props.host}
     />
   );
 }
@@ -226,14 +215,7 @@ function useTmpDir(): string | undefined {
   return directory?.name;
 }
 
-function useCustomBuild(
-  expectedEntry: Entry,
-  build: {
-    command?: string | undefined;
-    cwd?: string | undefined;
-    watch_dir?: string | undefined;
-  }
-): void {
+function useCustomBuild(expectedEntry: Entry, build: Config["build"]): void {
   useEffect(() => {
     if (!build.command) return;
     let watcher: ReturnType<typeof watch> | undefined;
@@ -242,9 +224,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 +237,7 @@ function useCustomBuild(
     return () => {
       watcher?.close();
     };
-  }, [build, expectedEntry.file]);
+  }, [build, expectedEntry]);
 }
 
 function sleep(period: number) {
@@ -375,10 +359,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,8 +21,9 @@ interface LocalProps {
   compatibilityDate: string;
   compatibilityFlags: string[] | undefined;
   bindings: CfWorkerInit["bindings"];
+  localProtocol: "http" | "https";
   assetPaths: AssetPaths | undefined;
-  public: string | undefined;
+  isWorkersSite: boolean;
   port: number;
   ip: string;
   rules: Config["rules"];
@@ -49,11 +50,12 @@ function useLocalWorker({
   compatibilityFlags,
   bindings,
   assetPaths,
-  public: publicDirectory,
+  isWorkersSite,
   port,
   rules,
   enableLocalPersistence,
   ip,
+  localProtocol,
   crons,
 }: LocalProps) {
   // TODO: pass vars via command line
@@ -82,9 +84,9 @@ function useLocalWorker({
         abortSignal: abortController.signal,
       });
 
-      if (publicDirectory) {
+      if (bindings.services && bindings.services.length > 0) {
         throw new Error(
-          '⎔ A "public" folder is not yet supported in local mode.'
+          "⎔ Service bindings are not yet supported in local mode."
         );
       }
 
@@ -159,6 +161,7 @@ function useLocalWorker({
         name: workerName,
         port,
         scriptPath,
+        https: localProtocol === "https",
         host: ip,
         modules: format === "modules",
         modulesRules: (rules || [])
@@ -246,12 +249,16 @@ function useLocalWorker({
         process.stdout.write(data);
       });
 
+      // parse the node inspector url (which may be received in chunks) from stderr
+      let stderrData = "";
       local.current.stderr?.on("data", (data: Buffer) => {
+        stderrData += data.toString();
         const matches =
-          /Debugger listening on (ws:\/\/127\.0\.0\.1:\d+\/[A-Za-z0-9-]+)/.exec(
-            data.toString()
+          /Debugger listening on (ws:\/\/127\.0\.0\.1:\d+\/[A-Za-z0-9-]+)[\r|\n]/.exec(
+            stderrData
           );
         if (matches) {
+          local.current?.stderr?.removeAllListeners("data");
           setInspectorUrl(matches[1]);
         }
       });
@@ -293,15 +300,17 @@ function useLocalWorker({
     workerName,
     format,
     port,
+    localProtocol,
     ip,
     bindings.durable_objects?.bindings,
     bindings.kv_namespaces,
     bindings.vars,
+    bindings.services,
     compatibilityDate,
     compatibilityFlags,
     localPersistencePath,
     assetPaths,
-    publicDirectory,
+    isWorkersSite,
     rules,
     bindings.wasm_modules,
     bindings.text_blobs,

package/src/dev/remote.tsx

@@ -1,12 +1,13 @@
-import assert from "node:assert";
 import { readFile } from "node:fs/promises";
 import path from "node:path";
 import { useState, useEffect, useRef } from "react";
+import { printBundleSize } from "../bundle-reporter";
 import { createWorkerPreview } from "../create-worker-preview";
 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";
@@ -16,33 +17,31 @@ export function Remote(props: {
   name: string | undefined;
   bundle: EsbuildBundle | undefined;
   format: CfScriptFormat | undefined;
-  public: string | undefined;
+  isWorkersSite: boolean;
   assetPaths: AssetPaths | undefined;
   port: number;
   ip: string;
   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,
+    isWorkersSite: props.isWorkersSite,
     port: props.port,
     compatibilityDate: props.compatibilityDate,
     compatibilityFlags: props.compatibilityFlags,
@@ -50,11 +49,14 @@ export function Remote(props: {
     env: props.env,
     legacyEnv: props.legacyEnv,
     zone: props.zone,
+    host: props.host,
   });
 
   usePreviewServer({
     previewToken,
-    publicRoot: props.public,
+    assetDirectory: props.isWorkersSite
+      ? undefined
+      : props.assetPaths?.assetDirectory,
     localProtocol: props.localProtocol,
     localPort: props.port,
     ip: props.ip,
@@ -73,17 +75,18 @@ 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;
+  isWorkersSite: boolean;
   port: number;
   compatibilityDate: string | undefined;
   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;
 }): CfPreviewToken | undefined {
   const {
     name,
@@ -91,7 +94,6 @@ export function useWorker(props: {
     format,
     modules,
     accountId,
-    apiToken,
     bindings,
     assetPaths,
     compatibilityDate,
@@ -105,6 +107,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,20 +124,31 @@ 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 content = await readFile(bundle.path, "utf-8");
+
+      // TODO: For Dev we could show the reporter message in the interactive box.
+      void printBundleSize(
+        { name: path.basename(bundle.path), content: content },
+        modules
+      );
+
       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
         // concept of service environments for kv namespaces yet).
         name + (!props.legacyEnv && props.env ? `-${props.env}` : ""),
-        assetPaths,
+        props.isWorkersSite ? assetPaths : undefined,
         true,
         false
       ); // TODO: cancellable?
 
-      const content = await readFile(bundle.path, "utf-8");
-
       const init: CfWorkerInit = {
         name,
         main: {
@@ -173,10 +189,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 +206,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,9 +232,9 @@ export function useWorker(props: {
     bundle,
     format,
     accountId,
-    apiToken,
     port,
     assetPaths,
+    props.isWorkersSite,
     compatibilityDate,
     compatibilityFlags,
     usageModel,
@@ -208,6 +243,7 @@ export function useWorker(props: {
     props.env,
     props.legacyEnv,
     props.zone,
+    props.host,
   ]);
   return token;
 }

package/src/dev/use-esbuild.ts

@@ -14,13 +14,11 @@ export type EsbuildBundle = {
   entry: Entry;
   type: "esm" | "commonjs";
   modules: CfModule[];
-  serveAssetsFromWorker: boolean;
 };
 
 export function useEsbuild({
   entry,
   destination,
-  staticRoot,
   jsxFactory,
   jsxFragment,
   rules,
@@ -31,7 +29,6 @@ export function useEsbuild({
 }: {
   entry: Entry;
   destination: string | undefined;
-  staticRoot: string | undefined;
   jsxFactory: string | undefined;
   jsxFragment: string | undefined;
   rules: Config["rules"];
@@ -67,8 +64,7 @@ export function useEsbuild({
 
       const { resolvedEntryPointPath, bundleType, modules, stop } =
         await bundleWorker(entry, destination, {
-          // In dev, we serve assets from the local proxy before we send the request to the worker.
-          serveAssetsFromWorker: false,
+          serveAssetsFromWorker,
           jsxFactory,
           jsxFragment,
           rules,
@@ -87,7 +83,6 @@ export function useEsbuild({
         path: resolvedEntryPointPath,
         type: bundleType,
         modules,
-        serveAssetsFromWorker,
       });
     }
 
@@ -104,7 +99,6 @@ export function useEsbuild({
   }, [
     entry,
     destination,
-    staticRoot,
     jsxFactory,
     jsxFragment,
     serveAssetsFromWorker,

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);
+        }}
+      />
+    );
+  });
+}