Merge pull request #37 from fs-webdev/eslint

added eslint-config-frontier:recommended to the templates, as well as…

Author: joeycozza

package.json

@@ -45,7 +45,7 @@
   },
   "lint-staged": {
     "*.{js,md,css,html}": [
-      "prettier --trailing-comma es5 --single-quote --write",
+      "prettier --print-width 100 es5 --single-quote --write",
       "git add"
     ],
     "yarn.lock": [

packages/react-scripts/config/webpack.config.js

@@ -313,7 +313,13 @@ module.exports = function(webpackEnv) {
                 eslintPath: require.resolve('eslint'),
                 // @remove-on-eject-begin
                 baseConfig: {
-                  extends: [require.resolve('eslint-config-react-app')],
+                  extends: [
+                    //in order to keep backwards compatability for people currently using eslint-config-frontier
+                    //with their old polymer projects, we have to point to the recommended file instead of index.js
+                    require
+                      .resolve('eslint-config-frontier')
+                      .replace('index.js', 'recommended.js'),
+                  ],
                   settings: { react: { version: '999.999.999' } },
                 },
                 ignore: false,

packages/react-scripts/gitTagForkedStyle.js

@@ -8,9 +8,6 @@
   "engines": {
     "node": ">=6"
   },
-  "scripts": {
-    "postversion": "node gitTagForkedStyle.js"
-  },
   "bugs": {
     "url": "https://github.com/fs-webdev/create-react-app/issues"
   },

packages/react-scripts/package.json

@@ -45,9 +45,6 @@ function installFrontierDependencies(appPath, answers, useYarn, ownPath) {
   if (additionalFeatures.includes('polymer')) {
     configurePolymer(appPath, useYarn);
   }
-  if (additionalFeatures.includes('redux')) {
-    configureRedux(appPath, useYarn, ownPath);
-  }
   if (additionalFeatures.includes('electric-flow')) {
     configureEF(appPath, useYarn, ownPath);
   }
@@ -60,59 +57,59 @@ function installFrontierDependencies(appPath, answers, useYarn, ownPath) {
   ];
 
   const defaultDevModules = [
+    'eslint@5.6.0',
+    'fs-webdev/eslint-config-frontier#settingUpRecommendedReactConfig',
     'react-styleguidist@9.0.0-beta4',
     'webpack@4.19.1',
   ];
 
   installModulesSync(defaultModules, useYarn);
   installModulesSync(defaultDevModules, useYarn, true);
-  addStyleguidistScriptsToPackageJson(appPath);
-}
 
-function addStyleguidistScriptsToPackageJson(appPath) {
-  //we read the package.json using fs instead of require() because require() uses the
-  //cached result from earlier, even though the package.json has been updated previously.
-  const appPackage = JSON.parse(
+  alterPackageJsonFile(appPath, appPackage => {
+    const packageJson = { ...appPackage };
+    const additionalScripts = {
+      styleguide: 'styleguidist server --open',
+      'styleguide:build': 'styleguidist build',
+      lint: 'eslint src/',
+      'lint:fix': 'eslint src/ --fix',
+    };
+    packageJson.scripts = { ...packageJson.scripts, ...additionalScripts };
+    packageJson.eslintConfig = {
+      extends: ['frontier/recommended'],
+    };
+    return packageJson;
+  });
+}
+function alterPackageJsonFile(appPath, extendFunction) {
+  let appPackage = JSON.parse(
     fs.readFileSync(path.join(appPath, 'package.json'), 'UTF8')
   );
-
-  appPackage.scripts.styleguide = 'styleguidist server --open';
-  appPackage.scripts['styleguide:build'] = 'styleguidist build';
-
+  appPackage = extendFunction(appPackage);
   fs.writeFileSync(
     path.join(appPath, 'package.json'),
     JSON.stringify(appPackage, null, 2) + os.EOL
   );
 }
 
 function configurePolymer(appPath, useYarn) {
-  //we read the package.json using fs instead of require() because require() uses the
-  //cached result from earlier, even though the package.json has been updated previously.
-  const appPackage = JSON.parse(
-    fs.readFileSync(path.join(appPath, 'package.json'), 'UTF8')
-  );
-  appPackage.vendorCopy = [
-    {
-      from:
-        'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js',
-      to: 'public/vendor/custom-elements-es5-adapter.js',
-    },
-    {
-      from:
-        'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js',
-      to: 'public/vendor/webcomponents-bundle.js',
-    },
-  ];
-
-  const { postinstall } = appPackage.scripts;
-  appPackage.scripts.postinstall = postinstall
-    ? `${postinstall} && `
-    : '' + 'vendor-copy';
-
-  fs.writeFileSync(
-    path.join(appPath, 'package.json'),
-    JSON.stringify(appPackage, null, 2) + os.EOL
-  );
+  alterPackageJsonFile(appPath, appPackage => {
+    const packageJson = { ...appPackage };
+    packageJson.vendorCopy = [
+      {
+        from:
+          'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js',
+        to: 'public/vendor/custom-elements-es5-adapter.js',
+      },
+      {
+        from:
+          'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js',
+        to: 'public/vendor/webcomponents-bundle.js',
+      },
+    ];
+    packageJson.scripts.postinstall = 'vendor-copy';
+    return packageJson;
+  });
 
   const polymerModules = [
     'vendor-copy@2.0.0',
@@ -137,19 +134,6 @@ function injectPolymerCode(appPath) {
   fs.writeFileSync(indexPath, indexHtml);
 }
 
-function configureRedux(appPath, useYarn, ownPath) {
-  const reduxModules = [
-    'redux@4.0.0',
-    'react-redux@5.0.7',
-    'redux-logger@3.0.6',
-    'redux-thunk@2.3.0',
-  ];
-  installModulesSync(reduxModules, useYarn);
-
-  const templatePath = path.join(ownPath, 'template-redux');
-  fs.copySync(templatePath, appPath, { overwrite: true });
-}
-
 function configureEF(appPath, useYarn, ownPath) {
   // TODO - modify package.json to make sure name is correct for blueprint
   // TODO - use blueprint.yml as a template

packages/react-scripts/scripts/utils/frontierInit.js

@@ -0,0 +1,2 @@
+#dont worry about using newer versions of libraries than react-scripts
+SKIP_PREFLIGHT_CHECK=true

packages/react-scripts/template/.env

@@ -1,9 +1,8 @@
-import React, { Component } from 'react';
+import React from 'react';
 import logo from './logo.svg';
 import styles from './App.module.css';
 
-class App extends Component {
-  render() {
+function App() {
     return (
       <div className={styles.app}>
         <header className={styles.appHeader}>
@@ -22,7 +21,6 @@ class App extends Component {
         </header>
       </div>
     );
-  }
 }
 
 export default App;

packages/react-scripts/template/src/components/App.jsx

@@ -1,3 +1,3 @@
 import App from './App';
 
-export { App };
+export default App;

packages/react-scripts/template/src/components/index.js

@@ -4,6 +4,7 @@ import './index.css';
 import App from './components/App';
 import * as serviceWorker from './serviceWorker';
 
+// eslint-disable-next-line react/jsx-filename-extension
 ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change

packages/react-scripts/template/src/index.js

@@ -15,9 +15,7 @@ const isLocalhost = Boolean(
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
 );
 
 export function register(config) {
@@ -120,9 +118,7 @@ function checkValidServiceWorker(swUrl, config) {
       }
     })
     .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
+      console.log('No internet connection found. App is running in offline mode.');
     });
 }