{"ScriptPreparationCode":null,"TestCases":[{"Name":"DOMParser","Code":"/**\r\n * Creates a virtual DOM tree from an HTML string.\r\n *\r\n * @param {string} htmlString - The HTML string to parse.\r\n * @return {Object} The root node of the virtual DOM tree.\r\n */\r\nfunction createVirtualDOM(htmlString) {\r\n // Use DOMParser to parse the HTML string into a DOM tree\r\n const parser = new DOMParser();\r\n const doc = parser.parseFromString(htmlString, \u0022text/html\u0022);\r\n const rootNode = doc.body;\r\n\r\n /**\r\n * Recursively creates a virtual DOM node from a DOM element.\r\n *\r\n * @param {Element} element - The DOM element to create a virtual node from.\r\n * @return {Object} The virtual DOM node.\r\n */\r\n function createNode(element) {\r\n // Create a virtual DOM node with the element\u0027s tag name and attributes\r\n const node = {\r\n tagName: element.tagName,\r\n attributes: {}\r\n };\r\n\r\n // Add the element\u0027s attributes to the virtual node\r\n for (let i = 0; i \u003C element.attributes.length; i\u002B\u002B) {\r\n const attribute = element.attributes[i];\r\n node.attributes[attribute.name] = attribute.value;\r\n }\r\n\r\n // If the element has child nodes, create virtual nodes for them as well\r\n if (element.childNodes.length \u003E 0) {\r\n node.children = [];\r\n for (let i = 0; i \u003C element.childNodes.length; i\u002B\u002B) {\r\n const child = element.childNodes[i];\r\n //console.log(child.tagName)\r\n if (!child.tagName) continue;\r\n \r\n if (child.nodeType === Node.ELEMENT_NODE) {\r\n // Recursively create a virtual node for the child element\r\n node.children.push(createNode(child));\r\n } else if (child.nodeType === Node.TEXT_NODE) {\r\n // Create a virtual node for the child text node\r\n node.children.push({\r\n tagName: null,\r\n text: child.textContent\r\n });\r\n }\r\n }\r\n }\r\n\r\n return element.tagName === \u0027BODY\u0027 ? node.children : node;\r\n //return node;\r\n }\r\n\r\n // Return the root virtual DOM node\r\n return createNode(rootNode);\r\n}\r\n\r\nconst vdom = createVirtualDOM(\u0060\u003Cdiv\u003E\r\n \u003Ch4\u003EIncome\u003C/h4\u003E\r\n \u003Cp id=\u0022money-plus\u0022 class=\u0022money plus\u0022\u003E\u003Cplaceholder data-id=\u0022income\u0022/\u003E\u003C/p\u003E\r\n \u003C/div\u003E\r\n \u003Cdiv\u003E\r\n \u003Ch4\u003EExpense\u003C/h4\u003E\r\n \u003Cp id=\u0022money-minus\u0022 class=\u0022money minus\u0022\u003E\u003Cplaceholder data-id=\u0022expense\u0022/\u003E\u003C/p\u003E\r\n \u003Cinput type=\u0022text\u0022 disabled /\u003E\r\n \u003Cdiv class=\u0022inner\u0022\u003E\u003C/div\u003E\r\n \u003C/div\u003E\u0060);","IsDeferred":false},{"Name":"Template element","Code":"/**\r\n * Creates a virtual DOM tree from an HTML string.\r\n *\r\n * @param {string} htmlString - The HTML string to parse.\r\n * @return {Object} The root node of the virtual DOM tree.\r\n */\r\nfunction createVirtualDOM(htmlString) {\r\n\r\n /**\r\n * Recursively creates a virtual DOM node from a DOM element.\r\n *\r\n * @param {Element} element - The DOM element to create a virtual node from.\r\n * @return {Object} The virtual DOM node.\r\n */\r\n function createNode(element) {\r\n //console.log(elements)\r\n // Create a virtual DOM node with the element\u0027s tag name and attributes\r\n \r\n const node = {\r\n tagName: element.tagName,\r\n attributes: {}\r\n };\r\n\r\n \r\n // Add the element\u0027s attributes to the virtual node\r\n for (let i = 0; i \u003C element.attributes.length; i\u002B\u002B) {\r\n const attribute = element.attributes[i];\r\n node.attributes[attribute.name] = attribute.value;\r\n }\r\n\r\n // If the element has child nodes, create virtual nodes for them as well\r\n if (element.childNodes.length \u003E 0) {\r\n node.children = [];\r\n for (let i = 0; i \u003C element.childNodes.length; i\u002B\u002B) {\r\n const child = element.childNodes[i];\r\n //console.log(child.tagName)\r\n if (!child.tagName) continue;\r\n\r\n if (child.nodeType === Node.ELEMENT_NODE) {\r\n // Recursively create a virtual node for the child element\r\n node.children.push(createNode(child));\r\n } else if (child.nodeType === Node.TEXT_NODE) {\r\n // Create a virtual node for the child text node\r\n node.children.push({\r\n tagName: null,\r\n text: child.textContent\r\n });\r\n }\r\n }\r\n }\r\n \r\n return node;\r\n \r\n }\r\n\r\n \r\n var t = document.createElement(\u0027template\u0027);\r\n t.innerHTML = \u0060\u003Ct\u003E${htmlString}\u003C/t\u003E\u0060;\r\n //const rootNodes = [...t.content.querySelectorAll(\u0027t \u003E *\u0027)]\r\n const nodes = [];\r\n t.content.querySelectorAll(\u0027t \u003E *\u0027).forEach(element =\u003E nodes.push(createNode(element)));\r\n // Return the root virtual DOM node\r\n return nodes;\r\n}\r\n\r\nconst vdom = createVirtualDOM(\u0060\u003Cdiv\u003E\r\n \u003Ch4\u003EIncome\u003C/h4\u003E\r\n \u003Cp id=\u0022money-plus\u0022 class=\u0022money plus\u0022\u003E\u003Cplaceholder data-id=\u0022income\u0022/\u003E\u003C/p\u003E\r\n \u003C/div\u003E\r\n \u003Cdiv\u003E\r\n \u003Ch4\u003EExpense\u003C/h4\u003E\r\n \u003Cp id=\u0022money-minus\u0022 class=\u0022money minus\u0022\u003E\u003Cplaceholder data-id=\u0022expense\u0022/\u003E\u003C/p\u003E\r\n \u003Cinput type=\u0022text\u0022 disabled /\u003E\r\n \u003Cdiv class=\u0022inner\u0022\u003E\u003C/div\u003E\r\n \u003C/div\u003E\u0060);","IsDeferred":false}]}