Add CircleCI lint step to verify ES5 syntax for Internet Explorer (#4296

) * Add 18f/identity-es5-safe package * Add es5-safe script * Configure CircleCI to check ES5 safeness * Add JSDoc type annotations * Cast stream file value to string * Remove unnecessary eslint-disable Configured in eslintrc * Bump Mocha to latest version **Why**: ESM compat * Add test specs for identity-es5-safe
18F · Oct 9, 2020 · 2cd5364 · 2cd5364
1 parent 4ac261c
commit 2cd5364
Show file tree

Hide file tree

Showing 12 changed files with 401 additions and 141 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -184,6 +184,7 @@ jobs:
             bundle exec rubocop
             bundle exec slim-lint app/views
             make check_asset_strings
+            ./bin/webpack && yarn es5-safe
   build-release-container:
     working_directory: ~/identity-idp
     docker:

diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
 node_modules
+fixtures
diff --git a/app/javascript/packages/es5-safe/.eslintrc.json b/app/javascript/packages/es5-safe/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "no-restricted-syntax": "off",
+    "no-console": "off"
+  }
+}
diff --git a/app/javascript/packages/es5-safe/cli.js b/app/javascript/packages/es5-safe/cli.js
@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+import { isAllSafe } from './index.js';
+
+const patterns = process.argv.slice(2);
+if (patterns.length) {
+  isAllSafe(patterns).then((isSafe) => process.exit(isSafe ? 0 : 1));
+} else {
+  console.log('Usage: is-es5-safe <pattern>');
+  process.exit(1);
+}
diff --git a/app/javascript/packages/es5-safe/index.js b/app/javascript/packages/es5-safe/index.js
@@ -0,0 +1,44 @@
+import { promises as fsPromises } from 'fs';
+import { cpus } from 'os';
+import pAll from 'p-all';
+import glob from 'fast-glob';
+import acorn from 'acorn';
+
+const { readFile } = fsPromises;
+
+/**
+ * Returns a promise resolving to a boolean representing whether the file contains valid ES5 syntax.
+ *
+ * @param {string} file File path.
+ *
+ * @return {Promise<boolean>} Promise resolving to safety of file.
+ */
+export async function isSafe(file) {
+  try {
+    const fileText = await readFile(file, 'utf8');
+    acorn.parse(fileText, { ecmaVersion: 5 });
+    return true;
+  } catch (error) {
+    console.error(file, error);
+    return false;
+  }
+}
+
+/**
+ * Returns a promise resolving to a boolean representing whether the files corresponding to the
+ * given glob patterns contain valid ES5 syntax.
+ *
+ * @param {string[]} patterns Glob patterns.
+ *
+ * @return {Promise<boolean>} Promise resolving to safety of files corresponding to glob patterns.
+ */
+export async function isAllSafe(patterns) {
+  const files = glob.stream(patterns);
+
+  const queue = [];
+  for await (const file of files) {
+    queue.push(() => isSafe(/** @type {string} */ (file)));
+  }
+
+  return (await pAll(queue, { concurrency: cpus().length })).every(Boolean);
+}
diff --git a/app/javascript/packages/es5-safe/index.spec.js b/app/javascript/packages/es5-safe/index.spec.js
@@ -0,0 +1,37 @@
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { isSafe, isAllSafe } from './index.js';
+
+const currentDir = dirname(fileURLToPath(import.meta.url));
+
+describe('es5-safe', () => {
+  describe('isSafe', () => {
+    it('returns false and logs for unsafe file', async () => {
+      const result = await isSafe(resolve(currentDir, 'spec/fixtures/unsafe.js'));
+
+      expect(result).to.be.false();
+      expect(console).to.have.loggedError();
+    });
+
+    it('returns true for safe file', async () => {
+      const result = await isSafe(resolve(currentDir, 'spec/fixtures/safe.js'));
+
+      expect(result).to.be.true();
+    });
+  });
+
+  describe('isAllSafe', () => {
+    it('returns false and logs for pattern include unsafe file', async () => {
+      const result = await isAllSafe([resolve(currentDir, 'spec/fixtures/*.js')]);
+
+      expect(result).to.be.false();
+      expect(console).to.have.loggedError();
+    });
+
+    it('returns true for pattern include all safe files', async () => {
+      const result = await isAllSafe([resolve(currentDir, 'spec/fixtures/safe.js')]);
+
+      expect(result).to.be.true();
+    });
+  });
+});
diff --git a/app/javascript/packages/es5-safe/package.json b/app/javascript/packages/es5-safe/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@18f/identity-es5-safe",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "bin": {
+    "is-es5-safe": "./cli.js"
+  },
+  "dependencies": {
+    "acorn": "^6.4.2",
+    "fast-glob": "^3.2.4",
+    "p-all": "^3.0.0"
+  }
+}
diff --git a/app/javascript/packages/es5-safe/spec/fixtures/safe.js b/app/javascript/packages/es5-safe/spec/fixtures/safe.js
@@ -0,0 +1,3 @@
+var a = { a: true };
+var b = { b: true };
+var obj = { a: true, b: true };
diff --git a/app/javascript/packages/es5-safe/spec/fixtures/unsafe.js b/app/javascript/packages/es5-safe/spec/fixtures/unsafe.js
@@ -0,0 +1,3 @@
+const a = { a: true };
+const b = { b: true };
+const obj = { ...a, ...b };
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
   "scripts": {
     "typecheck": "tsc",
     "lint": "eslint app spec babel.config.js --ext .js,.jsx",
-    "test": "mocha 'spec/javascripts/**/**spec.js?(x)'",
+    "test": "mocha 'spec/javascripts/**/**spec.js?(x)' 'app/javascript/packages/**/*.spec.js?(x)'",
+    "es5-safe": "is-es5-safe public/packs/js/*.js",
     "build": "true"
   },
   "dependencies": {
@@ -34,6 +35,7 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
+    "@18f/identity-es5-safe": "file:./app/javascript/packages/es5-safe",
     "@babel/core": "^7.11.1",
     "@babel/eslint-parser": "^7.11.3",
     "@babel/eslint-plugin": "^7.11.3",
@@ -55,7 +57,7 @@
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.6",
     "jsdom": "^16.2.2",
-    "mocha": "^6.1.4",
+    "mocha": "^8.1.3",
     "prettier": "^2.0.5",
     "react-test-renderer": "^16.13.1",
     "sinon": "^9.0.2",

diff --git a/tsconfig.json b/tsconfig.json
@@ -15,5 +15,9 @@
     "app/javascript/packages",
     "app/javascript/packs/form-validation.js",
     "app/javascript/packs/submit-with-spinner.js"
+  ],
+  "exclude": [
+    "**/fixtures",
+    "**/*.spec.js"
   ]
 }