{"ScriptPreparationCode":null,"TestCases":[{"Name":"hyperlit","Code":"const state = {\r\n count: 0,\r\n items: window.TEST_ITEMS.slice(0, 800),\r\n reversed: false\r\n}\r\n\r\nconst actions = {\r\n update: state =\u003E ({\r\n ...state,\r\n count: state.count \u002B 1,\r\n items: state.reversed ? \r\n [...state.items].reverse() : \r\n [...state.items].sort(() =\u003E Math.random() - 0.5),\r\n reversed: !state.reversed\r\n })\r\n}\r\n\r\napp({\r\n init: state,\r\n view: state =\u003E html\u0060\r\n \u003Cmain\u003E\r\n \u003Ch1\u003E${state.count}\u003C/h1\u003E\r\n \u003Cbutton onclick=${() =\u003E actions.update(state)}\u003EUpdate\u003C/button\u003E\r\n \u003Cul\u003E\r\n ${state.items.map(item =\u003E \r\n html\u0060\u003Cli key=${item}\u003E${item} - ${state.count}\u003C/li\u003E\u0060\r\n )}\r\n \u003C/ul\u003E\r\n \u003C/main\u003E\r\n \u0060,\r\n node: document.getElementById(\u0022app\u0022)\r\n})\r\n","IsDeferred":false},{"Name":"hyperhype","Code":"const state = {\r\n\tcount: 0,\r\n\titems: window.TEST_ITEMS.slice(0, 800),\r\n\treversed: false\r\n};\r\n\r\nconst actions = {\r\n\tupdate: (state) =\u003E ({\r\n\t\t...state,\r\n\t\tcount: state.count \u002B 1,\r\n\t\titems: state.reversed\r\n\t\t\t? [...state.items].reverse()\r\n\t\t\t: [...state.items].sort(() =\u003E Math.random() - 0.5),\r\n\t\treversed: !state.reversed\r\n\t}),\r\n};\r\n\r\nxapp({\r\n\tinit: state,\r\n\tview: (state) =\u003E\r\n\t\tmain({}, [\r\n\t\t\th1({}, String(state.count)),\r\n\t\t\tbutton({ onclick: actions.update }, \u0022Update\u0022),\r\n\t\t\tul(\r\n\t\t\t\t{},\r\n\t\t\t\tstate.items.map((item) =\u003E\r\n\t\t\t\t\tli({ key: item }, \u0060${item} - ${state.count}\u0060),\r\n\t\t\t\t),\r\n\t\t\t),\r\n\t\t]),\r\n\tnode: document.getElementById(\u0022app\u0022)\r\n});\r\n","IsDeferred":false},{"Name":"hyperapp","Code":"const state = {\r\n count: 0,\r\n items: window.TEST_ITEMS.slice(0, 800),\r\n reversed: false\r\n}\r\n\r\nconst actions = {\r\n update: state =\u003E ({\r\n ...state,\r\n count: state.count \u002B 1,\r\n items: state.reversed ? \r\n [...state.items].reverse() : \r\n [...state.items].sort(() =\u003E Math.random() - 0.5),\r\n reversed: !state.reversed\r\n })\r\n}\r\n\r\napp({\r\n init: state,\r\n view: state =\u003E\r\n h(\u0022main\u0022, {}, [\r\n h(\u0022h1\u0022, {}, text(state.count)),\r\n h(\u0022button\u0022, { onclick: actions.update }, text(\u0022Update\u0022)),\r\n h(\u0022ul\u0022, {}, \r\n state.items.map(item =\u003E \r\n h(\u0022li\u0022, { key: item }, text(\u0060${item} - ${state.count}\u0060))\r\n )\r\n )\r\n ]),\r\n node: document.getElementById(\u0022app\u0022)\r\n})","IsDeferred":false},{"Name":"react","Code":"const { useState } = React;\r\n\r\nfunction App() {\r\n const [state, setState] = useState({\r\n count: 0,\r\n items: window.TEST_ITEMS.slice(0, 800),\r\n reversed: false\r\n });\r\n\r\n const update = () =\u003E {\r\n setState(state =\u003E ({\r\n ...state,\r\n count: state.count \u002B 1,\r\n items: state.reversed ? \r\n [...state.items].reverse() : \r\n [...state.items].sort(() =\u003E Math.random() - 0.5),\r\n reversed: !state.reversed\r\n }));\r\n };\r\n\r\n return React.createElement(\u0027main\u0027, null, [\r\n React.createElement(\u0027h1\u0027, { key: \u0027h1\u0027 }, state.count),\r\n React.createElement(\u0027button\u0027, { \r\n key: \u0027button\u0027,\r\n onClick: update \r\n }, \u0027Update\u0027),\r\n React.createElement(\u0027ul\u0027, { key: \u0027ul\u0027 }, \r\n state.items.map(item =\u003E \r\n React.createElement(\u0027li\u0027, { \r\n key: item \r\n }, \u0060${item} - ${state.count}\u0060)\r\n )\r\n )\r\n ]);\r\n}\r\n\r\nReactDOM.render(\r\n React.createElement(App),\r\n document.getElementById(\u0027app\u0027)\r\n);\r\n","IsDeferred":false}]}