update dependencies, fix #1201

push_results.sh

@@ -1,8 +1,10 @@
 cp webdriver-ts-results/table.html ../krausest.github.io/js-framework-benchmark/current.html
 cp webdriver-ts-results/BoxPlotTable*.js ../krausest.github.io/js-framework-benchmark/
+cp webdriver-ts-results/plotly*.js ../krausest.github.io/js-framework-benchmark/
 cd ../krausest.github.io
 git add js-framework-benchmark/current.html
 git add js-framework-benchmark/BoxPlotTable*.js
+git add js-framework-benchmark/plotly*.js
 git commit -m "update results"
 git push
 cd ../js-framework-benchmark/webdriver-ts

webdriver-ts-results/package.json

@@ -3,27 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^14.14.2",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
-    "jstat": "^1.9.5",
-    "plotly.js-cartesian-dist": "1.55.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-redux": "^7.2.1",
-    "redux": "^4.0.5"
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.4.0",
+    "@types/node": "^18.14.6",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "jstat": "^1.9.6",
+    "plotly.js-cartesian-dist": "2.18.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
+    "redux": "^4.2.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint './src/**/*.{ts,tsx}'",
-    "build-prod": "rimraf dist && cross-env NODE_ENV=\"production\" webpack --env prod -c webpack.config.js && rimraf table.html && rimraf \"BoxPlotTable*.js\" && cpx dist/table.html . && cpx \"dist/BoxPlotTable*.js\" ."
+    "build-prod": "rimraf dist && cross-env NODE_ENV=\"production\" webpack --env prod -c webpack.config.js && rimraf table.html && rimraf \"BoxPlotTable*.js\" && cpx dist/table.html . && cpx \"dist/BoxPlotTable*.js\" . && cpx \"dist/plotly*.js\" ."
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -41,17 +41,17 @@
     ]
   },
   "devDependencies": {
-    "@types/react-redux": "^7.1.9",
+    "@types/react-redux": "^7.1.25",
     "cpx": "1.5.0",
-    "cross-env": "7.0.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "html-webpack-plugin": "^4.5.0",
+    "cross-env": "7.0.3",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "html-webpack-plugin": "^5.5.0",
     "inline-chunk-html-plugin": "^1.1.1",
-    "react-scripts": "^4.0.0",
-    "rimraf": "^3.0.2",
-    "ts-loader": "^8.0.6",
-    "typescript": "^4.0.3",
-    "webpack-bundle-analyzer": "^3.9.0",
-    "webpack-cli": "^4.1.0"
+    "react-scripts": "^5.0.1",
+    "rimraf": "^4.3.1",
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.5",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^5.0.1"
   }
 }

webdriver-ts-results/src/App.tsx

@@ -15,7 +15,7 @@ const App = (): JSX.Element => {
     return (
       <div>
         {disclaimer}
-        <p>The benchmark was run on a MacBook Pro 14 (32 GB RAM, 8/14 Cores, OSX 13.2), Chrome 110.0.5481.77 (arm64))
+        <p>The benchmark was run on a MacBook Pro 14 (32 GB RAM, 8/14 Cores, OSX 13.2.1), Chrome 111.0.5563.64 (arm64))
             using the puppeteer benchmark driver with reduced tracing.
         </p>
          <SelectionBar/>

webdriver-ts-results/src/index.tsx

@@ -1,16 +1,20 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import App from './App';
 import {Provider} from 'react-redux'
 import { createStore } from 'redux'
 import { reducer } from './reducer';
 
 const store = createStore(reducer)
 
-ReactDOM.render(
+import { createRoot } from 'react-dom/client';
+
+window.onload = () => {
+
+  const root = createRoot(document.getElementById('root')!);
+
+  root.render(
     <Provider store={store}>
       <App/>
-  </Provider>,
-  document.getElementById('root')
+  </Provider>
 );
-
+}

webdriver-ts-results/webpack.config.js

@@ -3,7 +3,7 @@ var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlug
 var InlineChunkHtmlPlugin = require('inline-chunk-html-plugin');
 
 var path = require('path')
-var cache = {};
+var cache = true;
 var loaders = [
 	{
 		test: /\.tsx$|\.ts$/,
@@ -15,27 +15,41 @@ var loaders = [
 	},
 	{
 		test: /\.css$/,
-		loader: 'style-loader!css-loader'
+    use: [{ loader: "style-loader" }, { loader: "css-loader" }],
 	}
 ];
 var extensions = [
 	'.ts', '.tsx', '.ts', '.js'
 ];
 
 module.exports = [{
-	cache: cache,
+	cache: true,
 	module: {
 		rules: loaders
 	},
 	entry: {
-		main: './src/index.tsx'
-    },
+		main: './src/index.tsx',
+  },
   output: {
+    publicPath: '',
     filename: '[name].[contenthash].js',
   },
   optimization: {
     splitChunks: {
-      chunks: 'initial',
+      chunks: 'all',
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendor',
+          chunks: 'all',
+        },      
+        plotly: {
+          test: /[\\/]node_modules[\\/]plotly.*[\\/]/,
+          name: 'plotly',
+          chunks: 'all',
+          priority: 20
+        },      
+      }
     }
   },
 	resolve: {
@@ -54,9 +68,8 @@ module.exports = [{
         new HtmlWebpackPlugin({
             template: path.join(__dirname, 'public/index.html'),
             filename: 'table.html',
-            inject: 'body',
-            inlineSource: '.js$' // embed all javascript and css inline
+            inject: true,
 		}),
-    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/main/])
-      ]  
+    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/main|vendor|BoxPlotTable/])
+    ]  
 }];

webdriver-ts/package.json

@@ -3,18 +3,17 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
-  "type": "commonjs",
+  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint . --ext .ts",
     "tsbench": "cross-env LANG=\"en_US.UTF-8\" ts-node --files src/benchmarkRunner.ts",
     "bench": "cross-env LANG=\"en_US.UTF-8\" node dist/benchmarkRunner.js",
     "checkCSP": "cross-env LANG=\"en_US.UTF-8\" node dist/isCSPCompliant.js",
     "compile": "tsc",
-    "results": "ts-node --files src/createResultJS.ts && cd .. && cd webdriver-ts-results && npm run build-prod",
-    "index": "ts-node --files src/createIndex.ts",
-    "isKeyed": "cross-env LANG=\"en_US.UTF-8\" ts-node  --files  src/isKeyed.ts",
-    "parse": "ts-node --files src/parseTrace.ts"
+    "results": "node dist/createResultJS.js && cd .. && cd webdriver-ts-results && npm run build-prod",
+    "index": "node dist/createIndex.js",
+    "isKeyed": "cross-env LANG=\"en_US.UTF-8\" node dist/isKeyed.js"
   },
   "author": "",
   "license": "Apache-2.0",
@@ -30,7 +29,6 @@
     "@typescript-eslint/parser": "5.54.0",
     "dockerode": "3.3.4",
     "eslint": "8.35.0",
-    "ts-node": "10.9.1",
     "typescript": "4.9.5"
   },
   "dependencies": {
@@ -41,7 +39,6 @@
     "jstat": "1.9.6",
     "lighthouse": "10.0.2",
     "lodash": "4.17.21",
-    "marky": "1.2.5",
     "npm-check-updates": "16.7.10",
     "playwright": "1.31.2",
     "playwright-firefox": "1.31.2",

webdriver-ts/src/benchmarkRunner.ts

@@ -1,10 +1,10 @@
 import { fork } from "child_process";
 import * as fs from "fs";
 import yargs from 'yargs';
-import { BenchmarkInfo, benchmarkInfos, BenchmarkType, CPUBenchmarkInfo, MemBenchmarkInfo, StartupBenchmarkInfo } from "./benchmarksCommon";
-import { StartupBenchmarkResult } from "./benchmarksLighthouse";
-import { BenchmarkOptions, BENCHMARK_RUNNER, config, ErrorAndWarning, FrameworkData, initializeFrameworks } from "./common";
-import { writeResults } from "./writeResults";
+import { BenchmarkInfo, benchmarkInfos, BenchmarkType, CPUBenchmarkInfo, MemBenchmarkInfo, StartupBenchmarkInfo } from "./benchmarksCommon.js";
+import { StartupBenchmarkResult } from "./benchmarksLighthouse.js";
+import { BenchmarkOptions, BENCHMARK_RUNNER, config, ErrorAndWarning, FrameworkData, initializeFrameworks } from "./common.js";
+import { writeResults } from "./writeResults.js";
 
 function forkAndCallBenchmark(
   framework: FrameworkData,
@@ -308,7 +308,7 @@ async function main() {
   if (!fs.existsSync(config.TRACES_DIRECTORY)) fs.mkdirSync(config.TRACES_DIRECTORY);
 
   if (args.help) {
-    yargs.showHelp();
+    // yargs.showHelp();
   } else {
     return runBench(runFrameworks, runBenchmarks);
   }

webdriver-ts/src/benchmarksCommon.ts

@@ -1,4 +1,4 @@
-import { FrameworkData, config } from "./common";
+import { FrameworkData, config } from "./common.js";
 
 export enum BenchmarkType {
   CPU,

webdriver-ts/src/benchmarksLighthouse.ts

@@ -1,5 +1,5 @@
-import * as benchmarksCommon from "./benchmarksCommon";
-import { BenchmarkImpl, BenchmarkType, StartupBenchmarkInfo } from "./benchmarksCommon";
+import * as benchmarksCommon from "./benchmarksCommon.js";
+import { BenchmarkImpl, BenchmarkType, StartupBenchmarkInfo } from "./benchmarksCommon.js";
 
 export interface StartupBenchmarkResult extends BenchmarkImpl {
   benchmark: StartupBenchmarkInfo;

webdriver-ts/src/benchmarksPlaywright.ts

@@ -1,10 +1,10 @@
 // import { testTextContains, testTextContainsJS, testTextNotContained, testClassContains, testElementLocatedByXpath, testElementNotLocatedByXPath, testElementLocatedById, clickElementById, clickElementByXPath, getTextByXPath } from './webdriverAccess'
 
 import { Browser, Page } from "playwright-core";
-import * as benchmarksCommon from "./benchmarksCommon";
-import { BenchmarkType } from "./benchmarksCommon";
-import { config, FrameworkData } from "./common";
-import { checkElementContainsText, checkElementExists, checkElementHasClass, checkElementNotExists, clickElement } from "./playwrightAccess";
+import * as benchmarksCommon from "./benchmarksCommon.js";
+import { BenchmarkType } from "./benchmarksCommon.js";
+import { config, FrameworkData } from "./common.js";
+import { checkElementContainsText, checkElementExists, checkElementHasClass, checkElementNotExists, clickElement } from "./playwrightAccess.js";
 
 
 export abstract class CPUBenchmarkPlaywright implements benchmarksCommon.BenchmarkImpl {

webdriver-ts/src/benchmarksPuppeteer.ts

@@ -1,10 +1,10 @@
 // import { testTextContains, testTextContainsJS, testTextNotContained, testClassContains, testElementLocatedByXpath, testElementNotLocatedByXPath, testElementLocatedById, clickElementById, clickElementByXPath, getTextByXPath } from './webdriverAccess'
 
 import { Page } from "puppeteer-core";
-import * as benchmarksCommon from "./benchmarksCommon";
-import { BenchmarkType } from "./benchmarksCommon";
-import { config, FrameworkData } from "./common";
-import { checkElementContainsText, checkElementExists, checkElementHasClass, checkElementNotExists, clickElement } from "./puppeteerAccess";
+import * as benchmarksCommon from "./benchmarksCommon.js";
+import { BenchmarkType } from "./benchmarksCommon.js";
+import { config, FrameworkData } from "./common.js";
+import { checkElementContainsText, checkElementExists, checkElementHasClass, checkElementNotExists, clickElement } from "./puppeteerAccess.js";
 
 
 export abstract class CPUBenchmarkPuppeteer implements benchmarksCommon.BenchmarkImpl {

webdriver-ts/src/benchmarksWebdriver.ts

@@ -1,13 +1,13 @@
 import { WebDriver } from "selenium-webdriver";
-import * as benchmarksCommon from "./benchmarksCommon";
-import { BenchmarkType } from "./benchmarksCommon";
-import { config, FrameworkData } from "./common";
+import * as benchmarksCommon from "./benchmarksCommon.js";
+import { BenchmarkType } from "./benchmarksCommon.js";
+import { config, FrameworkData } from "./common.js";
 import {
   clickElementById,
   clickElementByXPath,
   getTextByXPath, testClassContains, testElementLocatedById, testElementLocatedByXpath,
   testElementNotLocatedByXPath, testTextContains
-} from "./webdriverAccess";
+} from "./webdriverAccess.js";
 
 
 const SHORT_TIMEOUT = 20 * 1000;

webdriver-ts/src/benchmarksWebdriverAfterframe.ts

@@ -1,14 +1,14 @@
 import { By, WebDriver, WebElement } from "selenium-webdriver";
-import * as benchmarksCommon from "./benchmarksCommon";
-import { BenchmarkType } from "./benchmarksCommon";
-import { config, FrameworkData } from "./common";
+import * as benchmarksCommon from "./benchmarksCommon.js";
+import { BenchmarkType } from "./benchmarksCommon.js";
+import { config, FrameworkData } from "./common.js";
 import {
   clickElementById,
   clickElementByXPath,
   findByXPath,
   getTextByXPath, mainRoot, retry, testClassContains, testElementLocatedById, testElementLocatedByXpath,
   testElementNotLocatedByXPath, testTextContains
-} from "./webdriverAccess";
+} from "./webdriverAccess.js";
 
 
 const SHORT_TIMEOUT = 20 * 1000;

webdriver-ts/src/benchmarksWebdriverCDP.ts

@@ -1,13 +1,13 @@
 import { WebDriver } from "selenium-webdriver";
-import * as benchmarksCommon from "./benchmarksCommon";
-import { BenchmarkType } from "./benchmarksCommon";
-import { config, FrameworkData } from "./common";
+import * as benchmarksCommon from "./benchmarksCommon.js";
+import { BenchmarkType } from "./benchmarksCommon.js";
+import { config, FrameworkData } from "./common.js";
 import {
   clickElementById,
   clickElementByXPath,
   getTextByXPath, testClassContains, testElementLocatedById, testElementLocatedByXpath,
   testElementNotLocatedByXPath, testTextContains
-} from "./webdriverCDPAccess";
+} from "./webdriverCDPAccess.js";
 
 
 const SHORT_TIMEOUT = 20 * 1000;

webdriver-ts/src/common.ts

@@ -1,8 +1,5 @@
-import * as fs from "fs";
-import * as path from "path";
-import * as axios from "axios";
-import { StartupBenchmarkResult } from "./benchmarksLighthouse";
-import { string } from "yargs";
+import axios from "axios";
+import { StartupBenchmarkResult } from "./benchmarksLighthouse.js";
 
 
 export interface JSONResult {

webdriver-ts/src/createIndex.ts

@@ -1,5 +1,5 @@
 import * as fs from "fs";
-import { JSONResult, config, initializeFrameworks } from "./common";
+import { JSONResult, config, initializeFrameworks } from "./common.js";
 import * as dot from "dot";
 
 async function main() {

webdriver-ts/src/createResultJS.ts

@@ -1,8 +1,8 @@
 import * as fs from "fs";
 import yargs from "yargs";
-import { BenchmarkInfo, benchmarkInfos, BenchmarkType, fileName } from "./benchmarksCommon";
-import { subbenchmarks } from "./benchmarksLighthouse";
-import { config, initializeFrameworks, JSONResult } from "./common";
+import { BenchmarkInfo, benchmarkInfos, BenchmarkType, fileName } from "./benchmarksCommon.js";
+import { subbenchmarks } from "./benchmarksLighthouse.js";
+import { config, initializeFrameworks, JSONResult } from "./common.js";
 
 let args: any = yargs(process.argv)
   .string("url").default("url", config.HOST).argv;