Upgrade to Node 12 LTS (#2831)

* Upgrade to node 12 LTS

* Run prettier

Author: Zeko369

.circleci/config.yml

@@ -2,12 +2,12 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:8
+      - image: circleci/node:12
     steps:
       - checkout
       - restore_cache:
           keys:
-          - dependencies-{{ checksum "yarn.lock" }}
+            - dependencies-{{ checksum "yarn.lock" }}
       - run:
           name: Install
           command: yarn install --pure-lockfile

.nvmrc

@@ -1 +1 @@
-lts/carbon
+lts/erbium

content/blog/2020-02-26-react-v16.13.0.md

@@ -21,7 +21,7 @@ Warning: Cannot update a component from inside the function body of a different
 
 **This warning will help you find application bugs caused by unintentional state changes.** In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the `setState` call into `useEffect`.
 
-### Warnings for conflicting style rules
+### Warnings for conflicting style rules {#warnings-for-conflicting-style-rules}
 
 When dynamically applying a `style` that contains longhand and shorthand versions of CSS properties, particular combinations of updates can cause inconsistent styling. For example: 
 

examples/uncontrolled-components/input-type-file.js

@@ -9,9 +9,7 @@ class FileInput extends React.Component {
     // highlight-range{4}
     event.preventDefault();
     alert(
-      `Selected file - ${
-        this.fileInput.current.files[0].name
-      }`
+      `Selected file - ${this.fileInput.current.files[0].name}`
     );
   }
 

package.json

@@ -27,7 +27,7 @@
     "gatsby-plugin-netlify": "^2.0.0",
     "gatsby-plugin-nprogress": "^2.0.0",
     "gatsby-plugin-react-helmet": "^3.0.0",
-    "gatsby-plugin-sharp": "^2.0.0",
+    "gatsby-plugin-sharp": "^2.4.12",
     "gatsby-plugin-twitter": "^2.0.0",
     "gatsby-remark-code-repls": "^2.0.0",
     "gatsby-remark-copy-linked-files": "^2.0.0",
@@ -39,7 +39,7 @@
     "gatsby-remark-smartypants": "^2.0.0",
     "gatsby-source-filesystem": "^2.0.0",
     "gatsby-transformer-remark": "^2.0.0",
-    "gatsby-transformer-sharp": "^2.0.0",
+    "gatsby-transformer-sharp": "^2.3.18",
     "github-slugger": "^1.2.1",
     "glamor": "^2.20.40",
     "hex2rgba": "^0.0.1",
@@ -58,7 +58,7 @@
     "unist-util-visit": "^1.1.3"
   },
   "engines": {
-    "node": ">8.4.0",
+    "node": "12.x.x",
     "yarn": "^1.3.2"
   },
   "homepage": "https://reactjs.org/",

plugins/gatsby-source-react-error-codes/gatsby-node.js

@@ -20,9 +20,7 @@ exports.sourceNodes = async ({actions}) => {
     });
   } catch (error) {
     console.error(
-      `The gatsby-source-react-error-codes plugin has failed:\n${
-        error.message
-      }`,
+      `The gatsby-source-react-error-codes plugin has failed:\n${error.message}`,
     );
 
     process.exit(1);

plugins/gatsby-transformer-versions-yaml/gatsby-node.js

@@ -20,10 +20,12 @@ exports.onPostBuild = async ({store}) => {
 
   // versions.yml structure is [{path: string, url: string, ...}, ...]
   createRedirects(
-    versions.filter(version => version.path && version.url).map(version => ({
-      fromPath: version.path,
-      toPath: version.url,
-    })),
+    versions
+      .filter(version => version.path && version.url)
+      .map(version => ({
+        fromPath: version.path,
+        toPath: version.url,
+      })),
     redirectsFilePath,
   );
 };

src/components/MarkdownPage/MarkdownPage.js

@@ -112,9 +112,7 @@ const MarkdownPage = ({
                   <div css={{marginTop: 80}}>
                     <a
                       css={sharedStyles.articleLayout.editLink}
-                      href={`https://github.com/reactjs/reactjs.org/tree/master/${
-                        markdownRemark.fields.path
-                      }`}>
+                      href={`https://github.com/reactjs/reactjs.org/tree/master/${markdownRemark.fields.path}`}>
                       Edit this page
                     </a>
                   </div>

src/theme.js

@@ -55,9 +55,7 @@ const media = {
       if (SIZES[largeKey].max === Infinity) {
         return `@media (min-width: ${SIZES[smallKey].min}px)`;
       } else {
-        return `@media (min-width: ${SIZES[smallKey].min}px) and (max-width: ${
-          SIZES[largeKey].max
-        }px)`;
+        return `@media (min-width: ${SIZES[smallKey].min}px) and (max-width: ${SIZES[largeKey].max}px)`;
       }
     }
   },

src/utils/sectionList.js

@@ -12,19 +12,15 @@ import navDocs from '../../content/docs/nav.yml';
 // $FlowExpectedError
 import navTutorial from '../../content/tutorial/nav.yml';
 
-const sectionListDocs = navDocs.map(
-  (item: Object): Object => ({
-    ...item,
-    directory: 'docs',
-  }),
-);
+const sectionListDocs = navDocs.map((item: Object): Object => ({
+  ...item,
+  directory: 'docs',
+}));
 
-const sectionListCommunity = navCommunity.map(
-  (item: Object): Object => ({
-    ...item,
-    directory: 'community',
-  }),
-);
+const sectionListCommunity = navCommunity.map((item: Object): Object => ({
+  ...item,
+  directory: 'community',
+}));
 
 export {
   sectionListCommunity,