{"ScriptPreparationCode":null,"TestCases":[{"Name":"With component","Code":"const name = Vue.component(\u0027str-component\u0027, {\r\n props: [\u0027value\u0027],\r\n render(createElement){\r\n console.log(\u0060Value: ${this.value} rendered\u0060)\r\n return createElement(\u0022span\u0022, [\u0027Value: \u0027, this.value]); \r\n }\r\n})\r\n\r\n\r\nnew Vue({\r\n el: \u0022#app\u0022,\r\n data() {\r\n return {\r\n clickCount: 0,\r\n step: 0,\r\n width: 0,\r\n interval: undefined,\r\n maxSteps: 2,\r\n maxWidth: 100,\r\n minWidth: 0,\r\n dir: \u0022increase\u0022,\r\n firstName: \u0022Hello\u0022,\r\n lastName: \u0022World\u0022\r\n };\r\n },\r\n mounted() {\r\n this.interval = window.setInterval(this.benchmark, 10)\r\n },\r\n methods: {\r\n onClick() {\r\n this.clickCount \u002B= 1;\r\n },\r\n increaseWidth: function() {\r\n this.width = this.width \u002B 1;\r\n },\r\n decreaseWidth: function() {\r\n this.width = this.width - 1;\r\n },\r\n benchmark: function() {\r\n if (this.step === this.maxSteps) {\r\n window.clearInterval(this.interval);\r\n return;\r\n }\r\n if (this.width === this.maxWidth) {\r\n this.dir = \u0022decrease\u0022;\r\n this.step\u002B\u002B;\r\n } else if (this.width === this.minWidth) {\r\n this.dir = \u0022increase\u0022;\r\n }\r\n\r\n if (this.dir === \u0022increase\u0022) {\r\n this.increaseWidth();\r\n } else {\r\n this.decreaseWidth();\r\n }\r\n }\r\n },\r\n render(createElement) {\r\n const button = createElement(\r\n \u0022button\u0022,\r\n {\r\n on: {\r\n click: this.onClick\r\n }\r\n },\r\n \u0022Click me\u0022\r\n );\r\n\r\n const counter = createElement(\u0022span\u0022, [\r\n \u0022Number of clicks:\u0022,\r\n this.clickCount\r\n ]);\r\n \r\n const firstName = createElement(name, {props: {value: this.firstName}});\r\n \r\n if (this.width % 20 === 0){\r\n console.log(\u0060rendered ${this.width}\u0060)\r\n }\r\n\r\n return createElement(\r\n \u0022div\u0022,\r\n { style: { \u0022background-color\u0022: \u0022red\u0022, width: \u0060${this.width}px\u0060 } },\r\n [firstName]\r\n );\r\n }\r\n});\r\n","IsDeferred":false},{"Name":"With element","Code":"const name = Vue.component(\u0027str-component\u0027, {\r\n props: [\u0027value\u0027],\r\n render(createElement){\r\n console.log(\u0060Value: ${this.value} rendered\u0060)\r\n return createElement(\u0022span\u0022, [\u0027Value: \u0027, this.value]); \r\n }\r\n})\r\n\r\n\r\nnew Vue({\r\n el: \u0022#app\u0022,\r\n data() {\r\n return {\r\n clickCount: 0,\r\n step: 0,\r\n width: 0,\r\n interval: undefined,\r\n maxSteps: 2,\r\n maxWidth: 100,\r\n minWidth: 0,\r\n dir: \u0022increase\u0022,\r\n firstName: \u0022Hello\u0022,\r\n lastName: \u0022World\u0022\r\n };\r\n },\r\n mounted() {\r\n this.interval = window.setInterval(this.benchmark, 10)\r\n },\r\n methods: {\r\n onClick() {\r\n this.clickCount \u002B= 1;\r\n },\r\n increaseWidth: function() {\r\n this.width = this.width \u002B 1;\r\n },\r\n decreaseWidth: function() {\r\n this.width = this.width - 1;\r\n },\r\n benchmark: function() {\r\n if (this.step === this.maxSteps) {\r\n window.clearInterval(this.interval);\r\n return;\r\n }\r\n if (this.width === this.maxWidth) {\r\n this.dir = \u0022decrease\u0022;\r\n this.step\u002B\u002B;\r\n } else if (this.width === this.minWidth) {\r\n this.dir = \u0022increase\u0022;\r\n }\r\n\r\n if (this.dir === \u0022increase\u0022) {\r\n this.increaseWidth();\r\n } else {\r\n this.decreaseWidth();\r\n }\r\n }\r\n },\r\n render(createElement) {\r\n const button = createElement(\r\n \u0022button\u0022,\r\n {\r\n on: {\r\n click: this.onClick\r\n }\r\n },\r\n \u0022Click me\u0022\r\n );\r\n\r\n const counter = createElement(\u0022span\u0022, [\r\n \u0022Number of clicks:\u0022,\r\n this.clickCount\r\n ]);\r\n \r\n const firstName = createElement(\u0022span\u0022, [\u0027Value: \u0027, this.firstName]);\r\n \r\n if (this.width % 20 === 0){\r\n console.log(\u0060rendered ${this.width}\u0060)\r\n }\r\n\r\n return createElement(\r\n \u0022div\u0022,\r\n { style: { \u0022background-color\u0022: \u0022red\u0022, width: \u0060${this.width}px\u0060 } },\r\n [firstName]\r\n );\r\n }\r\n});\r\n","IsDeferred":false},{"Name":"With static value [component]","Code":"const name = Vue.component(\u0027str-component\u0027, {\r\n props: [\u0027value\u0027],\r\n render(createElement){\r\n console.log(\u0060Value: ${this.value} rendered\u0060)\r\n return createElement(\u0022span\u0022, [\u0027Value: \u0027, this.value]); \r\n }\r\n})\r\n\r\n\r\nnew Vue({\r\n el: \u0022#app\u0022,\r\n data() {\r\n return {\r\n clickCount: 0,\r\n step: 0,\r\n width: 0,\r\n interval: undefined,\r\n maxSteps: 2,\r\n maxWidth: 100,\r\n minWidth: 0,\r\n dir: \u0022increase\u0022,\r\n firstName: \u0022Hello\u0022,\r\n lastName: \u0022World\u0022\r\n };\r\n },\r\n mounted() {\r\n this.interval = window.setInterval(this.benchmark, 10)\r\n },\r\n methods: {\r\n onClick() {\r\n this.clickCount \u002B= 1;\r\n },\r\n increaseWidth: function() {\r\n this.width = this.width \u002B 1;\r\n },\r\n decreaseWidth: function() {\r\n this.width = this.width - 1;\r\n },\r\n benchmark: function() {\r\n if (this.step === this.maxSteps) {\r\n window.clearInterval(this.interval);\r\n return;\r\n }\r\n if (this.width === this.maxWidth) {\r\n this.dir = \u0022decrease\u0022;\r\n this.step\u002B\u002B;\r\n } else if (this.width === this.minWidth) {\r\n this.dir = \u0022increase\u0022;\r\n }\r\n\r\n if (this.dir === \u0022increase\u0022) {\r\n this.increaseWidth();\r\n } else {\r\n this.decreaseWidth();\r\n }\r\n }\r\n },\r\n render(createElement) {\r\n const button = createElement(\r\n \u0022button\u0022,\r\n {\r\n on: {\r\n click: this.onClick\r\n }\r\n },\r\n \u0022Click me\u0022\r\n );\r\n\r\n const counter = createElement(\u0022span\u0022, [\r\n \u0022Number of clicks:\u0022,\r\n this.clickCount\r\n ]);\r\n \r\n const firstName = createElement(name, {props: {value: \u0027Hello!\u0027}});\r\n \r\n if (this.width % 20 === 0){\r\n console.log(\u0060rendered ${this.width}\u0060)\r\n }\r\n\r\n return createElement(\r\n \u0022div\u0022,\r\n { style: { \u0022background-color\u0022: \u0022red\u0022, width: \u0060${this.width}px\u0060 } },\r\n [firstName]\r\n );\r\n }\r\n});\r\n","IsDeferred":false},{"Name":"With static value [element]","Code":"const name = Vue.component(\u0027str-component\u0027, {\r\n props: [\u0027value\u0027],\r\n render(createElement){\r\n console.log(\u0060Value: ${this.value} rendered\u0060)\r\n return createElement(\u0022span\u0022, [\u0027Value: \u0027, this.value]); \r\n }\r\n})\r\n\r\n\r\nnew Vue({\r\n el: \u0022#app\u0022,\r\n data() {\r\n return {\r\n clickCount: 0,\r\n step: 0,\r\n width: 0,\r\n interval: undefined,\r\n maxSteps: 2,\r\n maxWidth: 100,\r\n minWidth: 0,\r\n dir: \u0022increase\u0022,\r\n firstName: \u0022Hello\u0022,\r\n lastName: \u0022World\u0022\r\n };\r\n },\r\n mounted() {\r\n this.interval = window.setInterval(this.benchmark, 10)\r\n },\r\n methods: {\r\n onClick() {\r\n this.clickCount \u002B= 1;\r\n },\r\n increaseWidth: function() {\r\n this.width = this.width \u002B 1;\r\n },\r\n decreaseWidth: function() {\r\n this.width = this.width - 1;\r\n },\r\n benchmark: function() {\r\n if (this.step === this.maxSteps) {\r\n window.clearInterval(this.interval);\r\n return;\r\n }\r\n if (this.width === this.maxWidth) {\r\n this.dir = \u0022decrease\u0022;\r\n this.step\u002B\u002B;\r\n } else if (this.width === this.minWidth) {\r\n this.dir = \u0022increase\u0022;\r\n }\r\n\r\n if (this.dir === \u0022increase\u0022) {\r\n this.increaseWidth();\r\n } else {\r\n this.decreaseWidth();\r\n }\r\n }\r\n },\r\n render(createElement) {\r\n const button = createElement(\r\n \u0022button\u0022,\r\n {\r\n on: {\r\n click: this.onClick\r\n }\r\n },\r\n \u0022Click me\u0022\r\n );\r\n\r\n const counter = createElement(\u0022span\u0022, [\r\n \u0022Number of clicks:\u0022,\r\n this.clickCount\r\n ]);\r\n \r\n const firstName = createElement(\u0022span\u0022, [\u0027Value:\u0027, \u0027Hello\u0027]);\r\n \r\n if (this.width % 20 === 0){\r\n console.log(\u0060rendered ${this.width}\u0060)\r\n }\r\n\r\n return createElement(\r\n \u0022div\u0022,\r\n { style: { \u0022background-color\u0022: \u0022red\u0022, width: \u0060${this.width}px\u0060 } },\r\n [firstName]\r\n );\r\n }\r\n});\r\n","IsDeferred":false}]}