refactor(lint:js): use gts for JS linting (GoogleChrome#3130)

* refactor: use `gts` for JS linting

* refactor: fix all linted errors

* refactor(generate-salt): import `BaseElement`

* refactor(web-assessment): test if boolean if `typeof x !== 'boolean'`

* fix(BaseStateElement): add `onStateChanged` method

* docs(BaseStateElement): add explanation why method exists

* refactor: use only single quotes but allow template literals

* refactor(generate-salt): recursively call if id exists

* refactor: remove spaces in `html` usage

* refactor: remove unused component(s)

* fix(eslint): allow standard function callbacks in mocha tests

* refactor: tweak some more code based on feedback

* docs(BaseStateElement): document `onStateChanged` method

Author: MichaelSolati

.eleventy.js

@@ -84,7 +84,7 @@ const {
   serviceWorkerPartials,
 } = require(`./${transformsDir}/service-worker-partials`);
 
-module.exports = function(config) {
+module.exports = function (config) {
   // ----------------------------------------------------------------------------
   // PLUGINS
   // ----------------------------------------------------------------------------
@@ -104,7 +104,7 @@ module.exports = function(config) {
     permalink: true,
     permalinkClass: 'w-headline-link',
     permalinkSymbol: '#',
-    slugify: function(str) {
+    slugify: function (str) {
       return slugify(str, {
         replacement: '-',
         lower: true,
@@ -114,7 +114,7 @@ module.exports = function(config) {
   const markdownItAttrsOpts = {
     leftDelimiter: '{:',
     rightDelimiter: '}',
-    allowedAttributes: ['id', 'class', /^data\-.*$/],
+    allowedAttributes: ['id', 'class', /^data-.*$/],
   };
 
   const mdLib = markdownIt(markdownItOptions)
@@ -155,10 +155,10 @@ module.exports = function(config) {
   config.addCollection('tags', tags);
   // Turn collection.all into a lookup table so we can use findBySlug
   // to quickly find collection items without looping.
-  config.addCollection('memoized', function(collection) {
+  config.addCollection('memoized', (collection) => {
     return memoize(collection.getAll());
   });
-  config.addCollection('algolia', function(collection) {
+  config.addCollection('algolia', (collection) => {
     if (process.env.ELEVENTY_ENV === 'prod') {
       const algoliaPosts = require(`./${collectionsDir}/algolia-posts`);
       return algoliaPosts(collection);

.eslintrc.js

@@ -1,10 +1,5 @@
 module.exports = {
-  plugins: ['prettier'],
-  extends: [
-    'eslint-config-prettier', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier.
-    'google', // Uses google style guide for js.
-    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-  ],
+  extends: ['./node_modules/gts/.eslintrc.json'],
   env: {
     es6: true,
     node: true,
@@ -18,6 +13,8 @@ module.exports = {
   },
   globals: {
     customElements: true,
+    firebase: true,
+    ga: true,
   },
   rules: {
     indent: [
@@ -28,6 +25,36 @@ module.exports = {
       },
     ],
     'new-cap': 0,
+    'no-case-declarations': 0,
+    'node/no-unpublished-import': 0,
+    'node/no-unpublished-require': 0,
+    'node/no-unsupported-features/es-syntax': 0,
+    'node/no-missing-import': [
+      'error',
+      {
+        allowModules: [
+          'cache-manifest',
+          'layout-template',
+          'webdev_analytics',
+          'webdev_config',
+          'webdev_entrypoint',
+        ],
+      },
+    ],
+    quotes: [
+      'warn',
+      'single',
+      {avoidEscape: true, allowTemplateLiterals: true},
+    ],
     'require-jsdoc': 0,
   },
+  overrides: [
+    {
+      files: ['test/**/*.js'],
+      env: {mocha: true},
+      rules: {
+        'prefer-arrow-callback': 0,
+      },
+    },
+  ],
 };

.prettierrc.js

@@ -1,9 +1,8 @@
 module.exports = {
+  ...require('gts/.prettierrc.json'),
   arrowParens: 'always',
-  bracketSpacing: false,
   printWidth: 80,
   semi: true,
-  singleQuote: true,
   tabWidth: 2,
   trailingComma: 'all',
 };

build.js

@@ -35,7 +35,7 @@ const buildVirtualJSON = require('./src/build/virtual-json');
 
 process.on('unhandledRejection', (reason, p) => {
   log.error('Build had unhandled rejection', reason, p);
-  process.exit(1);
+  throw new Error(`Build had unhandled rejection ${reason}`);
 });
 
 /**
@@ -50,12 +50,7 @@ const virtualImports = {
   webdev_config: {
     isProd,
     env: process.env.ELEVENTY_ENV || 'dev',
-    version:
-      'v' +
-      new Date()
-        .toISOString()
-        .replace(/[\D]/g, '')
-        .slice(0, 12),
+    version: 'v' + new Date().toISOString().replace(/[\D]/g, '').slice(0, 12),
     firebaseConfig: isProd ? site.firebase.prod : site.firebase.staging,
   },
   webdev_entrypoint: null,
@@ -351,7 +346,7 @@ async function compressOutput(generated) {
   log(`Terser JS output is ${(ratio * 100).toFixed(2)}% of source`);
 }
 
-(async function() {
+(async function () {
   const generatedCount = await build();
   log(`Generated ${generatedCount} files`);
   if (!isProd) {

compile-css.js

@@ -21,7 +21,7 @@ const fs = require('fs');
 const path = require('path');
 const log = require('fancy-log');
 
-const sassEngine = (function() {
+const sassEngine = (function () {
   try {
     // node-sass is faster, but regularly fails to install correctly (native bindings)
     return require('node-sass');

gulpfile.js

@@ -22,7 +22,8 @@ const rename = require('gulp-rename');
 const through2 = require('through2');
 
 /* eslint-disable max-len */
-const assetTypes = `jpg,jpeg,png,svg,gif,webp,webm,mp4,mov,ogg,wav,mp3,txt,yaml`;
+const assetTypes =
+  'jpg,jpeg,png,svg,gif,webp,webm,mp4,mov,ogg,wav,mp3,txt,yaml';
 /* eslint-enable max-len */
 
 const isProd = process.env.ELEVENTY_ENV === 'prod';
@@ -98,7 +99,7 @@ gulp.task('copy-content-assets', () => {
 
 gulp.task('copy-node_modules-assets', () => {
   return gulp
-    .src([`./node_modules/@webcomponents/webcomponentsjs/bundles/*.js`])
+    .src(['./node_modules/@webcomponents/webcomponentsjs/bundles/*.js'])
     .pipe(gulp.dest('./dist/lib/webcomponents/bundles/'));
 });
 

index-algolia.js

@@ -25,10 +25,7 @@ const raw = fs.readFileSync('dist/en/algolia.json', 'utf-8');
 const indexed = JSON.parse(raw);
 
 // Revision will look like "YYYYMMDDHHMM".
-const revision = new Date()
-  .toISOString()
-  .substring(0, 16)
-  .replace(/\D/g, '');
+const revision = new Date().toISOString().substring(0, 16).replace(/\D/g, '');
 const primaryIndexName = 'webdev';
 const deployIndexName = `webdev_deploy_${revision}`;
 
@@ -59,10 +56,10 @@ async function index() {
 
   // Move our temporary deploy index on-top of the primary index, atomically.
   await client.moveIndex(deployIndex.indexName, primaryIndex.indexName);
-  log(`Done!`);
+  log('Done!');
 }
 
 index().catch((err) => {
   log.error(err);
-  process.exit(1);
+  throw err;
 });

karma.conf.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-module.exports = function(config) {
+module.exports = function (config) {
   // Test modes:
   // quick: single run tests in headless browser.
   // dev:   watch tests in headless browser.