wrangler 0.0.0-e95bea2 → 0.0.0-ea8e701

package/src/dev/dev.tsx

@@ -2,7 +2,7 @@ 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 { Box, Text, useApp, useInput, useStdin } from "ink";
 import React, { useState, useEffect, useRef } from "react";
 import { withErrorBoundary, useErrorHandler } from "react-error-boundary";
 import onExit from "signal-exit";
@@ -19,17 +19,20 @@ 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;
   entry: Entry;
-  port?: number;
+  port: number;
+  ip: string;
   inspectorPort: number;
   rules: Config["rules"];
   accountId: undefined | string;
   initialMode: "local" | "remote";
   jsxFactory: undefined | string;
   jsxFragment: undefined | string;
+  tsconfig: string | undefined;
   upstreamProtocol: "https" | "http";
   localProtocol: "https" | "http";
   enableLocalPersistence: boolean;
@@ -39,7 +42,7 @@ export type DevProps = {
   compatibilityDate: undefined | string;
   compatibilityFlags: undefined | string[];
   usageModel: undefined | "bundled" | "unbound";
-  buildCommand: {
+  build: {
     command?: undefined | string;
     cwd?: undefined | string;
     watch_dir?: undefined | string;
@@ -55,11 +58,10 @@ export type DevProps = {
 };
 
 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);
+  useCustomBuild(props.entry, props.build);
 
   if (props.public && props.entry.format === "service-worker") {
     throw new Error(
@@ -87,14 +89,36 @@ export function DevImplementation(props: DevProps): JSX.Element {
     rules: props.rules,
     jsxFragment: props.jsxFragment,
     serveAssetsFromWorker: !!props.public,
+    tsconfig: props.tsconfig,
   });
 
+  // only load the UI if we're running in a supported environment
+  const { isRawModeSupported } = useStdin();
+  return isRawModeSupported ? (
+    <InteractiveDevSession {...props} bundle={bundle} apiToken={apiToken} />
+  ) : (
+    <DevSession
+      {...props}
+      bundle={bundle}
+      apiToken={apiToken}
+      local={props.initialMode === "local"}
+    />
+  );
+}
+
+type InteractiveDevSessionProps = DevProps & {
+  apiToken: string | undefined;
+  bundle: EsbuildBundle | undefined;
+};
+
+function InteractiveDevSession(props: InteractiveDevSessionProps) {
   const toggles = useHotkeys(
     {
       local: props.initialMode === "local",
       tunnel: false,
     },
-    port,
+    props.port,
+    props.ip,
     props.inspectorPort,
     props.localProtocol
   );
@@ -103,40 +127,7 @@ export function DevImplementation(props: DevProps): JSX.Element {
 
   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}
-        />
-      )}
+      <DevSession {...props} local={toggles.local} />
       <Box borderStyle="round" paddingLeft={1} paddingRight={1}>
         <Text>
           {`B to open a browser, D to open Devtools, L to ${
@@ -148,6 +139,49 @@ export function DevImplementation(props: DevProps): JSX.Element {
   );
 }
 
+type DevSessionProps = InteractiveDevSessionProps & { local: boolean };
+
+function DevSession(props: DevSessionProps) {
+  return props.local ? (
+    <Local
+      name={props.name}
+      bundle={props.bundle}
+      format={props.entry.format}
+      compatibilityDate={props.compatibilityDate}
+      compatibilityFlags={props.compatibilityFlags}
+      bindings={props.bindings}
+      assetPaths={props.assetPaths}
+      public={props.public}
+      port={props.port}
+      ip={props.ip}
+      rules={props.rules}
+      inspectorPort={props.inspectorPort}
+      enableLocalPersistence={props.enableLocalPersistence}
+    />
+  ) : (
+    <Remote
+      name={props.name}
+      bundle={props.bundle}
+      format={props.entry.format}
+      accountId={props.accountId}
+      apiToken={props.apiToken}
+      bindings={props.bindings}
+      assetPaths={props.assetPaths}
+      public={props.public}
+      port={props.port}
+      ip={props.ip}
+      localProtocol={props.localProtocol}
+      inspectorPort={props.inspectorPort}
+      compatibilityDate={props.compatibilityDate}
+      compatibilityFlags={props.compatibilityFlags}
+      usageModel={props.usageModel}
+      env={props.env}
+      legacyEnv={props.legacyEnv}
+      zone={props.zone}
+    />
+  );
+}
+
 export interface DirectorySyncResult {
   name: string;
   removeCallback: () => void;
@@ -295,6 +329,7 @@ type useHotkeysInitialState = {
 function useHotkeys(
   initial: useHotkeysInitialState,
   port: number,
+  ip: string,
   inspectorPort: number,
   localProtocol: "http" | "https"
 ) {
@@ -309,7 +344,7 @@ function useHotkeys(
       switch (input.toLowerCase()) {
         // open browser
         case "b": {
-          await openInBrowser(`${localProtocol}://localhost:${port}`);
+          await openInBrowser(`${localProtocol}://${ip}:${port}`);
           break;
         }
         // toggle inspector

package/src/dev/local.tsx

@@ -11,30 +11,26 @@ import type { Config } from "../config";
 import type { AssetPaths } from "../sites";
 import type { CfWorkerInit, CfScriptFormat } from "../worker";
 import type { EsbuildBundle } from "./use-esbuild";
+import type { MiniflareOptions } from "miniflare";
 
-export function Local(props: {
+interface LocalProps {
   name: undefined | string;
   bundle: EsbuildBundle | undefined;
   format: CfScriptFormat | undefined;
+  compatibilityDate: string | undefined;
+  compatibilityFlags: undefined | string[];
   bindings: CfWorkerInit["bindings"];
   assetPaths: undefined | AssetPaths;
   public: undefined | string;
   port: number;
+  ip: string;
   rules: Config["rules"];
   inspectorPort: number;
   enableLocalPersistence: boolean;
-}) {
-  const { inspectorUrl } = useLocalWorker({
-    name: props.name,
-    bundle: props.bundle,
-    format: props.format,
-    bindings: props.bindings,
-    assetPaths: props.assetPaths,
-    public: props.public,
-    port: props.port,
-    rules: props.rules,
-    enableLocalPersistence: props.enableLocalPersistence,
-  });
+}
+
+export function Local(props: LocalProps) {
+  const { inspectorUrl } = useLocalWorker(props);
   useInspector({
     inspectorUrl,
     port: props.inspectorPort,
@@ -43,19 +39,21 @@ export function Local(props: {
   return null;
 }
 
-function useLocalWorker(props: {
-  name: undefined | string;
-  bundle: EsbuildBundle | undefined;
-  rules: Config["rules"];
-  format: CfScriptFormat | undefined;
-  bindings: CfWorkerInit["bindings"];
-  assetPaths: undefined | AssetPaths;
-  public: undefined | string;
-  port: number;
-  enableLocalPersistence: boolean;
-}) {
+function useLocalWorker({
+  name: workerName,
+  bundle,
+  format,
+  compatibilityDate,
+  compatibilityFlags,
+  bindings,
+  assetPaths,
+  public: publicDirectory,
+  port,
+  rules,
+  enableLocalPersistence,
+  ip,
+}: LocalProps) {
   // TODO: pass vars via command line
-  const { bundle, format, bindings, port, assetPaths } = props;
   const local = useRef<ReturnType<typeof spawn>>();
   const removeSignalExitListener = useRef<() => void>();
   const [inspectorUrl, setInspectorUrl] = useState<string | undefined>();
@@ -66,7 +64,7 @@ function useLocalWorker(props: {
       // port for the worker
       await waitForPortToBeAvailable(port, { retryPeriod: 200, timeout: 2000 });
 
-      if (props.public) {
+      if (publicDirectory) {
         throw new Error(
           '⎔ A "public" folder is not yet supported in local mode.'
         );
@@ -81,100 +79,89 @@ function useLocalWorker(props: {
         );
       }
 
+      const scriptPath = realpathSync(bundle.path);
+
+      const wasmBindings = { ...bindings.wasm_modules };
+      if (format === "service-worker") {
+        for (const { type, name } of bundle.modules) {
+          if (type === "compiled-wasm") {
+            // In service-worker format, .wasm modules are referenced by global identifiers,
+            // so we convert it here.
+            // This identifier has to be a valid JS identifier, so we replace all non alphanumeric
+            // characters with an underscore.
+            const identifier = name.replace(/[^a-zA-Z0-9_$]/g, "_");
+            wasmBindings[identifier] = name;
+          }
+        }
+      }
+
+      const options: MiniflareOptions = {
+        name: workerName,
+        port,
+        scriptPath,
+        host: ip,
+        modules: format === "modules",
+        modulesRules: (rules || [])
+          .concat(DEFAULT_MODULE_RULES)
+          .map(({ type, globs: include, fallthrough }) => ({
+            type,
+            include,
+            fallthrough,
+          })),
+        compatibilityDate,
+        compatibilityFlags,
+        kvNamespaces: bindings.kv_namespaces?.map((kv) => kv.binding),
+        kvPersist: enableLocalPersistence,
+        durableObjects: Object.fromEntries(
+          (bindings.durable_objects?.bindings ?? []).map<[string, string]>(
+            (value) => [value.name, value.class_name]
+          )
+        ),
+        durableObjectsPersist: enableLocalPersistence,
+        cachePersist: enableLocalPersistence,
+        sitePath: assetPaths?.assetDirectory
+          ? path.join(assetPaths.baseDirectory, assetPaths.assetDirectory)
+          : undefined,
+        siteInclude: assetPaths?.includePatterns.length
+          ? assetPaths?.includePatterns
+          : undefined,
+        siteExclude: assetPaths?.excludePatterns.length
+          ? assetPaths.excludePatterns
+          : undefined,
+        bindings: bindings.vars,
+        wasmBindings,
+        sourceMap: true,
+        logUnhandledRejections: true,
+      };
+
+      // The path to the Miniflare CLI assumes that this file is being run from
+      // `wrangler-dist` and that the CLI is found in `miniflare-dist`.
+      // If either of those paths change this line needs updating.
+      const miniflareCLIPath = path.resolve(
+        __dirname,
+        "../miniflare-dist/index.mjs"
+      );
+      const optionsArg = JSON.stringify(options, null);
+
       console.log("⎔ Starting a local server...");
-      // TODO: just use execa for this
       local.current = spawn(
         "node",
         [
-          "--experimental-vm-modules",
-          "--inspect",
-          require.resolve("miniflare/cli"),
-          realpathSync(bundle.path),
-          "--watch",
-          "--wrangler-config",
-          path.join(__dirname, "../miniflare-config-stubs/wrangler.empty.toml"),
-          "--env",
-          path.join(__dirname, "../miniflare-config-stubs/.env.empty"),
-          "--package",
-          path.join(__dirname, "../miniflare-config-stubs/package.empty.json"),
-          "--port",
-          port.toString(),
-          ...(assetPaths
-            ? [
-                "--site",
-                path.join(process.cwd(), assetPaths.baseDirectory),
-                ...assetPaths.includePatterns.map((pattern) => [
-                  "--site-include",
-                  pattern,
-                ]),
-                ...assetPaths.excludePatterns.map((pattern) => [
-                  "--site-exclude",
-                  pattern,
-                ]),
-              ].flatMap((x) => x)
-            : []),
-          ...(props.enableLocalPersistence
-            ? ["--kv-persist", "--cache-persist", "--do-persist"]
-            : []),
-          ...Object.entries(bindings.vars || {}).flatMap(([key, value]) => {
-            return ["--binding", `${key}=${value}`];
-          }),
-          ...(bindings.kv_namespaces || []).flatMap(({ binding }) => {
-            return ["--kv", binding];
-          }),
-          ...(bindings.durable_objects?.bindings || []).flatMap(
-            ({ name, class_name }) => {
-              return ["--do", `${name}=${class_name}`];
-            }
-          ),
-          ...Object.entries(bindings.wasm_modules || {}).flatMap(
-            ([name, filePath]) => {
-              return [
-                "--wasm",
-                `${name}=${path.join(process.cwd(), filePath)}`,
-              ];
-            }
-          ),
-          ...bundle.modules.reduce<string[]>((cmd, { name, type }) => {
-            if (format === "service-worker") {
-              if (type === "compiled-wasm") {
-                // In service-worker format, .wasm modules are referenced
-                // by global identifiers, so we convert it here.
-                // This identifier has to be a valid JS identifier,
-                // so we replace all non alphanumeric characters
-                // with an underscore.
-                const identifier = name.replace(/[^a-zA-Z0-9_$]/g, "_");
-                return cmd.concat([`--wasm`, `${identifier}=${name}`]);
-              } else {
-                // TODO: we should actually support this
-                throw new Error(
-                  `⎔ Unsupported module type ${type} for file ${name} in service-worker format`
-                );
-              }
-            }
-            return cmd;
-          }, []),
-          "--modules",
-          String(format === "modules"),
-          ...(props.rules || [])
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            .concat(DEFAULT_MODULE_RULES!)
-            .flatMap((rule) =>
-              rule.globs.flatMap((glob) => [
-                "--modules-rule",
-                `${rule.type}=${glob}`,
-              ])
-            ),
+          "--experimental-vm-modules", // ensures that Miniflare can run ESM Workers
+          "--no-warnings", // hide annoying Node warnings
+          "--inspect", // start Miniflare listening for a debugger to attach
+          miniflareCLIPath,
+          optionsArg,
+          // "--log=VERBOSE", // uncomment this to Miniflare to log "everything"!
         ],
         {
-          cwd: path.dirname(realpathSync(bundle.path)),
+          cwd: path.dirname(scriptPath),
         }
       );
-      console.log(`⬣ Listening at http://localhost:${port}`);
 
       local.current.on("close", (code) => {
         if (code) {
-          console.log(`miniflare process exited with code ${code}`);
+          console.log(`Miniflare process exited with code ${code}`);
         }
       });
 
@@ -195,12 +182,12 @@ function useLocalWorker(props: {
 
       local.current.on("exit", (code) => {
         if (code) {
-          console.error(`miniflare process exited with code ${code}`);
+          console.error(`Miniflare process exited with code ${code}`);
         }
       });
 
       local.current.on("error", (error: Error) => {
-        console.error(`miniflare process failed to spawn`);
+        console.error(`Miniflare process failed to spawn`);
         console.error(error);
       });
 
@@ -226,15 +213,19 @@ function useLocalWorker(props: {
     };
   }, [
     bundle,
+    workerName,
     format,
     port,
+    ip,
     bindings.durable_objects?.bindings,
     bindings.kv_namespaces,
     bindings.vars,
-    props.enableLocalPersistence,
+    compatibilityDate,
+    compatibilityFlags,
+    enableLocalPersistence,
     assetPaths,
-    props.public,
-    props.rules,
+    publicDirectory,
+    rules,
     bindings.wasm_modules,
   ]);
   return { inspectorUrl };

package/src/dev/remote.tsx

@@ -18,6 +18,7 @@ export function Remote(props: {
   public: undefined | string;
   assetPaths: undefined | AssetPaths;
   port: number;
+  ip: string;
   localProtocol: "https" | "http";
   inspectorPort: number;
   accountId: undefined | string;
@@ -55,6 +56,7 @@ export function Remote(props: {
     publicRoot: props.public,
     localProtocol: props.localProtocol,
     localPort: props.port,
+    ip: props.ip,
   });
 
   useInspector({

package/src/dev/use-esbuild.ts

@@ -23,6 +23,7 @@ export function useEsbuild({
   jsxFragment,
   rules,
   serveAssetsFromWorker,
+  tsconfig,
 }: {
   entry: Entry;
   destination: string | undefined;
@@ -31,6 +32,7 @@ export function useEsbuild({
   jsxFragment: string | undefined;
   rules: Config["rules"];
   serveAssetsFromWorker: boolean;
+  tsconfig: string | undefined;
 }): EsbuildBundle | undefined {
   const [bundle, setBundle] = useState<EsbuildBundle>();
   useEffect(() => {
@@ -64,6 +66,7 @@ export function useEsbuild({
           jsxFragment,
           rules,
           watch: watchMode,
+          tsconfig,
         });
 
       // Capture the `stop()` method to use as the `useEffect()` destructor.
@@ -95,6 +98,7 @@ export function useEsbuild({
     jsxFragment,
     serveAssetsFromWorker,
     rules,
+    tsconfig,
   ]);
   return bundle;
 }

package/src/entry.ts

@@ -20,7 +20,7 @@ export type Entry = { file: string; directory: string; format: CfScriptFormat };
 export async function getEntry(
   args: { script?: string; format?: CfScriptFormat | undefined },
   config: Config,
-  command: string
+  command: "dev" | "publish"
 ): Promise<Entry> {
   let file: string;
   let directory = process.cwd();
@@ -46,8 +46,37 @@ export async function getEntry(
   const format = await guessWorkerFormat(
     file,
     directory,
-    args.format ?? config.build?.upload?.format
+    args.format ?? config.build?.upload?.format,
+    config.tsconfig
   );
+
+  const { localBindings, remoteBindings } =
+    partitionDurableObjectBindings(config);
+
+  if (command === "dev" && remoteBindings.length > 0) {
+    console.warn(
+      "WARNING: You have Durable Object bindings, which are not defined locally in the worker being developed.\n" +
+        "Be aware that changes to the data stored in these Durable Objects will be permanent and affect the live instances.\n" +
+        "Remote Durable Objects that are affected:\n" +
+        remoteBindings.map((b) => `- ${JSON.stringify(b)}`).join("\n")
+    );
+  }
+
+  if (format === "service-worker" && localBindings.length > 0) {
+    const errorMessage =
+      "You seem to be trying to use Durable Objects in a Worker written with Service Worker syntax.";
+    const addScriptName =
+      "You can use Durable Objects defined in other Workers by specifying a `script_name` in your wrangler.toml, where `script_name` is the name of the Worker that implements that Durable Object. For example:";
+    const addScriptNameExamples = generateAddScriptNameExamples(localBindings);
+    const migrateText =
+      "Alternatively, migrate your worker to ES Module syntax to implement a Durable Object in this Worker:";
+    const migrateUrl =
+      "https://developers.cloudflare.com/workers/learning/migrating-to-module-workers/";
+    throw new Error(
+      `${errorMessage}\n${addScriptName}\n${addScriptNameExamples}\n${migrateText}\n${migrateUrl}`
+    );
+  }
+
   return { file, directory, format };
 }
 
@@ -88,7 +117,8 @@ export async function runCustomBuild(
 export default async function guessWorkerFormat(
   entryFile: string,
   entryWorkingDirectory: string,
-  hint: CfScriptFormat | undefined
+  hint: CfScriptFormat | undefined,
+  tsconfig?: string | undefined
 ): Promise<CfScriptFormat> {
   const result = await esbuild.build({
     entryPoints: [entryFile],
@@ -97,6 +127,12 @@ export default async function guessWorkerFormat(
     bundle: false,
     format: "esm",
     write: false,
+    loader: {
+      ".js": "jsx",
+      ".mjs": "jsx",
+      ".cjs": "jsx",
+    },
+    ...(tsconfig && { tsconfig }),
   });
   // result.metafile is defined because of the `metafile: true` option above.
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -114,14 +150,30 @@ export default async function guessWorkerFormat(
     "More than one entry-point found for generated bundle." +
       listEntryPoints(entryPoints)
   );
-  const guessedWorkerFormat =
-    entryPoints[0][1].exports.length > 0 ? "modules" : "service-worker";
+
+  let guessedWorkerFormat: CfScriptFormat;
+  const scriptExports = entryPoints[0][1].exports;
+  if (scriptExports.length > 0) {
+    if (scriptExports.includes("default")) {
+      guessedWorkerFormat = "modules";
+    } else {
+      console.warn(
+        `The entrypoint ${path.relative(
+          process.cwd(),
+          entryFile
+        )} has exports like an ES Module, but hasn't defined a default export like a module worker normally would. Building the worker using "service-worker" format...`
+      );
+      guessedWorkerFormat = "service-worker";
+    }
+  } else {
+    guessedWorkerFormat = "service-worker";
+  }
 
   if (hint) {
     if (hint !== guessedWorkerFormat) {
       if (hint === "service-worker") {
         throw new Error(
-          "You configured this worker to be a 'service-worker', but the file you are trying to build appears to have ES module exports. Please pass `--format modules`, or simply remove the configuration."
+          "You configured this worker to be a 'service-worker', but the file you are trying to build appears to have a `default` export like a module worker. Please pass `--format modules`, or simply remove the configuration."
         );
       } else {
         throw new Error(
@@ -157,3 +209,48 @@ export function fileExists(filePath: string): boolean {
   }
   return false;
 }
+
+type DurableObjectBindings = Config["durable_objects"]["bindings"];
+
+/**
+ * Groups the durable object bindings into two lists:
+ * those that are defined locally and those that refer to a durable object defined in another script.
+ */
+function partitionDurableObjectBindings(config: Config): {
+  localBindings: DurableObjectBindings;
+  remoteBindings: DurableObjectBindings;
+} {
+  const localBindings: DurableObjectBindings = [];
+  const remoteBindings: DurableObjectBindings = [];
+  for (const binding of config.durable_objects.bindings) {
+    if (binding.script_name === undefined) {
+      localBindings.push(binding);
+    } else {
+      remoteBindings.push(binding);
+    }
+  }
+  return { localBindings, remoteBindings };
+}
+
+/**
+ * Generates some help text based on the Durable Object bindings in a given
+ * config indicating how the user can add a `script_name` field to bind an
+ * externally defined Durable Object.
+ */
+function generateAddScriptNameExamples(
+  localBindings: DurableObjectBindings
+): string {
+  function exampleScriptName(binding_name: string): string {
+    return `${binding_name.toLowerCase().replaceAll("_", "-")}-worker`;
+  }
+
+  return localBindings
+    .map(({ name, class_name }) => {
+      const script_name = exampleScriptName(name);
+      const currentBinding = `{ name = ${name}, class_name = ${class_name} }`;
+      const fixedBinding = `{ name = ${name}, class_name = ${class_name}, script_name = ${script_name} }`;
+
+      return `${currentBinding} ==> ${fixedBinding}`;
+    })
+    .join("\n");
+}