Use babel-eslint as linter parser (codesandbox#214)

* Use babel-eslint as linter parser

* Remove console.log

Author: CompuIves

config/babel.dev.js

@@ -18,6 +18,7 @@ module.exports = {
     require.resolve('babel-plugin-lodash'),
     require.resolve('babel-plugin-syntax-dynamic-import'),
     require.resolve('babel-plugin-styled-components'),
+    require.resolve('babel-macros'),
     [
       require.resolve('react-loadable/babel'),
       {

config/babel.prod.js

@@ -17,6 +17,7 @@ module.exports = {
     require.resolve('babel-plugin-lodash'),
     require.resolve('babel-plugin-syntax-dynamic-import'),
     require.resolve('babel-plugin-styled-components'),
+    require.resolve('babel-macros'),
     [
       require.resolve('react-loadable/babel'),
       {

config/paths.js

@@ -41,4 +41,5 @@ module.exports = {
   appNodeModules: resolveApp('node_modules'),
   ownNodeModules: resolveApp('node_modules'),
   nodePaths,
+  config: resolveApp('config'),
 };

config/stubs/load-rules.compiled.js

@@ -0,0 +1,24 @@
+const codegen = require('babel-plugin-codegen/macro');
+
+// TODO automate generation:
+// babel --plugins babel-macros config/stubs/load-rules.js > config/stubs/load-rules.compiled.js
+
+module.exports = function loadRules() {
+  // Create list of require statements of all rules during compile time
+  codegen`
+    const path = require("path");
+    const find = require("shelljs").find;
+
+    let output = "var rules = Object.create(null);\\n";
+
+    find(path.resolve("./node_modules/eslint/lib/rules")).filter(f => path.extname(f) === '.js').forEach((filename) => {
+      const basename = path.basename(filename, '.js');
+
+      output += \`rules["\${basename}"] = require("eslint/lib/rules/\${basename}");\\n\`
+    });
+
+    output += "\\n return rules;\\n";
+
+    module.exports = output;
+  `;
+};

config/stubs/load-rules.js

@@ -206,6 +206,14 @@ module.exports = {
     // a plugin that prints an error when you attempt to do this.
     // See https://github.com/facebookincubator/create-react-app/issues/240
     new CaseSensitivePathsPlugin(),
+
+    // With this plugin we override the load-rules of eslint, this function prevents
+    // us from using eslint in the browser, therefore we need to stop it!
+    new webpack.NormalModuleReplacementPlugin(
+      /eslint\/lib\/load-rules/,
+      '../../../config/stubs/load-rules.compiled.js'
+    ),
+
     // If you require a missing module and then `npm install` it, you still have
     // to restart the development server for Webpack to discover it. This plugin
     // makes the discovery automatic so you don't have to restart.

config/webpack.common.js

@@ -9,6 +9,8 @@
     "babel-eslint": "^7.2.3",
     "babel-jest": "^20.0.3",
     "babel-loader": "^7.1.0",
+    "babel-macros": "^1.0.2",
+    "babel-plugin-codegen": "^1.2.0",
     "babel-plugin-lodash": "^3.2.11",
     "babel-plugin-styled-components": "^1.1.7",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
@@ -30,7 +32,7 @@
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.1",
     "detect-port": "^1.1.1",
-    "eslint": "^3.19.0",
+    "eslint": "CompuIves/eslint#add/define-parser",
     "eslint-config-airbnb": "^15.0.1",
     "eslint-config-prettier": "^2.1.1",
     "eslint-import-resolver-webpack": "^0.8.1",
@@ -60,8 +62,10 @@
     "object-assign": "^4.1.1",
     "opn": "4.0.2",
     "path-exists": "3.0.0",
+    "path-override-webpack-plugin": "^0.1.2",
     "postcss-loader": "^1.2.1",
     "prettier": "^1.6.1",
+    "preval.macro": "^1.0.1",
     "promise": "7.1.1",
     "raw-loader": "^0.5.1",
     "react-hot-loader": "^3.0.0-beta.6",
@@ -150,6 +154,7 @@
     "redbox-react": "^1.4.3",
     "redux": "^3.7.1",
     "reselect": "^3.0.1",
+    "shelljs": "^0.7.8",
     "store": "^2.0.12",
     "styled-components": "^2.1.1",
     "svg-react-loader": "^0.4.4",

package.json

@@ -1,6 +1,6 @@
-if (!self.eslint) {
-  self.importScripts(['/static/js/eslint.4.1.0.min.js']);
-}
+import Linter from 'eslint/lib/linter';
+
+import monkeypatch from './utils/monkeypatch-babel-eslint';
 
 /* eslint-disable global-require */
 const allRules = {
@@ -113,6 +113,7 @@ const defaultConfig = {
       globalReturn: false,
       impliedStrict: true,
       experimentalObjectRestSpread: true,
+      modules: true,
     },
   },
   parser: 'babel-eslint',
@@ -305,7 +306,14 @@ const defaultConfig = {
   },
 };
 
-const linter = new self.eslint(); // eslint-disable-line new-cap
+monkeypatch({}, defaultConfig.parserOptions);
+
+const linter = new Linter();
+
+linter.defineParser('babel-eslint', {
+  parse: require('babel-eslint').parseNoPatch, // eslint-disable-line global-require
+});
+
 linter.defineRules(allRules);
 
 function getPos(error, from) {
@@ -334,24 +342,12 @@ function getSeverity(error) {
   }
 }
 
-const oldRequire = self.require;
-self.require = (...args) => {
-  const [requireDep] = args;
-
-  if (requireDep === 'babel-eslint') {
-    const babelEslint = require('babel-eslint'); // eslint-disable-line global-require
-
-    return { parse: babelEslint.parseNoPatch };
-  }
-
-  return oldRequire(...args);
-};
-
 // Respond to message from parent thread
 self.addEventListener('message', event => {
   const { code, version } = event.data;
 
   const validations = linter.verify(code, defaultConfig);
+
   const markers = validations.map(error => {
     const { line: startL, column: startCol } = getPos(error, true);
     const { line: endL, column: endCol } = getPos(error, false);