feature: add more types that get logged via console methods

This PR adds more special logic for some data types that get logged via `console` methods. Types like `Promise`, `Date`, `WeakMaps`, and some more, now get logged correctly (or at least, better than they used to).

This PR also fixes a sinister bug - the `type` of the `ConsoleAPICalled` events don't match 1:1 with actual console methods (eg: `console.warn` message type is `warning`). This PR adds a mapping between those types and method names. Some methods don't seem to have a message type, I'm not sure why, but we'll get to them later.

Author: threepointone

.changeset/strange-melons-provide.md

@@ -0,0 +1,9 @@
+---
+"wrangler": patch
+---
+
+feature: add more types that get logged via `console` methods
+
+This PR adds more special logic for some data types that get logged via `console` methods. Types like `Promise`, `Date`, `WeakMaps`, and some more, now get logged correctly (or at least, better than they used to).
+
+This PR also fixes a sinister bug - the `type` of the `ConsoleAPICalled` events don't match 1:1 with actual console methods (eg: `console.warn` message type is `warning`). This PR adds a mapping between those types and method names. Some methods don't seem to have a message type, I'm not sure why, but we'll get to them later.

packages/wrangler/src/dev.tsx

@@ -569,7 +569,7 @@ function useWorker(props: {
       if (!startedRef.current) {
         startedRef.current = true;
       } else {
-        console.log("⎔ Detected changes, restarting server...");
+        console.log("⎔ Detected changes, restarted server.");
       }
 
       const assets = await syncAssets(

packages/wrangler/src/inspect.ts

@@ -432,6 +432,30 @@ function randomId(): string {
  * we're just doing a little bit of the work of the devtools console,
  * directly in the terminal.
  */
+
+export const mapConsoleAPIMessageTypeToConsoleMethod: {
+  [key in Protocol.Runtime.ConsoleAPICalledEvent["type"]]: keyof typeof console;
+} = {
+  log: "log",
+  debug: "debug",
+  info: "info",
+  warning: "warn",
+  error: "error",
+  dir: "dir",
+  dirxml: "dirxml",
+  table: "table",
+  trace: "trace",
+  clear: "clear",
+  count: "count",
+  assert: "assert",
+  profile: "profile",
+  profileEnd: "profileEnd",
+  timeEnd: "timeEnd",
+  startGroup: "group",
+  startGroupCollapsed: "groupCollapsed",
+  endGroup: "groupEnd",
+};
+
 function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
   const args: string[] = [];
   for (const ro of evt.args) {
@@ -449,7 +473,11 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
         break;
       case "object":
         if (!ro.preview) {
-          args.push(ro.description ?? "<no-description>");
+          args.push(
+            ro.subtype === "null"
+              ? "null"
+              : ro.description ?? "<no-description>"
+          );
         } else {
           args.push(ro.preview.description ?? "<no-description>");
 
@@ -467,6 +495,7 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
               );
 
               break;
+            case "weakmap":
             case "map":
               args.push(
                 "{\n" +
@@ -484,6 +513,7 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
               );
 
               break;
+            case "weakset":
             case "set":
               args.push(
                 "{ " +
@@ -497,27 +527,33 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
                   (ro.preview.overflow ? ", ..." : "") +
                   " }"
               );
-
               break;
-            case "null":
-              args.push("null");
-              break;
-            case "node":
             case "regexp":
+              break;
             case "date":
-            case "weakmap":
-            case "weakset":
-            case "iterator":
+              break;
             case "generator":
-            case "error":
-            case "proxy":
+              args.push(ro.preview.properties[0].value || "");
+              break;
             case "promise":
+              if (ro.preview.properties[0].value === "pending") {
+                args.push(`{<${ro.preview.properties[0].value}>}`);
+              } else {
+                args.push(
+                  `{<${ro.preview.properties[0].value}>: ${ro.preview.properties[1].value}}`
+                );
+              }
+              break;
+            case "node":
+            case "iterator":
+            case "proxy":
             case "typedarray":
             case "arraybuffer":
             case "dataview":
             case "webassemblymemory":
             case "wasmvalue":
               break;
+            case "error":
             default:
               // just a pojo
               args.push(
@@ -539,5 +575,7 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
     }
   }
 
-  console[evt.type](...args);
+  const method = mapConsoleAPIMessageTypeToConsoleMethod[evt.type];
+  //@ts-expect-error I dunno how to make this type pass lol
+  console[method](...args);
 }