diff --git a/.babelrc b/.babelrc index a8b9b8bb..40f74256 100644 --- a/.babelrc +++ b/.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 + } + ] + ] +} \ No newline at end of file diff --git a/.prettierrc.examples b/examples/.prettierrc similarity index 100% rename from .prettierrc.examples rename to examples/.prettierrc diff --git a/flow-typed/gatsby-link.js b/flow-typed/gatsby.js similarity index 51% rename from flow-typed/gatsby-link.js rename to flow-typed/gatsby.js index d5fa9036..8fec2756 100644 --- a/flow-typed/gatsby-link.js +++ b/flow-typed/gatsby.js @@ -1,3 +1,3 @@ -declare module 'gatsby-link' { +declare module 'gatsby' { declare module.exports: any; } diff --git a/flow-typed/glamor.js b/flow-typed/glamor.js index d6ae5ca4..1c87bfc2 100644 --- a/flow-typed/glamor.js +++ b/flow-typed/glamor.js @@ -15,7 +15,3 @@ declare module 'glamor/react' { propMerge: Function, }; } - -declare module 'glamor/reset' { - declare module.exports: any; -} diff --git a/flow-typed/graphql.js b/flow-typed/graphql.js deleted file mode 100644 index 53685c1a..00000000 --- a/flow-typed/graphql.js +++ /dev/null @@ -1 +0,0 @@ -declare function graphql(...params: any): any; diff --git a/flow-typed/polyfills.js b/flow-typed/polyfills.js deleted file mode 100644 index 9aa0daec..00000000 --- a/flow-typed/polyfills.js +++ /dev/null @@ -1,11 +0,0 @@ -declare module 'array-from' { - declare module.exports: any; -} - -declare module 'string.prototype.includes' { - declare module.exports: any; -} - -declare module 'string.prototype.repeat' { - declare module.exports: any; -} diff --git a/gatsby-browser.js b/gatsby-browser.js new file mode 100644 index 00000000..d689526f --- /dev/null +++ b/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 = () => {}; diff --git a/gatsby-config.js b/gatsby-config.js index 3cf43f2c..7f4982ae 100644 --- a/gatsby-config.js +++ b/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 { diff --git a/gatsby-node.js b/gatsby-node.js index 2154c046..83d7ae0f 100644 --- a/gatsby-node.js +++ b/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'); diff --git a/gatsby/createPages.js b/gatsby/createPages.js index 8dd2922c..19ab1c1e 100644 --- a/gatsby/createPages.js +++ b/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, }); -}; \ No newline at end of file +}; diff --git a/gatsby/modifyWebpackConfig.js b/gatsby/modifyWebpackConfig.js deleted file mode 100644 index d163571e..00000000 --- a/gatsby/modifyWebpackConfig.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Copyright (c) 2013-present, Facebook, Inc. - * - * @emails react-core - */ - -'use strict'; - -const {resolve} = require('path'); -const webpack = require('webpack'); - -module.exports = ({config, stage}) => { - // See https://github.com/FormidableLabs/react-live/issues/5 - config.plugin('ignore', () => new webpack.IgnorePlugin(/^(xor|props)$/)); - - config.merge({ - resolve: { - root: resolve(__dirname, '../src'), - extensions: ['', '.js', '.jsx', '.json'], - }, - }); - return config; -}; \ No newline at end of file diff --git a/gatsby/onCreateNode.js b/gatsby/onCreateNode.js index e8731eff..1c08e5b6 100644 --- a/gatsby/onCreateNode.js +++ b/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': diff --git a/gatsby/onCreatePage.js b/gatsby/onCreatePage.js index a6da8a80..7776438f 100644 --- a/gatsby/onCreatePage.js +++ b/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(); }); }; diff --git a/gatsby/onCreateWebpackConfig.js b/gatsby/onCreateWebpackConfig.js new file mode 100644 index 00000000..61f858bf --- /dev/null +++ b/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)$/)], + }); +}; diff --git a/package.json b/package.json index 7ca41d1d..146ba22b 100644 --- a/package.json +++ b/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", diff --git a/plugins/gatsby-source-react-error-codes/gatsby-node.js b/plugins/gatsby-source-react-error-codes/gatsby-node.js index cde9ef59..83ec69e9 100644 --- a/plugins/gatsby-source-react-error-codes/gatsby-node.js +++ b/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); diff --git a/plugins/gatsby-transformer-authors-yaml/gatsby-node.js b/plugins/gatsby-transformer-authors-yaml/gatsby-node.js index fb2d2553..bb5ca8bc 100644 --- a/plugins/gatsby-transformer-authors-yaml/gatsby-node.js +++ b/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'); diff --git a/plugins/gatsby-transformer-home-example-code/gatsby-node.js b/plugins/gatsby-transformer-home-example-code/gatsby-node.js index dccdf6b9..e8d81331 100644 --- a/plugins/gatsby-transformer-home-example-code/gatsby-node.js +++ b/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); diff --git a/src/components/ButtonLink/ButtonLink.js b/src/components/ButtonLink/ButtonLink.js index 4abbd0ff..9367fe2b 100644 --- a/src/components/ButtonLink/ButtonLink.js +++ b/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'; diff --git a/src/components/ErrorDecoder/ErrorDecoder.js b/src/components/ErrorDecoder/ErrorDecoder.js index e25531bc..d179a09b 100644 --- a/src/components/ErrorDecoder/ErrorDecoder.js +++ b/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); diff --git a/src/layouts/index.js b/src/components/Layout/Layout.js similarity index 85% rename from src/layouts/index.js rename to src/components/Layout/Layout.js index f6d9ee6f..dc727c08 100644 --- a/src/layouts/index.js +++ b/src/components/Layout/Layout.js @@ -5,11 +5,6 @@ * @flow */ -// Polyfills for IE -import 'array-from'; -import 'string.prototype.includes'; -import 'string.prototype.repeat'; - import patchDOMForGoogleTranslate from 'utils/patchDOMForGoogleTranslate'; import React, {Component} from 'react'; import Flex from 'components/Flex'; @@ -17,12 +12,6 @@ import Footer from 'components/LayoutFooter'; import Header from 'components/LayoutHeader'; import {media} from 'theme'; -// Import global styles -import '../prism-styles'; -import 'glamor/reset'; -import 'css/reset.css'; -import 'css/algolia.css'; - patchDOMForGoogleTranslate(); type Props = { @@ -67,7 +56,7 @@ class Template extends Component { marginTop: 40, }, }}> - {children()} + {children}