wrangler 0.0.0-fb43821 → 0.0.0-fb53fda

package/src/dev/remote.tsx

@@ -0,0 +1,203 @@
+import assert from "node:assert";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { useState, useEffect, useRef } from "react";
+import { createWorkerPreview } from "../create-worker-preview";
+import useInspector from "../inspect";
+import { usePreviewServer } from "../proxy";
+import { syncAssets } from "../sites";
+import type { CfPreviewToken } from "../create-worker-preview";
+import type { AssetPaths } from "../sites";
+import type { CfModule, CfWorkerInit, CfScriptFormat } from "../worker";
+import type { EsbuildBundle } from "./use-esbuild";
+
+export function Remote(props: {
+  name: string | undefined;
+  bundle: EsbuildBundle | undefined;
+  format: CfScriptFormat | undefined;
+  public: undefined | string;
+  assetPaths: undefined | AssetPaths;
+  port: number;
+  ip: string;
+  localProtocol: "https" | "http";
+  inspectorPort: number;
+  accountId: undefined | string;
+  apiToken: undefined | string;
+  bindings: CfWorkerInit["bindings"];
+  compatibilityDate: string | undefined;
+  compatibilityFlags: undefined | string[];
+  usageModel: undefined | "bundled" | "unbound";
+  env: string | undefined;
+  legacyEnv: boolean | undefined;
+  zone: { id: string; 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,
+    compatibilityDate: props.compatibilityDate,
+    compatibilityFlags: props.compatibilityFlags,
+    usageModel: props.usageModel,
+    env: props.env,
+    legacyEnv: props.legacyEnv,
+    zone: props.zone,
+  });
+
+  usePreviewServer({
+    previewToken,
+    publicRoot: props.public,
+    localProtocol: props.localProtocol,
+    localPort: props.port,
+    ip: props.ip,
+  });
+
+  useInspector({
+    inspectorUrl: previewToken ? previewToken.inspectorUrl.href : undefined,
+    port: props.inspectorPort,
+    logToTerminal: true,
+  });
+  return null;
+}
+
+export function useWorker(props: {
+  name: string | undefined;
+  bundle: EsbuildBundle | undefined;
+  format: CfScriptFormat | undefined;
+  modules: CfModule[];
+  accountId: string;
+  apiToken: string;
+  bindings: CfWorkerInit["bindings"];
+  assetPaths: undefined | AssetPaths;
+  port: number;
+  compatibilityDate: string | undefined;
+  compatibilityFlags: string[] | undefined;
+  usageModel: undefined | "bundled" | "unbound";
+  env: string | undefined;
+  legacyEnv: boolean | undefined;
+  zone: { id: string; host: string } | undefined;
+}): CfPreviewToken | undefined {
+  const {
+    name,
+    bundle,
+    format,
+    modules,
+    accountId,
+    apiToken,
+    bindings,
+    assetPaths,
+    compatibilityDate,
+    compatibilityFlags,
+    usageModel,
+    port,
+  } = props;
+  const [token, setToken] = useState<CfPreviewToken | undefined>();
+
+  // This is the most reliable way to detect whether
+  // 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);
+
+  useEffect(() => {
+    async function start() {
+      setToken(undefined); // reset token in case we're re-running
+
+      if (!bundle || !format) return;
+
+      if (!startedRef.current) {
+        startedRef.current = true;
+      } else {
+        console.log("⎔ Detected changes, restarted server.");
+      }
+
+      const assets = await syncAssets(
+        accountId,
+        // 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,
+        true
+      ); // TODO: cancellable?
+
+      const content = await readFile(bundle.path, "utf-8");
+
+      const init: CfWorkerInit = {
+        name,
+        main: {
+          name: path.basename(bundle.path),
+          type: format === "modules" ? "esm" : "commonjs",
+          content,
+        },
+        modules: modules.concat(
+          assets.manifest
+            ? {
+                name: "__STATIC_CONTENT_MANIFEST",
+                content: JSON.stringify(assets.manifest),
+                type: "text",
+              }
+            : []
+        ),
+        bindings: {
+          ...bindings,
+          kv_namespaces: (bindings.kv_namespaces || []).concat(
+            assets.namespace
+              ? { binding: "__STATIC_CONTENT", id: assets.namespace }
+              : []
+          ),
+          text_blobs: {
+            ...bindings.text_blobs,
+            ...(assets.manifest &&
+              format === "service-worker" && {
+                __STATIC_CONTENT_MANIFEST: "__STATIC_CONTENT_MANIFEST",
+              }),
+          },
+        },
+        migrations: undefined, // no migrations in dev
+        compatibility_date: compatibilityDate,
+        compatibility_flags: compatibilityFlags,
+        usage_model: usageModel,
+      };
+      setToken(
+        await createWorkerPreview(
+          init,
+          {
+            accountId,
+            apiToken,
+          },
+          { env: props.env, legacyEnv: props.legacyEnv, zone: props.zone }
+        )
+      );
+    }
+    start().catch((err) => {
+      // we want to log the error, but not end the process
+      // since it could recover after the developer fixes whatever's wrong
+      console.error("remote worker:", err);
+    });
+  }, [
+    name,
+    bundle,
+    format,
+    accountId,
+    apiToken,
+    port,
+    assetPaths,
+    compatibilityDate,
+    compatibilityFlags,
+    usageModel,
+    bindings,
+    modules,
+    props.env,
+    props.legacyEnv,
+    props.zone,
+  ]);
+  return token;
+}

package/src/dev/use-esbuild.ts

@@ -0,0 +1,100 @@
+import assert from "node:assert";
+import { useState, useEffect } from "react";
+import { bundleWorker } from "../bundle";
+import type { Config } from "../config";
+import type { Entry } from "../entry";
+import type { CfModule } from "../worker";
+import type { WatchMode } from "esbuild";
+
+export type EsbuildBundle = {
+  id: number;
+  path: string;
+  entry: Entry;
+  type: "esm" | "commonjs";
+  modules: CfModule[];
+  serveAssetsFromWorker: boolean;
+};
+
+export function useEsbuild({
+  entry,
+  destination,
+  staticRoot,
+  jsxFactory,
+  jsxFragment,
+  rules,
+  serveAssetsFromWorker,
+}: {
+  entry: Entry;
+  destination: string | undefined;
+  staticRoot: undefined | string;
+  jsxFactory: string | undefined;
+  jsxFragment: string | undefined;
+  rules: Config["rules"];
+  serveAssetsFromWorker: boolean;
+}): EsbuildBundle | undefined {
+  const [bundle, setBundle] = useState<EsbuildBundle>();
+  useEffect(() => {
+    let stopWatching: (() => void) | undefined = undefined;
+
+    const watchMode: WatchMode = {
+      async onRebuild(error) {
+        if (error) console.error("watch build failed:", error);
+        else {
+          // nothing really changes here, so let's increment the id
+          // to change the return object's identity
+          setBundle((previousBundle) => {
+            assert(
+              previousBundle,
+              "Rebuild triggered with no previous build available"
+            );
+            return { ...previousBundle, id: previousBundle.id + 1 };
+          });
+        }
+      },
+    };
+
+    async function build() {
+      if (!destination) return;
+
+      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,
+          jsxFactory,
+          jsxFragment,
+          rules,
+          watch: watchMode,
+        });
+
+      // Capture the `stop()` method to use as the `useEffect()` destructor.
+      stopWatching = stop;
+
+      setBundle({
+        id: 0,
+        entry,
+        path: resolvedEntryPointPath,
+        type: bundleType,
+        modules,
+        serveAssetsFromWorker,
+      });
+    }
+
+    build().catch(() => {
+      // esbuild already logs errors to stderr and we don't want to end the process
+      // on build errors anyway so this is a no-op error handler
+    });
+
+    return () => {
+      stopWatching?.();
+    };
+  }, [
+    entry,
+    destination,
+    staticRoot,
+    jsxFactory,
+    jsxFragment,
+    serveAssetsFromWorker,
+    rules,
+  ]);
+  return bundle;
+}

package/src/dialogs.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { useState } from "react";
 import { Box, Text, useInput, render } from "ink";
 import TextInput from "ink-text-input";
+import * as React from "react";
+import { useState } from "react";
 type ConfirmProps = {
   text: string;
   onConfirm: (answer: boolean) => void;
@@ -67,9 +67,9 @@ export async function prompt(text: string, type: "text" | "password" = "text") {
       <Prompt
         text={text}
         type={type}
-        onSubmit={(text) => {
+        onSubmit={(inputText) => {
           unmount();
-          resolve(text);
+          resolve(inputText);
         }}
       />
     );

package/src/entry.ts

@@ -0,0 +1,237 @@
+import assert from "node:assert";
+import { existsSync } from "node:fs";
+import path from "node:path";
+import * as esbuild from "esbuild";
+import { execaCommand } from "execa";
+import type { Config } from "./config";
+import type { CfScriptFormat } from "./worker";
+import type { Metafile } from "esbuild";
+
+/**
+ * An entry point for the Worker.
+ *
+ * It consists not just of a `file`, but also of a `directory` that is used to resolve relative paths.
+ */
+export type Entry = { file: string; directory: string; format: CfScriptFormat };
+
+/**
+ * Compute the entry-point for the Worker.
+ */
+export async function getEntry(
+  args: { script?: string; format?: CfScriptFormat | undefined },
+  config: Config,
+  command: "dev" | "publish"
+): Promise<Entry> {
+  let file: string;
+  let directory = process.cwd();
+  if (args.script) {
+    // If the script name comes from the command line it is relative to the current working directory.
+    file = path.resolve(args.script);
+  } else if (config.main === undefined) {
+    throw new Error(
+      `Missing entry-point: The entry-point should be specified via the command line (e.g. \`wrangler ${command} path/to/script\`) or the \`main\` config field.`
+    );
+  } else {
+    directory = path.resolve(path.dirname(config.configPath ?? "."));
+    file = path.resolve(directory, config.main);
+  }
+
+  await runCustomBuild(file, config.build);
+
+  if (fileExists(file) === false) {
+    throw new Error(
+      `Could not resolve "${path.relative(process.cwd(), file)}".`
+    );
+  }
+  const format = await guessWorkerFormat(
+    file,
+    directory,
+    args.format ?? config.build?.upload?.format
+  );
+
+  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 };
+}
+
+export async function runCustomBuild(
+  expectedEntry: string,
+  build: Config["build"]
+) {
+  if (build?.command) {
+    // TODO: add a deprecation message here?
+    console.log("running:", build.command);
+    await execaCommand(build.command, {
+      shell: true,
+      stdout: "inherit",
+      stderr: "inherit",
+      timeout: 1000 * 30,
+      ...(build.cwd && { cwd: build.cwd }),
+    });
+
+    if (fileExists(expectedEntry) === false) {
+      throw new Error(
+        `Could not resolve "${path.relative(
+          process.cwd(),
+          expectedEntry
+        )}" after running custom build: ${build.command}`
+      );
+    }
+  }
+}
+
+/**
+ * A function to "guess" the type of worker.
+ * We do this by running a lightweight build of the actual script,
+ * and looking at the metafile generated by esbuild. If it has a default
+ * export (or really, any exports), that means it's a "modules" worker.
+ * Else, it's a "service-worker" worker. This seems hacky, but works remarkably
+ * well in practice.
+ */
+export default async function guessWorkerFormat(
+  entryFile: string,
+  entryWorkingDirectory: string,
+  hint: CfScriptFormat | undefined
+): Promise<CfScriptFormat> {
+  const result = await esbuild.build({
+    entryPoints: [entryFile],
+    absWorkingDir: entryWorkingDirectory,
+    metafile: true,
+    bundle: false,
+    format: "esm",
+    write: false,
+    loader: {
+      ".js": "jsx",
+      ".mjs": "jsx",
+      ".cjs": "jsx",
+    },
+  });
+  // result.metafile is defined because of the `metafile: true` option above.
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const metafile = result.metafile!;
+  const entryPoints = Object.entries(metafile.outputs).filter(
+    ([_path, output]) => output.entryPoint !== undefined
+  );
+  assert(
+    entryPoints.length > 0,
+    `Cannot find entry-point "${entryFile}" in generated bundle.` +
+      listEntryPoints(entryPoints)
+  );
+  assert(
+    entryPoints.length < 2,
+    "More than one entry-point found for generated bundle." +
+      listEntryPoints(entryPoints)
+  );
+  const guessedWorkerFormat =
+    entryPoints[0][1].exports.length > 0 ? "modules" : "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."
+        );
+      } else {
+        throw new Error(
+          "You configured this worker to be 'modules', but the file you are trying to build doesn't export a handler. Please pass `--format service-worker`, or simply remove the configuration."
+        );
+      }
+    }
+  }
+  return guessedWorkerFormat;
+}
+
+function listEntryPoints(
+  outputs: [string, ValueOf<Metafile["outputs"]>][]
+): string {
+  return outputs.map(([_input, output]) => output.entryPoint).join("\n");
+}
+
+type ValueOf<T> = T[keyof T];
+
+/**
+ * Returns true if the given `filePath` exists as-is,
+ * or if some version of it (by appending a common extension) exists.
+ */
+export function fileExists(filePath: string): boolean {
+  if (path.extname(filePath) !== "") {
+    return existsSync(filePath);
+  }
+  const base = path.join(path.dirname(filePath), path.basename(filePath));
+  for (const ext of [".ts", ".tsx", ".js", ".jsx"]) {
+    if (existsSync(base + ext)) {
+      return true;
+    }
+  }
+  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");
+}

package/src/environment-variables.ts

@@ -0,0 +1,33 @@
+/**
+ * Create a function used to access an environment variable.
+ *
+ * This is not memoized to allow us to change the value at runtime, such as in testing.
+ * A warning is shown if the client is using a deprecated version - but only once.
+ */
+export function getEnvironmentVariableFactory({
+  variableName,
+  deprecatedName,
+  defaultValue,
+}: {
+  variableName: string;
+  deprecatedName?: string;
+  defaultValue?: string;
+}) {
+  let hasWarned = false;
+  return () => {
+    if (process.env[variableName]) {
+      return process.env[variableName];
+    } else if (deprecatedName && process.env[deprecatedName]) {
+      if (!hasWarned) {
+        // Only show the warning once.
+        hasWarned = true;
+        console.warn(
+          `Using "${deprecatedName}" environment variable. This is deprecated. Please use "${variableName}", instead.`
+        );
+      }
+      return process.env[deprecatedName];
+    } else {
+      return defaultValue;
+    }
+  };
+}