Hello World
{"ScriptPreparationCode":"var app = document.querySelector(\u0027#app\u0027);\r\nfunction updateClasses(opts) {\r\n var existing = opts.el.className.split(\u0027 \u0027);\r\n // Add the new classes and the existing as a single array.\r\n var result = opts.add \u0026\u0026 existing.concat(opts.add) || existing;\r\n var uniqueNames = [];\r\n\r\n // if we have a drop property.\r\n if (opts.drop) {\r\n opts.drop.forEach(function remove(i) {\r\n if (result.indexOf(i) \u003E -1) {\r\n result.splice(result.indexOf(i), 1);\r\n }\r\n });\r\n }\r\n\r\n // loop and remove duplicates.\r\n result.forEach(function cleanUp(i) {\r\n if (result.indexOf(i) \u003E -1) {\r\n if (uniqueNames.indexOf(i) === -1) {\r\n uniqueNames.push(i);\r\n }\r\n }\r\n });\r\n\r\n // replace the classes on the element.\r\n opts.el.className = uniqueNames.join(\u0027 \u0027);\r\n}","TestCases":[{"Name":"Normal el.classList.add","Code":"app.classList.add(\u0027orange\u0027);","IsDeferred":false},{"Name":"el.classList.add with RAF","Code":" window.requestAnimationFrame(function draw() {\r\n app.classList.add(\u0027red\u0027);\r\n });","IsDeferred":false},{"Name":"New replacement of className with RAF","Code":" window.requestAnimationFrame(function draw() {\r\n updateClasses({el: app, add: [\u0027blue\u0027]});\r\n });","IsDeferred":false}]}