Hello World
{"ScriptPreparationCode":"var app = document.querySelector(\u0027#app\u0027);\r\nfunction updateStyles(opts) {\r\n var list = opts.el.style.cssText.replace(/ /g, \u0027\u0027).split(\u0027;\u0027);\r\n var result = {};\r\n var output = [];\r\n // Create our master list of existing properties.\r\n list.map(function chop(i) {\r\n if (i.length) {\r\n var item = i.split(\u0027:\u0027);\r\n result[item[0]] = item[1];\r\n }\r\n });\r\n\r\n // if we have an add object.\r\n if (opts.add) {\r\n // loop and add them to result.\r\n Object.keys(opts.add).forEach(function add(item) {\r\n result[item] = opts.add[item];\r\n });\r\n }\r\n\r\n // if we have a drop object.\r\n if (opts.drop) {\r\n // loop and remove them from result.\r\n opts.drop.forEach(function remove(item) {\r\n if (result[item]) {\r\n delete result[item];\r\n }\r\n });\r\n }\r\n\r\n // Concatenate our parameters.\r\n Object.keys(result).forEach(function cleanup(item) {\r\n output.push(item \u002B \u0027:\u0027 \u002B result[item]);\r\n });\r\n\r\n // replace the style property on the element.\r\n opts.el.style.cssText = output.join(\u0027;\u0027);\r\n}","TestCases":[{"Name":"Normal el.style","Code":" app.style.height = \u0027200px\u0027;\r\n app.style.width = \u0027200px\u0027;\r\n app.style.minWidth = \u0027200px\u0027;\r\n app.style.backgroundColor = \u0027red\u0027;","IsDeferred":false},{"Name":"el.style with RAF","Code":" window.requestAnimationFrame(function draw() {\r\n app.style.height = \u0027300px\u0027;\r\n app.style.width = \u0027300px\u0027;\r\n app.style.minWidth = \u0027300px\u0027;\r\n app.style.backgroundColor = \u0027blue\u0027;\r\n });","IsDeferred":false},{"Name":"New replacement of el.style with RAF","Code":" var newInlineStyles = {\r\n height: \u0027500px\u0027,\r\n width: \u0027500px\u0027,\r\n \u0027min-width\u0027: \u0027500px\u0027,\r\n \u0027background-color\u0027: \u0027orange\u0027\r\n };\r\n window.requestAnimationFrame(function draw() {\r\n updateStyles({el: app, add: newInlineStyles});\r\n });","IsDeferred":false}]}