Improve linting to check for ES5 conformance (with exceptions to allo…

…w 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.

.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());

src/shaders/ios10hls.js

@@ -30,4 +30,3 @@ module.exports.Shader = registerShader('ios10hls', {
     '}'
   ].join('\n')
 });
-

src/shaders/shadow.js

@@ -25,4 +25,3 @@ module.exports.Shader = registerShader('shadow', {
     this.material.transparent = data.transparent;
   }
 });
-

src/systems/renderer.js

@@ -85,7 +85,7 @@ module.exports.System = registerSystem('renderer', {
     var data = this.data;
     var rates = xrSession.supportedFrameRates;
     if (rates && xrSession.updateTargetFrameRate) {
-      let targetRate;
+      var targetRate;
       if (rates.includes(90)) {
         targetRate = data.highRefreshRate ? 90 : 72;
       } else {

src/utils/coordinates.js

@@ -11,7 +11,6 @@ var COORDINATE_KEYS = ['x', 'y', 'z', 'w'];
 var regex = /^\s*((-?\d*\.{0,1}\d+(e-?\d+)?)\s+){2,3}(-?\d*\.{0,1}\d+(e-?\d+)?)\s*$/;
 module.exports.regex = regex;
 
-var OBJECT = 'object';
 var whitespaceRegex = /\s+/g;
 
 /**
@@ -46,7 +45,7 @@ function parse (value, defaultVec) {
   }
 
   if (value === null || value === undefined) {
-    return typeof defaultVec === OBJECT ? extend({}, defaultVec) : defaultVec;
+    return typeof defaultVec === 'object' ?   extend({}, defaultVec) : defaultVec;
   }
 
   coordinate = value.trim().split(whitespaceRegex);
@@ -74,7 +73,7 @@ module.exports.parse = parse;
  */
 function stringify (data) {
   var str;
-  if (typeof data !== OBJECT) { return data; }
+  if (typeof data !== 'object') { return data; }
   str = data.x + ' ' + data.y;
   if (data.z != null) { str += ' ' + data.z; }
   if (data.w != null) { str += ' ' + data.w; }

tests/components/geometry.test.js

@@ -153,8 +153,7 @@ suite('standard geometries', function () {
 
   test('icosahedron', function () {
     var geometry;
-    el.setAttribute('geometry', {
-      buffer: false, primitive: 'icosahedron', detail: 0, radius: 5});
+    el.setAttribute('geometry', {buffer: false, primitive: 'icosahedron', detail: 0, radius: 5});
 
     geometry = el.getObject3D('mesh').geometry;
     assert.equal(geometry.type, 'IcosahedronGeometry');
@@ -174,8 +173,7 @@ suite('standard geometries', function () {
 
   test('ring', function () {
     var geometry;
-    el.setAttribute('geometry', {
-      buffer: false, primitive: 'ring', radiusInner: 1, radiusOuter: 2, segmentsTheta: 3});
+    el.setAttribute('geometry', {buffer: false, primitive: 'ring', radiusInner: 1, radiusOuter: 2, segmentsTheta: 3});
 
     geometry = el.getObject3D('mesh').geometry;
     assert.equal(geometry.type, 'RingGeometry');

tests/components/hand-tracking-controls.test.js

@@ -97,4 +97,3 @@ suite('tracked-controls-webxr', function () {
     });
   });
 });
-

tests/components/oculus-go-controls.test.js

@@ -148,7 +148,7 @@ suite('oculus-go-controls', function () {
   });
 
   suite('buttonchanged', function () {
-    [ { button: 'trackpad', id: 0 },
+    [{ button: 'trackpad', id: 0 },
       { button: 'trigger', id: 1 }
     ].forEach(function (buttonDescription) {
       test('if we get buttonchanged for button ' + buttonDescription.id + ', emit ' + buttonDescription.button + 'changed', function (done) {

tests/components/tracked-controls-webxr.test.js

@@ -73,4 +73,3 @@ suite('tracked-controls-webxr', function () {
     });
   });
 });
-

tests/components/tracked-controls.test.js

@@ -27,4 +27,3 @@ suite('tracked-controls', function () {
     assert.notOk(el.components['tracked-controls-webxr']);
   });
 });
-

tests/components/vive-controls.test.js

@@ -143,7 +143,7 @@ suite('vive-controls', function () {
 
   suite('buttonchanged', function () {
     // Generate 3 tests for each button. Verify that it fires up/down/changed for all remapped buttons.
-    [ { button: 'trackpad', id: 0 },
+    [{ button: 'trackpad', id: 0 },
       { button: 'trigger', id: 1 },
       { button: 'grip', id: 2 },
       { button: 'menu', id: 3 },

tests/components/vive-focus-controls.test.js

@@ -153,7 +153,7 @@ suite('vive-focus-controls', function () {
   });
 
   suite('buttonchanged', function () {
-    [ { button: 'trackpad', id: 0 },
+    [{ button: 'trackpad', id: 0 },
       { button: 'trigger', id: 1 }
     ].forEach(function (buttonDescription) {
       test('if we get buttonchanged for button ' + buttonDescription.id + ', emit ' + buttonDescription.button + 'changed', function (done) {

tests/core/a-entity.test.js

@@ -24,7 +24,7 @@ var TestComponent = {
 };
 
 suite('a-entity', function () {
-  var el = el;
+  var el;
 
   setup(function (done) {
     elFactory().then(_el => {

tests/core/a-mixin.test.js

@@ -218,4 +218,3 @@ suite('a-mixin (detached)', function () {
     });
   });
 });
-

tests/core/component.test.js

@@ -1194,7 +1194,7 @@ suite('registerComponent warnings', function () {
     setTimeout(() => {
       sceneEl = el.sceneEl;
       script = document.createElement('script');
-      script.innerHTML = `AFRAME.registerComponent('testorder', {});`;
+      script.innerHTML = 'AFRAME.registerComponent(\'testorder\', {});';
       done();
     });
   });

tests/systems/renderer.test.js

@@ -1,7 +1,9 @@
 /* global assert, suite, test, setup, teardown, THREE */
-var {sortFrontToBack,
+var {
+sortFrontToBack,
      sortRenderOrderOnly,
-     sortBackToFront} = require('systems/renderer');
+     sortBackToFront
+} = require('systems/renderer');
 
 suite('renderer', function () {
   function createScene () {

tests/utils/isIOSOlderThan10.test.js

@@ -28,7 +28,7 @@ suite('isIOSOlderThan10', function () {
   });
 
   test('is false for webview', function () {
-    var chromeiOS = `Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/70.0.3538.60 Mobile/15E148 Safari/605.1`;
+    var chromeiOS = 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/70.0.3538.60 Mobile/15E148 Safari/605.1';
     assert.notOk(isIOSOlderThan10(chromeiOS));
   });
 });

tests/utils/objects.test.js

@@ -124,7 +124,8 @@ suite('utils.objects', function () {
     });
 
     test('can compare the same object with self reference', function () {
-      var objA = {x: 0, y: 0, z: 0, self: objA};
+      var objA = {x: 0, y: 0, z: 0};
+      objA.self = objA;
       assert.ok(deepEqual(objA, objA));
     });