Move to trailing commas with Prettier

Only to the extent that ES5 permits them. This is the new default
for Prettier, and actually makes a lot of sense when editing code
as well as reviewing code changes.

Also update what code gets linted.

.prettierrc.js

@@ -15,6 +15,6 @@ module.exports = {
   semi: true,
   singleQuote: true,
   tabWidth: 2,
-  trailingComma: 'none',
-  useTabs: false
+  trailingComma: 'es5',
+  useTabs: false,
 };

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Add boolean value support for `allowOutsideClick` option
 - New `preventScroll` feature to *prevent* scrolling to the element getting focus if not in the viewport.
+- Changed code formatting to use dangling commas where ES5 supports them.
 
 ## 5.1.0
 

babel.config.js

@@ -4,6 +4,6 @@ module.exports = {
     //  ECMAScript 2015+ code by default, which is the original preset prior
     //  to upgrading to Babel 7
     // @see https://babeljs.io/docs/en/babel-preset-env#targets
-    '@babel/preset-env'
-  ]
+    '@babel/preset-env',
+  ],
 };

demo/js/allowoutsideclick.js

@@ -14,7 +14,7 @@ function initialize() {
     },
     onDeactivate: function () {
       container.className = 'trap';
-    }
+    },
   });
 }
 
@@ -55,7 +55,7 @@ document
         if (e.target === trigger) {
           return true;
         }
-      }
+      },
     }[event.target.value];
 
     focusTrap = initialize();

demo/js/default.js

@@ -8,7 +8,7 @@ var focusTrap = createFocusTrap('#default', {
   },
   onDeactivate: function () {
     container.className = 'trap';
-  }
+  },
 });
 
 document

demo/js/hidden-treasures.js

@@ -9,7 +9,7 @@ var focusTrap = createFocusTrap(container, {
   },
   onDeactivate: function () {
     container.className = 'trap';
-  }
+  },
 });
 
 document.getElementById('activate-ht').addEventListener('click', function () {

demo/js/iframe.js

@@ -8,7 +8,7 @@ var focusTrap = createFocusTrap('#iframe', {
   },
   onDeactivate: function () {
     container.className = 'trap';
-  }
+  },
 });
 
 document

demo/js/initial-element-no-escape.js

@@ -10,7 +10,7 @@ var focusTrap = createFocusTrap(container, {
     container.className = 'trap';
   },
   initialFocus: '#focused-input',
-  escapeDeactivates: false
+  escapeDeactivates: false,
 });
 
 document.getElementById('activate-iene').addEventListener('click', function () {

demo/js/initially-focused-container.js

@@ -12,7 +12,7 @@ var focusTrap = createFocusTrap('#ifc', {
   initialFocus: function () {
     return document.getElementById('ifc');
   },
-  clickOutsideDeactivates: true
+  clickOutsideDeactivates: true,
 });
 
 document.getElementById('activate-ifc').addEventListener('click', function () {

demo/js/input-activation.js

@@ -8,7 +8,7 @@ var focusTrap = createFocusTrap(container, {
   },
   onDeactivate: function () {
     container.className = 'trap';
-  }
+  },
 });
 
 document

demo/js/nested.js

@@ -6,14 +6,14 @@ var nested = document.getElementById('nested-nested');
 var primaryFocusTrap = createFocusTrap('#nested', {
   onDeactivate: function () {
     container.style.display = 'none';
-  }
+  },
 });
 
 var nestedFocusTrap = createFocusTrap('#nested-nested', {
   onDeactivate: function () {
     nested.style.display = 'none';
     primaryFocusTrap.unpause();
-  }
+  },
 });
 
 document

demo/js/radio.js

@@ -8,7 +8,7 @@ var focusTrap = createFocusTrap('#radio', {
   },
   onDeactivate: function () {
     container.className = 'trap';
-  }
+  },
 });
 
 document

demo/js/set-return-focus.js

@@ -9,7 +9,7 @@ var focusTrap = createFocusTrap('#setreturnfocus', {
   onDeactivate: function () {
     container.className = 'trap';
   },
-  setReturnFocus: '#overwritten-element'
+  setReturnFocus: '#overwritten-element',
 });
 
 document

demo/js/sibling.js

@@ -6,14 +6,14 @@ var second = document.getElementById('sibling-second');
 var firstFocusTrap = createFocusTrap('#sibling-first', {
   onDeactivate: function () {
     container.className = 'trap';
-  }
+  },
 });
 
 var secondFocusTrap = createFocusTrap('#sibling-second', {
   onDeactivate: function () {
     second.style.display = 'none';
     second.className = 'trap';
-  }
+  },
 });
 
 document

demo/js/tricky-initial-focus.js

@@ -10,7 +10,7 @@ var focusTrap = createFocusTrap(container, {
   },
   onDeactivate: function () {
     container.className = 'trap';
-  }
+  },
 });
 
 document.getElementById('activate-tif').addEventListener('click', function () {

index.js

@@ -32,7 +32,7 @@ var activeFocusTraps = (function () {
       if (trapQueue.length > 0) {
         trapQueue[trapQueue.length - 1].unpause();
       }
-    }
+    },
   };
 })();
 
@@ -44,7 +44,7 @@ function focusTrap(element, userOptions) {
   var config = {
     returnFocusOnDeactivate: true,
     escapeDeactivates: true,
-    ...userOptions
+    ...userOptions,
   };
 
   var state = {
@@ -53,14 +53,14 @@ function focusTrap(element, userOptions) {
     nodeFocusedBeforeActivation: null,
     mostRecentlyFocusedNode: null,
     active: false,
-    paused: false
+    paused: false,
   };
 
   var trap = {
     activate: activate,
     deactivate: deactivate,
     pause: pause,
-    unpause: unpause
+    unpause: unpause,
   };
 
   return trap;
@@ -146,19 +146,19 @@ function focusTrap(element, userOptions) {
     doc.addEventListener('focusin', checkFocusIn, true);
     doc.addEventListener('mousedown', checkPointerDown, {
       capture: true,
-      passive: false
+      passive: false,
     });
     doc.addEventListener('touchstart', checkPointerDown, {
       capture: true,
-      passive: false
+      passive: false,
     });
     doc.addEventListener('click', checkClick, {
       capture: true,
-      passive: false
+      passive: false,
     });
     doc.addEventListener('keydown', checkKey, {
       capture: true,
-      passive: false
+      passive: false,
     });
 
     return trap;
@@ -227,7 +227,7 @@ function focusTrap(element, userOptions) {
     if (container.contains(e.target)) return;
     if (config.clickOutsideDeactivates) {
       deactivate({
-        returnFocus: !tabbable.isFocusable(e.target)
+        returnFocus: !tabbable.isFocusable(e.target),
       });
       return;
     }

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "format": "prettier --write \"{*,src/**/*,test/**/*,demo/js/**/*,.github/workflows/*}.+(js|yml)\"",
     "format-check": "prettier --check \"{*,src/**/*,test/**/*,demo/js/**/*,.github/workflows/*}.+(js|yml)\"",
-    "lint": "eslint .",
+    "lint": "eslint \"*.js\" \"demo/**/*.js\"",
     "clean": "del-cli dist && make-dir dist",
     "build": "yarn clean && webpack",
     "start": "budo demo/js/index.js:demo-bundle.js --dir demo --live -- -t babelify",

webpack.config.js

@@ -25,7 +25,7 @@ const config = {
     //  variable names and static values to their shortest representation
     //  possible while maintaining critical names
     // @see https://webpack.js.org/guides/tree-shaking/
-    minimize: true
+    minimize: true,
   },
   module: {
     rules: [
@@ -34,28 +34,28 @@ const config = {
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
-          options: babelConfig
-        }
-      }
-    ]
+          options: babelConfig,
+        },
+      },
+    ],
   },
   plugins: [
     new BannerPlugin({
       banner: getBanner(),
-      raw: true
-    })
+      raw: true,
+    }),
   ],
   watchOptions: {
     // @see https://webpack.js.org/configuration/watch/
-    ignored: ['node_modules/**', 'dist/**', '**/*.spec.js', '**/*.test.js']
-  }
+    ignored: ['node_modules/**', 'dist/**', '**/*.spec.js', '**/*.test.js'],
+  },
 };
 
 const outputConfig = {
   path: path.resolve('./dist'),
   libraryTarget: 'umd',
   library: 'focusTrap',
-  filename: null // specify in specialized build config
+  filename: null, // specify in specialized build config
 };
 
 module.exports = [
@@ -65,8 +65,8 @@ module.exports = [
     name: 'dev',
     output: {
       ...outputConfig,
-      filename: `${pkg.name}.js`
-    }
+      filename: `${pkg.name}.js`,
+    },
   },
   // Prod build
   {
@@ -76,7 +76,7 @@ module.exports = [
     devtool: false, // no source map
     output: {
       ...outputConfig,
-      filename: `${pkg.name}.min.js`
-    }
-  }
+      filename: `${pkg.name}.min.js`,
+    },
+  },
 ];