Add prettier (#288)

* Add prettier * Align formats * More formatting * Add GitHub Action * Add Husky * Add JSON * Fix workflow directory * Fix workflow * Fix workflow * Test bad format * Revert test change * Update selenium-standalone to allow tests to run * Update README.md Co-authored-by: Philip Walton <philipwalton@users.noreply.github.com> * Review feedback * Set quoteProps to preserve * Revert CoC * Try link-staged * Try link staged * Revert lint-staged * Add git add * Test commit * Switch to lint-staged Co-authored-by: Philip Walton <philipwalton@users.noreply.github.com>
GoogleChrome · Dec 12, 2022 · cd560dc · cd560dc
1 parent 39f1782
commit cd560dc
Show file tree

Hide file tree

Showing 63 changed files with 2,124 additions and 593 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,16 @@
+# editorconfig.org
+# For Visual Studio code use this extension to enforce below rules:
+# https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
+# Other IDEs maye have built in editorconfig support, or their own extensions
+#
+# The similar .ecrc file is used by an editorconfig GitHub action to catch those
+# that don't use this.
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.eslintrc b/.eslintrc
@@ -29,11 +29,24 @@
         "eslint:recommended", "google"
       ],
       "rules": {
+        "comma-dangle": ["error", {
+          "arrays": "always-multiline",
+          "objects": "always-multiline",
+          "imports": "always-multiline",
+          "exports": "always-multiline",
+          "functions": "never"
+        }],
+        "indent": ["error", 2],
         "no-invalid-this": "off",
         "max-len": [2, {
           "ignorePattern": "^\\s*import|= require\\(|^\\s*it\\(|^\\s*describe\\(",
           "ignoreUrls": true
         }],
+        "space-before-function-paren": ["error", {
+            "anonymous": "always",
+            "named": "never",
+            "asyncArrow": "always"
+        }]
       }
     },
     {
@@ -49,11 +62,24 @@
         "@typescript-eslint/explicit-module-boundary-types": "off",
         "@typescript-eslint/ban-ts-comment": "off",
         "@typescript-eslint/camelcase": "off",
+        "comma-dangle": ["error", {
+          "arrays": "always-multiline",
+          "objects": "always-multiline",
+          "imports": "always-multiline",
+          "exports": "always-multiline",
+          "functions": "never"
+        }],
+        "indent": ["error", 2],
         "node/no-missing-import": "off",
         "node/no-unsupported-features/es-syntax": "off",
         "node/no-missing-require": "off",
         "node/shebang": "off",
-        "no-dupe-class-members": "off"
+        "no-dupe-class-members": "off",
+        "space-before-function-paren": ["error", {
+            "anonymous": "always",
+            "named": "never",
+            "asyncArrow": "always"
+        }]
       },
       "parserOptions": {
         "ecmaVersion": 2018,

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -0,0 +1,20 @@
+name: Lint Code Base
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+jobs:
+  lint:
+    name: Lint Code Base
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+      - name: NPM install
+        run: npm install
+      - name: Run Prettier
+        run: npm run format:check
+      - name: Run ESlint
+        run: npm run lint
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,3 @@ tsconfig.tsbuildinfo
 
 # Dist files
 dist
-
-# Husky files
-.husky
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm exec lint-staged
diff --git a/README.md b/README.md
@@ -131,7 +131,7 @@ Then, inline the code from `dist/polyfill.js` into the `<head>` of your pages. T
 </html>
 ```
 
-It's important that the code is inlined directly into the HTML. *Do not link to an external script file, as that will negatively affect performance:
+It's important that the code is inlined directly into the HTML. _Do not link to an external script file, as that will negatively affect performance:_
 
 ```html
 <!-- GOOD -->
@@ -174,18 +174,18 @@ _**Important!** The [unpkg.com](https://unpkg.com) CDN is shown here for example
 
 ```html
 <script>
-(function() {
-  var script = document.createElement('script');
-  script.src = 'https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js';
-  script.onload = function() {
-    // When loading `web-vitals` using a classic script, all the public
-    // methods can be found on the `webVitals` global namespace.
-    webVitals.onCLS(console.log);
-    webVitals.onFID(console.log);
-    webVitals.onLCP(console.log);
-  }
-  document.head.appendChild(script);
-}())
+  (function () {
+    var script = document.createElement('script');
+    script.src = 'https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js';
+    script.onload = function () {
+      // When loading `web-vitals` using a classic script, all the public
+      // methods can be found on the `webVitals` global namespace.
+      webVitals.onCLS(console.log);
+      webVitals.onFID(console.log);
+      webVitals.onLCP(console.log);
+    };
+    document.head.appendChild(script);
+  })();
 </script>
 ```
 
@@ -194,7 +194,11 @@ _**Important!** The [unpkg.com](https://unpkg.com) CDN is shown here for example
 ```html
 <!-- Append the `?module` param to load the module version of `web-vitals` -->
 <script type="module">
-  import {onCLS, onFID, onLCP} from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module';
+  import {
+    onCLS,
+    onFID,
+    onLCP,
+  } from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module';
 
   onCLS(console.log);
   onFID(console.log);
@@ -206,18 +210,19 @@ _**Important!** The [unpkg.com](https://unpkg.com) CDN is shown here for example
 
 ```html
 <script>
-(function() {
-  var script = document.createElement('script');
-  script.src = 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.iife.js';
-  script.onload = function() {
-    // When loading `web-vitals` using a classic script, all the public
-    // methods can be found on the `webVitals` global namespace.
-    webVitals.onCLS(console.log);
-    webVitals.onFID(console.log);
-    webVitals.onLCP(console.log);
-  }
-  document.head.appendChild(script);
-}())
+  (function () {
+    var script = document.createElement('script');
+    script.src =
+      'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.iife.js';
+    script.onload = function () {
+      // When loading `web-vitals` using a classic script, all the public
+      // methods can be found on the `webVitals` global namespace.
+      webVitals.onCLS(console.log);
+      webVitals.onFID(console.log);
+      webVitals.onLCP(console.log);
+    };
+    document.head.appendChild(script);
+  })();
 </script>
 ```
 
@@ -306,7 +311,7 @@ function sendToAnalytics(metric) {
 
   // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
   (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
-      fetch('/analytics', {body, method: 'POST', keepalive: true});
+    fetch('/analytics', {body, method: 'POST', keepalive: true});
 }
 
 onCLS(sendToAnalytics);
@@ -451,7 +456,7 @@ function sendToGoogleAnalytics({name, delta, value, id, attribution}) {
     metric_id: id, // Needed to aggregate events.
     metric_value: value, // Optional.
     metric_delta: delta, // Optional.
-  }
+  };
 
   switch (name) {
     case 'CLS':
@@ -503,7 +508,7 @@ function flushQueue() {
 
     // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
     (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
-          fetch('/analytics', {body, method: 'POST', keepalive: true});
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
 
     queue.clear();
   }
@@ -691,7 +696,12 @@ interface Metric {
    * The array may also be empty if the metric value was not based on any
    * entries (e.g. a CLS value of 0 given no layout shifts).
    */
-  entries: (PerformanceEntry | LayoutShift | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[];
+  entries: (
+    | PerformanceEntry
+    | LayoutShift
+    | FirstInputPolyfillEntry
+    | NavigationTimingPolyfillEntry
+  )[];
 
   /**
    * The type of navigation.
@@ -704,7 +714,13 @@ interface Metric {
    * - 'restore': for pages that were discarded by the browser and then
    * restored by the user.
    */
-  navigationType:  'navigate' | 'reload' | 'back-forward' | 'back-forward-cache' | 'prerender' | 'restore';
+  navigationType:
+    | 'navigate'
+    | 'reload'
+    | 'back-forward'
+    | 'back-forward-cache'
+    | 'prerender'
+    | 'restore';
 }
 ```
 
@@ -728,7 +744,7 @@ interface MetricWithAttribution extends Metric {
    * can be sent along with the metric value for the current page visit in
    * order to help identify issues happening to real-users in the field.
    */
- attribution: {[key: string]: unknown};
+  attribution: {[key: string]: unknown};
 }
 ```
 
@@ -787,15 +803,22 @@ The `LoadState` type is used in several of the metric [attribution objects](#att
  * - `complete`: the document and all of its sub-resources have finished
  *   loading. This is equivalent to the corresponding `readyState` value.
  */
-type LoadState = 'loading' | 'dom-interactive' | 'dom-content-loaded' | 'complete';
+type LoadState =
+  | 'loading'
+  | 'dom-interactive'
+  | 'dom-content-loaded'
+  | 'complete';
 ```
 
 #### `FirstInputPolyfillEntry`
 
 If using the "base+polyfill" build (and if the browser doesn't natively support the Event Timing API), the `metric.entries` reported by `onFID()` will contain an object that polyfills the `PerformanceEventTiming` entry:
 
 ```ts
-type FirstInputPolyfillEntry = Omit<PerformanceEventTiming, 'processingEnd' | 'toJSON'>
+type FirstInputPolyfillEntry = Omit<
+  PerformanceEventTiming,
+  'processingEnd' | 'toJSON'
+>;
 ```
 
 #### `FirstInputPolyfillCallback`
@@ -811,11 +834,18 @@ interface FirstInputPolyfillCallback {
 If using the "base+polyfill" build (and if the browser doesn't support the [Navigation Timing API Level 2](https://www.w3.org/TR/navigation-timing-2/) interface), the `metric.entries` reported by `onTTFB()` will contain an object that polyfills the `PerformanceNavigationTiming` entry using timings from the legacy `performance.timing` interface:
 
 ```ts
-type NavigationTimingPolyfillEntry = Omit<PerformanceNavigationTiming,
-    'initiatorType' | 'nextHopProtocol' | 'redirectCount' | 'transferSize' |
-    'encodedBodySize' | 'decodedBodySize' | 'type'> & {
+type NavigationTimingPolyfillEntry = Omit<
+  PerformanceNavigationTiming,
+  | 'initiatorType'
+  | 'nextHopProtocol'
+  | 'redirectCount'
+  | 'transferSize'
+  | 'encodedBodySize'
+  | 'decodedBodySize'
+  | 'type'
+> & {
   type: PerformanceNavigationTiming['type'];
-}
+};
 ```
 
 #### `WebVitalsGlobal`
@@ -835,7 +865,7 @@ interface WebVitalsGlobal {
 #### `onCLS()`
 
 ```ts
-type onCLS = (callback: CLSReportCallback, opts?: ReportOpts) => void
+type onCLS = (callback: CLSReportCallback, opts?: ReportOpts) => void;
 ```
 
 Calculates the [CLS](https://web.dev/cls/) value for the current page and calls the `callback` function once the value is ready to be reported, along with all `layout-shift` performance entries that were used in the metric value calculation. The reported value is a [double](https://heycam.github.io/webidl/#idl-double) (corresponding to a [layout shift score](https://web.dev/cls/#layout-shift-score)).
@@ -847,15 +877,15 @@ _**Important:** CLS should be continually monitored for changes throughout the e
 #### `onFCP()`
 
 ```ts
-type onFCP = (callback: FCPReportCallback, opts?: ReportOpts) => void
+type onFCP = (callback: FCPReportCallback, opts?: ReportOpts) => void;
 ```
 
 Calculates the [FCP](https://web.dev/fcp/) value for the current page and calls the `callback` function once the value is ready, along with the relevant `paint` performance entry used to determine the value. The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp).
 
 #### `onFID()`
 
 ```ts
-type onFID = (callback: FIDReportCallback, opts?: ReportOpts) => void
+type onFID = (callback: FIDReportCallback, opts?: ReportOpts) => void;
 ```
 
 Calculates the [FID](https://web.dev/fid/) value for the current page and calls the `callback` function once the value is ready, along with the relevant `first-input` performance entry used to determine the value. The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp).
@@ -865,10 +895,10 @@ _**Important:** since FID is only reported after the user interacts with the pag
 #### `onINP()`
 
 ```ts
-type onINP = (callback: INPReportCallback, opts?: ReportOpts) => void
+type onINP = (callback: INPReportCallback, opts?: ReportOpts) => void;
 ```
 
-Calculates the [INP](https://web.dev/responsiveness/) value for the current page and calls the `callback` function once the value is ready, along with the  `event` performance entries reported for that interaction. The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp).
+Calculates the [INP](https://web.dev/responsiveness/) value for the current page and calls the `callback` function once the value is ready, along with the `event` performance entries reported for that interaction. The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp).
 
 A custom `durationThreshold` [configuration option](#reportopts) can optionally be passed to control what `event-timing` entries are considered for INP reporting. The default threshold is `40`, which means INP scores of less than 40 are reported as 0. Note that this will not affect your 75th percentile INP value unless that value is also less than 40 (well below the recommended [good](https://web.dev/inp/#what-is-a-good-inp-score) threshold).
 
@@ -879,7 +909,7 @@ _**Important:** INP should be continually monitored for changes throughout the e
 #### `onLCP()`
 
 ```ts
-type onLCP = (callback: LCPReportCallback, opts?: ReportOpts) => void
+type onLCP = (callback: LCPReportCallback, opts?: ReportOpts) => void;
 ```
 
 Calculates the [LCP](https://web.dev/lcp/) value for the current page and calls the `callback` function once the value is ready (along with the relevant `largest-contentful-paint` performance entry used to determine the value). The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp).
@@ -889,7 +919,7 @@ If the `reportAllChanges` [configuration option](#reportopts) is set to `true`,
 #### `onTTFB()`
 
 ```ts
-type onTTFB = (callback: TTFBReportCallback, opts?: ReportOpts) => void
+type onTTFB = (callback: TTFBReportCallback, opts?: ReportOpts) => void;
 ```
 
 Calculates the [TTFB](https://web.dev/time-to-first-byte/) value for the current page and calls the `callback` function once the page has loaded, along with the relevant `navigation` performance entry used to determine the value. The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp).
@@ -977,11 +1007,11 @@ interface FCPAttribution {
    * `LoadState` for details). Ideally, documents can paint before they finish
    * loading (e.g. the `loading` or `dom-interactive` phases).
    */
-  loadState: LoadState,
+  loadState: LoadState;
   /**
    * The `PerformancePaintTiming` entry corresponding to FCP.
    */
-  fcpEntry?: PerformancePaintTiming,
+  fcpEntry?: PerformancePaintTiming;
   /**
    * The `navigation` entry of the current page, which is useful for diagnosing
    * general page load issues.
@@ -1012,7 +1042,7 @@ interface FIDAttribution {
    * The `PerformanceEventTiming` entry corresponding to FID (or the
    * polyfill entry in browsers that don't support Event Timing).
    */
-  eventEntry: PerformanceEventTiming | FirstInputPolyfillEntry,
+  eventEntry: PerformanceEventTiming | FirstInputPolyfillEntry;
   /**
    * The loading state of the document at the time when the first interaction
    * occurred (see `LoadState` for details). If the first interaction occurred
@@ -1063,12 +1093,12 @@ interface LCPAttribution {
   /**
    * The element corresponding to the largest contentful paint for the page.
    */
-  element?: string,
+  element?: string;
   /**
    * The URL (if applicable) of the LCP image resource. If the LCP element
    * is a text node, this value will not be set.
    */
-  url?: string,
+  url?: string;
   /**
    * The time from when the user initiates loading the page until when the
    * browser receives the first byte of the response (a.k.a. TTFB). See