From 0e7012ab5b7f634411d10d965719f9a58b2e87e9 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Fri, 8 Sep 2023 15:40:00 +0100 Subject: [PATCH] console: support nodelist --- .../components/Console/Console.stories.tsx | 1 + .../src/components/Console/ConsoleList.tsx | 1 - .../components/Console/utils/constraints.ts | 1 + .../Console/utils/fromConsoleToString.test.ts | 67 +++++++++++++++++++ .../Console/utils/fromConsoleToString.ts | 29 ++++++++ 5 files changed, 98 insertions(+), 1 deletion(-) diff --git a/sandpack-react/src/components/Console/Console.stories.tsx b/sandpack-react/src/components/Console/Console.stories.tsx index b31985234..f9720895e 100644 --- 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 = () => {

Hello world

+ `, diff --git a/sandpack-react/src/components/Console/ConsoleList.tsx b/sandpack-react/src/components/Console/ConsoleList.tsx index 2761636e0..1b598a2ea 100644 --- 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 index b423e16ce..70b39c796 100644 --- 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 index c20310c3e..b3336744b 100644 --- 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)[,]`, + ], /** * Function diff --git a/sandpack-react/src/components/Console/utils/fromConsoleToString.ts b/sandpack-react/src/components/Console/utils/fromConsoleToString.ts index 7a8cbb73f..51f06b849 100644 --- 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 {