Upgrade to Gatsby v2 (#1104)

* Upgrade to Gatsby v2

* Remove unnecessary polyfills since gatsby already provides them

* Move global styles to gatsby-browser

* Add fb comment and convert to cjs

* Revert to use pageQuery again

* Add back html.js

* Update dependencies

* Move TitleAndMetaTags

* Replace glamor/reset with normalize.css which fixes style order in prod

* Prettier formatting

* Remove unused types

* Remove old layout

* Fix versions link

* Update deps

* Update deps

* Remove hack since it's no longer needed

* Update dependencies

* Fix build error

* Fix prettier config resolution

* Update gatsby

* Remove custom onCreatePage logic

* Update dependencies

* Fix build

* Update dependencies

* prettier formatting

* update dependencies

* add custom babel config for flow

* upgrade dependencies

* update dependencies

* use stable gatsby release

.babelrc

@@ -1,4 +1,41 @@
 {
-  "presets": ['react', 'es2015', 'stage-1'],
-  "plugins": ['add-module-exports']
-}
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "loose": true,
+        "modules": false,
+        "useBuiltIns": "usage",
+        "shippedProposals": true,
+        "targets": {
+          "browsers": [">0.25%", "not dead"],
+        }
+      }
+    ],
+    [
+      "@babel/preset-react",
+      {
+        "useBuiltIns": true,
+        "pragma": "React.createElement",
+      }
+    ],
+    "@babel/flow"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    "@babel/plugin-syntax-dynamic-import",
+    "babel-plugin-macros",
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "helpers": true,
+        "regenerator": true
+      }
+    ]
+  ]
+}

flow-typed/gatsby-link.js → flow-typed/gatsby.js

@@ -1,3 +1,3 @@
-declare module 'gatsby-link' {
+declare module 'gatsby' {
   declare module.exports: any;
 }

flow-typed/glamor.js

@@ -15,7 +15,3 @@ declare module 'glamor/react' {
     propMerge: Function,
   };
 }
-
-declare module 'glamor/reset' {
-  declare module.exports: any;
-}

gatsby-browser.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+// Import global styles
+require('normalize.css');
+require('./src/css/reset.css');
+require('./src/prism-styles');
+require('./src/css/algolia.css');
+
+// A stub function is needed because gatsby won't load this file otherwise
+// (https://github.com/gatsbyjs/gatsby/issues/6759)
+exports.onClientEntry = () => {};

gatsby-config.js

@@ -23,7 +23,6 @@ module.exports = {
     'gatsby-transformer-versions-yaml',
     'gatsby-plugin-netlify',
     'gatsby-plugin-glamor',
-    'gatsby-plugin-react-next',
     'gatsby-plugin-twitter',
     {
       resolve: 'gatsby-plugin-nprogress',
@@ -134,7 +133,7 @@ module.exports = {
               {
                   allMarkdownRemark
                   (limit: 10,
-                  filter: {id: {regex: "/blog/"}},
+                  filter: {fileAbsolutePath: {regex: "/blog/"}},
                   sort: {fields: [fields___date],
                   order: DESC}) {
                     edges {

gatsby-node.js

@@ -6,7 +6,7 @@
 
 'use strict';
 
-exports.modifyWebpackConfig = require('./gatsby/modifyWebpackConfig');
+exports.onCreateWebpackConfig = require('./gatsby/onCreateWebpackConfig');
 exports.createPages = require('./gatsby/createPages');
 exports.onCreateNode = require('./gatsby/onCreateNode');
 exports.onCreatePage = require('./gatsby/onCreatePage');

gatsby/createPages.js

@@ -8,8 +8,8 @@
 
 const {resolve} = require('path');
 
-module.exports = async ({graphql, boundActionCreators}) => {
-  const {createPage, createRedirect} = boundActionCreators;
+module.exports = async ({graphql, actions}) => {
+  const {createPage, createRedirect} = actions;
 
   // Used to detect and prevent duplicate redirects
   const redirectToSlugMap = {};
@@ -129,7 +129,7 @@ module.exports = async ({graphql, boundActionCreators}) => {
       {
         allMarkdownRemark(
           limit: 1
-          filter: {id: {regex: "/blog/"}}
+          filter: {fileAbsolutePath: {regex: "/blog/"}}
           sort: {fields: [fields___date], order: DESC}
         ) {
           edges {
@@ -143,6 +143,7 @@ module.exports = async ({graphql, boundActionCreators}) => {
       }
     `,
   );
+
   const newestBlogNode = newestBlogEntry.data.allMarkdownRemark.edges[0].node;
 
   // Blog landing page should always show the most recent blog entry.
@@ -151,4 +152,4 @@ module.exports = async ({graphql, boundActionCreators}) => {
     redirectInBrowser: true,
     toPath: newestBlogNode.fields.slug,
   });
-};
+};

gatsby/onCreateNode.js

@@ -24,8 +24,8 @@ function buildRedirectString(permalink, redirect_from) {
 }
 
 // Add custom fields to MarkdownRemark nodes.
-module.exports = exports.onCreateNode = ({node, boundActionCreators, getNode}) => {
-  const {createNodeField} = boundActionCreators;
+module.exports = exports.onCreateNode = ({node, actions, getNode}) => {
+  const {createNodeField} = actions;
 
   switch (node.internal.type) {
     case 'MarkdownRemark':

gatsby/onCreatePage.js

@@ -6,19 +6,15 @@
 
 'use strict';
 
-module.exports = async ({page, boundActionCreators}) => {
-  const {createPage} = boundActionCreators;
+module.exports = async ({page, actions}) => {
+  const {createPage} = actions;
 
   return new Promise(resolvePromise => {
-    // page.matchPath is a special key that's used for matching pages only on the client.
-    // Explicitly wire up all error code wildcard matches to redirect to the error code page.
     if (page.path.includes('docs/error-decoder.html')) {
-      page.matchPath = 'docs/error-decoder:path?';
       page.context.slug = 'docs/error-decoder.html';
 
       createPage(page);
     }
-
     resolvePromise();
   });
 };

gatsby/onCreateWebpackConfig.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const {resolve} = require('path');
+const webpack = require('webpack');
+
+module.exports = ({stage, actions}) => {
+  actions.setWebpackConfig({
+    resolve: {
+      modules: [
+        resolve(__dirname, '../src'),
+        resolve(__dirname, '../node_modules'),
+      ],
+    },
+    // See https://github.com/FormidableLabs/react-live/issues/5
+    plugins: [new webpack.IgnorePlugin(/^(xor|props)$/)],
+  });
+};

package.json

@@ -7,7 +7,6 @@
     "url": "https://github.com/reactjs/reactjs.org"
   },
   "dependencies": {
-    "array-from": "^2.1.1",
     "babel-eslint": "^8.0.1",
     "eslint": "^4.8.0",
     "eslint-config-fbjs": "^2.0.0",
@@ -19,40 +18,41 @@
     "eslint-plugin-react": "^7.4.0",
     "eslint-plugin-relay": "^0.0.19",
     "flow-bin": "^0.56.0",
-    "gatsby": "^1.9.273",
-    "gatsby-link": "^1.6.9",
-    "gatsby-plugin-catch-links": "^1.0.9",
-    "gatsby-plugin-feed": "^1.3.9",
-    "gatsby-plugin-glamor": "^1.6.4",
-    "gatsby-plugin-google-analytics": "^1.0.4",
-    "gatsby-plugin-manifest": "^1.0.4",
-    "gatsby-plugin-netlify": "^1.0.21",
-    "gatsby-plugin-nprogress": "^1.0.7",
-    "gatsby-plugin-react-helmet": "^1.0.3",
-    "gatsby-plugin-react-next": "^1.0.3",
-    "gatsby-plugin-sharp": "^1.6.48",
-    "gatsby-plugin-twitter": "^1.0.10",
-    "gatsby-remark-autolink-headers": "^1.4.4",
-    "gatsby-remark-code-repls": "^1.0.2",
-    "gatsby-remark-copy-linked-files": "^1.5.2",
-    "gatsby-remark-embed-snippet": "^1.0.22",
-    "gatsby-remark-images": "^1.5.67",
-    "gatsby-remark-prismjs": "^1.2.24",
-    "gatsby-remark-responsive-iframe": "^1.4.3",
-    "gatsby-remark-smartypants": "^1.4.3",
-    "gatsby-source-filesystem": "^1.4.4",
-    "gatsby-transformer-remark": "^1.7.44",
-    "gatsby-transformer-sharp": "^1.6.27",
+    "gatsby": "^2.0.0",
+    "gatsby-plugin-catch-links": "^2.0.0",
+    "gatsby-plugin-feed": "^2.0.0",
+    "gatsby-plugin-glamor": "^2.0.0",
+    "gatsby-plugin-google-analytics": "^2.0.0",
+    "gatsby-plugin-manifest": "^2.0.0",
+    "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-twitter": "^2.0.0",
+    "gatsby-remark-autolink-headers": "^2.0.0",
+    "gatsby-remark-code-repls": "^2.0.0",
+    "gatsby-remark-copy-linked-files": "^2.0.0",
+    "gatsby-remark-embed-snippet": "^3.0.0",
+    "gatsby-remark-images": "^2.0.0",
+    "gatsby-remark-prismjs": "^3.0.0",
+    "gatsby-remark-responsive-iframe": "^2.0.0",
+    "gatsby-remark-smartypants": "^2.0.0",
+    "gatsby-source-filesystem": "^2.0.0",
+    "gatsby-transformer-remark": "^2.0.0",
+    "gatsby-transformer-sharp": "^2.0.0",
     "glamor": "^2.20.40",
     "hex2rgba": "^0.0.1",
+    "normalize.css": "^8.0.0",
     "prettier": "^1.7.4",
+    "prismjs": "^1.15.0",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-helmet": "^5.2.0",
     "react-live": "1.8.0-0",
     "remarkable": "^1.7.1",
     "request-promise": "^4.2.2",
     "rimraf": "^2.6.1",
     "slugify": "^1.2.1",
-    "string.prototype.includes": "^1.0.0",
-    "string.prototype.repeat": "^0.2.0",
     "unist-util-visit": "^1.1.3"
   },
   "engines": {
@@ -76,16 +76,17 @@
     "dev": "gatsby develop -H 0.0.0.0",
     "flow": "flow",
     "format:source": "prettier --config .prettierrc --write \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"",
-    "format:examples": "prettier --config .prettierrc.examples --write \"examples/**/*.js\"",
+    "format:examples": "prettier --config examples/.prettierrc --write \"examples/**/*.js\"",
     "lint": "eslint .",
     "netlify": "yarn --version && rimraf node_modules && yarn install --frozen-lockfile --check-files && yarn build",
     "nit:source": "prettier --config .prettierrc --list-different \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"",
-    "nit:examples": "prettier --config .prettierrc.examples --list-different \"examples/**/*.js\"",
+    "nit:examples": "prettier --config examples/.prettierrc --list-different \"examples/**/*.js\"",
     "prettier": "yarn format:source && yarn format:examples",
     "prettier:diff": "yarn nit:source && yarn nit:examples",
     "reset": "rimraf ./.cache"
   },
   "devDependencies": {
+    "@babel/preset-flow": "^7.0.0",
     "eslint-config-prettier": "^2.6.0",
     "lz-string": "^1.4.4",
     "npm-run-all": "^4.1.2",

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

@@ -3,8 +3,8 @@ const request = require('request-promise');
 const errorCodesUrl =
   'http://raw.githubusercontent.com/facebook/react/master/scripts/error-codes/codes.json';
 
-exports.sourceNodes = async ({boundActionCreators}) => {
-  const {createNode} = boundActionCreators;
+exports.sourceNodes = async ({actions}) => {
+  const {createNode} = actions;
 
   try {
     const jsonString = await request(errorCodesUrl);

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

@@ -8,8 +8,8 @@ const safeLoad = require('js-yaml').safeLoad;
 
 // Reads authors.yml data into GraphQL.
 // This is auto-linked by gatsby-config.js to blog posts.
-exports.sourceNodes = ({graphql, boundActionCreators}) => {
-  const {createNode} = boundActionCreators;
+exports.sourceNodes = ({graphql, actions}) => {
+  const {createNode} = actions;
 
   const path = resolve(__dirname, '../../content/authors.yml');
   const file = readFileSync(path, 'utf8');

plugins/gatsby-transformer-home-example-code/gatsby-node.js

@@ -3,8 +3,8 @@ const {join, resolve} = require('path');
 
 // Store code snippets in GraphQL for the home page examples.
 // Snippets will be matched with markdown templates of the same name.
-exports.sourceNodes = ({graphql, boundActionCreators}) => {
-  const {createNode} = boundActionCreators;
+exports.sourceNodes = ({graphql, actions}) => {
+  const {createNode} = actions;
 
   const path = resolve(__dirname, '../../content/home/examples');
   const files = readdirSync(path);

src/components/ButtonLink/ButtonLink.js

@@ -4,7 +4,7 @@
  * @emails react-core
  */
 
-import Link from 'gatsby-link';
+import {Link} from 'gatsby';
 import React from 'react';
 import {colors, media} from 'theme';
 

src/components/ErrorDecoder/ErrorDecoder.js

@@ -95,7 +95,7 @@ function ErrorDecoder(props: {|
   let msg = '';
 
   const errorCodes = JSON.parse(props.errorCodesString);
-  const parseResult = parseQueryString(props.location.search);
+  const parseResult = parseQueryString(props.location.search || '');
   if (parseResult != null) {
     code = parseResult.code;
     msg = replaceArgs(errorCodes[code], parseResult.args);