Use new babel API's to manage babel options

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

@@ -1,76 +1,15 @@
 /* @flow */
 
-const fs = require(`fs`)
+const fs = require(`fs-extra`)
 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 apiRunnerNode = require(`../../utils/api-runner-node`)
 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
-    }
-  }
-}
+const { withBasePath } = require(`../../utils/path`)
 
 /**
  * Creates a normalized Babel config to use with babel-loader. Loads a local
@@ -80,18 +19,29 @@ exports.onCreateBabelConfig = ({ stage, store, actions }) => {
   const program = store.getState().program
   const { directory } = program
 
-  let babelrc =
-    findBabelrc(directory) ||
-    findBabelrcJs(directory) ||
-    findBabelPackage(directory)
+  addDefaultPluginsPresets(actions, {
+    stage,
+    browserslist: program.browserslist,
+  })
+}
 
-  // If user doesn't have a custom babelrc, add defaults.
-  if (babelrc) {
-    actionifyBabelrc(babelrc, actions)
-  } else {
-    addDefaultPluginsPresets(actions, {
-      stage,
-      browserslist: program.browserslist,
-    })
-  }
+exports.onPreBootstrap = async ({ store }) => {
+  const directory = store.getState().program.directory
+  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
+  const babelState = JSON.stringify(babelrcState.stages, null, 4)
+  fs.writeFile(directoryPath(`.cache/babelState.json`), babelState)
 }

packages/gatsby/src/utils/babel-loader.js

@@ -0,0 +1,71 @@
+const babelLoader = require(`babel-loader`)
+const path = require(`path`)
+const fs = require(`fs`)
+
+const prepareOptions = babel => {
+  const pluginBabelConfig = require(path.join(
+    process.cwd(),
+    `./.cache/babelState.json`
+  ))
+
+  const stage = fs.readFileSync(
+    path.join(process.cwd(), `./.cache/current-stage.txt`),
+    `utf8`
+  )
+
+  // Go through babel state and create config items.
+  const reduxPlugins = []
+  const reduxPresets = []
+  pluginBabelConfig[stage].plugins.forEach(plugin => {
+    reduxPlugins.push(
+      babel.createConfigItem([require.resolve(plugin.name), plugin.options], {
+        type: `plugin`,
+      })
+    )
+  })
+  pluginBabelConfig[stage].presets.forEach(preset => {
+    reduxPresets.push(
+      babel.createConfigItem([require.resolve(preset.name), preset.options], {
+        type: `preset`,
+      })
+    )
+  })
+
+  return [reduxPresets, reduxPlugins]
+}
+
+module.exports = babelLoader.custom(babel => {
+  const toReturn = {
+    // Passed the loader options.
+    customOptions(options) {
+      return {
+        loader: {
+          cacheDirectory: true,
+          babelrc: false,
+          sourceType: `unambiguous`,
+          ...options,
+        },
+      }
+    },
+
+    // Passed Babel's 'PartialConfig' object.
+    config(partialConfig) {
+      let { options } = partialConfig
+
+      // If there is no filesystem config present add more defaults
+      // TODO: maybe this should be stricter, like checks if there are no plugins or presets?
+      if (!partialConfig.hasFilesystemConfig()) {
+        const [reduxPresets, reduxPlugins] = prepareOptions(babel)
+        options = {
+          ...options,
+          plugins: reduxPlugins,
+          presets: reduxPresets,
+        }
+      }
+
+      return options
+    },
+  }
+
+  return toReturn
+})

packages/gatsby/src/utils/webpack-utils.js

@@ -7,7 +7,6 @@ const UglifyPlugin = require(`uglifyjs-webpack-plugin`)
 const MiniCssExtractPlugin = require(`mini-css-extract-plugin`)
 
 const builtinPlugins = require(`./webpack-plugins`)
-const { createBabelConfig } = require(`./babel-config`)
 const eslintConfig = require(`./eslint-config`)
 
 type LoaderSpec = string | { loader: string, options?: Object }
@@ -119,12 +118,10 @@ module.exports = async ({
 }): Promise<WebpackUtilsOptions> => {
   const assetRelativeRoot = `static/`
   const vendorRegex = /(node_modules|bower_components)/
-  const supportedBrowsers = program.browserlist
+  const supportedBrowsers = program.browserslist
 
   const PRODUCTION = !stage.includes(`develop`)
 
-  const babelConfig = await createBabelConfig(program, stage)
-
   const isSSR = stage.includes(`html`)
 
   const makeExternalOnly = (original: RuleFactory<*>) => (
@@ -257,10 +254,10 @@ module.exports = async ({
       }
     },
 
-    js: (options = babelConfig) => {
+    js: options => {
       return {
         options,
-        loader: require.resolve(`babel-loader`),
+        loader: require.resolve(`./babel-loader`),
       }
     },
 
@@ -297,7 +294,7 @@ module.exports = async ({
    * Javascript loader via babel, excludes node_modules
    */
   {
-    let js = options => {
+    let js = (options = {}) => {
       return {
         test: /\.jsx?$/,
         exclude: vendorRegex,

packages/gatsby/src/utils/webpack.config.js

@@ -1,6 +1,6 @@
 require(`v8-compile-cache`)
 
-const fs = require(`fs`)
+const fs = require(`fs-extra`)
 const path = require(`path`)
 const dotenv = require(`dotenv`)
 const FriendlyErrorsWebpackPlugin = require(`friendly-errors-webpack-plugin`)
@@ -28,6 +28,12 @@ module.exports = async (
 ) => {
   const directoryPath = withBasePath(directory)
 
+  await fs.writeFile(
+    directoryPath(`.cache/current-stage.txt`),
+    suppliedStage,
+    `utf8`
+  )
+
   // We combine develop & develop-html stages for purposes of generating the
   // webpack config.
   const stage = suppliedStage

www/package.json

@@ -7,20 +7,20 @@
     "bluebird": "^3.5.1",
     "email-validator": "^1.1.1",
     "fuse.js": "^3.2.0",
-    "gatsby": "^2.0.0-beta.47",
+    "gatsby": "^2.0.0-beta.97",
     "gatsby-image": "next",
     "gatsby-plugin-canonical-urls": "next",
     "gatsby-plugin-catch-links": "next",
     "gatsby-plugin-create-client-paths": "^1.0.8",
     "gatsby-plugin-feed": "next",
     "gatsby-plugin-fullstory": "^1.0.4-5",
     "gatsby-plugin-glamor": "next",
-    "gatsby-plugin-google-analytics": "next",
+    "gatsby-plugin-google-analytics": "^2.0.0-beta.5",
     "gatsby-plugin-google-tagmanager": "next",
     "gatsby-plugin-lodash": "next",
     "gatsby-plugin-mailchimp": "^2.2.3",
-    "gatsby-plugin-manifest": "next",
-    "gatsby-plugin-netlify": "next",
+    "gatsby-plugin-manifest": "^2.0.2-beta.5",
+    "gatsby-plugin-netlify": "^2.0.0-beta.6",
     "gatsby-plugin-netlify-cache": "^0.1.0",
     "gatsby-plugin-nprogress": "next",
     "gatsby-plugin-offline": "^2.0.0-beta.9",