wrangler 0.0.0-e2a26a0 → 0.0.0-e322475

package/src/dev/local.tsx

@@ -0,0 +1,321 @@
+import { spawn } from "node:child_process";
+import { realpathSync } from "node:fs";
+import { writeFile } from "node:fs/promises";
+import path from "node:path";
+import { useState, useEffect, useRef } from "react";
+import onExit from "signal-exit";
+import useInspector from "../inspect";
+import { logger } from "../logger";
+import { DEFAULT_MODULE_RULES } from "../module-collection";
+import { waitForPortToBeAvailable } from "../proxy";
+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";
+
+interface LocalProps {
+  name: string | undefined;
+  bundle: EsbuildBundle | undefined;
+  format: CfScriptFormat | undefined;
+  compatibilityDate: string;
+  compatibilityFlags: string[] | undefined;
+  bindings: CfWorkerInit["bindings"];
+  localProtocol: "http" | "https";
+  assetPaths: AssetPaths | undefined;
+  isWorkersSite: boolean;
+  port: number;
+  ip: string;
+  rules: Config["rules"];
+  inspectorPort: number;
+  enableLocalPersistence: boolean;
+  crons: Config["triggers"]["crons"];
+}
+
+export function Local(props: LocalProps) {
+  const { inspectorUrl } = useLocalWorker(props);
+  useInspector({
+    inspectorUrl,
+    port: props.inspectorPort,
+    logToTerminal: false,
+  });
+  return null;
+}
+
+function useLocalWorker({
+  name: workerName,
+  bundle,
+  format,
+  compatibilityDate,
+  compatibilityFlags,
+  bindings,
+  assetPaths,
+  isWorkersSite,
+  port,
+  rules,
+  enableLocalPersistence,
+  ip,
+  localProtocol,
+  crons,
+}: LocalProps) {
+  // TODO: pass vars via command line
+  const local = useRef<ReturnType<typeof spawn>>();
+  const removeSignalExitListener = useRef<() => void>();
+  const [inspectorUrl, setInspectorUrl] = useState<string | undefined>();
+  // if we're using local persistence for data, we should use the cwd
+  // as an explicit path, or else it'll use the temp dir
+  // which disappears when dev ends
+  const localPersistencePath = enableLocalPersistence
+    ? // Maybe we could make the path configurable as well?
+      path.join(process.cwd(), "wrangler-local-state")
+    : // We otherwise choose null, but choose true later
+      // so that it's persisted in the temp dir across a dev session
+      // even when we change source and reload
+      null;
+  useEffect(() => {
+    const abortController = new AbortController();
+    async function startLocalWorker() {
+      if (!bundle || !format) return;
+
+      // port for the worker
+      await waitForPortToBeAvailable(port, {
+        retryPeriod: 200,
+        timeout: 2000,
+        abortSignal: abortController.signal,
+      });
+
+      if (bindings.services && bindings.services.length > 0) {
+        throw new Error(
+          "⎔ Service bindings are not yet supported in local mode."
+        );
+      }
+
+      // In local mode, we want to copy all referenced modules into
+      // the output bundle directory before starting up
+      for (const module of bundle.modules) {
+        await writeFile(
+          path.join(path.dirname(bundle.path), module.name),
+          module.content
+        );
+      }
+
+      const scriptPath = realpathSync(bundle.path);
+
+      // the wasm_modules/text_blobs/data_blobs bindings are
+      // relative to process.cwd(), but the actual worker bundle
+      // is in the temp output directory; so we rewrite the paths to be absolute,
+      // letting miniflare resolve them correctly
+
+      // wasm
+      const wasmBindings: Record<string, string> = {};
+      for (const [name, filePath] of Object.entries(
+        bindings.wasm_modules || {}
+      )) {
+        wasmBindings[name] = path.join(process.cwd(), filePath);
+      }
+
+      // text
+      const textBlobBindings: Record<string, string> = {};
+      for (const [name, filePath] of Object.entries(
+        bindings.text_blobs || {}
+      )) {
+        textBlobBindings[name] = path.join(process.cwd(), filePath);
+      }
+
+      // data
+      const dataBlobBindings: Record<string, string> = {};
+      for (const [name, filePath] of Object.entries(
+        bindings.data_blobs || {}
+      )) {
+        dataBlobBindings[name] = path.join(process.cwd(), filePath);
+      }
+
+      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;
+          } else if (type === "text") {
+            // In service-worker format, text 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, "_");
+            textBlobBindings[identifier] = name;
+          } else if (type === "buffer") {
+            // In service-worker format, data blobs 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, "_");
+            dataBlobBindings[identifier] = name;
+          }
+        }
+      }
+
+      const options: MiniflareOptions = {
+        name: workerName,
+        port,
+        scriptPath,
+        https: localProtocol === "https",
+        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),
+        durableObjects: Object.fromEntries(
+          (bindings.durable_objects?.bindings ?? []).map<[string, string]>(
+            (value) => [value.name, value.class_name]
+          )
+        ),
+        ...(localPersistencePath
+          ? {
+              kvPersist: path.join(localPersistencePath, "kv"),
+              durableObjectsPersist: path.join(localPersistencePath, "do"),
+              cachePersist: path.join(localPersistencePath, "cache"),
+            }
+          : {
+              // We mark these as true, so that they'll
+              // persist in the temp directory.
+              // This means they'll persist across a dev session,
+              // even if we change source and reload,
+              // and be deleted when the dev session ends
+              durableObjectsPersist: true,
+              cachePersist: true,
+              kvPersist: true,
+            }),
+
+        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,
+        textBlobBindings,
+        dataBlobBindings,
+        sourceMap: true,
+        logUnhandledRejections: true,
+        crons,
+      };
+
+      // 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);
+
+      logger.log("⎔ Starting a local server...");
+      local.current = spawn(
+        "node",
+        [
+          "--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(scriptPath),
+        }
+      );
+
+      local.current.on("close", (code) => {
+        if (code) {
+          logger.log(`Miniflare process exited with code ${code}`);
+        }
+      });
+
+      local.current.stdout?.on("data", (data: Buffer) => {
+        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-]+)[\r|\n]/.exec(
+            stderrData
+          );
+        if (matches) {
+          local.current?.stderr?.removeAllListeners("data");
+          setInspectorUrl(matches[1]);
+        }
+      });
+
+      local.current.on("exit", (code) => {
+        if (code) {
+          logger.error(`Miniflare process exited with code ${code}`);
+        }
+      });
+
+      local.current.on("error", (error: Error) => {
+        logger.error(`Miniflare process failed to spawn`);
+        logger.error(error);
+      });
+
+      removeSignalExitListener.current = onExit((_code, _signal) => {
+        logger.log("⎔ Shutting down local server.");
+        local.current?.kill();
+        local.current = undefined;
+      });
+    }
+
+    startLocalWorker().catch((err) => {
+      logger.error("local worker:", err);
+    });
+
+    return () => {
+      abortController.abort();
+      if (local.current) {
+        logger.log("⎔ Shutting down local server.");
+        local.current?.kill();
+        local.current = undefined;
+        removeSignalExitListener.current && removeSignalExitListener.current();
+        removeSignalExitListener.current = undefined;
+      }
+    };
+  }, [
+    bundle,
+    workerName,
+    format,
+    port,
+    localProtocol,
+    ip,
+    bindings.durable_objects?.bindings,
+    bindings.kv_namespaces,
+    bindings.vars,
+    bindings.services,
+    compatibilityDate,
+    compatibilityFlags,
+    localPersistencePath,
+    assetPaths,
+    isWorkersSite,
+    rules,
+    bindings.wasm_modules,
+    bindings.text_blobs,
+    bindings.data_blobs,
+    crons,
+  ]);
+  return { inspectorUrl };
+}

package/src/dev/remote.tsx

@@ -0,0 +1,249 @@
+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";
+import type { EsbuildBundle } from "./use-esbuild";
+
+export function Remote(props: {
+  name: string | undefined;
+  bundle: EsbuildBundle | undefined;
+  format: CfScriptFormat | undefined;
+  isWorkersSite: boolean;
+  assetPaths: AssetPaths | undefined;
+  port: number;
+  ip: string;
+  localProtocol: "https" | "http";
+  inspectorPort: number;
+  accountId: string | undefined;
+  bindings: CfWorkerInit["bindings"];
+  compatibilityDate: string;
+  compatibilityFlags: string[] | undefined;
+  usageModel: "bundled" | "unbound" | undefined;
+  env: string | undefined;
+  legacyEnv: boolean | undefined;
+  zone: string | undefined;
+  host: string | undefined;
+}) {
+  const previewToken = useWorker({
+    name: props.name,
+    bundle: props.bundle,
+    format: props.format,
+    modules: props.bundle ? props.bundle.modules : [],
+    accountId: props.accountId,
+    bindings: props.bindings,
+    assetPaths: props.assetPaths,
+    isWorkersSite: props.isWorkersSite,
+    port: props.port,
+    compatibilityDate: props.compatibilityDate,
+    compatibilityFlags: props.compatibilityFlags,
+    usageModel: props.usageModel,
+    env: props.env,
+    legacyEnv: props.legacyEnv,
+    zone: props.zone,
+    host: props.host,
+  });
+
+  usePreviewServer({
+    previewToken,
+    assetDirectory: props.isWorkersSite
+      ? undefined
+      : props.assetPaths?.assetDirectory,
+    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 | 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: string | undefined;
+  host: string | undefined;
+}): CfPreviewToken | undefined {
+  const {
+    name,
+    bundle,
+    format,
+    modules,
+    accountId,
+    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);
+  // 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();
+    async function start() {
+      setToken(undefined); // reset token in case we're re-running
+
+      if (!bundle || !format) return;
+
+      if (!startedRef.current) {
+        startedRef.current = true;
+      } else {
+        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(
+        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}` : ""),
+        props.isWorkersSite ? assetPaths : undefined,
+        true,
+        false
+      ); // TODO: cancellable?
+
+      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: accountIdRef.current,
+            apiToken: requireApiToken(),
+          },
+          {
+            env: props.env,
+            legacyEnv: props.legacyEnv,
+            zone: props.zone,
+            host: props.host,
+          },
+          abortController.signal
+        )
+      );
+    }
+    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
+      if ((err as { code: string }).code !== "ABORT_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);
+        }
+      }
+    });
+
+    return () => {
+      abortController.abort();
+    };
+  }, [
+    name,
+    bundle,
+    format,
+    accountId,
+    port,
+    assetPaths,
+    props.isWorkersSite,
+    compatibilityDate,
+    compatibilityFlags,
+    usageModel,
+    bindings,
+    modules,
+    props.env,
+    props.legacyEnv,
+    props.zone,
+    props.host,
+  ]);
+  return token;
+}

package/src/dev/use-esbuild.ts

@@ -0,0 +1,112 @@
+import assert from "node:assert";
+import { useApp } from "ink";
+import { useState, useEffect } from "react";
+import { bundleWorker } from "../bundle";
+import { logger } from "../logger";
+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[];
+};
+
+export function useEsbuild({
+  entry,
+  destination,
+  jsxFactory,
+  jsxFragment,
+  rules,
+  serveAssetsFromWorker,
+  tsconfig,
+  minify,
+  nodeCompat,
+}: {
+  entry: Entry;
+  destination: string | undefined;
+  jsxFactory: string | undefined;
+  jsxFragment: string | undefined;
+  rules: Config["rules"];
+  serveAssetsFromWorker: boolean;
+  tsconfig: string | undefined;
+  minify: boolean | undefined;
+  nodeCompat: boolean | undefined;
+}): EsbuildBundle | undefined {
+  const [bundle, setBundle] = useState<EsbuildBundle>();
+  const { exit } = useApp();
+  useEffect(() => {
+    let stopWatching: (() => void) | undefined = undefined;
+
+    const watchMode: WatchMode = {
+      async onRebuild(error) {
+        if (error) logger.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, {
+          serveAssetsFromWorker,
+          jsxFactory,
+          jsxFragment,
+          rules,
+          watch: watchMode,
+          tsconfig,
+          minify,
+          nodeCompat,
+        });
+
+      // Capture the `stop()` method to use as the `useEffect()` destructor.
+      stopWatching = stop;
+
+      setBundle({
+        id: 0,
+        entry,
+        path: resolvedEntryPointPath,
+        type: bundleType,
+        modules,
+      });
+    }
+
+    build().catch((err) => {
+      // If esbuild fails on first run, we want to quit the process
+      // since we can't recover from here
+      // related: https://github.com/evanw/esbuild/issues/1037
+      exit(err);
+    });
+
+    return () => {
+      stopWatching?.();
+    };
+  }, [
+    entry,
+    destination,
+    jsxFactory,
+    jsxFragment,
+    serveAssetsFromWorker,
+    rules,
+    tsconfig,
+    exit,
+    minify,
+    nodeCompat,
+  ]);
+  return bundle;
+}