Use new babel API's to manage babel options

docs/docs/babel.md

@@ -27,8 +27,6 @@ to root of your site and modifying it per your needs.
 
 ```json5
 {
-  cacheDirectory: true,
-  babelrc: false,
   presets: [
     [
       "@babel/preset-env",
@@ -59,6 +57,7 @@ to root of your site and modifying it per your needs.
       },
     ],
     "@babel/plugin-syntax-dynamic-import",
+    "babel-plugin-macros",
     [
       "@babel/plugin-transform-runtime",
       {

packages/gatsby/package.json

@@ -84,7 +84,6 @@
     "joi": "12.x.x",
     "json-loader": "^0.5.7",
     "json-stringify-safe": "^5.0.1",
-    "json5": "^0.5.0",
     "kebab-hash": "^0.1.2",
     "lodash": "^4.17.4",
     "lodash-id": "^0.14.0",

packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.js.snap

@@ -21,7 +21,7 @@ Array [
     "id": "Plugin load-babel-config",
     "name": "load-babel-config",
     "nodeAPIs": Array [
-      "onCreateBabelConfig",
+      "onPreBootstrap",
     ],
     "pluginOptions": Object {
       "plugins": Array [],
@@ -125,7 +125,7 @@ Array [
     "id": "Plugin load-babel-config",
     "name": "load-babel-config",
     "nodeAPIs": Array [
-      "onCreateBabelConfig",
+      "onPreBootstrap",
     ],
     "pluginOptions": Object {
       "plugins": Array [],

packages/gatsby/src/commands/repl.js

@@ -1,13 +1,7 @@
 const repl = require(`repl`)
 const { graphql } = require(`graphql`)
 const bootstrap = require(`../bootstrap`)
-const {
-  store,
-  loadNodeContent,
-  getNodes,
-  getNode,
-  hasNodeChanged,
-} = require(`../redux`)
+const { store, loadNodeContent, getNodes, getNode } = require(`../redux`)
 
 module.exports = async program => {
   // run bootstrap

packages/gatsby/src/internal-plugins/load-babel-config/gatsby-node.js

@@ -1,97 +1,28 @@
 /* @flow */
 
-const fs = require(`fs`)
-const path = require(`path`)
-const json5 = require(`json5`)
-const report = require(`gatsby-cli/lib/reporter`)
-const { actionifyBabelrc, addDefaultPluginsPresets } = require(`./utils`)
-const existsSync = require(`fs-exists-cached`).sync
-
-const testRequireError = require(`../../utils/test-require-error`).default
-
-/**
- * Locates a .babelrc in the Gatsby site root directory. Parses it using
- * json5 (what Babel uses). It throws an error if the users's .babelrc is
- * not parseable.
- */
-function findBabelrc(directory) {
-  const babelrcPath = path.join(directory, `.babelrc`)
-  if (existsSync(babelrcPath)) {
-    try {
-      const babelrc = fs.readFileSync(babelrcPath, `utf-8`)
-      return json5.parse(babelrc)
-    } catch (error) {
-      throw error
-    }
-  }
-  return null
-}
-
-/**
- * Locates a .babelrc.js in the Gatsby site root directory.
- * requires it and unwraps any esm default export
- */
-const preferDefault = m => (m && m.default) || m
-function findBabelrcJs(directory, stage) {
-  let babelrc = null
-  const babelrcPath = path.join(directory, `.babelrc.js`)
-  try {
-    babelrc = preferDefault(require(babelrcPath))
-  } catch (error) {
-    if (!testRequireError(babelrcPath, error)) {
-      throw error
-    }
-  }
-
-  // TODO support this
-  if (typeof babelrc === `function`) {
-    report.error(
-      `.babelrc.js files that export a function are not supported in Gatsby`
-    )
-    return null
-  }
-
-  return babelrc
-}
-
-/**
- * Reads the user's package.json and returns the "babel" section. It will
- * return undefined when the "babel" section does not exist.
- */
-function findBabelPackage(directory) {
-  const packageJson = require(path.join(directory, `package.json`))
-  try {
-    // $FlowFixMe - https://github.com/facebook/flow/issues/1975
-    return packageJson.babel
-  } catch (error) {
-    if (testRequireError(packageJson, error)) {
-      return null
-    } else {
-      throw error
-    }
-  }
-}
-
-/**
- * Creates a normalized Babel config to use with babel-loader. Loads a local
- * babelrc config if one exists or sets a backup default.
- */
-exports.onCreateBabelConfig = ({ stage, store, actions }) => {
-  const program = store.getState().program
-  const { directory } = program
-
-  let babelrc =
-    findBabelrc(directory) ||
-    findBabelrcJs(directory) ||
-    findBabelPackage(directory)
-
-  // If user doesn't have a custom babelrc, add defaults.
-  if (babelrc) {
-    actionifyBabelrc(babelrc, actions)
-  } else {
-    addDefaultPluginsPresets(actions, {
-      stage,
-      browserslist: program.browserslist,
-    })
-  }
+const fs = require(`fs-extra`)
+
+const apiRunnerNode = require(`../../utils/api-runner-node`)
+const { withBasePath } = require(`../../utils/path`)
+
+exports.onPreBootstrap = async ({ store }) => {
+  const { directory, browserslist } = store.getState().program
+  const directoryPath = withBasePath(directory)
+
+  await apiRunnerNode(`onCreateBabelConfig`, {
+    stage: `develop`,
+  })
+  await apiRunnerNode(`onCreateBabelConfig`, {
+    stage: `develop-html`,
+  })
+  await apiRunnerNode(`onCreateBabelConfig`, {
+    stage: `build-javascript`,
+  })
+  await apiRunnerNode(`onCreateBabelConfig`, {
+    stage: `build-html`,
+  })
+  const babelrcState = store.getState().babelrc
+  babelrcState.browserslist = browserslist
+  const babelState = JSON.stringify(babelrcState.stages, null, 4)
+  await fs.writeFile(directoryPath(`.cache/babelState.json`), babelState)
 }