Move async loading of validations to saga

For reasons I’m no longer totally clear on, we asynchronously loaded
each linter library discretely. Instead, just load the entire
validations module when needed, substantially reducing the footprint of
asynchronous loading,  and also allowing the validations module to be
tested without needing to do async loading in a test environment (which
anyway seems weird for unit tests).

Author: Mat Brown

src/sagas/errors.js

@@ -10,8 +10,17 @@ import {
 } from 'redux-saga/effects';
 import Analyzer from '../analyzers';
 import {getCurrentProject} from '../selectors';
-import validations from '../validations';
 import {validatedSource} from '../actions/errors';
+import retryingFailedImports from '../util/retryingFailedImports';
+
+export async function importValidations() {
+  return retryingFailedImports(
+    () => import(
+      /* webpackChunkName: 'mainAsync' */
+      '../validations',
+    ),
+  );
+}
 
 export function* toggleLibrary(tasks) {
   yield call(validateCurrentProject, tasks);
@@ -49,6 +58,7 @@ export function* validateSource(
   if (tasks.has(language)) {
     yield cancel(tasks.get(language));
   }
+  const validations = yield call(importValidations);
   const task = yield fork(validations[language], source, projectAttributes);
   tasks.set(language, task);
   const errors = yield join(task);

src/validations/css/css.js

@@ -1,5 +1,5 @@
+import css from 'css';
 import Validator from '../Validator';
-import retryingFailedImports from '../../util/retryingFailedImports';
 
 const errorMap = {
   'missing \'{\'': () => ({reason: 'missing-opening-curly'}),
@@ -21,10 +21,6 @@ class CssValidator extends Validator {
   }
 
   async _getRawErrors() {
-    const css = await retryingFailedImports(() => import(
-      /* webpackChunkName: 'mainAsync' */
-      'css',
-    ));
     return css.parse(this._source, {silent: true}).stylesheet.parsingErrors;
   }
 

src/validations/css/prettycss.js

@@ -1,7 +1,7 @@
+import prettyCSS from 'PrettyCSS';
 import trim from 'lodash/trim';
 import endsWith from 'lodash/endsWith';
 import Validator from '../Validator';
-import retryingFailedImports from '../../util/retryingFailedImports';
 
 const RADIAL_GRADIENT_EXPR =
   /^(?:(?:-(?:ms|moz|o|webkit)-)?radial-gradient|-webkit-gradient)/;
@@ -133,10 +133,6 @@ class PrettyCssValidator extends Validator {
   }
 
   async _getRawErrors() {
-    const prettyCSS = await retryingFailedImports(() => import(
-      /* webpackChunkName: 'mainAsync' */
-      'PrettyCSS',
-    ));
     try {
       const result = prettyCSS.parse(this._source);
       return result.getProblems();

src/validations/css/stylelint.js

@@ -1,5 +1,5 @@
+import stylelint from '../../util/minimalStylelint';
 import Validator from '../Validator';
-import retryingFailedImports from '../../util/retryingFailedImports';
 
 const errorMap = {
   'syntaxError/Unclosed block': () => ({
@@ -21,10 +21,6 @@ class StyleLintValidator extends Validator {
   }
 
   async _getRawErrors() {
-    const {'default': stylelint} = await retryingFailedImports(() => import(
-      /* webpackChunkName: 'mainAsync' */
-      '../../util/minimalStylelint',
-    ));
     let result;
     try {
       result = await stylelint(this._source);

src/validations/html/htmlInspector.js

@@ -1,8 +1,8 @@
+import HTMLInspector from 'html-inspector';
 import last from 'lodash/last';
 import isNull from 'lodash/isNull';
 import trim from 'lodash/trim';
 import {localizedArrayToSentence} from '../../util/arrayToSentence';
-import retryingFailedImports from '../../util/retryingFailedImports';
 import Validator from '../Validator';
 
 const specialCases = {
@@ -82,6 +82,11 @@ function noListsWithTextChildrenValidator(listener, reporter) {
   });
 }
 
+HTMLInspector.rules.add(
+  'validate-list-children',
+  noListsWithTextChildrenValidator,
+);
+
 class HtmlInspectorValidator extends Validator {
   constructor(source) {
     super(source, 'html', errorMap);
@@ -93,16 +98,6 @@ class HtmlInspectorValidator extends Validator {
       return Promise.resolve([]);
     }
 
-    const HTMLInspector = await retryingFailedImports(() => import(
-      /* webpackChunkName: 'mainAsync' */
-      'html-inspector',
-    ));
-
-    HTMLInspector.rules.add(
-      'validate-list-children',
-      noListsWithTextChildrenValidator,
-    );
-
     return new Promise((resolve) => {
       HTMLInspector.inspect({
         domRoot: this._doc.documentElement,

src/validations/html/htmllint.js

@@ -1,8 +1,8 @@
 import clone from 'lodash/clone';
 import defaults from 'lodash/defaults';
+import {Linter, rules} from 'htmllint';
 import reduce from 'lodash/reduce';
 import Validator from '../Validator';
-import retryingFailedImports from '../../util/retryingFailedImports';
 
 const errorMap = {
   E001: (error) => {
@@ -135,25 +135,19 @@ const htmlLintOptions = {
   'title-no-dup': true,
 };
 
+const linter = new Linter(rules);
+const options = reduce(
+  linter.rules.options,
+  (acc, {name}) => defaults(acc, {[name]: false}),
+  clone(htmlLintOptions),
+);
+
 class HtmllintValidator extends Validator {
   constructor(source) {
     super(source, 'html', errorMap);
   }
 
   async _getRawErrors() {
-    const {Linter, rules} = await retryingFailedImports(
-      () => import(
-        /* webpackChunkName: 'mainAsync' */
-        'htmllint',
-      ),
-    );
-    const linter = new Linter(rules);
-    const options = reduce(
-      linter.rules.options,
-      (acc, {name}) => defaults(acc, {[name]: false}),
-      clone(htmlLintOptions),
-    );
-
     try {
       const results = await linter.lint(this._source, options);
       return results;

src/validations/html/slowparse.js

@@ -1,5 +1,5 @@
+import Slowparse from '../../util/slowparse';
 import Validator from '../Validator';
-import retryingFailedImports from '../../util/retryingFailedImports';
 
 const errorMap = {
   ATTRIBUTE_IN_CLOSING_TAG: error => ({
@@ -125,10 +125,6 @@ class SlowparseValidator extends Validator {
   }
 
   async _getRawErrors() {
-    const {'default': Slowparse} = await retryingFailedImports(() => import(
-      /* webpackChunkName: 'mainAsync' */
-      '../../util/slowparse',
-    ));
     let error;
     try {
       ({error} = Slowparse.HTML(document, this._source, {errorDetectors}));

src/validations/index.js

@@ -2,4 +2,4 @@ import html from './html';
 import css from './css';
 import javascript from './javascript';
 
-export default {html, css, javascript};
+export {html, css, javascript};

src/validations/javascript/esprima.js

@@ -1,7 +1,7 @@
+import esprima from 'esprima';
 import find from 'lodash/find';
 import inRange from 'lodash/inRange';
 import Validator from '../Validator';
-import retryingFailedImports from '../../util/retryingFailedImports';
 
 const UNEXPECTED_TOKEN_EXPR = /^Unexpected token (.+)$/;
 
@@ -79,10 +79,6 @@ class EsprimaValidator extends Validator {
   }
 
   async _getRawErrors() {
-    const esprima = await retryingFailedImports(() => import(
-      /* webpackChunkName: 'mainAsync' */
-      'esprima',
-    ));
     try {
       esprima.parse(this._source);
     } catch (error) {

src/validations/javascript/jshint.js

@@ -5,8 +5,8 @@ import compact from 'lodash/compact';
 import defaults from 'lodash/defaults';
 import find from 'lodash/find';
 import includes from 'lodash/includes';
+import {JSHINT as jshint} from 'jshint';
 import libraries from '../../config/libraries';
-import retryingFailedImports from '../../util/retryingFailedImports';
 import Validator from '../Validator';
 
 const jshintrc = {
@@ -171,10 +171,6 @@ class JsHintValidator extends Validator {
   }
 
   async _getRawErrors() {
-    const {JSHINT: jshint} = await retryingFailedImports(() => import(
-      /* webpackChunkName: 'mainAsync' */
-      'jshint',
-    ));
     try {
       jshint(this._source, this._jshintOptions);
     } catch (e) {