Merge branch 'master' into reduce-bundle

Author: twharmon

README.md

@@ -5,6 +5,14 @@ This is a simple benchmark for several javascript frameworks. The benchmarks cre
 
 ![Screenshot](images/screenshot.png?raw=true "Screenshot")
 
+## Security advice
+
+Currently there are 186 implemenations in this repository. It's of course impossible for me to make a security assessment
+for all those implementations. `npm ci` and `npm install` can execute arbitraty commands, so they should be executed only for packages you trust. Consequently I build on a dedicated virtual private linux server such that I don't have to install the packages for all those implemenations on my laptop. There's a prebuild build.zip for each chrome release you can download such that you can avoid installing the packages from all implementations. 
+(I don't know of any (attempted) case for malicious packages in this repository, so please take it just as a general warning.)
+
+The server implemenation in this repository should only be started on your local machine and access should be restricted to your local machine. I recommend against starting the server such that it can be publically accessed from the internet.
+
 ## About the benchmarks
 
 The following operations are benchmarked for each framework:
@@ -54,9 +62,9 @@ Depending on your requirements, the “non-keyed” mode can be a performance ga
 
 Read more here: [https://www.stefankrause.net/wp/?p=342](https://www.stefankrause.net/wp/?p=342)
 
-# 1 NEW: Run pre-built binaries for all frameworks
+# 1 Run pre-built binaries for all frameworks
 
-There are currently ~60 framework entries in this repository. Installing (and maintaining) those can be challenging, but here are simplified instructions how to get started.
+There are currently 186 implementations in this repository. Installing (and maintaining) those can be challenging, but here are simplified instructions how to get started. See the security advice above to read why that might be a good idea.
 
 ## 1.1 Prerequisites
 
@@ -275,11 +283,12 @@ npm run index
 
 ## 2.7 [Optional] Building and running the benchmarks for all frameworks
 
-This is not for the faint at heart. You can build all frameworks simply by issuing:
+This is not for the faint at heart. **Please read the security advice before running this command.**
+You can build all frameworks by issuing:
 
 ```
 cd ..
-npm run build-prod
+npm run rebuild-all
 ```
 
 After downloading the whole internet it starts building it. Basically there should be no errors during the build, but I can't guarantee that the dependencies won't break. 
@@ -511,6 +520,10 @@ You can set an optional different URL if needed or specify that your DOM uses a
 
 ## 4.4 Submitting your implementation
 
+Please take a look at https://github.com/krausest/js-framework-benchmark/wiki/Process-for-merging-a-pull-request for informations how pull requests are merged.
+
+
+
 Contributions are very welcome. Please use the following rules:
 
 - Name your directory frameworks/[keyed|non-keyed]/[FrameworkName]
@@ -522,7 +535,7 @@ Contributions are very welcome. Please use the following rules:
 - Webdriver-ts must be able to run the perf tests for the contribution. This means that all buttons (like "Create 1,000 rows") must have the correct id e.g. like in vanillajs. Using shadow DOM is a real pain for webdriver. The closer you can get to polymer the higher the chances I can make that contribution work.
 - Don't change the ids in the index.html, since the automated benchmarking relies on those ids.
 - Please push only files in your framework folder (not index.html or results.json)
-- **Please make sure your implementation is validated by the test tool.** cd to webdriver-ts and invoke it with `npm run isKeyed [keyed|non-keyed]/[FrameworkName]`. It'll print an error if your framework behaves other as specified. It'll print a big ERROR explaining if it isn't happy with the implementation. Some common errors include:
+- **Please make sure your implementation is validated by the test tool.** cd to the root directory and perform a check  `npm run rebuild-ci [keyed|non-keyed]/[FrameworkName]`. It'll print an error if your framework doesn't build, the benchmark can't be run or behaves other as specified. It'll print a big ERROR explaining if it isn't happy with the implementation. Some common errors include:
   - Your package.json is missing some required fields
   - Incorrect classification (Keyed/NonKeyed)
   - You have gzipped files in /dist (unfortunately the web server prefers these when they exist)
@@ -551,23 +564,30 @@ Thanks to Baptiste Augrain for making the benchmarks more sophisticated and addi
 
 Frameworks without significant activity on github or npm for more than a year will be removed (_automatic commits like dependabot and minor updates, like docs editions, are ignored_).
 
+## 2023-11-07
+The following frameworks were archived after chrome 119. Their last results are included in [chrome 119 results](https://krausest.github.io/js-framework-benchmark/2023/table_chrome_119.0.6045.105.html).
+- [x] sifrr
+
+
 ## 2023-10-22
 The following frameworks were archived after chrome 118. Their last results are included in [chrome 118 results](https://krausest.github.io/js-framework-benchmark/2023/table_chrome_118.0.5993.70.html).
 - [x] 1more
+- [x] bdc
+- [x] choo
 - [x] domdiff
 - [x] domvm
 - [x] endorphin
 - [x] etch
+- [x] forgo
+- [x] fullweb-helpers
+- [x] fullweb-template
 - [x] heresy
+- [x] hullo
 - [x] lighterhtml
 - [x] neverland
 - [x] resonatejs
 - [x] sledgehammer
 - [x] uhydro
-- [x] fullweb-helpers
-- [x] fullweb-template
-- [x] forgo
-- [x] choo
 
 
 ## 2020-7-9

cli/check-obsolete.js

@@ -20,9 +20,7 @@ const frameworks = getFrameworks();
  */
 function findDuplicateFrameworks(frameworks) {
   const names = frameworks.map((framework) => framework.name); // Creates an array with framework names only
-  const duplicateNames = names.filter(
-    (name, index) => names.indexOf(name) !== index,
-  ); // Filters out repetitive framework names
+  const duplicateNames = names.filter((name, index) => names.indexOf(name) !== index); // Filters out repetitive framework names
 
   return duplicateNames;
 }
@@ -59,11 +57,7 @@ function maybeObsolete(packageName) {
     }
 
     const now = new Date();
-    const obsoleteDate = new Date(
-      now.getFullYear() - 1,
-      now.getMonth(),
-      now.getDay(),
-    );
+    const obsoleteDate = new Date(now.getFullYear() - 1, now.getMonth(), now.getDay());
 
     const modifiedDate = new Date(timeData.modified);
     const isObsolete = modifiedDate < obsoleteDate;
@@ -72,7 +66,7 @@ function maybeObsolete(packageName) {
     return { isObsolete, lastUpdate: formattedDate, packageName };
   } catch (error) {
     console.error(
-      `Failed to execute npm view for ${packageName}. Error Code ${error.status} and message: ${error.message}`,
+      `Failed to execute npm view for ${packageName}. Error Code ${error.status} and message: ${error.message}`
     );
     return { isObsolete: false, lastUpdate: null, packageName };
   }
@@ -95,15 +89,12 @@ function checkObsoleteFrameworks(options) {
     const packageJSONPath = path.join(frameworkPath, "package.json");
 
     if (!fs.existsSync(packageJSONPath)) {
-      missingPackageWarnings.push(
-        `WARN: skipping ${type}/${name} since there's no package.json`,
-      );
+      missingPackageWarnings.push(`WARN: skipping ${type}/${name} since there's no package.json`);
       continue;
     }
 
     const packageJSON = JSON.parse(fs.readFileSync(packageJSONPath, "utf-8"));
-    const mainPackages =
-      packageJSON?.["js-framework-benchmark"]?.frameworkVersionFromPackage;
+    const mainPackages = packageJSON?.["js-framework-benchmark"]?.frameworkVersionFromPackage;
 
     if (!mainPackages) {
       manualChecks.push(`${type}/${name} has no frameworkVersionFromPackage`);
@@ -121,35 +112,25 @@ function checkObsoleteFrameworks(options) {
       console.log(`Results for ${type}/${name} ${isPackageObsolete}`);
     }
 
-    const anyPackageObsolete = isPackageObsolete.some(
-      (packageFramework) => packageFramework.isObsolete,
-    );
+    const anyPackageObsolete = isPackageObsolete.some((packageFramework) => packageFramework.isObsolete);
 
     if (anyPackageObsolete) {
       const formattedPackages = isPackageObsolete
         .map((result) => `${result.packageName}:${result.lastUpdate}`)
         .join(", ");
 
-      console.log(
-        `Last npm update for ${type}/${name} - ${mainPackages} is older than a year: ${formattedPackages}`,
-      );
+      console.log(`Last npm update for ${type}/${name} - ${mainPackages} is older than a year: ${formattedPackages}`);
       continue;
     }
 
     if (DEBUG) {
-      console.log(
-        `Last npm update for ${type}/${name} ${mainPackages} is newer than a year`,
-      );
+      console.log(`Last npm update for ${type}/${name} ${mainPackages} is newer than a year`);
     }
   }
 
-  if (missingPackageWarnings.length > 0)
-    console.warn("\nWarnings:\n" + missingPackageWarnings.join("\n"));
+  if (missingPackageWarnings.length > 0) console.warn("\nWarnings:\n" + missingPackageWarnings.join("\n"));
   if (manualChecks.length > 0)
-    console.warn(
-      "\nThe following frameworks must be checked manually\n" +
-        manualChecks.join("\n"),
-    );
+    console.warn("\nThe following frameworks must be checked manually\n" + manualChecks.join("\n"));
 }
 
 export { checkObsoleteFrameworks };

cli/cleanup.js

@@ -1,14 +1,7 @@
 import * as fs from "node:fs";
 import path from "node:path";
 
-const filesToDelete = [
-  "package-lock.json",
-  "yarn-lock",
-  "dist",
-  "elm-stuff",
-  "bower_components",
-  "node_modules",
-];
+const filesToDelete = ["package-lock.json", "yarn-lock", "dist", "elm-stuff", "bower_components", "node_modules"];
 
 /**
  * Delete specified files in the framework directory

cli/configure-styles.js

@@ -12,10 +12,7 @@ async function copyAndGenerateSharedStyles(sourceCss, mainCss) {
   const sharedStylesContent = `<dom-module id="shared-styles"><template><style>${mainCssContent}</style></template></dom-module>`;
 
   // Write shared-styles.html
-  await fs.promises.writeFile(
-    path.join("polymer-v2.0.0-non-keyed", "src", "shared-styles.html"),
-    sharedStylesContent,
-  );
+  await fs.promises.writeFile(path.join("polymer-v2.0.0-non-keyed", "src", "shared-styles.html"), sharedStylesContent);
 }
 
 /**
@@ -37,13 +34,10 @@ async function configureStyles(options) {
     if (bootstrap) {
       await copyAndGenerateSharedStyles(
         path.join("css", "useOriginalBootstrap.css"),
-        path.join("css", "bootstrap", "dist", "css", "bootstrap.min.css"),
+        path.join("css", "bootstrap", "dist", "css", "bootstrap.min.css")
       );
     } else {
-      await copyAndGenerateSharedStyles(
-        path.join("css", "useMinimalCss.css"),
-        path.join("css", "useMinimalCss.css"),
-      );
+      await copyAndGenerateSharedStyles(path.join("css", "useMinimalCss.css"), path.join("css", "useMinimalCss.css"));
     }
   } catch (error) {
     console.error("An error occurred:", error.message);

cli/copy.js

@@ -17,7 +17,7 @@ function shouldInclude(name) {
     const isTargetWeb = name.includes("/target/web");
 
     console.log(
-      `File: ${name}\nIs Binding Scala: ${isBindingScala}\nIs Target: ${isTarget}\nIs Target Web: ${isTargetWeb}`,
+      `File: ${name}\nIs Binding Scala: ${isBindingScala}\nIs Target: ${isTarget}\nIs Target Web: ${isTargetWeb}`
     );
 
     if (isTarget) {
@@ -72,15 +72,10 @@ function copyFolderRecursiveSync(sourcePath, destinationPath) {
  */
 function processDirectories() {
   const directories = fs.readdirSync(".");
-  const nonHiddenDirectories = directories.filter(
-    (directory) => !directory.startsWith("."),
-  );
+  const nonHiddenDirectories = directories.filter((directory) => !directory.startsWith("."));
 
   for (const directory of nonHiddenDirectories) {
-    if (
-      fs.statSync(directory).isDirectory() &&
-      !rootExclude.includes(directory)
-    ) {
+    if (fs.statSync(directory).isDirectory() && !rootExclude.includes(directory)) {
       const dirPath = path.join("dist", directory);
       console.log(dirPath);
       fs.mkdirSync(dirPath);
@@ -97,10 +92,7 @@ function copyProjectToDist() {
   fs.rmSync("dist", { force: true, recursive: true });
   fs.mkdirSync(path.join("dist", "webdriver-ts"), { recursive: true });
 
-  fs.copyFileSync(
-    path.join("webdriver-ts", "table.html"),
-    path.join("dist", "webdriver-ts", "table.html"),
-  );
+  fs.copyFileSync(path.join("webdriver-ts", "table.html"), path.join("dist", "webdriver-ts", "table.html"));
   fs.copyFileSync("index.html", path.join("dist", "index.html"));
 
   processDirectories();

rebuild-build-single.js renamed to cli/rebuild-build-single.js

@@ -1,43 +1,6 @@
 import { execSync } from "node:child_process";
 import * as fs from "node:fs";
 import path from "node:path";
-import yargs from "yargs";
-
-const args = yargs(process.argv.slice(2))
-  .usage("$0 [--ci keyed/framework1 ... non-keyed/frameworkN]")
-  .boolean("ci")
-  .default("ci", false)
-  .describe("ci", "Use npm ci or npm install ?")
-  .argv;
-
-/**
- * Use npm ci or npm install?
- * @type {boolean}
- */
-const useCi = args.ci;
-
-/**
- * @type {string}
- */
-const frameworks = args._.filter((arg) => !arg.startsWith("--"));
-
-console.log(
-  "rebuild-build-single.js started: args",
-  args,
-  "useCi",
-  useCi,
-  "frameworks",
-  frameworks
-);
-
-const filesToDelete = [
-  "yarn-lock",
-  "dist",
-  "elm-stuff",
-  "bower_components",
-  "node_modules",
-  "output",
-].concat(useCi ? [] : ["package-lock.json"]);
 
 /*
 rebuild-single.js [--ci] [keyed/framework1 ... non-keyed/frameworkN]
@@ -55,7 +18,7 @@ Pass list of frameworks
 /**
  * Run a command synchronously in the specified directory and log command
  * @param {string} command - The command to run
- * @param {string} cwd - The current working directory (optional)
+ * @param {string|undefined} cwd - The current working directory (optional)
  */
 function runCommand(command, cwd = undefined) {
   console.log(command);
@@ -82,43 +45,53 @@ function deleteFrameworkFiles(frameworkPath, filesToDelete) {
 
 /**
  * @param {string} framework
+ * @param {boolean} useCi
  */
-function rebuildFramework(framework) {
+function rebuildFramework(framework, useCi) {
   const components = framework.split("/");
 
   if (components.length !== 2) {
-    console.log(
-      `ERROR: invalid name ${framework}. It must contain exactly one /.`
-    );
+    console.log(`ERROR: invalid name ${framework}. It must contain exactly one /.`);
     process.exit(1);
   }
 
   const [keyed, name] = components;
   const frameworkPath = path.join("frameworks", keyed, name);
 
+  const filesToDelete = [
+    "yarn-lock",
+    "dist",
+    "elm-stuff",
+    "bower_components",
+    "node_modules",
+    "output",
+  ].concat(useCi ? [] : ["package-lock.json"]);
+
   deleteFrameworkFiles(frameworkPath, filesToDelete);
 
   const installCmd = `npm ${useCi ? "ci" : "install"}`;
   runCommand(installCmd, frameworkPath);
 
   const buildCmd = "npm run build-prod";
   runCommand(buildCmd, frameworkPath);
-
 }
 
-function rebuildFrameworks() {
+/**
+ * @param {string[]} frameworks
+ * @param {boolean} useCi
+ */
+export function rebuildFrameworks(frameworks, useCi) {
+  console.log("rebuild-build-single.js started: useCi", useCi, "frameworks", frameworks);
+
   if (!frameworks.length) {
-    console.log(
-      "ERROR: Missing arguments. Command: rebuild keyed/framework1 non-keyed/framework2 ..."
-    );
+    console.log("ERROR: Missing arguments. Command: rebuild keyed/framework1 non-keyed/framework2 ...");
     process.exit(1);
   }
 
   for (const framework of frameworks) {
-    rebuildFramework(framework);
+    rebuildFramework(framework, useCi);
   }
 
   console.log("rebuild-build-single.js finished: Build finsished sucessfully!");
 }
 
-rebuildFrameworks();