format message

codesandbox · Aug 4, 2022 · b2bb9e1 · b2bb9e1
1 parent 0f2a068
commit b2bb9e1
Show file tree

Hide file tree

Showing 4 changed files with 578 additions and 59 deletions.
diff --git a/sandpack-react/src/components/Console/SandpackConsole.tsx b/sandpack-react/src/components/Console/SandpackConsole.tsx
@@ -8,6 +8,7 @@ import { CodeEditor } from "../CodeEditor";
 import { Button } from "./Button";
 import { formatMessage } from "./formatMessage";
 import { Header } from "./Header";
+import { decoder } from "./test";
 import { useSandpackConsole } from "./useSandpackConsole";
 import { getType } from "./utils";
 
@@ -74,7 +75,7 @@ export const SandpackConsole: React.FC<
                     className={classNames(consoleItemClassName({ variant }))}
                   >
                     <CodeEditor
-                      code={formatMessage(msg)}
+                      code={decoder(data)}
                       fileType="js"
                       initMode="user-visible"
                       showReadOnly={false}

diff --git a/sandpack-react/src/components/Console/formatMessage.ts b/sandpack-react/src/components/Console/formatMessage.ts
@@ -3,6 +3,9 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { transformers } from "./transformers";
+
 /* eslint-disable @typescript-eslint/array-type */
 const TRANSFORMED_TYPE_KEY = "@t";
 
@@ -20,79 +23,37 @@ export type Message =
   | Array<any>
   | Record<any, any>;
 
-const formatFunction = ({
-  data,
-}: {
-  "@t": "Function" | "Number";
-  data: {
-    name: string;
-    body: string;
-    proto: "Function" | "Number";
-  };
-}): string => {
-  function mock() {}
-
-  try {
-    Object.defineProperty(mock, "body", {
-      value: data.body,
-      writable: false,
-    });
-
-    // @ts-ignore
-    mock.constructor = { name: data.proto };
-
-    return mock.toString().replace("mock", data.name);
-  } catch (e) {
-    return "undefined";
-  }
-};
-
 const format = (message: Message): string | number | Array<Message> => {
   if (typeof message === "string" || typeof message === "number") {
     return message;
-  }
-
-  if (Array.isArray(message)) {
+  } else if (Array.isArray(message)) {
     return message.map(format);
-  }
-
-  if (message[TRANSFORMED_TYPE_KEY]) {
+  } else if (message[TRANSFORMED_TYPE_KEY]) {
     const type = message["@t"];
+    const transform = transformers[type];
 
-    if (type === "Function") {
-      return formatFunction(message);
-    }
-
-    return message[TRANSFORMED_TYPE_KEY];
+    return transform.fromSerializable(message);
   }
 
-  let children;
-
-  try {
-    children = JSON.stringify(message);
-  } catch (error) {
-    try {
-      children = Object.prototype.toString.call(message);
-    } catch (err) {
-      children = "[" + typeof message + "]";
-    }
-  }
-
-  return children;
+  return JSON.stringify(message);
 };
 
 export const formatMessage = (message: Message): string => {
   const output = format(message);
 
   if (typeof output === "string") return output;
 
-  if (Array.isArray(output)) {
-    const mergeArray = output.reduce<string>((acc, curr) => {
-      return `${acc}, ${curr}`;
-    }, "");
+  // if (Array.isArray(output)) {
+  //   const mergeArray = output.reduce<string>((acc, curr) => {
+  //     return `${acc}, ${curr}`;
+  //   }, "");
 
-    return `[${mergeArray}]`;
-  }
+  //   return `[${mergeArray}]`;
+  // }
 
-  return JSON.stringify(output);
+  try {
+    return Object.prototype.toString.call(output);
+  } catch (err) {
+    return "[" + typeof output + "]";
+  }
 };