Improve linting to check for ES5 conformance (with exceptions to allow use of ES6 classes in certain modules) (#5342)

* Switch semistandard to standardx

* Running with latest semistandard

* Tighten exceptions for use of `class` as tightly as possible

* Alphabetize exceptions

* Enforce computed-property-spacing rule

* Enforce "no-multiple-empty-lines" rule

* Enforce "no-unused-expressions" rule

* Enforce 'no-use-before-define' rule

* Enforce 'object-curly-newline' rule

* Enforce 'quotes' rule

* Enforce 'spaced-comment' rule

* Enforce 'valid-typeof' rule

* Add comments explaining unenforced rules

* Apply 'array-bracket-spacing' rule

* Final comments on unused linting rules from semistandard v17

* More comments to explain config

* PR review feedback

* PR feedback

Previous attempt didn't preserve this in forEach() callback.  This version should work better (while still only using ES5 constructs).

* Correct merge issue from rebase; linting issues.

Author: diarmidmackenzie

.eslintrc.json

@@ -0,0 +1,67 @@
+{
+  "extends": ["semistandard", "standard-jsx"],
+  "parserOptions": {
+    "ecmaVersion": 12
+  },
+  "rules": {
+    /* These rules are incompatible with ES5. */
+    "no-var": "off",
+    "object-shorthand": "off",
+    "prefer-const": "off",
+    "prefer-regex-literals": "off",
+
+    /* These rules are compatible with ES5
+       However they involve non-trivial code changes
+       Therefore need more careful review before adopting. */ 
+    "array-callback-return": "off",
+    "no-mixed-operators": "off",
+    "no-unreachable-loop": "off",
+    "no-useless-return": "off",
+    "prefer-promise-reject-errors": "off",
+
+    /* These rules are compatible with ES5
+       However they involve large-scale changes to the codebase, so
+       careful co-ordination is needed in adopting the rule to avoid 
+       creating merge issues for other PRs. */
+    "dot-notation": "off",
+    "indent": "off",
+    "no-multi-spaces": "off",
+    "no-unused-vars": "off",
+    "object-curly-spacing": "off",
+    "quote-props": "off"
+  },
+  "overrides": [
+    {
+      /* Code within /src is restricted to using ES5 JavaScript 
+        The exception is that ES6 classes are used sparingly - see exceptions below. */
+      "files": ["./src/**/*.js"],
+      
+      "parserOptions": {
+        "sourceType": "script",
+        "ecmaVersion": 5
+      }
+    },
+    {
+      /* These modules use ES6 classes, and so are parsed as ES6 to avoid errors. */
+      "files": ["./src/core/**/a-*.js"],
+      "parserOptions": {
+        "ecmaVersion": 6
+      }
+    },
+    {
+      /* This module use ES6 classes, and so is parsed as ES6 to avoid errors. */
+      "files": ["./src/extras/primitives/primitives.js"],
+      "parserOptions": {
+        "ecmaVersion": 6
+      }
+    },
+    {
+      /* This code is external, and the ES5 restrictions do not apply to it. */
+      "files": ["./src/lib/**/*.js"],
+      "parserOptions": {
+        "sourceType": "module",
+        "ecmaVersion": 12
+      }
+    }
+  ]
+}

examples/showcase/link-traversal/js/components/aframe-tooltip-component.js

@@ -369,4 +369,4 @@
 
 /***/ })
 /******/ ]);
-/*eslint-enable */
+/* eslint-enable */

examples/showcase/ui/info-panel.js

@@ -4,7 +4,6 @@ AFRAME.registerComponent('info-panel', {
     var buttonEls = document.querySelectorAll('.menu-button');
     var fadeBackgroundEl = this.fadeBackgroundEl = document.querySelector('#fadeBackground');
 
-    this.movieImageEl;
     this.movieTitleEl = document.querySelector('#movieTitle');
     this.movieDescriptionEl = document.querySelector('#movieDescription');
 

package.json

@@ -12,8 +12,8 @@
     "docs": "markserv --dir docs --port 9001",
     "preghpages": "node ./scripts/preghpages.js",
     "ghpages": "ghpages -p gh-pages/",
-    "lint": "semistandard -v | snazzy",
-    "lint:fix": "semistandard --fix",
+    "lint": "standardx -v | snazzy",
+    "lint:fix": "standardx --fix",
     "precommit": "npm run lint",
     "prepush": "node scripts/testOnlyCheck.js",
     "prerelease": "node scripts/release.js 1.4.1 1.4.2",
@@ -35,11 +35,11 @@
     "vendor/**/*"
   ],
   "dependencies": {
+    "@ungap/custom-elements": "^1.1.0",
     "buffer": "^6.0.3",
     "custom-event-polyfill": "^1.0.6",
     "debug": "ngokevin/debug#noTimestamp",
     "deep-assign": "^2.0.0",
-    "@ungap/custom-elements": "^1.1.0",
     "load-bmfont": "^1.2.3",
     "object-assign": "^4.0.1",
     "present": "0.0.6",
@@ -58,6 +58,9 @@
     "chalk": "^1.1.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
+    "eslint": "^8.45.0",
+    "eslint-config-semistandard": "^17.0.0",
+    "eslint-config-standard-jsx": "^11.0.0",
     "ghpages": "0.0.8",
     "git-rev": "^0.2.1",
     "glob": "^8.0.3",
@@ -76,12 +79,12 @@
     "markserv": "github:sukima/markserv#feature/fix-broken-websoketio-link",
     "mocha": "^10.0.0",
     "replace-in-file": "^2.5.3",
-    "semistandard": "^9.0.0",
     "shelljs": "^0.7.7",
     "shx": "^0.2.2",
     "sinon": "<12.0.0",
     "sinon-chai": "^3.7.0",
     "snazzy": "^5.0.0",
+    "standardx": "^7.0.0",
     "style-loader": "^3.3.1",
     "too-wordy": "ngokevin/too-wordy",
     "webpack": "^5.73.0",
@@ -91,7 +94,7 @@
     "write-good": "^1.0.8"
   },
   "link": true,
-  "semistandard": {
+  "standardx": {
     "ignore": [
       "build/**",
       "dist/**",

scripts/docsLint.js

@@ -51,7 +51,7 @@ pages.forEach(function checkPage (pagePath) {
   }
 
   // Unused defined links: `[page]: ../page.md -> [*][page]`
-  let referenceRegex = new RegExp(`\\[\(\.\*\)\?\\]: \.\*`, 'g');
+  let referenceRegex = new RegExp('\\[\(\.\*\)\?\\]: \.\*', 'g');
   match = referenceRegex.exec(content);
   while (match !== null) {
     referencingRegex = new RegExp(`\\[${match[1]}\\]`, 'g');

src/components/hand-tracking-controls.js

@@ -183,11 +183,12 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
     return function () {
       var jointPoses = this.jointPoses;
       var controller = this.el.components['tracked-controls'] && this.el.components['tracked-controls'].controller;
-      var i = 0;
       if (!controller || !this.mesh) { return; }
       this.mesh.visible = false;
       if (!this.hasPoses) { return; }
-      for (var inputjoint of controller.hand.values()) {
+      var inputjoints = controller.hand.values();
+      for (var i = 0; i < inputjoints.length; i++) {
+        var inputjoint = inputjoints[i];
         var bone = this.getBone(inputjoint.jointName);
         if (bone != null) {
           this.mesh.visible = true;
@@ -341,4 +342,3 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
     this.el.setObject3D('mesh', mesh);
   }
 });
-

src/components/scene/ar-hit-test.js

@@ -436,8 +436,8 @@ module.exports.Component = register('ar-hit-test', {
     tempImageData = this.context.getImageData(0, 0, 512, 512);
     for (var i = 0; i < 512 * 512; i++) {
       // if it's a little bit transparent but not opaque make it middle transparent
-      if (tempImageData.data[ i * 4 + 3 ] !== 0 && tempImageData.data[ i * 4 + 3 ] !== 255) {
-        tempImageData.data[ i * 4 + 3 ] = 128;
+      if (tempImageData.data[i * 4 + 3] !== 0 && tempImageData.data[i * 4 + 3] !== 255) {
+        tempImageData.data[i * 4 + 3] = 128;
       }
     }
     this.context.putImageData(tempImageData, 0, 0);

src/components/scene/pool.js

@@ -128,7 +128,7 @@ module.exports.Component = registerComponent('pool', {
     return el;
   },
 
-  updateRaycasters () {
+  updateRaycasters: function () {
     var raycasterEls = document.querySelectorAll('[raycaster]');
 
     raycasterEls.forEach(function (el) {

src/core/a-cubemap.js

@@ -61,4 +61,3 @@ class ACubeMap extends HTMLElement {
 }
 
 customElements.define('a-cubemap', ACubeMap);
-

src/lib/rStatsAframe.js

@@ -9,10 +9,10 @@ window.aframeStats = function (scene) {
       caption: 'Load Time'
     }
   };
-  var _groups = [ {
+  var _groups = [{
     caption: 'A-Frame',
-    values: [ 'te', 'lt' ]
-  } ];
+    values: ['te', 'lt']
+  }];
 
   function _update () {
     _rS('te').set(getEntityCount());