wrangler 0.0.0-e61fba8 → 0.0.0-e62b097bb

package/src/dev/dev.tsx

@@ -1,395 +0,0 @@
-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";
-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";
-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 { Local } from "./local";
-import { Remote } from "./remote";
-import { useEsbuild } from "./use-esbuild";
-import type { Config } from "../config";
-import type { Entry } from "../entry";
-import type { AssetPaths } from "../sites";
-import type { CfWorkerInit } from "../worker";
-
-export type DevProps = {
-  name?: string;
-  entry: Entry;
-  port: number;
-  ip: string;
-  inspectorPort: number;
-  rules: Config["rules"];
-  accountId: string | undefined;
-  initialMode: "local" | "remote";
-  jsxFactory: string | undefined;
-  jsxFragment: string | undefined;
-  tsconfig: string | undefined;
-  upstreamProtocol: "https" | "http";
-  localProtocol: "https" | "http";
-  enableLocalPersistence: boolean;
-  bindings: CfWorkerInit["bindings"];
-  crons: Config["triggers"]["crons"];
-  public: string | undefined;
-  assetPaths: AssetPaths | undefined;
-  compatibilityDate: string;
-  compatibilityFlags: string[] | undefined;
-  usageModel: "bundled" | "unbound" | undefined;
-  minify: boolean | undefined;
-  nodeCompat: boolean | undefined;
-  build: Config["build"];
-  env: string | undefined;
-  legacyEnv: boolean;
-  zone: string | undefined;
-  host: string | undefined;
-};
-
-export function DevImplementation(props: DevProps): JSX.Element {
-  if (props.public && props.entry.format === "service-worker") {
-    throw new Error(
-      "You cannot use the service-worker format with a `public` directory."
-    );
-  }
-
-  if (props.bindings.wasm_modules && props.entry.format === "modules") {
-    throw new Error(
-      "You cannot configure [wasm_modules] with an ES module worker. Instead, import the .wasm module directly in your code"
-    );
-  }
-
-  if (props.bindings.text_blobs && props.entry.format === "modules") {
-    throw new Error(
-      "You cannot configure [text_blobs] with an ES module worker. Instead, import the file directly in your code, and optionally configure `[rules]` in your wrangler.toml"
-    );
-  }
-
-  if (props.bindings.data_blobs && props.entry.format === "modules") {
-    throw new Error(
-      "You cannot configure [data_blobs] with an ES module worker. Instead, import the file directly in your code, and optionally configure `[rules]` in your wrangler.toml"
-    );
-  }
-
-  // only load the UI if we're running in a supported environment
-  const { isRawModeSupported } = useStdin();
-  return isRawModeSupported ? (
-    <InteractiveDevSession {...props} />
-  ) : (
-    <DevSession {...props} local={props.initialMode === "local"} />
-  );
-}
-
-function InteractiveDevSession(props: DevProps) {
-  const toggles = useHotkeys(
-    {
-      local: props.initialMode === "local",
-      tunnel: false,
-    },
-    props.port,
-    props.ip,
-    props.inspectorPort,
-    props.localProtocol
-  );
-
-  useTunnel(toggles.tunnel);
-
-  return (
-    <>
-      <DevSession {...props} local={toggles.local} />
-      <Box borderStyle="round" paddingLeft={1} paddingRight={1}>
-        <Text bold={true}>[b]</Text>
-        <Text> open a browser, </Text>
-        <Text bold={true}>[d]</Text>
-        <Text> open Devtools, </Text>
-        <Text bold={true}>[l]</Text>
-        <Text> {toggles.local ? "turn off" : "turn on"} local mode, </Text>
-        <Text bold={true}>[c]</Text>
-        <Text> clear console, </Text>
-        <Text bold={true}>[x]</Text>
-        <Text> to exit</Text>
-      </Box>
-    </>
-  );
-}
-
-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,
-    staticRoot: props.public,
-    jsxFactory: props.jsxFactory,
-    rules: props.rules,
-    jsxFragment: props.jsxFragment,
-    // In dev for remote mode, we serve --experimental-assets from the local proxy before we send the request to the worker.
-    serveAssetsFromWorker: !!props.public && !!props.local,
-    tsconfig: props.tsconfig,
-    minify: props.minify,
-    nodeCompat: props.nodeCompat,
-  });
-
-  return props.local ? (
-    <Local
-      name={props.name}
-      bundle={bundle}
-      format={props.entry.format}
-      compatibilityDate={props.compatibilityDate}
-      localProtocol={props.localProtocol}
-      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}
-      crons={props.crons}
-    />
-  ) : (
-    <Remote
-      name={props.name}
-      bundle={bundle}
-      format={props.entry.format}
-      accountId={props.accountId}
-      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}
-      host={props.host}
-    />
-  );
-}
-
-export interface DirectorySyncResult {
-  name: string;
-  removeCallback: () => void;
-}
-
-function useTmpDir(): string | undefined {
-  const [directory, setDirectory] = useState<DirectorySyncResult>();
-  const handleError = useErrorHandler();
-  useEffect(() => {
-    let dir: DirectorySyncResult | undefined;
-    try {
-      dir = tmp.dirSync({ unsafeCleanup: true });
-      setDirectory(dir);
-      return;
-    } catch (err) {
-      logger.error(
-        "Failed to create temporary directory to store built files."
-      );
-      handleError(err);
-    }
-    return () => {
-      dir?.removeCallback();
-    };
-  }, [handleError]);
-  return directory?.name;
-}
-
-function useCustomBuild(expectedEntry: Entry, build: Config["build"]): void {
-  useEffect(() => {
-    if (!build.command) return;
-    let watcher: ReturnType<typeof watch> | undefined;
-    if (build.watch_dir) {
-      watcher = watch(build.watch_dir, {
-        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, relativeFile, build).catch((err) => {
-          logger.error("Custom build failed:", err);
-        });
-      });
-    }
-
-    return () => {
-      watcher?.close();
-    };
-  }, [build, expectedEntry]);
-}
-
-function sleep(period: number) {
-  return new Promise((resolve) => setTimeout(resolve, period));
-}
-const SLEEP_DURATION = 2000;
-// really need a first class api for this
-const hostNameRegex = /userHostname="(.*)"/g;
-async function findTunnelHostname() {
-  let hostName: string | undefined;
-  while (!hostName) {
-    try {
-      const resp = await fetch("http://localhost:8789/metrics");
-      const data = await resp.text();
-      const matches = Array.from(data.matchAll(hostNameRegex));
-      hostName = matches[0][1];
-    } catch (err) {
-      await sleep(SLEEP_DURATION);
-    }
-  }
-  return hostName;
-}
-
-/**
- * Create a tunnel to the remote worker.
- * We've disabled this for now until we figure out a better user experience.
- */
-function useTunnel(toggle: boolean) {
-  const tunnel = useRef<ReturnType<typeof spawn>>();
-  const removeSignalExitListener = useRef<() => void>();
-  // TODO: test if cloudflared is available, if not
-  // point them to a url where they can get docs to install it
-  useEffect(() => {
-    async function startTunnel() {
-      if (toggle) {
-        try {
-          await commandExists("cloudflared");
-        } catch (e) {
-          logger.warn(
-            "To share your worker on the Internet, please install `cloudflared` from https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation"
-          );
-          return;
-        }
-        logger.log("⎔ Starting a tunnel...");
-        tunnel.current = spawn("cloudflared", [
-          "tunnel",
-          "--url",
-          "http://localhost:8787",
-          "--metrics",
-          "localhost:8789",
-        ]);
-
-        tunnel.current.on("close", (code) => {
-          if (code) {
-            logger.log(`Tunnel process exited with code ${code}`);
-          }
-        });
-
-        removeSignalExitListener.current = onExit((_code, _signal) => {
-          logger.log("⎔ Shutting down local tunnel.");
-          tunnel.current?.kill();
-          tunnel.current = undefined;
-        });
-
-        const hostName = await findTunnelHostname();
-        await clipboardy.write(hostName);
-        logger.log(`⬣ Sharing at ${hostName}, copied to clipboard.`);
-      }
-    }
-
-    startTunnel().catch(async (err) => {
-      logger.error("tunnel:", err);
-    });
-
-    return () => {
-      if (tunnel.current) {
-        logger.log("⎔ Shutting down tunnel.");
-        tunnel.current?.kill();
-        tunnel.current = undefined;
-        removeSignalExitListener.current && removeSignalExitListener.current();
-        removeSignalExitListener.current = undefined;
-      }
-    };
-  }, [toggle]);
-}
-
-type useHotkeysInitialState = {
-  local: boolean;
-  tunnel: boolean;
-};
-function useHotkeys(
-  initial: useHotkeysInitialState,
-  port: number,
-  ip: string,
-  inspectorPort: number,
-  localProtocol: "http" | "https"
-) {
-  // UGH, we should put port in context instead
-  const [toggles, setToggles] = useState(initial);
-  const { exit } = useApp();
-  useInput(
-    async (
-      input,
-      // eslint-disable-next-line unused-imports/no-unused-vars
-      key
-    ) => {
-      switch (input.toLowerCase()) {
-        // clear console
-        case "c":
-          console.clear();
-          // This console.log causes Ink to re-render the `DevSession` component.
-          // Couldn't find a better way to tell it to do so...
-          console.log();
-          break;
-        // open browser
-        case "b": {
-          await openInBrowser(`${localProtocol}://${ip}:${port}`);
-          break;
-        }
-        // toggle inspector
-        case "d": {
-          await openInspector(inspectorPort);
-          break;
-        }
-        // toggle local
-        case "l":
-          setToggles((previousToggles) => ({
-            ...previousToggles,
-            local: !previousToggles.local,
-          }));
-          break;
-        // shut down
-        case "q":
-        case "x":
-          exit();
-          break;
-        default:
-          // nothing?
-          break;
-      }
-    }
-  );
-  return toggles;
-}
-
-function ErrorFallback(props: { error: Error }) {
-  const { exit } = useApp();
-  useEffect(() => exit(props.error));
-  return (
-    <>
-      <Text>Something went wrong:</Text>
-      <Text>{props.error.stack}</Text>
-    </>
-  );
-}
-
-export default withErrorBoundary(DevImplementation, {
-  FallbackComponent: ErrorFallback,
-});

package/src/dev/local.tsx

@@ -1,321 +0,0 @@
-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;
-  public: string | undefined;
-  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,
-  public: publicDirectory,
-  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,
-    publicDirectory,
-    rules,
-    bindings.wasm_modules,
-    bindings.text_blobs,
-    bindings.data_blobs,
-    crons,
-  ]);
-  return { inspectorUrl };
-}