wrangler 0.0.0-e61907d → 0.0.0-e95bea2

package/src/dev/remote.tsx

@@ -0,0 +1,201 @@
+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;
+  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,
+  });
+
+  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

@@ -0,0 +1,77 @@
+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;
+};
+function Confirm(props: ConfirmProps) {
+  useInput((input: string) => {
+    if (input === "y") {
+      props.onConfirm(true);
+    } else if (input === "n") {
+      props.onConfirm(false);
+    } else {
+      console.log("Unrecognised input");
+    }
+  });
+  return (
+    <Box>
+      <Text>{props.text} (y/n) </Text>
+    </Box>
+  );
+}
+
+export function confirm(text: string): Promise<boolean> {
+  return new Promise((resolve) => {
+    const { unmount } = render(
+      <Confirm
+        text={text}
+        onConfirm={(answer: boolean) => {
+          unmount();
+          resolve(answer);
+        }}
+      />
+    );
+  });
+}
+
+type PromptProps = {
+  text: string;
+  type?: "text" | "password";
+  onSubmit: (text: string) => void;
+};
+
+function Prompt(props: PromptProps) {
+  const [value, setValue] = useState("");
+
+  return (
+    <Box>
+      <Text>{props.text} </Text>
+      <Box>
+        <TextInput
+          mask={props.type === "password" ? "*" : undefined}
+          value={value}
+          onChange={setValue}
+          onSubmit={props.onSubmit}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+export async function prompt(text: string, type: "text" | "password" = "text") {
+  return new Promise((resolve) => {
+    const { unmount } = render(
+      <Prompt
+        text={text}
+        type={type}
+        onSubmit={(inputText) => {
+          unmount();
+          resolve(inputText);
+        }}
+      />
+    );
+  });
+}

package/src/entry.ts

@@ -0,0 +1,159 @@
+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: string
+): 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
+  );
+  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,
+  });
+  // 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;
+}

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

package/src/https-options.ts

@@ -0,0 +1,122 @@
+import * as fs from "node:fs";
+import { homedir, networkInterfaces } from "node:os";
+import * as path from "node:path";
+import { promisify } from "node:util";
+import type { Attributes, Options } from "selfsigned";
+
+// Most of this file has been borrowed from the implementation in Miniflare.
+// See https://github.com/cloudflare/miniflare/blob/870b401ef5/packages/http-server/src/plugin.ts#L313-L397
+// Thanks @mrbbot.
+const CERT_EXPIRY_DAYS = 30;
+const ONE_DAY_IN_MS = 86400000;
+
+/**
+ * Get the options (i.e. SSL certificates) for running an HTTPS server.
+ *
+ * The certificates are self-signed and generated locally, and cached in the `CERT_ROOT` directory.
+ */
+export async function getHttpsOptions() {
+  const certDirectory = path.join(homedir(), ".wrangler/local-cert");
+  const keyPath = path.join(certDirectory, "key.pem");
+  const certPath = path.join(certDirectory, "cert.pem");
+
+  const regenerate =
+    !fs.existsSync(keyPath) ||
+    !fs.existsSync(certPath) ||
+    hasCertificateExpired(keyPath, certPath);
+
+  if (regenerate) {
+    console.log("Generating new self-signed certificate...");
+    const { key, cert } = await generateCertificate();
+    try {
+      // Write certificate files so we can reuse them later.
+      fs.mkdirSync(certDirectory, { recursive: true });
+      fs.writeFileSync(keyPath, key, "utf8");
+      fs.writeFileSync(certPath, cert, "utf8");
+    } catch (e) {
+      const message = e instanceof Error ? e.message : `${e}`;
+      console.warn(
+        `Unable to cache generated self-signed certificate in ${certDirectory}.\n${message}`
+      );
+    }
+    return { key, cert };
+  } else {
+    return {
+      key: fs.readFileSync(keyPath, "utf8"),
+      cert: fs.readFileSync(certPath, "utf8"),
+    };
+  }
+}
+
+/**
+ * Determine if the certificate defined in `keyPath` and `certPath` files
+ * have expired based on the date when they were last modified.
+ */
+function hasCertificateExpired(keyPath: string, certPath: string): boolean {
+  const keyStat = fs.statSync(keyPath);
+  const certStat = fs.statSync(certPath);
+  const created = Math.max(keyStat.mtimeMs, certStat.mtimeMs);
+  return Date.now() - created > (CERT_EXPIRY_DAYS - 2) * ONE_DAY_IN_MS;
+}
+
+/**
+ * Generate a new self-signed certificate and cache it in `CERT_ROOT` directory.
+ */
+async function generateCertificate() {
+  // `selfsigned` imports `node-forge`, which is a pretty big library.
+  // To reduce startup time, only load this dynamically when needed.
+  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+  const generate: typeof import("selfsigned").generate = promisify(
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require("selfsigned").generate
+  );
+
+  const certAttrs: Attributes = [{ name: "commonName", value: "localhost" }];
+
+  const certOptions: Options = {
+    algorithm: "sha256",
+    days: CERT_EXPIRY_DAYS,
+    keySize: 2048,
+    extensions: [
+      { name: "basicConstraints", cA: true },
+      {
+        name: "keyUsage",
+        keyCertSign: true,
+        digitalSignature: true,
+        nonRepudiation: true,
+        keyEncipherment: true,
+        dataEncipherment: true,
+      },
+      {
+        name: "extKeyUsage",
+        serverAuth: true,
+        clientAuth: true,
+        codeSigning: true,
+        timeStamping: true,
+      },
+      {
+        name: "subjectAltName",
+        altNames: [
+          { type: 2, value: "localhost" },
+          ...getAccessibleHosts().map((ip) => ({ type: 7, ip })),
+        ],
+      },
+    ],
+  };
+
+  const { private: key, cert } = await generate(certAttrs, certOptions);
+  return { key, cert };
+}
+
+/**
+ * Ask the OS for the addresses of locally accessible hosts.
+ */
+function getAccessibleHosts(ipv4 = false): string[] {
+  const hosts: string[] = [];
+  Object.values(networkInterfaces()).forEach((net) =>
+    net?.forEach(({ family, address }) => {
+      if (!ipv4 || family === "IPv4") hosts.push(address);
+    })
+  );
+  return hosts;
+}