style: Enable ESLint and Prettier for all files

- Remove ESLint rules that overlap with Prettier/EditorConfig
- Remove Prettier rules overlapping with EditorConfig
- Replace Prettier-eslint with plugin/config versions
- Set Environment to ES2022 and remove globals that are not required
- Remove babel parser, since covered by ES2022
- Ignore WASM folders because of top level awaits
- Rename script commands to match mdn/content
- Drop direct ajv dependency

.eslintignore

@@ -1,2 +1,4 @@
+docs/
 js/lib/*
 js/mode/*
+live-examples/wat-examples/

.eslintrc

@@ -1,30 +1,22 @@
 {
     "env": {
         "browser": true,
-        "es6": true,
+        "es2022": true,
         "node": true
     },
-    "extends": "eslint:recommended",
-    "parser": "@babel/eslint-parser",
+    "extends": ["eslint:recommended", "plugin:prettier/recommended"],
     "parserOptions": {
-        "ecmaVersion": 6,
-        "sourceType": "script",
-        "requireConfigFile": false
+        "sourceType": "script"
     },
     "rules": {
-        "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
         "camelcase": [
             "error",
             {
                 "properties": "always"
             }
         ],
-        "comma-spacing": "error",
-        "comma-style": "error",
-        "curly": ["error", "all"],
         "eol-last": "error",
         "eqeqeq": ["error", "smart"],
-        "func-call-spacing": "error",
         "new-cap": "warn",
         "no-array-constructor": "error",
         "no-console": [
@@ -34,39 +26,19 @@
             }
         ],
         "no-new-object": "error",
-        "indent": [
-            "error",
-            2,
-            {
-                "SwitchCase": 1
-            }
-        ],
-        "key-spacing": "error",
-        "keyword-spacing": "error",
-        "linebreak-style": ["error", "unix"],
         "no-control-regex": "error",
         "no-else-return": "error",
         "no-global-assign": "error",
-        "no-multiple-empty-lines": "error",
         "no-prototype-builtins": "off",
-        "no-trailing-spaces": "error",
         "no-var": "error",
-        "object-curly-spacing": ["error", "always"],
         "one-var-declaration-per-line": ["error", "always"],
         "prefer-arrow-callback": "error",
         "prefer-const": "error",
         "prefer-template": "error",
-        "quotes": ["error", "single"],
-        "semi": ["error", "always"],
-        "space-before-function-paren": ["error", "never"],
         "space-infix-ops": "error"
     },
     "globals": {
-        "SharedArrayBuffer": true,
-        "Atomics": true,
-        "BigInt": true,
-        "getShadowRoot": true,
-        "globalThis": true // will be supported in eslint 7.0
+        "getShadowRoot": true
     },
     "overrides": [
         {

.prettierrc

@@ -1,13 +1,5 @@
 {
     "singleQuote": true,
-    "tabWidth": 4,
-    "printWidth": 120,
-    "overrides": [
-        {
-            "files": "*.md",
-            "options": {
-                "tabWidth": 2
-            }
-        }
-    ]
+    "semi": true,
+    "trailingComma": "none"
 }

JS-Example-Style-Guide.md

@@ -155,7 +155,7 @@ yarn run lint:js
 We've also provided the following command:
 
 ```sh
-yarn run lint:js:fix
+yarn run fix:js
 ```
 
 This runs ESLint with the `--fix` option, which tries to fix issues.

live-examples/css-examples/animation/animation-state.js

@@ -1,35 +1,35 @@
 'use strict';
 
-window.addEventListener('load', function() {
-    const el = document.getElementById('example-element');
-    const status = document.getElementById('playstatus');
+window.addEventListener('load', () => {
+  const el = document.getElementById('example-element');
+  const status = document.getElementById('playstatus');
 
-    function update() {
-        status.textContent = 'delaying';
-        el.className = '';
-        window.requestAnimationFrame(function() {
-            window.requestAnimationFrame(function() {
-                el.className = 'animating';
-            });
-        });
-    }
-
-    el.addEventListener('animationstart', function() {
-        status.textContent = 'playing';
+  function update() {
+    status.textContent = 'delaying';
+    el.className = '';
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        el.className = 'animating';
+      });
     });
+  }
 
-    el.addEventListener('animationend', function() {
-        status.textContent = 'finished';
-    });
+  el.addEventListener('animationstart', () => {
+    status.textContent = 'playing';
+  });
 
-    const observer = new MutationObserver(function() {
-        update();
-    });
-
-    observer.observe(el, {
-        attributes: true,
-        attributeFilter: ['style']
-    });
+  el.addEventListener('animationend', () => {
+    status.textContent = 'finished';
+  });
 
+  const observer = new MutationObserver(() => {
     update();
+  });
+
+  observer.observe(el, {
+    attributes: true,
+    attributeFilter: ['style']
+  });
+
+  update();
 });

live-examples/css-examples/animation/play-pause.js

@@ -1,16 +1,16 @@
 'use strict';
 
-window.addEventListener('load', function() {
-    const el = document.getElementById('example-element');
-    const button = document.getElementById('play-pause');
+window.addEventListener('load', () => {
+  const el = document.getElementById('example-element');
+  const button = document.getElementById('play-pause');
 
-    button.addEventListener('click', function() {
-        if (el.classList.contains('running')) {
-            el.classList.remove('running');
-            button.textContent = 'Play';
-        } else {
-            el.classList.add('running');
-            button.textContent = 'Pause';
-        }
-    });
+  button.addEventListener('click', () => {
+    if (el.classList.contains('running')) {
+      el.classList.remove('running');
+      button.textContent = 'Play';
+    } else {
+      el.classList.add('running');
+      button.textContent = 'Pause';
+    }
+  });
 });

live-examples/css-examples/basic-box-model/overflow-anchor.js

@@ -5,14 +5,17 @@ window.addEventListener('load', () => {
 
   function setInitialState() {
     example.innerHTML = '';
-    Array.from(({ length: 10 }), (_, i) => i).forEach(addContent);
+    Array.from({ length: 10 }, (_, i) => i).forEach(addContent);
     example.scrollTop = example.scrollHeight;
   }
 
   function addContent() {
-    console.log('adding content')
+    console.log('adding content');
     const magicNumber = Math.floor(Math.random() * 10000);
-    example.insertAdjacentHTML('afterbegin', `<div class="new-content-container">New Magic Number: ${magicNumber}</div>`);
+    example.insertAdjacentHTML(
+      'afterbegin',
+      `<div class="new-content-container">New Magic Number: ${magicNumber}</div>`
+    );
   }
 
   button.addEventListener('click', () => {

live-examples/css-examples/motion-path/offset-playback.js

@@ -1,14 +1,14 @@
-window.addEventListener('load', function() {
-    const example = document.getElementById('example-element');
-    const button = document.getElementById('playback');
+window.addEventListener('load', () => {
+  const example = document.getElementById('example-element');
+  const button = document.getElementById('playback');
 
-    button.addEventListener('click', function() {
-        if (example.classList.contains('running')) {
-            example.classList.remove('running');
-            button.textContent = 'Play';
-        } else {
-            example.classList.add('running');
-            button.textContent = 'Pause';
-        }
-    });
+  button.addEventListener('click', () => {
+    if (example.classList.contains('running')) {
+      example.classList.remove('running');
+      button.textContent = 'Play';
+    } else {
+      example.classList.add('running');
+      button.textContent = 'Pause';
+    }
+  });
 });

live-examples/css-examples/transforms/transform-origin.js

@@ -1,36 +1,36 @@
 'use strict';
 
-window.addEventListener('load', function() {
-    function update() {
-        const selected = document.querySelector('.selected code');
+window.addEventListener('load', () => {
+  function update() {
+    const selected = document.querySelector('.selected code');
 
-        /* Restart the animation
+    /* Restart the animation
            https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips */
-        el.className = '';
-        window.requestAnimationFrame(function() {
-            window.requestAnimationFrame(function() {
-                el.className = selected.dataset.animation;
-            });
-        });
+    el.className = '';
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        el.className = selected.dataset.animation;
+      });
+    });
 
-        const transformOrigin = getComputedStyle(el).transformOrigin;
-        const pos = transformOrigin.split(/\s+/);
-        crosshair.style.left = 'calc(' + pos[0] + ' - 12px)';
-        crosshair.style.top = 'calc(' + pos[1] + ' - 12px)';
-    }
+    const transformOrigin = getComputedStyle(el).transformOrigin;
+    const pos = transformOrigin.split(/\s+/);
+    crosshair.style.left = `calc(${pos[0]} - 12px)`;
+    crosshair.style.top = `calc(${pos[1]} - 12px)`;
+  }
 
-    const crosshair = document.getElementById('crosshair');
-    const el = document.getElementById('example-element');
+  const crosshair = document.getElementById('crosshair');
+  const el = document.getElementById('example-element');
 
-    const observer = new MutationObserver(function() {
-        update();
-    });
+  const observer = new MutationObserver(() => {
+    update();
+  });
 
-    observer.observe(el, {
-        attributes: true,
-        attributeFilter: ['style']
-    });
+  observer.observe(el, {
+    attributes: true,
+    attributeFilter: ['style']
+  });
 
-    update();
-    crosshair.style.opacity = '1';
+  update();
+  crosshair.style.opacity = '1';
 });

live-examples/js-examples/array/array-at.js

@@ -2,7 +2,9 @@ const array1 = [5, 12, 8, 130, 44];
 
 let index = 2;
 
-console.log(`Using an index of ${index} the item returned is ${array1.at(index)}`);
+console.log(
+  `Using an index of ${index} the item returned is ${array1.at(index)}`
+);
 // expected output: "Using an index of 2 the item returned is 8"
 
 index = -2;

live-examples/js-examples/array/array-filter.js

@@ -1,6 +1,13 @@
-const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
+const words = [
+  'spray',
+  'limit',
+  'elite',
+  'exuberant',
+  'destruction',
+  'present'
+];
 
-const result = words.filter(word => word.length > 6);
+const result = words.filter((word) => word.length > 6);
 
 console.log(result);
 // expected output: Array ["exuberant", "destruction", "present"]

live-examples/js-examples/array/array-find.js

@@ -1,6 +1,6 @@
 const array1 = [5, 12, 8, 130, 44];
 
-const found = array1.find(element => element > 10);
+const found = array1.find((element) => element > 10);
 
 console.log(found);
 // expected output: 12

live-examples/js-examples/array/array-flatmap.js

@@ -1,6 +1,6 @@
 const arr1 = [1, 2, [3], [4, 5], 6, []];
 
-const flattened = arr1.flatMap(num => num);
+const flattened = arr1.flatMap((num) => num);
 
 console.log(flattened);
 // expected output: Array [1, 2, 3, 4, 5, 6]

live-examples/js-examples/array/array-foreach.js

@@ -1,6 +1,6 @@
 const array1 = ['a', 'b', 'c'];
 
-array1.forEach(element => console.log(element));
+array1.forEach((element) => console.log(element));
 
 // expected output: "a"
 // expected output: "b"

live-examples/js-examples/array/array-from.js

@@ -1,5 +1,5 @@
 console.log(Array.from('foo'));
 // expected output: Array ["f", "o", "o"]
 
-console.log(Array.from([1, 2, 3], x => x + x));
+console.log(Array.from([1, 2, 3], (x) => x + x));
 // expected output: Array [2, 4, 6]

live-examples/js-examples/array/array-groupby.js

@@ -1,12 +1,12 @@
 const inventory = [
   { name: 'asparagus', type: 'vegetables', quantity: 5 },
-  { name: 'bananas',  type: 'fruit', quantity: 0 },
+  { name: 'bananas', type: 'fruit', quantity: 0 },
   { name: 'goat', type: 'meat', quantity: 23 },
   { name: 'cherries', type: 'fruit', quantity: 5 },
   { name: 'fish', type: 'meat', quantity: 22 }
 ];
 
-const result = inventory.groupBy( ({ type }) => type );
+const result = inventory.groupBy(({ type }) => type);
 
 console.log(result.vegetables);
 // expected output: Array [Object { name: "asparagus", type: "vegetables", quantity: 5 }]

live-examples/js-examples/array/array-map.js

@@ -1,7 +1,7 @@
 const array1 = [1, 4, 9, 16];
 
 // pass a function to map
-const map1 = array1.map(x => x * 2);
+const map1 = array1.map((x) => x * 2);
 
 console.log(map1);
 // expected output: Array [2, 8, 18, 32]