Adopt eslint-plugin-unicorn alongside the rest of the sitespeed.io stack

eslint.config.js

@@ -0,0 +1,79 @@
+import prettier from 'eslint-plugin-prettier';
+import unicorn from 'eslint-plugin-unicorn';
+import globals from 'globals';
+import js from '@eslint/js';
+
+export default [
+  {
+    ignores: ['**/dist/', '**/node_modules/', '**/test/', '**/tools/']
+  },
+  js.configs.recommended,
+  unicorn.configs.recommended,
+  {
+    plugins: {
+      prettier
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.node
+      },
+
+      ecmaVersion: 'latest',
+      sourceType: 'module'
+    },
+
+    rules: {
+      'prettier/prettier': [
+        'error',
+        {
+          singleQuote: true,
+          trailingComma: 'none'
+        }
+      ],
+
+      'no-extra-semi': 0,
+      'no-mixed-spaces-and-tabs': 0,
+      'no-prototype-builtins': 0,
+      'unicorn/filename-case': 0,
+      'unicorn/prevent-abbreviations': 0,
+      'unicorn/no-array-reduce': 0,
+      'unicorn/no-array-sort': 0,
+      'unicorn/no-array-reverse': 0,
+      'unicorn/prefer-spread': 0,
+      // Destructured imports from node:* namespaces are clearer than
+      // forcing `import path from 'node:path'` everywhere.
+      'unicorn/import-style': 0,
+      // The vendored wappalyzer engine intentionally uses null to match
+      // the upstream data format. null vs undefined is semantically
+      // load-bearing in a few places, not a style preference.
+      'unicorn/no-null': 0
+    }
+  },
+  {
+    // The DOM advice rules are not modules — they are IIFE script fragments
+    // that get concatenated into dist/coach.min.js and run inside the
+    // browser via WebDriver's executeScript. `"use strict"` is intentional
+    // there; eslint's `prefer-module` rule does not apply.
+    files: ['lib/dom/**'],
+    rules: {
+      'unicorn/prefer-module': 0
+    },
+    languageOptions: {
+      sourceType: 'script',
+      globals: {
+        ...globals.browser,
+        util: true
+      }
+    }
+  },
+  {
+    // util.js itself declares util locally, so don't treat it as a global there.
+    files: ['lib/dom/util.js'],
+    languageOptions: {
+      globals: {
+        util: 'off'
+      }
+    }
+  }
+];

lib/dom/bestpractice/amp.js

@@ -2,10 +2,10 @@
   'use strict';
 
   const offending = [];
-  const html = document.getElementsByTagName('html')[0];
+  const html = document.querySelectorAll('html')[0];
   let score = 100;
 
-  if ((html && html.getAttribute('amp-version')) || window.AMP) {
+  if ((html && html.getAttribute('amp-version')) || globalThis.AMP) {
     score = 0;
   }
 

lib/dom/bestpractice/charset.js

@@ -9,6 +9,7 @@
     message =
       'The page is missing a character set. If you use Chrome/Firefox we know you are missing it, if you use another browser, it could be an implementation problem.';
     score = 0;
+    // eslint-disable-next-line unicorn/text-encoding-identifier-case
   } else if (charSet !== 'UTF-8') {
     message = 'You are not using charset UTF-8?';
     score = 50;

lib/dom/bestpractice/cumulativeLayoutShift.js

@@ -6,7 +6,7 @@
   let score = 0;
   let max = 0;
   const supported = PerformanceObserver.supportedEntryTypes;
-  if (!supported || supported.indexOf('layout-shift') === -1) {
+  if (!supported || !supported.includes('layout-shift')) {
     advice = 'Layout Shift is not supported in this browser';
   } else {
     // See https://web.dev/layout-instability-api

lib/dom/bestpractice/imageAltText.js

@@ -6,7 +6,7 @@
   // / role="presentation" / aria-hidden="true" for purely decorative images.
   // A missing alt attribute entirely is the failure case.
   const offending = [];
-  const images = document.getElementsByTagName('img');
+  const images = document.querySelectorAll('img');
   for (let i = 0, len = images.length; i < len; i++) {
     const img = images[i];
     const hasAlt = img.hasAttribute('alt');

lib/dom/bestpractice/language.js

@@ -1,7 +1,7 @@
 (function () {
   'use strict';
 
-  const html = document.getElementsByTagName('html');
+  const html = document.querySelectorAll('html');
   const language = html[0].getAttribute('lang');
   let score = 100;
   let message = '';

lib/dom/bestpractice/optimizely.js

@@ -6,14 +6,14 @@
   let score = 100;
   let advice = '';
 
-  scripts.forEach(function (script) {
+  for (const script of scripts) {
     if (util.getHostname(script) === 'cdn.optimizely.com') {
       offending.push(script);
       score = 0;
       advice =
         'The page is using Optimizely. Use it with care because it hurts your performance. Only turn it on (= load the JavaScript) when you run your A/B tests. Then when you are finished make sure to turn it off.';
     }
-  });
+  }
 
   return {
     id: 'optimizely',

lib/dom/bestpractice/url.js

@@ -6,7 +6,7 @@
   let message = '';
 
   // ok all Java lovers, please do not use the sessionid in your URLs
-  if (url.indexOf('?') > -1 && url.indexOf('jsessionid') > url.indexOf('?')) {
+  if (url.includes('?') && url.indexOf('jsessionid') > url.indexOf('?')) {
     score = 0;
     message =
       'The page has the session id for the user as a parameter, please change so the session handling is done only with cookies. ';
@@ -27,7 +27,7 @@
       ' characters long. Try to make it less than 100 characters. ';
   }
 
-  if (url.indexOf(' ') > -1 || url.indexOf('%20') > -1) {
+  if (url.includes(' ') || url.includes('%20')) {
     score -= 10;
     message +=
       'Could the developer or the CMS be on Windows? Avoid using spaces in the URLs, use hyphens or underscores. ';
@@ -39,7 +39,7 @@
     description:
       'A clean URL is good for the user and for SEO. Make them human readable, avoid too long URLs, spaces in the URL, too many request parameters, and never ever have the session id in your URL.',
     advice: message,
-    score: score < 0 ? 0 : score,
+    score: Math.max(score, 0),
     weight: 2,
     severity: 'info',
     offending: [],

lib/dom/bestpractice/viewport.js

@@ -7,7 +7,7 @@
   // user-scalable=no or maximum-scale=1 also breaks pinch-to-zoom and is an
   // accessibility regression, so we flag those values too.
   let content = '';
-  const metas = document.getElementsByTagName('meta');
+  const metas = document.querySelectorAll('meta');
   for (let i = 0, len = metas.length; i < len; i++) {
     const name = metas[i].getAttribute('name');
     if (name && name.toLowerCase() === 'viewport') {
@@ -25,14 +25,14 @@
     advice =
       'The page is missing a viewport meta tag. Add <meta name="viewport" content="width=device-width, initial-scale=1"> so the browser lays the page out at the device width.';
   } else {
-    if (lower.indexOf('width=device-width') === -1) {
+    if (!lower.includes('width=device-width')) {
       score -= 50;
       advice +=
         'The viewport meta tag does not contain width=device-width, the browser may use a desktop-width fallback. ';
     }
     if (
-      lower.indexOf('user-scalable=no') > -1 ||
-      lower.indexOf('user-scalable=0') > -1
+      lower.includes('user-scalable=no') ||
+      lower.includes('user-scalable=0')
     ) {
       score -= 30;
       advice +=

lib/dom/info/amp.js

@@ -1,11 +1,9 @@
 (function () {
   'use strict';
 
-  const html = document.getElementsByTagName('html')[0];
+  const html = document.querySelectorAll('html')[0];
 
-  if ((html && html.getAttribute('amp-version')) || window.AMP) {
-    return html.getAttribute('amp-version') || true;
-  } else {
-    return false;
-  }
+  return (html && html.getAttribute('amp-version')) || globalThis.AMP
+    ? html.getAttribute('amp-version') || true
+    : false;
 })();

lib/dom/info/domDepth.js

@@ -2,7 +2,7 @@
   'use strict';
 
   function domDepth(document) {
-    const allElems = document.getElementsByTagName('*');
+    const allElems = document.querySelectorAll('*');
     let allElemsLen = allElems.length;
     let totalParents = 0;
     let maxParents = 0;

lib/dom/info/domElements.js

@@ -1,5 +1,5 @@
 (function () {
   'use strict';
 
-  return document.getElementsByTagName('*').length;
+  return document.querySelectorAll('*').length;
 })();

lib/dom/info/iframes.js

@@ -1,5 +1,5 @@
 (function () {
   'use strict';
 
-  return document.getElementsByTagName('iframe').length;
+  return document.querySelectorAll('iframe').length;
 })();

lib/dom/info/localStorageSize.js

@@ -18,9 +18,8 @@
     }
   }
   try {
-    return storageSize(window.localStorage);
-    // eslint-disable-next-line no-unused-vars
-  } catch (e) {
+    return storageSize(globalThis.localStorage);
+  } catch {
     return 'Could not access localStorage.';
   }
 })();

lib/dom/info/networkConnectionType.js

@@ -1,9 +1,7 @@
 (function () {
   'use strict';
 
-  if (window.navigator.connection) {
-    return window.navigator.connection.effectiveType;
-  } else {
-    return 'unknown';
-  }
+  return globalThis.navigator.connection
+    ? globalThis.navigator.connection.effectiveType
+    : 'unknown';
 })();

lib/dom/info/scripts.js

@@ -1,5 +1,5 @@
 (function () {
   'use strict';
 
-  return document.getElementsByTagName('script').length;
+  return document.querySelectorAll('script').length;
 })();

lib/dom/info/serviceWorker.js

@@ -4,9 +4,9 @@
   if ('serviceWorker' in navigator) {
     // Only report activated service workers
     if (navigator.serviceWorker.controller) {
-      if (navigator.serviceWorker.controller.state === 'activated') {
-        return navigator.serviceWorker.controller.scriptURL;
-      } else return false;
+      return navigator.serviceWorker.controller.state === 'activated'
+        ? navigator.serviceWorker.controller.scriptURL
+        : false;
     } else {
       return false;
     }

lib/dom/info/sessionStorageSize.js

@@ -14,9 +14,8 @@
   }
 
   try {
-    return storageSize(window.sessionStorage);
-    // eslint-disable-next-line no-unused-vars
-  } catch (e) {
+    return storageSize(globalThis.sessionStorage);
+  } catch {
     return 'Could not access sessionStorage';
   }
 })();

lib/dom/info/userTiming.js

@@ -3,9 +3,9 @@
 
   let mark = 0;
   let measure = 0;
-  if (window.performance && window.performance.getEntriesByType) {
-    measure = window.performance.getEntriesByType('measure').length;
-    mark = window.performance.getEntriesByType('mark').length;
+  if (globalThis.performance && globalThis.performance.getEntriesByType) {
+    measure = globalThis.performance.getEntriesByType('measure').length;
+    mark = globalThis.performance.getEntriesByType('mark').length;
   }
   return {
     marks: mark,