refactor: improve code readability

Remove the if..else nesting.

Move the copyProps function outside the loadFrameworkInfo function.

Rename addCSP to isCSPEnabled.

Replace images to object properties through square brackets with point reference.

Replace string addition with the use of template strings.

Replace framework checking with indexOf() with includes().

Replace let with const where possible.

Replace runtime calculations '/ls' from Date.now() with performance.mark() and performance.measure().

Remove unnecessary async declarations.

Format with prettier.

Author: nakrovati

server/index.js

@@ -6,114 +6,115 @@ import fsp from "fs/promises";
 import { cwd } from "process";
 
 const app = express();
-const port = 8080;
+const PORT = 8080;
 
-let addCSP = false;
+let isCSPEnabled = false;
 
 app.use(express.json());
 
 const __dirname = cwd();
 
 let frameworkDirectory = path.join(__dirname, "..", "frameworks");
-let webDriverResultDirectory = path.join(
+const webDriverResultDirectory = path.join(
   __dirname,
   "..",
   "webdriver-ts-results"
 );
 
 if (process.argv.length === 3) {
-  console.log("Changing working directory to " + process.argv[2]);
+  console.log(`Changing working directory to ${process.argv[2]}`);
   frameworkDirectory = process.argv[2];
 }
 
+function copyProps(result, benchmarkData) {
+  const {
+    issues,
+    customURL,
+    frameworkHomeURL,
+    useShadowRoot,
+    useRowShadowRoot,
+    shadowRootName,
+    buttonsInShadowRoot,
+  } = benchmarkData;
+
+  result.issues = issues;
+  result.customURL = customURL;
+  result.frameworkHomeURL = frameworkHomeURL;
+  result.useShadowRoot = useShadowRoot;
+  result.useRowShadowRoot = useRowShadowRoot;
+  result.shadowRootName = useShadowRoot
+    ? shadowRootName ?? "main-element"
+    : undefined;
+  result.buttonsInShadowRoot = useShadowRoot
+    ? buttonsInShadowRoot ?? true
+    : undefined;
+}
+
 async function loadFrameworkInfo(keyedDir, directoryName) {
-  let result = {
+  const result = {
     type: keyedDir,
     directory: directoryName,
   };
 
-  let copyProps = (result, packageJSON) => {
-    result.issues = packageJSON["js-framework-benchmark"]["issues"];
-    result.customURL = packageJSON["js-framework-benchmark"]["customURL"];
-    result.frameworkHomeURL =
-      packageJSON["js-framework-benchmark"]["frameworkHomeURL"];
-    let useShadowRoot = packageJSON["js-framework-benchmark"]["useShadowRoot"];
-    result.useShadowRoot = useShadowRoot;
-    result.useRowShadowRoot =
-      packageJSON["js-framework-benchmark"]["useRowShadowRoot"];
-    result.shadowRootName = useShadowRoot
-      ? packageJSON["js-framework-benchmark"]["shadowRootName"] ??
-        "main-element"
-      : undefined;
-    result.buttonsInShadowRoot = useShadowRoot
-      ? packageJSON["js-framework-benchmark"]["buttonsInShadowRoot"] ?? true
-      : undefined;
-  };
-
   const frameworkPath = path.resolve(
     frameworkDirectory,
     keyedDir,
     directoryName
   );
   const packageJSONPath = path.resolve(frameworkPath, "package.json");
   const packageLockJSONPath = path.resolve(frameworkPath, "package-lock.json");
-  if (fs.existsSync(packageJSONPath)) {
-    let packageJSON = JSON.parse(await fsp.readFile(packageJSONPath, "utf8"));
-    if (packageJSON["js-framework-benchmark"]) {
-      if (
-        packageJSON["js-framework-benchmark"]["frameworkVersionFromPackage"]
-      ) {
-        let packageNames =
-          packageJSON["js-framework-benchmark"][
-            "frameworkVersionFromPackage"
-          ].split(":");
-        let packageLockJSON = JSON.parse(
-          await fsp.readFile(packageLockJSONPath, "utf8")
-        );
-        result.versions = {};
-        for (let packageName of packageNames) {
-          if (packageLockJSON.dependencies?.[packageName]) {
-            result.versions[packageName] =
-              packageLockJSON.dependencies[packageName].version;
-          } else if (
-            packageLockJSON.packages?.[`node_modules/${packageName}`]
-          ) {
-            result.versions[packageName] =
-              packageLockJSON.packages[`node_modules/${packageName}`].version;
-          } else {
-            result.versions[packageName] = "ERROR: Not found in package-lock";
-          }
-        }
-        result.frameworkVersionString =
-          directoryName +
-          "-v" +
-          packageNames.map((p) => result.versions[p]).join(" + ") +
-          "-" +
-          keyedDir;
-        copyProps(result, packageJSON);
-      } else if (
-        typeof packageJSON["js-framework-benchmark"]["frameworkVersion"] ===
-        "string"
-      ) {
-        result.version =
-          packageJSON["js-framework-benchmark"]["frameworkVersion"];
-        result.frameworkVersionString =
-          directoryName +
-          (result.version ? "-v" + result.version : "") +
-          "-" +
-          keyedDir;
-        copyProps(result, packageJSON);
+
+  if (!fs.existsSync(packageJSONPath)) {
+    result.error = "No package.json found";
+    return result;
+  }
+
+  const packageJSON = JSON.parse(await fsp.readFile(packageJSONPath, "utf8"));
+  const benchmarkData = packageJSON["js-framework-benchmark"];
+
+  if (!benchmarkData) {
+    result.error =
+      "package.json must contain a 'js-framework-benchmark' property";
+    return result;
+  }
+
+  if (benchmarkData.frameworkVersionFromPackage) {
+    const packageNames = benchmarkData.frameworkVersionFromPackage.split(":");
+    const packageLockJSON = JSON.parse(
+      await fsp.readFile(packageLockJSONPath, "utf8")
+    );
+
+    result.versions = {};
+
+    for (const packageName of packageNames) {
+      if (packageLockJSON.dependencies?.[packageName]) {
+        result.versions[packageName] =
+          packageLockJSON.dependencies[packageName].version;
+      } else if (packageLockJSON.packages?.[`node_modules/${packageName}`]) {
+        result.versions[packageName] =
+          packageLockJSON.packages[`node_modules/${packageName}`].version;
       } else {
-        result.error =
-          "package.json must contain a 'frameworkVersionFromPackage' or 'frameworkVersion' in the 'js-framework-benchmark'.property";
+        result.versions[packageName] = "ERROR: Not found in package-lock";
       }
-    } else {
-      result.error =
-        "package.json must contain a 'js-framework-benchmark' property";
     }
+
+    result.frameworkVersionString = `${directoryName}-v${packageNames
+      .map((p) => result.versions[p])
+      .join(" + ")}-${keyedDir}`;
+
+    copyProps(result, benchmarkData);
+  } else if (typeof benchmarkData.frameworkVersion === "string") {
+    result.version = benchmarkData.frameworkVersion;
+    result.frameworkVersionString = `${directoryName}${
+      result.version ? `-v${result.version}` : ""
+    }-${keyedDir}`;
+
+    copyProps(result, benchmarkData);
   } else {
-    result.error = "No package.json found";
+    result.error =
+      "package.json must contain a 'frameworkVersionFromPackage' or 'frameworkVersion' in the 'js-framework-benchmark'.property";
   }
+
   return result;
 }
 
@@ -127,25 +128,31 @@ function isFrameworkDir(keyedDir, directoryName) {
   const packageLockJSONPath = path.resolve(frameworkPath, "package-lock.json");
   const exists =
     fs.existsSync(packageJSONPath) && fs.existsSync(packageLockJSONPath);
+
   return exists;
 }
 
 async function loadFrameworkVersionInformation(filterForFramework) {
-  // let matchesDirectoryArg = (directoryName) =>
-  // frameworkArgument.length == 0 || frameworkArgument.some((arg: string) => arg == directoryName);
-
-  let resultsProm = [];
-  let frameworksPath = path.resolve(frameworkDirectory);
-  for (const keyedType of ["keyed", "non-keyed"]) {
-    let directories = fs.readdirSync(path.resolve(frameworksPath, keyedType));
-    for (let directory of directories) {
-      let pathInFrameworksDir = keyedType + "/" + directory;
-      if (!filterForFramework || filterForFramework === pathInFrameworksDir) {
-        if (isFrameworkDir(keyedType, directory)) {
-          let fi = loadFrameworkInfo(keyedType, directory);
-          resultsProm.push(fi);
-        }
+  const resultsProm = [];
+  const frameworksPath = path.resolve(frameworkDirectory);
+  const keyedTypes = ["keyed", "non-keyed"];
+
+  for (const keyedType of keyedTypes) {
+    const directories = fs.readdirSync(path.resolve(frameworksPath, keyedType));
+
+    for (const directory of directories) {
+      const pathInFrameworksDir = `${keyedType}/${directory}`;
+
+      if (filterForFramework && filterForFramework !== pathInFrameworksDir) {
+        continue;
       }
+
+      if (!isFrameworkDir(keyedType, directory)) {
+        continue;
+      }
+
+      const frameworkInfo = loadFrameworkInfo(keyedType, directory);
+      resultsProm.push(frameworkInfo);
     }
   }
   return Promise.all(resultsProm);
@@ -163,8 +170,8 @@ app.use(addSiteIsolationForIndex);
 app.use(
   "/frameworks",
   express.static(frameworkDirectory, {
-    setHeaders: function (res, path) {
-      if (addCSP && path.endsWith("index.html")) {
+    setHeaders: (res, path) => {
+      if (isCSPEnabled && path.endsWith("index.html")) {
         console.log("adding CSP to ", path);
         res.setHeader(
           "Content-Security-Policy",
@@ -176,50 +183,57 @@ app.use(
 );
 app.use("/webdriver-ts-results", express.static(webDriverResultDirectory));
 app.use("/css", express.static(path.join(frameworkDirectory, "..", "css")));
-app.get("/index.html", async (req, res, next) => {
-  res.sendFile(path.join(__dirname, "..", "index.html"));
+app.get("/index.html", (req, res) => {
+  const indexHTMLPath = path.join(__dirname, "..", "index.html");
+  res.sendFile(indexHTMLPath);
 });
 app.get("/ls", async (req, res) => {
-  let t0 = Date.now();
-  let frameworks = await loadFrameworkVersionInformation();
+  performance.mark("Start");
+  const frameworks = await loadFrameworkVersionInformation();
   res.send(frameworks);
-  let t1 = Date.now();
-  console.log("/ls duration ", t1 - t0);
+  performance.mark("End");
+  const executionTime = performance.measure(
+    "/ls duration measurement",
+    "Start",
+    "End"
+  ).duration;
+
+  console.log(`/ls duration: ${executionTime}ms`);
 });
 app.use("/csp", bodyParser.json({ type: "application/csp-report" }));
 
 let violations = [];
 
-app.post("/csp", async (req, res) => {
+app.post("/csp", (req, res) => {
   console.log("/CSP ", req.body);
-  let uri = req.body["csp-report"]["document-uri"];
-  let frameworkRegEx = /((non-)?keyed\/.*?\/)/;
-  let framework = uri.match(frameworkRegEx)[0];
-  if (violations.indexOf(framework) == -1) {
+  const uri = req.body["csp-report"]["document-uri"];
+  const frameworkRegEx = /((non-)?keyed\/.*?\/)/;
+  const framework = uri.match(frameworkRegEx)[0];
+  if (!violations.includes(framework)) {
     violations.push(framework);
   }
   res.sendStatus(201);
 });
 
-app.get("/startCSP", async (req, res) => {
+app.get("/startCSP", (req, res) => {
   console.log("/startCSP");
   violations = [];
-  addCSP = true;
+  isCSPEnabled = true;
   res.send("OK");
 });
 
-app.get("/endCSP", async (req, res) => {
+app.get("/endCSP", (req, res) => {
   console.log("/endCSP");
   violations = [];
-  addCSP = false;
+  isCSPEnabled = false;
   res.send("OK");
 });
 
-app.get("/csp", async (req, res) => {
+app.get("/csp", (req, res) => {
   console.log("CSP violations recorded for", violations);
   res.send(violations);
 });
 
-app.listen(port, () => {
-  console.log(`Server running on port ${port}`);
+app.listen(PORT, () => {
+  console.log(`Server running on port ${PORT}`);
 });