[DO-NOT-MERGE] Windowed react-todomvc

.gitignore

@@ -25,6 +25,8 @@
 /resources/todomvc/architecture-examples/vue-complex/node_modules/
 /resources/todomvc/architecture-examples/lit-complex/node_modules/
 
+/resources/todomvc/architecture-examples/react-window/node_modules/
+
 /resources/todomvc/vanilla-examples/javascript-es5/node_modules/
 /resources/todomvc/vanilla-examples/javascript-es5-complex/node_modules/
 /resources/todomvc/vanilla-examples/javascript-es6/node_modules/

resources/benchmark-runner.mjs

@@ -47,6 +47,19 @@ class Page {
         });
     }
 
+    async WaitForElementInChildWindow(selector) {
+        return new Promise((resolve) => {
+            const resolveIfReady = () => {
+                const element = this.querySelectorInChildWindow(selector);
+                let callback = resolveIfReady;
+                if (element)
+                    callback = () => resolve(element);
+                window.requestAnimationFrame(callback);
+            };
+            resolveIfReady();
+        });
+    }
+
     /**
      * Returns the first element within the document that matches the specified selector, or group of selectors.
      * If no matches are found, null is returned.
@@ -71,6 +84,19 @@ class Page {
         return this._wrapElement(element);
     }
 
+    querySelectorInChildWindow(selector) {
+        const element = this._frame.contentWindow.globalThis.childWindow.document.querySelector(selector);
+
+        if (element === null)
+            return null;
+        return this._wrapElement(element);
+    }
+
+    closeChildWindow() {
+        if (this._frame.contentWindow.globalThis.childWindow)
+            this._frame.contentWindow.globalThis.childWindow.close();
+    }
+
     /**
      * Returns all elements within the document that matches the specified selector, or group of selectors.
      * If no matches are found, null is returned.
@@ -94,6 +120,14 @@ class Page {
         return elements;
     }
 
+    querySelectorAllInChildWindow(selector) {
+        const elements = Array.from(this._frame.contentWindow.globalThis.childWindow.document.querySelectorAll(selector));
+
+        for (let i = 0; i < elements.length; i++)
+            elements[i] = this._wrapElement(elements[i]);
+        return elements;
+    }
+
     getElementById(id) {
         const element = this._frame.contentDocument.getElementById(id);
         if (element === null)
@@ -322,6 +356,8 @@ export class BenchmarkRunner {
 
     _removeFrame() {
         if (this._frame) {
+            if (this._frame.contentWindow.globalThis.childWindow)
+                this._frame.contentWindow.globalThis.childWindow.close();
             this._frame.parentNode.removeChild(this._frame);
             this._frame = null;
         }

resources/tests.mjs

@@ -339,6 +339,37 @@ Suites.push({
     ],
 });
 
+Suites.push({
+    name: "TodoMVC-React-Window",
+    url: "resources/todomvc/architecture-examples/react-window/dist/index.html#/home",
+    tags: ["todomvc"],
+    disabled: true,
+    async prepare(page) {
+        const element = await page.WaitForElementInChildWindow(".new-todo");
+        element.focus();
+    },
+    tests: [
+        new BenchmarkTestStep(`Adding${numberOfItemsToAdd}Items`, (page) => {
+            const newTodo = page.querySelectorInChildWindow(".new-todo");
+            for (let i = 0; i < numberOfItemsToAdd; i++) {
+                newTodo.setValue(getTodoText(defaultLanguage, i));
+                newTodo.dispatchEvent("input");
+                newTodo.enter("keydown");
+            }
+        }),
+        new BenchmarkTestStep("CompletingAllItems", (page) => {
+            const checkboxes = page.querySelectorAllInChildWindow(".toggle");
+            for (let i = 0; i < numberOfItemsToAdd; i++)
+                checkboxes[i].click();
+        }),
+        new BenchmarkTestStep("DeletingAllItems", (page) => {
+            const deleteButtons = page.querySelectorAllInChildWindow(".destroy");
+            for (let i = numberOfItemsToAdd - 1; i >= 0; i--)
+                deleteButtons[i].click();
+        }),
+    ],
+});
+
 Suites.push({
     name: "TodoMVC-React-Complex-DOM",
     url: "resources/todomvc/architecture-examples/react-complex/dist/index.html#/home",

resources/todomvc/architecture-examples/react-window/.eslintrc

@@ -0,0 +1,13 @@
+{
+    "extends": ["eslint:recommended", "plugin:react/recommended"],
+    "settings": {
+        "react": {
+            "version": "17.0.2"
+        }
+    },
+    "rules": {
+        "no-extra-parens": 0,
+        "react/prop-types": 0,
+        "react/react-in-jsx-scope": 0
+    }
+}

resources/todomvc/architecture-examples/react-window/README.md

@@ -0,0 +1,40 @@
+# Speedometer 3.0: TodoMVC: React
+
+## Description
+
+This application uses React 17.0.2 to implement a todo application.
+
+-   [React](https://reactjs.org/) is a JavaScript library for creating user interfaces.
+
+## Implementation details
+
+React:\
+Model: todoReducer (reducer.js)\
+View: React ui components\
+controller: App component + useReducer hook
+
+MVC:\
+Model: maintains the data and behavior of an application\
+View: displays the model in the ui\
+Controller: serves as an interface between view & model components
+
+## Built steps
+
+To build the static files, this application utilizes webpack. It minifies and optimizes output files and copies all necessary files to a `dist` folder.
+
+## Requirements
+
+The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.
+
+```
+* Node (min version: 18.13.0)
+* NPM (min version: 8.19.3)
+```
+
+## Local preview
+
+```
+terminal:
+1. npm install
+2. npm run start
+```

resources/todomvc/architecture-examples/react-window/dist/app.bundle.js.LICENSE.txt

@@ -0,0 +1,69 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/**
+ * @remix-run/router v1.3.3
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.8.2
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */