console: support nodelist

codesandbox · Sep 8, 2023 · 0e7012a · 0e7012a
1 parent 88115bd
commit 0e7012a
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 1 deletion.
diff --git a/sandpack-react/src/components/Console/Console.stories.tsx b/sandpack-react/src/components/Console/Console.stories.tsx
@@ -255,6 +255,7 @@ export const StaticTemplate: React.FC = () => {
 <body>
   <h1>Hello world</h1>
   <button onclick="console.log(document.querySelectorAll('button'))">Log</button>
+  <button onclick="console.log(document.querySelectorAll('button'))">Log</button>
 </body>
 
 </html>`,

diff --git a/sandpack-react/src/components/Console/ConsoleList.tsx b/sandpack-react/src/components/Console/ConsoleList.tsx
@@ -12,7 +12,6 @@ export const ConsoleList: React.FC<{ data: SandpackConsoleData }> = ({
   data,
 }) => {
   const classNames = useClassNames();
-
   return (
     <>
       {data.map(({ data, id, method }, logIndex, references) => {

diff --git a/sandpack-react/src/components/Console/utils/constraints.ts b/sandpack-react/src/components/Console/utils/constraints.ts
@@ -7,6 +7,7 @@ export const CLEAR_LOG = {
 };
 
 export const TRANSFORMED_TYPE_KEY = "@t";
+export const TRANSFORMED_TYPE_KEY_ALTERNATE = "#@t";
 export const CIRCULAR_REF_KEY = "@r";
 
 export const MAX_LENGTH_STRING = 10000;

diff --git a/sandpack-react/src/components/Console/utils/fromConsoleToString.test.ts b/sandpack-react/src/components/Console/utils/fromConsoleToString.test.ts
@@ -40,6 +40,73 @@ const cases: Array<[Message, string]> = [
     { constructor: { name: "CustomThing" } },
     'CustomThing { constructor: { name: "CustomThing" } }',
   ],
+  [
+    {
+      "0": {
+        "#@t": "HTMLElement",
+        data: {
+          tagName: "button",
+          attributes: {},
+          innerHTML: "Test",
+        },
+      },
+      "1": {
+        "#@t": "HTMLElement",
+        data: {
+          tagName: "button",
+          attributes: {
+            onclick: "console.log(document.querySelectorAll('button'))",
+          },
+          innerHTML: "Log",
+        },
+      },
+      entries: {
+        "#@t": "Function",
+        data: {
+          name: "entries",
+          body: "",
+          proto: "Function",
+        },
+      },
+      keys: {
+        "#@t": "Function",
+        data: {
+          name: "keys",
+          body: "",
+          proto: "Function",
+        },
+      },
+      values: {
+        "#@t": "Function",
+        data: {
+          name: "values",
+          body: "",
+          proto: "Function",
+        },
+      },
+      forEach: {
+        "#@t": "Function",
+        data: {
+          name: "forEach",
+          body: "",
+          proto: "Function",
+        },
+      },
+      length: 2,
+      item: {
+        "#@t": "Function",
+        data: {
+          name: "item",
+          body: "",
+          proto: "Function",
+        },
+      },
+      constructor: {
+        name: "NodeList",
+      },
+    },
+    `NodeList(2)[<button>Test</button>,<button onclick="console.log(document.querySelectorAll('button'))">Log</button>]`,
+  ],
 
   /**
    * Function

diff --git a/sandpack-react/src/components/Console/utils/fromConsoleToString.ts b/sandpack-react/src/components/Console/utils/fromConsoleToString.ts
@@ -7,6 +7,7 @@
 
 import {
   TRANSFORMED_TYPE_KEY,
+  TRANSFORMED_TYPE_KEY_ALTERNATE,
   MAX_NEST_LEVEL,
   MAX_KEYS,
   MAX_LENGTH_STRING,
@@ -48,6 +49,25 @@ const formatSymbols = (message: Message): any => {
     const transform = transformers[type];
 
     return transform(message.data);
+  } else if (
+    typeof message == "object" &&
+    TRANSFORMED_TYPE_KEY_ALTERNATE in message
+  ) {
+    const type = message[TRANSFORMED_TYPE_KEY_ALTERNATE] as TransformsTypes;
+    const transform = transformers[type];
+
+    return transform(message.data);
+  } else if (
+    typeof message == "object" &&
+    message.constructor?.name === "NodeList"
+  ) {
+    const NodeList = {};
+    Object.entries(message).forEach(([key, value]) => {
+      // @ts-ignore
+      NodeList[key] = formatSymbols(value);
+    });
+
+    return NodeList;
   }
 
   return message;
@@ -163,6 +183,15 @@ export const fromConsoleToString = (
           return fromConsoleToString(newMessage, references, level + 1);
         }
 
+        if (output.constructor?.name === "NodeList") {
+          const length = output.length;
+          const nodes = new Array(length).fill(null).map((_, index) => {
+            return fromConsoleToString(output[index], references);
+          });
+
+          return `NodeList(${output.length})[${nodes}]`;
+        }
+
         return objectToString(output, references, level + 1);
     }
   } catch {
-Original file line number
+Diff line change
@@ Expand Up @@
       data,
     }) => {
       const classNames = useClassNames();
       return (
         <>
           {data.map(({ data, id, method }, logIndex, references) => {
@@ Expand Down @@