[Tooling] Expand browsers target while keeping Polyfills under control (

#709)

* expand browsers target

* add eslint-plugin-compat

* sort polyfils

* adjust readme

* add polyfills sync check action

* only build js

* trim

* add Element.prototype.closest

* add closest to demo links

* fix ignore

.browserslistrc

@@ -1,2 +1 @@
-> 5%
-IE 11
+> 1%

.eslintrc → .eslintrc.json

@@ -2,13 +2,18 @@
   "parserOptions": {
     "ecmaVersion": 2020
   },
-  "extends": ["airbnb-base", "plugin:prettier/recommended"],
+  "extends": [
+    "airbnb-base",
+    "plugin:prettier/recommended",
+    "plugin:compat/recommended"
+  ],
   "plugins": ["prettier"],
   "env": {
     "es6": true,
     "browser": true
   },
   "rules": {
+    "import/prefer-default-export": "off",
     "import/no-extraneous-dependencies": [
       "error",
       {
@@ -41,7 +46,8 @@
         "mocha": true
       },
       "rules": {
-        "no-restricted-syntax": "off"
+        "no-restricted-syntax": "off",
+        "compat/compat": "off"
       }
     },
     {
@@ -51,5 +57,18 @@
         "cypress/globals": true
       }
     }
-  ]
+  ],
+  "settings": {
+    "polyfills": [
+      "Array.from",
+      "Array.prototype.find",
+      "Array.prototype.includes",
+      "Symbol",
+      "Symbol.iterator",
+      "Object.assign",
+      "CustomEvent",
+      "Element.prototype.classList",
+      "Element.prototype.closest"
+    ]
+  }
 }

.github/actions-scripts/polyfills-sync.js

@@ -0,0 +1,14 @@
+const { readFileSync } = require('fs');
+const path = require('path');
+const assert = require('assert');
+
+const readme = readFileSync(path.resolve(__dirname, '../../README.md'), 'utf8');
+
+const polyfillsFromDocs = /^```polyfills\s*\n([^`]+)\n^```/m
+  .exec(readme)[1]
+  .split('\n')
+  .map(v => v.trim())
+  .sort();
+// @ts-ignore
+const polyfillsFromSettings = require('../../.eslintrc.json').settings.polyfills.sort();
+assert.deepStrictEqual(polyfillsFromDocs, polyfillsFromSettings);

.github/workflows/lint.yml

@@ -31,3 +31,8 @@ jobs:
           if [[ -z $(sed -e 's/[[:space:]]*$//' <<<${CHANGED_JS}) ]]; then CHANGED_JS="src/scripts"; fi
           echo $CHANGED_JS
           node node_modules/eslint/bin/eslint.js $CHANGED_JS
+
+      - name: Lint JS bundle
+        run: |
+          npm run js:build
+          npx eslint --no-ignore ./public/assets/scripts/*.js

.github/workflows/polyfills-sync.yml

@@ -0,0 +1,23 @@
+name: Polyfills documentation
+
+on:
+  pull_request:
+    paths:
+      - 'README.md'
+      - '.browserslistrc'
+      - '.eslintrc.json'
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+        with:
+          fetch-depth: 1
+
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - name: Check Polyfills documentation and settings sync
+        run: node .github/actions-scripts/polyfills-sync.js

README.md

@@ -1029,29 +1029,30 @@ example.setChoiceByValue('Two'); // Choice with value of 'Two' has now been sele
 
 ## Browser compatibility
 
-Choices is compiled using [Babel](https://babeljs.io/) to enable support for [ES5 browsers](http://caniuse.com/#feat=es5). If you need to support a browser that does not support one of the features listed below, I suggest including a polyfill from the very good [polyfill.io](https://cdn.polyfill.io/v2/docs/):
+Choices is compiled using [Babel](https://babeljs.io/) targeting browsers [with more that 1% of global usage](https://github.com/jshjohnson/Choices/blob/master/.browserslistrc) and expecting that features [listed below](https://github.com/jshjohnson/Choices/blob/master/.eslintrc.json#L62) are available or polyfilled in browser.
+You may see exact list of target browsers by running `npx browserslist` withing this repository folder.
+If you need to support a browser that does not have one of the features listed below,
+I suggest including a polyfill from the very good [polyfill.io](https://polyfill.io/v3/):
 
 **Polyfill example used for the demo:**
 
 ```html
-<script src="https://cdn.polyfill.io/v2/polyfill.js?features=es5,fetch,Element.prototype.classList,requestAnimationFrame,Node.insertBefore,Node.firstChild,CustomEvent"></script>
+<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=es5,es6,fetch,Array.prototype.includes,CustomEvent,Element.prototype.closest"></script>
 ```
 
 **Features used in Choices:**
 
-- Array.prototype.forEach
-- Array.prototype.map
-- Array.prototype.find
-- Array.prototype.some
-- Array.prototype.includes
-- Array.from
-- Array.prototype.reduce
-- Array.prototype.indexOf
-- Object.assign
-- Element.prototype.classList
-- Element.prototype.closest
-- window.requestAnimationFrame
-- CustomEvent
+```polyfills
+Array.from
+Array.prototype.find
+Array.prototype.includes
+Symbol
+Symbol.iterator
+Object.assign
+CustomEvent
+Element.prototype.classList
+Element.prototype.closest
+```
 
 ## Development
 

package.json

@@ -67,6 +67,7 @@
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-config-prettier": "^6.4.0",
     "eslint-loader": "^3.0.2",
+    "eslint-plugin-compat": "3.3.0",
     "eslint-plugin-cypress": "^2.7.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-prettier": "^3.1.1",

public/assets/scripts/.eslintrc.js

@@ -0,0 +1,24 @@
+
+// get polyfill settings from top level config
+// @ts-ignore
+const { settings } = require('../../../.eslintrc.json');
+
+// Adding non-polyfilable Symbol-related functions as they are most probably
+// behind the flag
+
+settings.polyfills.push('Symbol.toStringTag', 'Symbol.for', 'Object.getOwnPropertySymbols', 'Object.getOwnPropertyDescriptors')
+
+module.exports = /** @type {import('eslint').Linter.Config} */({
+  root: true,
+  extends: [
+    "plugin:compat/recommended"
+  ],
+  parserOptions: {
+    // ensure that it's compatible with ES5 browsers, so, no `const`, etc
+    ecmaVersion: 5
+  },
+  env: {
+    browser: true
+  },
+  settings
+})

public/index.html

@@ -47,7 +47,7 @@
     <!-- End ignore these -->
 
     <!-- Optional includes -->
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=es5%2Ces6%2CArray.prototype.includes%2Cfetch%2CCustomEvent"></script>
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es5%2Ces6%2CArray.prototype.includes%2Cfetch%2CCustomEvent%2CElement.prototype.closest"></script>
     <!-- End optional includes -->
 
     <!-- Choices includes -->

src/scripts/actions/general.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-
 export const setIsLoading = isLoading => ({
   type: 'SET_IS_LOADING',
   isLoading,

src/scripts/actions/groups.js

@@ -1,6 +1,5 @@
 import { ACTION_TYPES } from '../constants';
 
-/* eslint-disable import/prefer-default-export */
 export const addGroup = (value, id, active, disabled) => ({
   type: ACTION_TYPES.ADD_GROUP,
   value,