{"ScriptPreparationCode":"const attributeExceptions = [\r\n \u0060role\u0060,\r\n];\r\n\r\nfunction appendText(el, text) {\r\n const textNode = document.createTextNode(text);\r\n el.appendChild(textNode);\r\n}\r\n\r\nfunction appendArray(el, children) {\r\n children.forEach((child) =\u003E {\r\n if (Array.isArray(child)) {\r\n appendArray(el, child);\r\n } else if (child instanceof window.Element) {\r\n el.appendChild(child);\r\n } else if (typeof child === \u0060string\u0060) {\r\n appendText(el, child);\r\n }\r\n });\r\n}\r\n\r\nfunction setStyles(el, styles) {\r\n if (!styles) {\r\n el.removeAttribute(\u0060styles\u0060);\r\n return;\r\n }\r\n\r\n Object.keys(styles).forEach((styleName) =\u003E {\r\n if (styleName in el.style) {\r\n el.style[styleName] = styles[styleName]; // eslint-disable-line no-param-reassign\r\n } else {\r\n console.warn(\u0060${styleName} is not a valid style for a \u003C${el.tagName.toLowerCase()}\u003E\u0060);\r\n }\r\n });\r\n}\r\n\r\nfunction makeElement(type, textOrPropsOrChild, ...otherChildren) {\r\n const el = document.createElement(type);\r\n\r\n if (Array.isArray(textOrPropsOrChild)) {\r\n appendArray(el, textOrPropsOrChild);\r\n } else if (textOrPropsOrChild instanceof window.Element) {\r\n el.appendChild(textOrPropsOrChild);\r\n } else if (typeof textOrPropsOrChild === \u0060string\u0060) {\r\n appendText(el, textOrPropsOrChild);\r\n } else if (typeof textOrPropsOrChild === \u0060object\u0060) {\r\n Object.keys(textOrPropsOrChild).forEach((propName) =\u003E {\r\n if (propName in el || attributeExceptions.includes(propName)) {\r\n const value = textOrPropsOrChild[propName];\r\n\r\n if (propName === \u0060style\u0060) {\r\n setStyles(el, value);\r\n } else if (value) {\r\n el[propName] = value;\r\n }\r\n } else {\r\n console.warn(\u0060${propName} is not a valid property of a \u003C${type}\u003E\u0060);\r\n }\r\n });\r\n }\r\n\r\n if (otherChildren) appendArray(el, otherChildren);\r\n\r\n return el;\r\n}\r\n\r\nvar a = (...args) =\u003E makeElement(\u0060a\u0060, ...args);\r\nvar button = (...args) =\u003E makeElement(\u0060button\u0060, ...args);\r\nvar div = (...args) =\u003E makeElement(\u0060div\u0060, ...args);\r\nvar h1 = (...args) =\u003E makeElement(\u0060h1\u0060, ...args);\r\nvar header = (...args) =\u003E makeElement(\u0060header\u0060, ...args);\r\nvar p = (...args) =\u003E makeElement(\u0060p\u0060, ...args);\r\nvar span = (...args) =\u003E makeElement(\u0060span\u0060, ...args);\r\n","TestCases":[{"Name":"Mustache","Code":"var template = Mustache.render(\u0027\u003Cdiv id=\u0022foo\u0022 class=\u0022bar\u0022\u003E\u0027 \u002B\r\n\u0027\u003Ca href=\u0022{{url}}\u0022\u003E{{message}}\u003C/a\u003E\u0027 \u002B\r\n\u0027\u003C/div\u003E\u0027, {\r\n message: \u0027Hello there\u0027,\r\n url: \u0027https://www.google.com\u0027\r\n});\r\n$(\u0027#template-target\u0027).append(template);","IsDeferred":false},{"Name":"DOM Builder","Code":"var template2 = (data) =\u003E div({ id: \u0027foo\u0027, className: \u0027bar\u0027 },\r\n a({ href: data.url }, data.message)\r\n);\r\ndocument.querySelector(\u0027#template-target\u0027).appendChild(template2({\r\n message: \u0027Hello there\u0027,\r\n url: \u0027https://www.google.com\u0027\r\n}));","IsDeferred":false}]}