Dependency upgrades and fixes (#2374)

julienben · web-flow · commit d1c452040212 · 2018-10-09T16:56:50.000+03:00
- Fixes
- Linting/prettier
- Dependency upgrades
- Switch Appveyor to `npm ci`
- More incoming
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,7 +1,9 @@
 const fs = require('fs');
 const path = require('path');
 
-const prettierOptions = JSON.parse(fs.readFileSync(path.resolve(__dirname, '.prettierrc'), 'utf8'));
+const prettierOptions = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, '.prettierrc'), 'utf8'),
+);
 
 module.exports = {
   parser: 'babel-eslint',
@@ -42,13 +44,16 @@ module.exports = {
     ],
     'jsx-a11y/aria-props': 2,
     'jsx-a11y/heading-has-content': 0,
-    "jsx-a11y/label-has-associated-control": [2, {
-      // NOTE: If this error triggers, either disable it or add
-      // your custom components, labels and attributes via these options
-      // See https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md
-      "controlComponents": ["Input"],
-    }],
-    "jsx-a11y/label-has-for": 0,
+    'jsx-a11y/label-has-associated-control': [
+      2,
+      {
+        // NOTE: If this error triggers, either disable it or add
+        // your custom components, labels and attributes via these options
+        // See https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md
+        controlComponents: ['Input'],
+      },
+    ],
+    'jsx-a11y/label-has-for': 0,
     'jsx-a11y/mouse-events-have-key-events': 2,
     'jsx-a11y/role-has-required-aria-props': 2,
     'jsx-a11y/role-supports-aria-props': 2,
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -10,7 +10,7 @@ on something that might not end up being merged into the project.
 Before opening a pull request, please ensure:
 
 - [ ] You have followed our [**contributing guidelines**](https://github.com/react-boilerplate/react-boilerplate/blob/master/CONTRIBUTING.md)
-- [ ] double-check your branch is based on `dev` and targets `dev` 
+- [ ] double-check your branch is based on `dev` and targets `dev`
 - [ ] Pull request has tests (we are going for 100% coverage!)
 - [ ] Code is well-commented, linted and follows project conventions
 - [ ] Documentation is updated (if necessary)
diff --git a/.travis.yml b/.travis.yml
@@ -1,8 +1,8 @@
 language: node_js
 
 node_js:
-  - "node"
-  - "lts/*"
+  - 'node'
+  - 'lts/*'
 
 script:
   - node ./internals/scripts/generate-templates-for-linting
diff --git a/app/translations/de.json b/app/translations/de.json
@@ -1,47 +1,30 @@
 {
-  "boilerplate.components.Footer.author.message":
-    "Mit Liebe gemacht von {author}.",
-  "boilerplate.components.Footer.license.message":
-    "Dieses Projekt wird unter der MIT-Lizenz veröffentlicht.",
+  "boilerplate.components.Footer.author.message": "Mit Liebe gemacht von {author}.",
+  "boilerplate.components.Footer.license.message": "Dieses Projekt wird unter der MIT-Lizenz veröffentlicht.",
   "boilerplate.components.Header.features": "",
   "boilerplate.components.Header.home": "",
   "boilerplate.containers.FeaturePage.css.header": "",
-  "boilerplate.containers.FeaturePage.css.message":
-    "Die nächste Generation von CSS",
+  "boilerplate.containers.FeaturePage.css.message": "Die nächste Generation von CSS",
   "boilerplate.containers.FeaturePage.feedback.header": "Sofortiges Feedback",
-  "boilerplate.containers.FeaturePage.feedback.message":
-    "Genießen Sie die beste Entwicklungserfahrung und programmieren Sie Ihre App so schnell wie noch nie! Ihre Änderungen an dem CSS und JavaScript sind sofort reflektiert, ohne die Seite aktualisieren zu müssen. So bleibt der Anwendungszustand bestehen, auch wenn Sie etwas in dem darunter liegenden Code aktualisieren!",
+  "boilerplate.containers.FeaturePage.feedback.message": "Genießen Sie die beste Entwicklungserfahrung und programmieren Sie Ihre App so schnell wie noch nie! Ihre Änderungen an dem CSS und JavaScript sind sofort reflektiert, ohne die Seite aktualisieren zu müssen. So bleibt der Anwendungszustand bestehen, auch wenn Sie etwas in dem darunter liegenden Code aktualisieren!",
   "boilerplate.containers.FeaturePage.header": "",
-  "boilerplate.containers.FeaturePage.internationalization.header":
-    "Komplette i18n Standard-Internationalisierung und Pluralisierung",
-  "boilerplate.containers.FeaturePage.internationalization.message":
-    "Das Internet ist global. Mehrsprachige- und Pluralisierungsunterstützung ist entscheidend für große Web-Anwendungen.",
-  "boilerplate.containers.FeaturePage.javascript.header":
-    "Das Internet ist global. Mehrsprachige- und Pluralisierungsunterstützung ist entscheidend für große Web-Anwendungen.",
-  "boilerplate.containers.FeaturePage.javascript.message":
-    "Benutzen Sie ES6 template strings, object destructuring, arrow functions, JSX syntax und mehr, heute.",
+  "boilerplate.containers.FeaturePage.internationalization.header": "Komplette i18n Standard-Internationalisierung und Pluralisierung",
+  "boilerplate.containers.FeaturePage.internationalization.message": "Das Internet ist global. Mehrsprachige- und Pluralisierungsunterstützung ist entscheidend für große Web-Anwendungen.",
+  "boilerplate.containers.FeaturePage.javascript.header": "Das Internet ist global. Mehrsprachige- und Pluralisierungsunterstützung ist entscheidend für große Web-Anwendungen.",
+  "boilerplate.containers.FeaturePage.javascript.message": "Benutzen Sie ES6 template strings, object destructuring, arrow functions, JSX syntax und mehr, heute.",
   "boilerplate.containers.FeaturePage.network.header": "",
-  "boilerplate.containers.FeaturePage.network.message":
-    "The next frontier in performant web apps: availability without a\n      network connection from the instant your users load the app.",
+  "boilerplate.containers.FeaturePage.network.message": "The next frontier in performant web apps: availability without a\n      network connection from the instant your users load the app.",
   "boilerplate.containers.FeaturePage.routing.header": "Standard Routing",
-  "boilerplate.containers.FeaturePage.routing.message":
-    "Schreiben Sie CSS, das am selben Ort wie ihre Komponenten ist. Deterministisch generierte, einzigartige Klassennamen halten die Spezifität niedrig während styling Konflikte vermieden werden. Senden Sie nur das CSS an ihre Benutzer welches dann wirklich sichtbar ist für die schnellste Performance!",
-  "boilerplate.containers.FeaturePage.scaffolding.header":
-    "Schnelles Scaffolding",
-  "boilerplate.containers.FeaturePage.scaffolding.message":
-    "Automatisieren Sie die Kreation von Komponenten, Containern, Routen, Selektoren und Sagas – und ihre Tests – direkt von dem Terminal!",
-  "boilerplate.containers.FeaturePage.state_management.header":
-    "Berechenbare Stateverwaltung",
-  "boilerplate.containers.FeaturePage.state_management.message":
-    "Unidirectional data flow erlaubt uns alle Änderungen ihrer Applikation zu loggen und time travel debugging einzusetzen.",
-  "boilerplate.containers.HomePage.start_project.header":
-    "Beginnen Sie Ihr nächstes React Projekt in Sekunden",
-  "boilerplate.containers.HomePage.start_project.message":
-    "Ein skalierendes, offline-first Fundament mit der besten DX und einem Fokus auf Performance und bewährte Methoden",
+  "boilerplate.containers.FeaturePage.routing.message": "Schreiben Sie CSS, das am selben Ort wie ihre Komponenten ist. Deterministisch generierte, einzigartige Klassennamen halten die Spezifität niedrig während styling Konflikte vermieden werden. Senden Sie nur das CSS an ihre Benutzer welches dann wirklich sichtbar ist für die schnellste Performance!",
+  "boilerplate.containers.FeaturePage.scaffolding.header": "Schnelles Scaffolding",
+  "boilerplate.containers.FeaturePage.scaffolding.message": "Automatisieren Sie die Kreation von Komponenten, Containern, Routen, Selektoren und Sagas – und ihre Tests – direkt von dem Terminal!",
+  "boilerplate.containers.FeaturePage.state_management.header": "Berechenbare Stateverwaltung",
+  "boilerplate.containers.FeaturePage.state_management.message": "Unidirectional data flow erlaubt uns alle Änderungen ihrer Applikation zu loggen und time travel debugging einzusetzen.",
+  "boilerplate.containers.HomePage.start_project.header": "Beginnen Sie Ihr nächstes React Projekt in Sekunden",
+  "boilerplate.containers.HomePage.start_project.message": "Ein skalierendes, offline-first Fundament mit der besten DX und einem Fokus auf Performance und bewährte Methoden",
   "boilerplate.containers.HomePage.tryme.atPrefix": "",
   "boilerplate.containers.HomePage.tryme.header": "Probiere mich!",
-  "boilerplate.containers.HomePage.tryme.message":
-    "Zeige die Github Repositories von",
+  "boilerplate.containers.HomePage.tryme.message": "Zeige die Github Repositories von",
   "boilerplate.containers.LocaleToggle.de": "",
   "boilerplate.containers.LocaleToggle.en": "",
   "boilerplate.containers.NotFoundPage.header": "Seite nicht gefunden."
diff --git a/app/translations/en.json b/app/translations/en.json
@@ -1,45 +1,30 @@
 {
   "boilerplate.components.Footer.author.message": "Made with love by {author}.",
-  "boilerplate.components.Footer.license.message":
-    "This project is licensed under the MIT license.",
+  "boilerplate.components.Footer.license.message": "This project is licensed under the MIT license.",
   "boilerplate.components.Header.features": "Features",
   "boilerplate.components.Header.home": "Home",
   "boilerplate.containers.FeaturePage.css.header": "Features",
   "boilerplate.containers.FeaturePage.css.message": "Next generation CSS",
   "boilerplate.containers.FeaturePage.feedback.header": "Instant feedback",
-  "boilerplate.containers.FeaturePage.feedback.message":
-    "Enjoy the best DX and code your app at the speed of thought! Your\n    saved changes to the CSS and JS are reflected instantaneously\n    without refreshing the page. Preserve application state even when\n    you update something in the underlying code!",
+  "boilerplate.containers.FeaturePage.feedback.message": "Enjoy the best DX and code your app at the speed of thought! Your\n    saved changes to the CSS and JS are reflected instantaneously\n    without refreshing the page. Preserve application state even when\n    you update something in the underlying code!",
   "boilerplate.containers.FeaturePage.header": "Features",
-  "boilerplate.containers.FeaturePage.internationalization.header":
-    "Complete i18n Standard Internationalization & Pluralization",
-  "boilerplate.containers.FeaturePage.internationalization.message":
-    "Scalable apps need to support multiple languages, easily add and support multiple languages with `react-intl`.",
-  "boilerplate.containers.FeaturePage.javascript.header":
-    "Next generation JavaScript",
-  "boilerplate.containers.FeaturePage.javascript.message":
-    "Use template strings, object destructuring, arrow functions, JSX\n    syntax and more, today.",
+  "boilerplate.containers.FeaturePage.internationalization.header": "Complete i18n Standard Internationalization & Pluralization",
+  "boilerplate.containers.FeaturePage.internationalization.message": "Scalable apps need to support multiple languages, easily add and support multiple languages with `react-intl`.",
+  "boilerplate.containers.FeaturePage.javascript.header": "Next generation JavaScript",
+  "boilerplate.containers.FeaturePage.javascript.message": "Use template strings, object destructuring, arrow functions, JSX\n    syntax and more, today.",
   "boilerplate.containers.FeaturePage.network.header": "Offline-first",
-  "boilerplate.containers.FeaturePage.network.message":
-    "The next frontier in performant web apps: availability without a\n      network connection from the instant your users load the app.",
-  "boilerplate.containers.FeaturePage.routing.header":
-    "Industry-standard routing",
-  "boilerplate.containers.FeaturePage.routing.message":
-    "Write composable CSS that's co-located with your components for\n    complete modularity. Unique generated class names keep the\n    specificity low while eliminating style clashes. Ship only the\n    styles that are on the page for the best performance.",
+  "boilerplate.containers.FeaturePage.network.message": "The next frontier in performant web apps: availability without a\n      network connection from the instant your users load the app.",
+  "boilerplate.containers.FeaturePage.routing.header": "Industry-standard routing",
+  "boilerplate.containers.FeaturePage.routing.message": "Write composable CSS that's co-located with your components for\n    complete modularity. Unique generated class names keep the\n    specificity low while eliminating style clashes. Ship only the\n    styles that are on the page for the best performance.",
   "boilerplate.containers.FeaturePage.scaffolding.header": "Quick scaffolding",
-  "boilerplate.containers.FeaturePage.scaffolding.message":
-    "Automate the creation of components, containers, routes, selectors\n  and sagas - and their tests - right from the CLI!",
-  "boilerplate.containers.FeaturePage.state_management.header":
-    "Predictable state management",
-  "boilerplate.containers.FeaturePage.state_management.message":
-    "Unidirectional data flow allows for change logging and time travel\n    debugging.",
-  "boilerplate.containers.HomePage.start_project.header":
-    "Start your next react project in seconds",
-  "boilerplate.containers.HomePage.start_project.message":
-    "A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices",
+  "boilerplate.containers.FeaturePage.scaffolding.message": "Automate the creation of components, containers, routes, selectors\n  and sagas - and their tests - right from the CLI!",
+  "boilerplate.containers.FeaturePage.state_management.header": "Predictable state management",
+  "boilerplate.containers.FeaturePage.state_management.message": "Unidirectional data flow allows for change logging and time travel\n    debugging.",
+  "boilerplate.containers.HomePage.start_project.header": "Start your next react project in seconds",
+  "boilerplate.containers.HomePage.start_project.message": "A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices",
   "boilerplate.containers.HomePage.tryme.atPrefix": "@",
   "boilerplate.containers.HomePage.tryme.header": "Try me!",
-  "boilerplate.containers.HomePage.tryme.message":
-    "Show Github repositories by",
+  "boilerplate.containers.HomePage.tryme.message": "Show Github repositories by",
   "boilerplate.containers.LocaleToggle.de": "de",
   "boilerplate.containers.LocaleToggle.en": "en",
   "boilerplate.containers.NotFoundPage.header": "Page not found."
diff --git a/appveyor.yml b/appveyor.yml
@@ -1,18 +1,17 @@
 # http://www.appveyor.com/docs/appveyor-yml
 
 # Set build version format here instead of in the admin panel
-version: "{build}"
+version: '{build}'
 
 # Do not build on gh tags
 skip_tags: true
 
 # Test against these versions of Node.js
 environment:
-
   matrix:
     # Node versions to run
-    - nodejs_version: "Current"
-    - nodejs_version: "LTS"
+    - nodejs_version: 'Current'
+    - nodejs_version: 'LTS'
 
 # Fix line endings in Windows. (runs before repo cloning)
 init:
@@ -24,10 +23,7 @@ install:
   - choco install -y googlechrome --ignore-checksums
   # Install the latest stable version of Node
   - ps: Install-Product node $env:nodejs_version
-  - npm install
-
-# TODO: Switch to using npm ci instead of install
-# once Node LTS ships with npm 5.7 (with ci)
+  - npm ci
 
 # Disable automatic builds
 build: off
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,56 @@
+module.exports = {
+  plugins: [
+    'styled-components',
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-syntax-import-meta',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-json-strings',
+    [
+      '@babel/plugin-proposal-decorators',
+      {
+        legacy: true,
+      },
+    ],
+    '@babel/plugin-proposal-function-sent',
+    '@babel/plugin-proposal-export-namespace-from',
+    '@babel/plugin-proposal-numeric-separator',
+    '@babel/plugin-proposal-throw-expressions',
+    '@babel/plugin-proposal-export-default-from',
+    '@babel/plugin-proposal-logical-assignment-operators',
+    '@babel/plugin-proposal-optional-chaining',
+    [
+      '@babel/plugin-proposal-pipeline-operator',
+      {
+        proposal: 'minimal',
+      },
+    ],
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+    '@babel/plugin-proposal-do-expressions',
+    '@babel/plugin-proposal-function-bind',
+  ],
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+      },
+    ],
+    '@babel/preset-react',
+  ],
+  env: {
+    production: {
+      only: ['app'],
+      plugins: [
+        'transform-react-remove-prop-types',
+        '@babel/plugin-transform-react-inline-elements',
+        '@babel/plugin-transform-react-constant-elements',
+      ],
+    },
+    test: {
+      plugins: [
+        '@babel/plugin-transform-modules-commonjs',
+        'dynamic-import-node',
+      ],
+    },
+  },
+};
diff --git a/docs/css/README.md b/docs/css/README.md
@@ -51,8 +51,8 @@ Below creates two styled react components (`<Title>`, `<Wrapper>`) and renders t
 as children of the `<Header>` component:
 
 ```jsx
-import React from "react";
-import styled from "styled-components";
+import React from 'react';
+import styled from 'styled-components';
 
 // Create a <Title> react component that renders an <h1> which is
 // centered, palevioletred and sized at 1.5em
@@ -105,8 +105,8 @@ into a JavaScript:
 **`Button.js`**
 
 ```js
-import React from "react";
-import "./Button.css"; // Tell Webpack that Button.js uses these styles
+import React from 'react';
+import './Button.css'; // Tell Webpack that Button.js uses these styles
 
 class Button extends React.Component {
   render() {
@@ -159,8 +159,8 @@ The key difference in CSS Modules is that you import styles to a variable.
 **`Button.js`**
 
 ```js
-import React from "react";
-import styles from "./Button.css"; // different import compared to stylesheets
+import React from 'react';
+import styles from './Button.css'; // different import compared to stylesheets
 
 class Button extends React.Component {
   render() {
@@ -213,8 +213,8 @@ $error-color: red;
 **`Button.js`**
 
 ```js
-import React from "react";
-import "./Button.scss";
+import React from 'react';
+import './Button.scss';
 
 class Button extends React.Component {
   render() {
@@ -272,8 +272,8 @@ to look like:
 **`Button.js`**
 
 ```js
-import React from "react";
-import "./Button.less";
+import React from 'react';
+import './Button.less';
 
 class Button extends React.Component {
   render() {
@@ -284,4 +284,4 @@ class Button extends React.Component {
 
 > For more information about LESS and the `less-loader` see https://github.com/webpack-contrib/less-loader.
 
-[webpackconfig]: ../../internals/webpack/webpack.base.babel.js "Webpack config"
+[webpackconfig]: ../../internals/webpack/webpack.base.babel.js 'Webpack config'
diff --git a/docs/electron/README.md b/docs/electron/README.md
@@ -8,4 +8,4 @@ ElectronJS is very popular open source library developed by github to create cro
 
 ## OR
 
-## [Convert This Boilerplate To Electron Application](https://github.com/mjangir/reactron/wiki/Convert-Existing-To-Electron)
+## [Convert This Boilerplate To Electron Application](https://github.com/mjangir/reactron/wiki/Convert-Existing-To-Electron)
diff --git a/docs/general/faq.md b/docs/general/faq.md
@@ -8,8 +8,8 @@
   - [OS X / Linux:](#os-x--linux)
   - [Windows](#windows)
 - [Issue with local caching when running in production mode (F5 / ctrl+F5 / cmd+r weird behavior)](#issue-with-local-caching-when-running-in-production-mode-f5--ctrlf5--cmdr-weird-behavior)
-    - [Quick fix on your local browser:](#quick-fix-on-your-local-browser)
-    - [Full in-depth explanation](#full-in-depth-explanation)
+  - [Quick fix on your local browser:](#quick-fix-on-your-local-browser)
+  - [Full in-depth explanation](#full-in-depth-explanation)
 - [Local webfonts not working for development](#local-webfonts-not-working-for-development)
 - [Non-route containers](#non-route-containers)
   - [Where do I put the reducer?](#where-do-i-put-the-reducer)
diff --git a/docs/js/reselect.md b/docs/js/reselect.md
@@ -34,7 +34,7 @@ import { createSelector } from 'reselect';
 import mySelector from 'mySelector';
 
 const myComplexSelector = createSelector(mySelector, myState =>
-  myState.get('someNestedState')
+  myState.get('someNestedState'),
 );
 
 export { myComplexSelector };
@@ -45,7 +45,7 @@ These selectors can then either be used directly in our containers as
 
 ```javascript
 export default connect(
-  createSelector(myComplexSelector, myNestedState => ({ data: myNestedState }))
+  createSelector(myComplexSelector, myNestedState => ({ data: myNestedState })),
 )(SomeComponent);
 ```
 
diff --git a/internals/scripts/extract-intl.js b/internals/scripts/extract-intl.js
diff --git a/internals/webpack/webpack.dev.babel.js b/internals/webpack/webpack.dev.babel.js
diff --git a/jest.config.js b/jest.config.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -8,4 +8,4 @@ ElectronJS is very popular open source library developed by github to create cro`
`8`	`8`
`9`	`9`	`## OR`
`10`	`10`
`11`		`-## [Convert This Boilerplate To Electron Application](https://github.com/mjangir/reactron/wiki/Convert-Existing-To-Electron)`
	`11`	`+## [Convert This Boilerplate To Electron Application](https://github.com/mjangir/reactron/wiki/Convert-Existing-To-Electron)`