wrangler 0.0.0-e1c615f → 0.0.0-e6733a3

package/src/dev.tsx

@@ -8,7 +8,7 @@ import { Box, Text, useApp, useInput } from "ink";
 import React, { useState, useEffect, useRef } from "react";
 import path from "path";
 import open from "open";
-import { DtInspector } from "./api/inspect";
+import useInspector from "./inspect";
 import type { CfModule } from "./api/worker";
 import { createWorker } from "./api/worker";
 import type { CfWorkerInit } from "./api/worker";
@@ -16,34 +16,33 @@ import { spawn } from "child_process";
 import onExit from "signal-exit";
 import { syncAssets } from "./sites";
 import clipboardy from "clipboardy";
-import http from "node:http";
 import commandExists from "command-exists";
 import assert from "assert";
 import { getAPIToken } from "./user";
 import fetch from "node-fetch";
 import makeModuleCollector from "./module-collection";
 import { withErrorBoundary, useErrorHandler } from "react-error-boundary";
-import { createHttpProxy } from "./proxy";
+import { usePreviewServer } from "./proxy";
 import { execa } from "execa";
 import { watch } from "chokidar";
 
-type CfScriptFormat = void | "modules" | "service-worker";
+type CfScriptFormat = undefined | "modules" | "service-worker";
 
 export type DevProps = {
   name?: string;
   entry: string;
   port?: number;
   format: CfScriptFormat;
-  accountId: void | string;
+  accountId: undefined | string;
   initialMode: "local" | "remote";
-  jsxFactory: void | string;
-  jsxFragment: void | string;
+  jsxFactory: undefined | string;
+  jsxFragment: undefined | string;
   bindings: CfWorkerInit["bindings"];
-  public: void | string;
-  site: void | string;
-  compatibilityDate: void | string;
-  compatibilityFlags: void | string[];
-  usageModel: void | "bundled" | "unbound";
+  public: undefined | string;
+  site: undefined | string;
+  compatibilityDate: undefined | string;
+  compatibilityFlags: undefined | string[];
+  usageModel: undefined | "bundled" | "unbound";
   buildCommand: {
     command?: undefined | string;
     cwd?: undefined | string;
@@ -79,9 +78,6 @@ function Dev(props: DevProps): JSX.Element {
     );
   }
 
-  // @ts-expect-error whack
-  useDevtoolsRefresh(bundle?.id ?? 0);
-
   const toggles = useHotkeys(
     {
       local: props.initialMode === "local",
@@ -133,53 +129,23 @@ function Dev(props: DevProps): JSX.Element {
   );
 }
 
-function useDevtoolsRefresh(bundleId: number) {
-  // TODO: this is a hack while we figure out
-  // a better cleaner solution to get devtools to reconnect
-  // without having to do a full refresh
-  const ref = useRef();
-  // @ts-expect-error whack
-  ref.current = bundleId;
-
-  useEffect(() => {
-    const server = http.createServer((req, res) => {
-      res.setHeader("Access-Control-Allow-Origin", "*");
-      res.setHeader("Access-Control-Request-Method", "*");
-      res.setHeader("Access-Control-Allow-Methods", "OPTIONS, GET");
-      res.setHeader("Access-Control-Allow-Headers", "*");
-      if (req.method === "OPTIONS") {
-        res.writeHead(200);
-        res.end();
-        return;
-      }
-      res.writeHead(200, { "Content-Type": "application/json" });
-      res.end(JSON.stringify({ value: ref.current }));
-    });
-
-    server.listen(3142);
-    return () => {
-      server.close();
-    };
-  }, []);
-}
-
 function Remote(props: {
-  name: void | string;
-  bundle: EsbuildBundle | void;
+  name: undefined | string;
+  bundle: EsbuildBundle | undefined;
   format: CfScriptFormat;
-  public: void | string;
-  site: void | string;
+  public: undefined | string;
+  site: undefined | string;
   port: number;
-  accountId: void | string;
-  apiToken: void | string;
+  accountId: undefined | string;
+  apiToken: undefined | string;
   bindings: CfWorkerInit["bindings"];
-  compatibilityDate: string | void;
-  compatibilityFlags: void | string[];
-  usageModel: void | "bundled" | "unbound";
+  compatibilityDate: string | undefined;
+  compatibilityFlags: undefined | string[];
+  usageModel: undefined | "bundled" | "unbound";
 }) {
   assert(props.accountId, "accountId is required");
   assert(props.apiToken, "apiToken is required");
-  const token = useWorker({
+  const previewToken = useWorker({
     name: props.name,
     bundle: props.bundle,
     format: props.format,
@@ -194,18 +160,26 @@ function Remote(props: {
     usageModel: props.usageModel,
   });
 
-  useProxy({ token, publicRoot: props.public, port: props.port });
+  usePreviewServer({
+    previewToken,
+    publicRoot: props.public,
+    port: props.port,
+  });
 
-  useInspector(token ? token.inspectorUrl.href : undefined);
+  useInspector({
+    inspectorUrl: previewToken ? previewToken.inspectorUrl.href : undefined,
+    port: 9229,
+    logToTerminal: true,
+  });
   return null;
 }
 function Local(props: {
-  name: void | string;
-  bundle: EsbuildBundle | void;
+  name: undefined | string;
+  bundle: EsbuildBundle | undefined;
   format: CfScriptFormat;
   bindings: CfWorkerInit["bindings"];
-  public: void | string;
-  site: void | string;
+  public: undefined | string;
+  site: undefined | string;
   port: number;
 }) {
   const { inspectorUrl } = useLocalWorker({
@@ -215,13 +189,13 @@ function Local(props: {
     bindings: props.bindings,
     port: props.port,
   });
-  useInspector(inspectorUrl);
+  useInspector({ inspectorUrl, port: 9229, logToTerminal: false });
   return null;
 }
 
 function useLocalWorker(props: {
-  name: void | string;
-  bundle: EsbuildBundle | void;
+  name: undefined | string;
+  bundle: EsbuildBundle | undefined;
   format: CfScriptFormat;
   bindings: CfWorkerInit["bindings"];
   port: number;
@@ -230,7 +204,7 @@ function useLocalWorker(props: {
   const { bundle, format, bindings, port } = props;
   const local = useRef<ReturnType<typeof spawn>>();
   const removeSignalExitListener = useRef<() => void>();
-  const [inspectorUrl, setInspectorUrl] = useState<string | void>();
+  const [inspectorUrl, setInspectorUrl] = useState<string | undefined>();
   useEffect(() => {
     async function startLocalWorker() {
       if (!bundle) return;
@@ -346,7 +320,7 @@ function useLocalWorker(props: {
   return { inspectorUrl };
 }
 
-function useTmpDir(): string | void {
+function useTmpDir(): string | undefined {
   const [directory, setDirectory] = useState<DirectoryResult>();
   const handleError = useErrorHandler();
   useEffect(() => {
@@ -384,8 +358,8 @@ function useCustomBuild(
     cwd?: undefined | string;
     watch_dir?: undefined | string;
   }
-): void | string {
-  const [entry, setEntry] = useState<string | void>(
+): undefined | string {
+  const [entry, setEntry] = useState<string | undefined>(
     // if there's no build command, just return the expected entry
     props.command ? null : expectedEntry
   );
@@ -456,12 +430,12 @@ type EsbuildBundle = {
 };
 
 function useEsbuild(props: {
-  entry: void | string;
-  destination: string | void;
-  staticRoot: void | string;
-  jsxFactory: string | void;
-  jsxFragment: string | void;
-}): EsbuildBundle | void {
+  entry: undefined | string;
+  destination: string | undefined;
+  staticRoot: undefined | string;
+  jsxFactory: string | undefined;
+  jsxFragment: string | undefined;
+}): EsbuildBundle | undefined {
   const { entry, destination, staticRoot, jsxFactory, jsxFragment } = props;
   const [bundle, setBundle] = useState<EsbuildBundle>();
   useEffect(() => {
@@ -501,7 +475,8 @@ function useEsbuild(props: {
       });
 
       const chunks = Object.entries(result.metafile.outputs).find(
-        ([_path, { entryPoint }]) => entryPoint === entry
+        ([_path, { entryPoint }]) =>
+          entryPoint === Object.keys(result.metafile.inputs)[0]
       ); // assumedly only one entry point
 
       setBundle({
@@ -527,19 +502,19 @@ function useEsbuild(props: {
 }
 
 function useWorker(props: {
-  name: void | string;
-  bundle: EsbuildBundle | void;
+  name: undefined | string;
+  bundle: EsbuildBundle | undefined;
   format: CfScriptFormat;
   modules: CfModule[];
   accountId: string;
   apiToken: string;
   bindings: CfWorkerInit["bindings"];
-  sitesFolder: void | string;
+  sitesFolder: undefined | string;
   port: number;
-  compatibilityDate: string | void;
-  compatibilityFlags: string[] | void;
-  usageModel: void | "bundled" | "unbound";
-}): CfPreviewToken | void {
+  compatibilityDate: string | undefined;
+  compatibilityFlags: string[] | undefined;
+  usageModel: undefined | "bundled" | "unbound";
+}): CfPreviewToken | undefined {
   const {
     name,
     bundle,
@@ -554,7 +529,7 @@ function useWorker(props: {
     usageModel,
     port,
   } = props;
-  const [token, setToken] = useState<CfPreviewToken>();
+  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
@@ -563,6 +538,8 @@ function useWorker(props: {
 
   useEffect(() => {
     async function start() {
+      setToken(undefined); // reset token in case we're re-running
+
       if (!bundle) return;
       if (format === "modules" && bundle.type === "commonjs") {
         console.error("⎔ Cannot use modules with a commonjs bundle.");
@@ -576,7 +553,6 @@ function useWorker(props: {
       }
 
       if (!startedRef.current) {
-        console.log("⎔ Starting server...");
         startedRef.current = true;
       } else {
         console.log("⎔ Detected changes, restarting server...");
@@ -654,85 +630,6 @@ function useWorker(props: {
   return token;
 }
 
-function useProxy({
-  token,
-  publicRoot,
-  port,
-}: {
-  token: CfPreviewToken | void;
-  publicRoot: void | string;
-  port: number;
-}) {
-  useEffect(() => {
-    if (!token) return;
-    // TODO(soon): since headers are added in callbacks, the server
-    // does not need to restart when changes are made.
-    const host = token.host;
-    const proxy = createHttpProxy({
-      host,
-      assetPath: typeof publicRoot === "string" ? publicRoot : null,
-      onRequest: (headers) => {
-        headers["cf-workers-preview-token"] = token.value;
-      },
-      onResponse: (headers) => {
-        for (const [name, value] of Object.entries(headers)) {
-          // Rewrite the remote host to the local host.
-          if (typeof value === "string" && value.includes(host)) {
-            headers[name] = value
-              .replaceAll(`https://${host}`, `http://localhost:${port}`)
-              .replaceAll(host, `localhost:${port}`);
-          }
-        }
-      },
-    });
-
-    console.log(`⬣ Listening at http://localhost:${port}`);
-
-    const server = proxy.listen(port);
-
-    // TODO(soon): refactor logging format into its own function
-    proxy.on("request", function (req, res) {
-      // log all requests
-      console.log(
-        new Date().toLocaleTimeString(),
-        req.method,
-        req.url,
-        res.statusCode
-      );
-    });
-    proxy.on("upgrade", (req) => {
-      console.log(
-        new Date().toLocaleTimeString(),
-        req.method,
-        req.url,
-        101,
-        "(WebSocket)"
-      );
-    });
-    proxy.on("error", (err) => {
-      console.error(new Date().toLocaleTimeString(), err);
-    });
-
-    return () => {
-      proxy.close();
-      server.close();
-    };
-  }, [token, publicRoot, port]);
-}
-
-function useInspector(inspectorUrl: string | void) {
-  useEffect(() => {
-    if (!inspectorUrl) return;
-
-    const inspector = new DtInspector(inspectorUrl);
-    const abortController = inspector.proxyTo(9229);
-    return () => {
-      inspector.close();
-      abortController.abort();
-    };
-  }, [inspectorUrl]);
-}
-
 function sleep(period: number) {
   return new Promise((resolve) => setTimeout(resolve, period));
 }
@@ -740,7 +637,7 @@ const SLEEP_DURATION = 2000;
 // really need a first class api for this
 const hostNameRegex = /userHostname="(.*)"/g;
 async function findTunnelHostname() {
-  let hostName: string;
+  let hostName: string | undefined;
   while (!hostName) {
     try {
       const resp = await fetch("http://localhost:8789/metrics");

package/src/index.tsx

@@ -435,6 +435,20 @@ export async function main(argv: string[]): Promise<void> {
           type: "string",
           // TODO: get choices for the toml file?
         })
+        .option("compatibility-date", {
+          describe: "Date to use for compatibility checks",
+          type: "string",
+        })
+        .option("compatibility-flags", {
+          describe: "Flags to use for compatibility checks",
+          type: "array",
+          alias: "compatibility-flag",
+        })
+        .option("latest", {
+          describe: "Use the latest version of the worker runtime",
+          type: "boolean",
+          default: true,
+        })
         .option("ip", {
           describe: "IP address to listen on",
           type: "string",
@@ -520,7 +534,7 @@ export async function main(argv: string[]): Promise<void> {
       if ("durable_objects" in envRootObj) {
         if (!(args.name || config.name)) {
           console.warn(
-            'A worker with durable objects need to be named, or it may not work as expected. Add a "name" into wrangler.toml, or pass it in the command line with --name.'
+            'A worker with durable objects needs to be named, or it may not work as expected. Add a "name" into wrangler.toml, or pass it in the command line with --name.'
           );
         }
         // TODO: if not already published, publish a draft worker
@@ -539,8 +553,15 @@ export async function main(argv: string[]): Promise<void> {
           site={args.site || config.site?.bucket}
           port={args.port || config.dev?.port}
           public={args["experimental-public"]}
-          compatibilityDate={config.compatibility_date}
-          compatibilityFlags={config.compatibility_flags}
+          compatibilityDate={
+            args["compatibility-date"] ||
+            config.compatibility_date ||
+            new Date().toISOString().substring(0, 10)
+          }
+          compatibilityFlags={
+            (args["compatibility-flags"] as string[]) ||
+            config.compatibility_flags
+          }
           usageModel={config.usage_model}
           bindings={{
             kv_namespaces: envRootObj.kv_namespaces?.map(
@@ -592,6 +613,20 @@ export async function main(argv: string[]): Promise<void> {
           describe: "name to use when uploading",
           type: "string",
         })
+        .option("compatibility-date", {
+          describe: "Date to use for compatibility checks",
+          type: "string",
+        })
+        .option("compatibility-flags", {
+          describe: "Flags to use for compatibility checks",
+          type: "array",
+          alias: "compatibility-flag",
+        })
+        .option("latest", {
+          describe: "Use the latest version of the worker runtime",
+          type: "boolean",
+          default: false,
+        })
         .option("experimental-public", {
           describe: "Static assets to be served",
           type: "string",
@@ -645,6 +680,12 @@ export async function main(argv: string[]): Promise<void> {
 
       const config = args.config as Config;
 
+      if (args.latest) {
+        console.warn(
+          "⚠️  Using the latest version of the Workers runtime. To silence this warning, please choose a specific version of the runtime with --compatibility-date, or add a compatibility_date to your wrangler.toml.\n"
+        );
+      }
+
       // -- snip, extract --
       if (!args.local) {
         const loggedIn = await loginOrRefreshIfRequired();
@@ -668,6 +709,10 @@ export async function main(argv: string[]): Promise<void> {
         name: args.name,
         script: args.script,
         env: args.env,
+        compatibilityDate: args.latest
+          ? new Date().toISOString().substring(0, 10)
+          : args["compatibility-date"],
+        compatibilityFlags: args["compatibility-flags"] as string[],
         triggers: args.triggers,
         jsxFactory: args["jsx-factory"],
         jsxFragment: args["jsx-fragment"],