Revise linting and incorporate linter feedback

packages/library/package.json

@@ -38,7 +38,7 @@
     "eslint": "^4.2.0",
     "eslint-config-airbnb": "^15.0.0",
     "eslint-plugin-import": "^2.6.0",
-    "eslint-plugin-jsx-a11y": "^6.0.0",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
     "eslint-plugin-react": "^7.1.0",
     "karma": "^1.7.0",
     "karma-chai": "^0.1.0",
@@ -65,6 +65,7 @@
       "no-console": 0,
       "no-else-return": 1,
       "no-param-reassign": 1,
+      "no-warning-comments": ["error", { "terms": [ "fixme", "xxx" ] }],
       "prefer-rest-params": 1,
       "radix": [2, "as-needed"],
       "react/no-multi-comp": 0,

packages/library/src/core.js

@@ -1,10 +1,11 @@
 import { extend, cloneDeep } from 'lodash'
+import Proxy from 'es2015-proxy'
+
 import { EventHandler } from './util/eventAPI'
 import { DomConnection } from './util/domEvents'
 import { Random } from './util/random'
 import { parseOption, parseAllOptions } from './util/options'
 import { preloadImage, preloadAudio } from './util/preload'
-import Proxy from 'es2015-proxy'
 
 // Define status codes
 export const status = Object.freeze({
@@ -166,7 +167,7 @@ export class Component extends EventHandler {
 
     // Collect options 'handed down' from higher-level components
     if (this.parent) {
-      const foo = this.parents.reduce(
+      this.parents.reduce(
         // Accumulate handed down options from parents
         (acc, cur) => {
           cur.options.handMeDowns.forEach(o => acc.add(o))
@@ -175,7 +176,7 @@ export class Component extends EventHandler {
         new Set(),
       ).forEach(
         // 'inherit' the option from the parent component
-        o => (this.options[o] = this.options[o] || this.parent.options[o])
+        o => (this.options[o] = this.options[o] || this.parent.options[o]),
       )
     }
 

packages/library/src/data.js

@@ -34,6 +34,7 @@ const escapeCsvCell = (c) => {
   return c
 }
 
+// eslint-disable-next-line import/prefer-default-export
 export class Store extends EventHandler {
   constructor(options={}) {
     // Construct the underlying EventHandler
@@ -288,7 +289,7 @@ export class Store extends EventHandler {
     return fetch(url, {
       method: 'post',
       headers: {
-        'Accept': 'application/json',
+        'Accept': 'application/json', // eslint-disable-line quote-props
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({

packages/library/src/flow.js

@@ -59,7 +59,7 @@ export class Sequence extends Component {
 
   async onRun() {
     // Make the first step
-    return await this.step()
+    return this.step()
   }
 
   onEnd() {
@@ -81,12 +81,12 @@ export class Sequence extends Component {
     // Move through the content
     const next = this.internals.iterator.next()
     if (next.done) {
-      return await this.end('completion')
+      return this.end('completion')
     } else {
       [this.internals.currentPosition, this.internals.currentComponent] = next.value
       this.internals.currentComponent.on('after:end', this.internals.stepper)
       this.triggerMethod('step')
-      return await this.internals.currentComponent.run()
+      return this.internals.currentComponent.run()
     }
   }
 

packages/library/src/html.js

@@ -68,7 +68,7 @@ export class Form extends Screen {
       if (e.target.getAttribute('form')) {
         // ... find it and ...
         const targetForm = this.options.el.querySelector(
-          `form#${ e.target.getAttribute('form') }`
+          `form#${ e.target.getAttribute('form') }`,
         )
 
         // ... submit that form instead

packages/library/src/index.js

@@ -1,7 +1,7 @@
 // Components
 import { Component, Dummy } from './core'
 import { Screen as CanvasScreen, Sequence as CanvasSequence,
-         Frame as CanvasFrame } from './canvas'
+  Frame as CanvasFrame } from './canvas'
 import { Screen, Form, Frame } from './html'
 import { Sequence, Parallel, Loop } from './flow'
 
@@ -63,6 +63,6 @@ export const util = {
     launch, exit,
   },
   tree: {
-    traverse, reduce
+    traverse, reduce,
   },
 }

packages/library/src/plugins/metadata.js

@@ -19,6 +19,10 @@ const getMetadata = () => {
 }
 
 export default class Metadata {
+  // TODO: The linter thinks it is not worth to use
+  // a class here. Possibly the plugin could accept
+  // additional data to include?
+  // eslint-disable-next-line class-methods-use-this
   handle(context, event) {
     if (event === 'prepare') {
       // If a datastore is available, save the metadata

packages/library/src/util/domEvents.js

@@ -127,6 +127,7 @@ const wrapHandler = function(handler, eventName, options=null, context=null) {
   }
 }
 
+// eslint-disable-next-line import/prefer-default-export
 export class DomConnection {
   constructor(options) {
     // Limit search for elements to a
@@ -168,11 +169,8 @@ export class DomConnection {
           // If the event is constrainted to a certain element
           // or a set of elements, search for these within the
           // specified element, and add the handler to each
-          for (const child of Array.from(this.el.querySelectorAll(selector))) {
-            child.addEventListener(
-              eventName, handler,
-            )
-          }
+          Array.from(this.el.querySelectorAll(selector))
+            .forEach(child => child.addEventListener(eventName, handler))
         } else {
           // If no selector is supplied, the listener is
           // added to the document itself
@@ -198,11 +196,8 @@ export class DomConnection {
 
         if (selector !== '') {
           // Remove listener from specified elements
-          for (const child of Array.from(this.el.querySelectorAll(selector))) {
-            child.removeEventListener(
-              eventName, handler,
-            )
-          }
+          Array.from(this.el.querySelectorAll(selector))
+            .forEach(child => child.removeEventListener(eventName, handler))
         } else {
           // Remove global listeners
           document.removeEventListener(

packages/library/src/util/fromObject.js

@@ -2,13 +2,11 @@ import { isObject } from 'lodash'
 
 // Retrieve an entry from a nested object
 // hierarchy, given a path
-const retrieveNested = (path, object) => {
-  let current = object
-  for (const level of path) {
-    current = current[level]
-  }
-  return current
-}
+const retrieveNested = (path, object) =>
+  path.reduce(
+    (subobject, subpath) => subobject[subpath],
+    object,
+  )
 
 // Construct a component given only an
 // object that specifies the options

packages/library/src/util/options.js

@@ -1,4 +1,4 @@
-import { entries, extend, template } from 'lodash'
+import { extend, template } from 'lodash'
 
 // TODO: Does this work in shorthand notation? () => {}
 const parsableOptions = function parsableOptions() {
@@ -77,13 +77,17 @@ export const parseAllOptions = function(options, context) {
   // Parse all of the options that are
   // marked as parsable, and save them to output
   // if the option has actually changed
-  for (const [key, metadata] of entries(optionsMetadata)) {
-    const candidate = parseOption.call(this, key, options[key], context, metadata)
+  Object.entries(optionsMetadata).forEach(([key, metadata]) => {
+    const candidate = parseOption.call(
+      this,
+      key, options[key],
+      context, metadata,
+    )
 
     if (candidate) {
       output[key] = candidate
     }
-  }
+  })
 
   return output
 }

packages/library/src/util/random.js

@@ -10,6 +10,7 @@ export const uuid4 = (random=Math.random) =>
   // tations, but this one is the clearest)
   '00000000-0000-4000-8000-000000000000'.replace(
     /[08]/g,
+    // eslint-disable-next-line no-bitwise
     v => (v ^ (random() * 16 >> v / 4)).toString(16),
   )
 
@@ -65,6 +66,7 @@ export class Random {
     while (unshuffledElements !== 0) {
       // Pick a random as-yet-unshuffleded array element
       // (note that the semicolon here is mandatory)
+      // eslint-disable-next-line no-plusplus
       const randomIndex = this.range(unshuffledElements--);
 
       // Swap the last unshuffled value with

packages/library/src/util/tree.js

@@ -1,15 +1,15 @@
-import { Component } from '../core'
 import { isArray, cloneDeep } from 'lodash'
+import { Component } from '../core'
 
 export const traverse = (root, callback) => {
   callback(root)
 
   // Retrieve metadata from component
-  const metadata = root.__proto__.constructor.metadata
+  const metadata = Object.getPrototypeOf(root).constructor.metadata
 
   if (metadata.nestedComponents) {
     // Retrieve nested components form associated options
-    metadata.nestedComponents.forEach(o => {
+    metadata.nestedComponents.forEach((o) => {
       const nested = root.options[o]
 
       if (isArray(nested)) {
@@ -30,7 +30,7 @@ export const reduce = (root, callback, initialValue) => {
   // the initial value throughout
   traverse(
     root,
-    current => accumulator = callback(accumulator, current),
+    current => (accumulator = callback(accumulator, current)),
   )
 
   return accumulator