wrangler 0.0.0-fb0eae7 → 0.0.0-fb43821

package/src/dev.tsx

@@ -23,6 +23,7 @@ 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";
 
 type CfScriptFormat = void | "modules" | "service-worker";
 
@@ -43,7 +44,7 @@ type Props = {
   usageModel: void | "bundled" | "unbound";
 };
 
-export function Dev(props: Props): JSX.Element {
+function Dev(props: Props): JSX.Element {
   if (props.public && props.format === "service-worker") {
     throw new Error(
       "You cannot use the service worker format with a `public` directory."
@@ -233,6 +234,7 @@ function useLocalWorker(props: {
       }
 
       console.log("⎔ Starting a local server...");
+      // TODO: just use execa for this
       local.current = spawn("node", [
         "--experimental-vm-modules",
         "--inspect",
@@ -293,6 +295,17 @@ function useLocalWorker(props: {
         }
       });
 
+      local.current.on("exit", (code) => {
+        if (code !== 0) {
+          console.error(`miniflare process exited with code ${code}`);
+        }
+      });
+
+      local.current.on("error", (error: Error) => {
+        console.error(`miniflare process failed to spawn`);
+        console.error(error);
+      });
+
       removeSignalExitListener.current = onExit((_code, _signal) => {
         console.log("⎔ Shutting down local server.");
         local.current?.kill();
@@ -300,7 +313,9 @@ function useLocalWorker(props: {
       });
     }
 
-    startLocalWorker();
+    startLocalWorker().catch((err) => {
+      console.error("local worker:", err);
+    });
 
     return () => {
       if (local.current) {
@@ -317,6 +332,7 @@ function useLocalWorker(props: {
 
 function useTmpDir(): string | void {
   const [directory, setDirectory] = useState<DirectoryResult>();
+  const handleError = useErrorHandler();
   useEffect(() => {
     let dir: DirectoryResult;
     async function create() {
@@ -326,15 +342,22 @@ function useTmpDir(): string | void {
         return;
       } catch (err) {
         console.error("failed to create tmp dir");
-        console.error(err);
         throw err;
       }
     }
-    create();
+    create().catch((err) => {
+      // we want to break here
+      // we can't do much without a temp dir anyway
+      handleError(err);
+    });
     return () => {
-      dir.cleanup();
+      dir.cleanup().catch(() => {
+        // extremely unlikely,
+        // but it's 2021 after all
+        console.error("failed to cleanup tmp dir");
+      });
     };
-  }, []);
+  }, [handleError]);
   return directory?.path;
 }
 
@@ -374,6 +397,7 @@ function useEsbuild(props: {
         ...(jsxFactory && { jsxFactory }),
         ...(jsxFragment && { jsxFragment }),
         external: ["__STATIC_CONTENT_MANIFEST"],
+        conditions: ["worker", "browser"],
         plugins: [moduleCollector.plugin],
         // TODO: import.meta.url
         watch: {
@@ -401,7 +425,12 @@ function useEsbuild(props: {
         modules: moduleCollector.modules,
       });
     }
-    build();
+    build().catch((_err) => {
+      // 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 () => {
       result?.stop();
     };
@@ -505,7 +534,11 @@ function useWorker(props: {
       );
       console.log(`⬣ Listening at http://localhost:${port}`);
     }
-    start();
+    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,
@@ -649,12 +682,14 @@ function useTunnel(toggle: boolean) {
         });
 
         const hostName = await findTunnelHostname();
-        clipboardy.write(hostName);
+        await clipboardy.write(hostName);
         console.log(`⬣ Sharing at ${hostName}, copied to clipboard.`);
       }
     }
 
-    startTunnel();
+    startTunnel().catch((err) => {
+      console.error("tunnel:", err);
+    });
 
     return () => {
       if (tunnel.current) {
@@ -676,14 +711,14 @@ function useHotkeys(initial: useHotkeysInitialState, port: number) {
   // UGH, we should put port in context instead
   const [toggles, setToggles] = useState(initial);
   useInput(
-    (
+    async (
       input,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       key
     ) => {
       switch (input) {
         case "b": // open browser
-          open(
+          await open(
             `http://localhost:${port}/`
             // {
             //   app: {
@@ -693,7 +728,7 @@ function useHotkeys(initial: useHotkeysInitialState, port: number) {
           );
           break;
         case "d": // toggle inspector
-          open(
+          await open(
             `https://built-devtools.pages.dev/js_app?experiments=true&v8only=true&ws=localhost:9229/ws`
             // {
             //   app: {
@@ -721,3 +756,21 @@ function useHotkeys(initial: useHotkeysInitialState, port: number) {
   );
   return toggles;
 }
+
+function ErrorFallback(props: {
+  error: Error;
+  resetErrorBoundary: () => void;
+}) {
+  useEffect(() => {
+    console.error(props.error);
+    process.exit(1);
+  });
+  return (
+    <Box>
+      <Text>Something went wrong:</Text>
+      <Text>{props.error.message}</Text>
+    </Box>
+  );
+}
+
+export default withErrorBoundary(Dev, { FallbackComponent: ErrorFallback });

package/src/dialogs.tsx

@@ -4,7 +4,7 @@ import { Box, Text, useInput, render } from "ink";
 import TextInput from "ink-text-input";
 type ConfirmProps = {
   text: string;
-  onConfirm: (answer: boolean) => void | Promise<void>;
+  onConfirm: (answer: boolean) => void;
 };
 function Confirm(props: ConfirmProps) {
   useInput((input: string) => {
@@ -75,11 +75,3 @@ export async function prompt(text: string, type: "text" | "password" = "text") {
     );
   });
 }
-
-// this one feels a little non "standard"
-// export async function select(
-//   title: string,
-//   choices: { label: string; value: string }[]
-// ): Promise<{ label: string; value: string }>{
-
-// }

package/src/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { render } from "ink";
-import { Dev } from "./dev";
+import Dev from "./dev";
 import { readFile } from "node:fs/promises";
 import makeCLI from "yargs";
 import { hideBin } from "yargs/helpers";
@@ -134,8 +134,11 @@ export async function main(argv: string[]): Promise<void> {
       ["*"],
       false,
       () => {},
-      () => {
+      (args) => {
         yargs.showHelp("log");
+        if (args._.length > 0) {
+          console.error(`\nUnknown command: ${args._}.`);
+        }
       }
     )
     .scriptName("wrangler")
@@ -184,26 +187,43 @@ export async function main(argv: string[]): Promise<void> {
         type: "string",
       });
     },
-    async () => {
+    async (args) => {
+      if ("type" in args) {
+        let message = "The --type option is no longer supported.";
+        if (args.type === "webpack") {
+          message +=
+            "\nIf you wish to use webpack then you will need to create a custom build.";
+          // TODO: Add a link to docs
+        }
+        console.error(message);
+        return;
+      }
+
       const destination = path.join(process.cwd(), "wrangler.toml");
       if (fs.existsSync(destination)) {
-        console.error(`${destination} already exists.`);
-      } else {
-        const compatibilityDate = new Date().toISOString().substring(0, 10);
-        try {
-          await writeFile(
-            destination,
-            `compatibility_date = "${compatibilityDate}"` + "\n"
-          );
-          console.log(`✨ Succesfully created wrangler.toml`);
-          // TODO: suggest next steps?
-        } catch (err) {
-          console.error(`Failed to create wrangler.toml`);
-          console.error(err);
-          throw err;
+        console.error(`${destination} file already exists!`);
+        const result = await confirm(
+          "Do you want to continue initializing this project?"
+        );
+        if (!result) {
+          return;
         }
       }
 
+      const compatibilityDate = new Date().toISOString().substring(0, 10);
+      try {
+        await writeFile(
+          destination,
+          `compatibility_date = "${compatibilityDate}"` + "\n"
+        );
+        console.log(`✨ Successfully created wrangler.toml`);
+        // TODO: suggest next steps?
+      } catch (err) {
+        console.error(`Failed to create wrangler.toml`);
+        console.error(err);
+        throw err;
+      }
+
       // if no package.json, ask, and if yes, create one
       let pathToPackageJson = await findUp("package.json");
 
@@ -240,9 +260,17 @@ export async function main(argv: string[]): Promise<void> {
             JSON.stringify(
               {
                 compilerOptions: {
-                  target: "ES2020",
-                  module: "CommonJS",
-                  lib: ["ES2020"],
+                  target: "esnext",
+                  module: "esnext",
+                  moduleResolution: "node",
+                  esModuleInterop: true,
+                  allowJs: true,
+                  allowSyntheticDefaultImports: true,
+                  isolatedModules: true,
+                  noEmit: true,
+                  lib: ["esnext"],
+                  jsx: "react",
+                  resolveJsonModule: true,
                   types: ["@cloudflare/workers-types"],
                 },
               },
@@ -686,9 +714,9 @@ export async function main(argv: string[]): Promise<void> {
         `successfully created tail, expires at ${expiration.toLocaleString()}`
       );
 
-      onExit(() => {
+      onExit(async () => {
         tail.terminate();
-        deleteTail();
+        await deleteTail();
       });
 
       tail.on("message", (data) => {
@@ -1121,7 +1149,7 @@ export async function main(argv: string[]): Promise<void> {
                 // TODO: these options shouldn't be required
                 script: ` `, // has to be a string with at least one char
               });
-              mf.getKVNamespace(title); // this should "create" the namespace
+              await mf.getKVNamespace(title); // this should "create" the namespace
               console.log(`✨ Success! Created KV namespace ${title}`);
               return;
             }
@@ -1367,7 +1395,16 @@ export async function main(argv: string[]): Promise<void> {
               : args.value;
             const config = args.config as Config;
 
-            console.log(`writing ${key}=${value} to namespace ${namespaceId}`);
+            if (args.path) {
+              console.log(
+                `writing the contents of ${args.path} to the key "${key}" on namespace ${namespaceId}`
+              );
+            } else {
+              console.log(
+                `writing the value "${value}" to key "${key}" on namespace ${namespaceId}`
+              );
+            }
+
             if (args.local) {
               const { Miniflare } = await import("miniflare");
               const mf = new Miniflare({
@@ -1539,7 +1576,7 @@ export async function main(argv: string[]): Promise<void> {
             // -- snip, end --
 
             // annoyingly, the API for this one doesn't return the
-            // data in the 'standard' format. goddamit.
+            // data in the 'standard' format. goddammit.
             // That's why we have the fallthrough response in cfetch.
             // Oh well.
             console.log(
@@ -1579,6 +1616,10 @@ export async function main(argv: string[]): Promise<void> {
           async ({ key, ...args }) => {
             const namespaceId = getNamespaceId(args);
 
+            console.log(
+              `deleting the key "${key}" on namespace ${namespaceId}`
+            );
+
             if (args.local) {
               const { Miniflare } = await import("miniflare");
               const mf = new Miniflare({
@@ -1825,21 +1866,9 @@ export async function main(argv: string[]): Promise<void> {
   yargs.group(["config", "help", "version"], "Flags:");
   yargs.help().alias("h", "help");
   yargs.version(wranglerVersion).alias("v", "version");
+  yargs.exitProcess(false);
+
   await initialiseUserConfig();
 
-  await yargs.parse(
-    argv
-    /* TODO: we'd like to use the parse callback, 
-    but there's a serious bug with it 
-    https://github.com/yargs/yargs/issues/1975#issuecomment-874237906
-    
-    , (err, argv, output) => {
-      if (output) {
-        console.log(output);
-      }
-      console.log({ err });
-      console.log("what now");
-    } 
-  */
-  );
+  await yargs.parse(argv);
 }