Merge branch 'krausest:master' into master

Author: pakastin

.gitignore

@@ -42,6 +42,7 @@ angular*/app/app.js.map
 angular*/src/app.ngsummary.json
 tests/results/completed/
 target/
+webdriver-ts/chrome_profile
 webdriver-ts/results/
 webdriver-ts/traces/
 webdriver-ts/results*/
@@ -83,3 +84,6 @@ Cargo.lock
 *~
 frameworks/keyed/doohtml/js/doo.html.min.js.LICENSE.txt
 frameworks/non-keyed/doohtml/js/doo.html.min.js.LICENSE.txt
+
+# chrome for testing
+chrome-mac-arm64-*

README.md

@@ -1,4 +1,3 @@
-
 # js-framework-benchmark
 
 This is a simple benchmark for several javascript frameworks. The benchmarks creates a large table with randomized entries and measures the time for various operations including rendering duration.
@@ -58,7 +57,7 @@ Some frameworks like React, Vue.js or Angular, allow you to create a 1:1 relatio
 
 The other mode is “non-keyed” and this is what e.g. vue.js uses by default for lists. In this mode, a change to the data items can modify DOM nodes that were associated with other data before. This can be more performant, since costly DOM operations can be avoided (e.g. first removing old nodes and then adding new nodes) and the existing DOM nodes are updated to display the new data. For React and Angular, using the item index as the key uses “non-keyed” mode for those frameworks.
 
-Depending on your requirements, the “non-keyed” mode can be a performance gain or can cause severe problems, so one must carefully choose the mode and check that the framework supports that mode.
+Depending on your requirements, the “non-keyed” mode can be a performance gain or can cause severe problems, so one must carefully choose the mode and check that the framework supports that mode.
 
 Read more here: [https://www.stefankrause.net/wp/?p=342](https://www.stefankrause.net/wp/?p=342)
 

broken-frameworks/keyed/mikado/.gitignore

@@ -1,5 +1,5 @@
 # stemjs-demo
-This is a demo project to learn StemJS https:/stemjs.org
+This is a demo project to learn StemJS https://stemjs.org
 `Node` and `npm` need to be installed to be able to build this project.
 In order to compile the source, you need to have `Rollup` and `Babel` installed.
 

broken-frameworks/keyed/mikado/package.json

@@ -1,3 +1,4 @@
+// @ts-check
 import { program } from "commander";
 
 import {
@@ -6,43 +7,67 @@ import {
   configureStyles,
   copyProjectToDist,
   createFrameworkZipArchive,
-  updateLockfilesOfAllFrameworks,
+  updateFrameworkLockfiles,
+  rebuildAllFrameworks,
+  rebuildSingleFramework,
 } from "./cli/index.js";
 
-program.command("zip").action(createFrameworkZipArchive);
+program.command("zip").description("Create a zip archive of frameworks").action(createFrameworkZipArchive);
 
-program.command("copy").action(copyProjectToDist);
+program.command("copy").description("Copy project to dist directory").action(copyProjectToDist);
 
 program
   .command("check-obsolete")
+  .description("Check for obsolete frameworks in the frameworks directory")
   .option("--debug [boolean]", "", false)
   .action((options) => {
     checkObsoleteFrameworks(options);
   });
 
 program
   .command("cleanup")
+  .description(
+    "Clean all framework directories of package-lock.json, yarn-lock and the elm-stuff, node-modules, bower-components and dist directories"
+  )
   .option("--frameworks-dir-path [string]", "", "frameworks")
-  .option("--frameworks-types [Array<string>]", "", ["keyed", "non-keyed"])
+  .option("--frameworks-types [types...]", "", ["keyed", "non-keyed"])
   .action((options) => {
     cleanFrameworkDirectories(options);
   });
 
 program
   .command("update-lockfiles")
+  .description("Update lockfiles for all frameworks in the frameworks directory")
   .option("--frameworks-dir-path [string]", "", "frameworks")
-  .option("--frameworks-types [Array<string>]", "", ["keyed", "non-keyed"])
-  .option("--latest-lockfile-version [number]", "", 3)
+  .option("--frameworks-types [types...]", "", ["keyed", "non-keyed"])
+  .option("--latest-lockfile-version [number]", "", "3")
   .action((options) => {
-    updateLockfilesOfAllFrameworks(options);
+    updateFrameworkLockfiles(options);
   });
 
 program
   .command("configure-styles")
+  .description("Configure CSS styles for all frameworks in the frameworks directory")
   .option("--bootstrap [boolean]", "", false)
   .option("--minimal [boolean]", "", false)
   .action(async (options) => {
     await configureStyles(options);
   });
 
+program
+  .command("rebuild-all")
+  .option("--ci [boolean]", "", false)
+  .option("--restart-with-framework [string]", "", "")
+  .action((options) => {
+    rebuildAllFrameworks({ restartWithFramework: options.restartWithFramework, useCi: options.ci });
+  });
+
+program
+  .command("rebuild-single")
+  .option("-f, --frameworks [frameworks...]", "", [])
+  .option("--ci [boolean]", "", false)
+  .action((options) => {
+    rebuildSingleFramework(options);
+  });
+
 program.parse();

broken-frameworks/keyed/mikado/src/main.js

@@ -1,9 +1,10 @@
+// @ts-check
 import JSON5 from "json5";
 import { execSync } from "node:child_process";
 import * as fs from "node:fs";
 import path from "node:path";
 
-import { getFrameworks } from "../utils/frameworks/index.js";
+import { getFrameworks } from "./helpers/frameworks.js";
 
 /**
  * @typedef {Object} Framework
@@ -61,7 +62,7 @@ function maybeObsolete(packageName) {
 
     const modifiedDate = new Date(timeData.modified);
     const isObsolete = modifiedDate < obsoleteDate;
-    const formattedDate = modifiedDate.toISOString().substring(0, 10);
+    const formattedDate = modifiedDate.toISOString().slice(0, 10);
 
     return { isObsolete, lastUpdate: formattedDate, packageName };
   } catch (error) {
@@ -81,8 +82,10 @@ const manualChecks = [];
  * @param {Object} options
  * @param {boolean} options.debug
  */
-function checkObsoleteFrameworks(options) {
-  const DEBUG = options.debug ?? false;
+export function checkObsoleteFrameworks({ debug }) {
+  console.log("Check obsolete frameworks", "debug", debug);
+
+  const DEBUG = debug;
 
   for (const { name, type } of frameworks) {
     const frameworkPath = path.join("frameworks", type, name);
@@ -93,7 +96,7 @@ function checkObsoleteFrameworks(options) {
       continue;
     }
 
-    const packageJSON = JSON.parse(fs.readFileSync(packageJSONPath, "utf-8"));
+    const packageJSON = JSON.parse(fs.readFileSync(packageJSONPath, "utf8"));
     const mainPackages = packageJSON?.["js-framework-benchmark"]?.frameworkVersionFromPackage;
 
     if (!mainPackages) {
@@ -106,7 +109,7 @@ function checkObsoleteFrameworks(options) {
     }
 
     const packages = mainPackages.split(":");
-    const isPackageObsolete = packages.map(maybeObsolete);
+    const isPackageObsolete = packages.map((element) => maybeObsolete(element));
 
     if (DEBUG) {
       console.log(`Results for ${type}/${name} ${isPackageObsolete}`);
@@ -132,5 +135,3 @@ function checkObsoleteFrameworks(options) {
   if (manualChecks.length > 0)
     console.warn("\nThe following frameworks must be checked manually\n" + manualChecks.join("\n"));
 }
-
-export { checkObsoleteFrameworks };

broken-frameworks/keyed/mikado/src/template/app.html

@@ -1,3 +1,4 @@
+// @ts-check
 import * as fs from "node:fs";
 import path from "node:path";
 
@@ -22,8 +23,14 @@ function deleteFrameworkFiles(frameworkPath, filesToDelete) {
  * @param {string} options.frameworksDirPath
  * @param {Array<string>} options.frameworksTypes
  */
-function cleanFrameworkDirectories(options) {
-  const { frameworksDirPath, frameworksTypes } = options;
+export function cleanFrameworkDirectories({ frameworksDirPath, frameworksTypes }) {
+  console.log(
+    "Clean framework directories",
+    "frameworksDirPath",
+    frameworksDirPath,
+    "frameworksTypes",
+    frameworksTypes
+  );
 
   for (const frameworkType of frameworksTypes) {
     const frameworkDir = path.resolve(frameworksDirPath, frameworkType);
@@ -36,5 +43,3 @@ function cleanFrameworkDirectories(options) {
     }
   }
 }
-
-export { cleanFrameworkDirectories };