Standardize modifyWebpackConfig API to onCreateWebpackConfig fixes #4344

(#4406)
gatsbyjs · Mar 7, 2018 · 0b34ac6 · 0b34ac6
1 parent 9c734af
commit 0b34ac6
Show file tree

Hide file tree

Showing 23 changed files with 41 additions and 50 deletions.
diff --git a/Breaking Changes.md b/Breaking Changes.md
@@ -3,3 +3,5 @@
 * Source & transformer plugins now use UUIDs for ids. If you used glob or regex to query nodes by id then you'll need to query something else.
 * Mixed commonjs/es6 modules fail
 * Remove explicit polyfill and use the new builtins: usage support in babel 7.
+* Changed `modifyBabelrc` to `onCreateBabelConfig`
+* Changed `modifyWebpackConfig` to `onCreateWebpackConfig`
diff --git a/docs/docs/add-custom-webpack-config.md b/docs/docs/add-custom-webpack-config.md
@@ -10,7 +10,7 @@ Gatsby repo so it's available to others (including your future self 😀)._
 
 To add custom webpack configurations, create (if there's not one already) a
 `gatsby-node.js` file in your root directory. Inside this file, export a
-function called `modifyWebpackConfig`.
+function called `onCreateWebpackConfig`.
 
 When Gatsby creates its webpack config, this function will be called allowing
 you to modify the default webpack config using
@@ -42,7 +42,7 @@ e.g. [Sass](/packages/gatsby-plugin-sass/),
 Here is an example that configures **flexboxgrid** when processing css files. Add this in `gatsby-node.js`:
 
 ```js
-exports.modifyWebpackConfig = ({
+exports.onCreateWebpackConfig = ({
   stage,
   rules,
   loaders,

diff --git a/docs/docs/debugging-html-builds.md b/docs/docs/debugging-html-builds.md
@@ -47,7 +47,7 @@ rendering.
 `gatsby-node.js` in the project root:
 
 ```js
-exports.modifyWebpackConfig = ({ stage, loaders, actions }) => {
+exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
   if (stage === "build-html") {
     actions.setWebpackConfig({
       module: {

diff --git a/examples/using-remark/gatsby-node.js b/examples/using-remark/gatsby-node.js
@@ -102,7 +102,7 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
 }
 
 // Sass and Lodash.
-exports.modifyWebpackConfig = ({ stage, actions }) => {
+exports.onCreateWebpackConfig = ({ stage, actions }) => {
   switch (stage) {
     case `build-javascript`:
       actions.setWebpackConfig({

diff --git a/packages/gatsby-1-config-css-modules/README.md b/packages/gatsby-1-config-css-modules/README.md
@@ -14,7 +14,7 @@ Example from [`gatsby-plugin-sass`](../gatsby-plugin-sass/):
 // in gatsby-node.js
 const { cssModulesConfig } = require("gatsby-1-config-css-modules");
 
-exports.modifyWebpackConfig = ({ config, stage }, { precision }) => {
+exports.onCreateWebpackConfig = ({ config, stage }, { precision }) => {
   const sassFiles = /\.s[ac]ss$/;
   const sassModulesFiles = /\.module\.s[ac]ss$/;
   const sassLoader = precision ? `sass?precision=${precision}` : `sass`;

diff --git a/packages/gatsby-plugin-coffeescript/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-coffeescript/src/__tests__/gatsby-node.js
@@ -2,7 +2,7 @@ jest.mock(`../resolve`, () => module => `/resolved/path/${module}`)
 
 const {
   resolvableExtensions,
-  modifyWebpackConfig,
+  onCreateWebpackConfig,
   preprocessSource,
 } = require(`../gatsby-node`)
 
@@ -17,7 +17,7 @@ describe(`gatsby-plugin-coffeescript`, () => {
     }
     const loaders = { js: () => `babel-loader` }
 
-    modifyWebpackConfig({ actions, loaders })
+    onCreateWebpackConfig({ actions, loaders })
 
     expect(actions.setWebpackConfig).toHaveBeenCalledTimes(
       resolvableExtensions().length

diff --git a/packages/gatsby-plugin-coffeescript/src/gatsby-node.js b/packages/gatsby-plugin-coffeescript/src/gatsby-node.js
@@ -7,7 +7,7 @@ export function resolvableExtensions() {
   return [`.coffee`]
 }
 
-export function modifyWebpackConfig({ loaders, actions }) {
+export function onCreateWebpackConfig({ loaders, actions }) {
   // We need to use Babel to get around the ES6 export issue.
   actions.setWebpackConfig({
     module: {

diff --git a/packages/gatsby-plugin-glamor/src/gatsby-node.js b/packages/gatsby-plugin-glamor/src/gatsby-node.js
@@ -1,5 +1,5 @@
 // Add Glamor support
-exports.modifyWebpackConfig = ({ actions, plugins }) =>
+exports.onCreateWebpackConfig = ({ actions, plugins }) =>
   actions.setWebpackConfig({
     plugins: [
       plugins.provide({

diff --git a/packages/gatsby-plugin-less/src/gatsby-node.js b/packages/gatsby-plugin-less/src/gatsby-node.js
@@ -1,4 +1,4 @@
-exports.modifyWebpackConfig = (
+exports.onCreateWebpackConfig = (
   { actions, stage, rules, plugins, loaders },
   { postCssPlugins, ...lessOptions }
 ) => {

diff --git a/packages/gatsby-plugin-lodash/src/gatsby-node.js b/packages/gatsby-plugin-lodash/src/gatsby-node.js
@@ -1,7 +1,7 @@
 const webpackLodashPlugin = require(`lodash-webpack-plugin`)
 
 // Add Lodash webpack plugin
-exports.modifyWebpackConfig = (
+exports.onCreateWebpackConfig = (
   { actions, stage },
   { disabledFeatures = [] }
 ) => {

diff --git a/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js b/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js
@@ -60,7 +60,7 @@ function module(config, stage) {
   }
 }
 
-exports.modifyWebpackConfig = ({ config, stage }, { modulePath }) => {
+exports.onCreateWebpackConfig = ({ config, stage }, { modulePath }) => {
   config.merge({
     entry: {
       cms: [`${__dirname}/cms.js`, modulePath].filter(p => p),

diff --git a/packages/gatsby-plugin-netlify/src/gatsby-node.js b/packages/gatsby-plugin-netlify/src/gatsby-node.js
@@ -10,7 +10,7 @@ import { DEFAULT_OPTIONS, BUILD_HTML_STAGE, BUILD_CSS_STAGE } from "./constants"
 let assetsManifest = {}
 
 // Inject a webpack plugin to get the file manifests so we can translate all link headers
-exports.modifyWebpackConfig = ({ actions, stage }) => {
+exports.onCreateWebpackConfig = ({ actions, stage }) => {
   if (stage !== BUILD_HTML_STAGE && stage !== BUILD_CSS_STAGE) {
     return
   }

diff --git a/packages/gatsby-plugin-no-sourcemaps/gatsby-node.js b/packages/gatsby-plugin-no-sourcemaps/gatsby-node.js
@@ -1,4 +1,4 @@
-exports.modifyWebpackConfig = ({ stage, actions }) => {
+exports.onCreateWebpackConfig = ({ stage, actions }) => {
   if (stage === `build-javascript`) {
     actions.setWebpackConfig({
       devtool: false,

diff --git a/packages/gatsby-plugin-preact/src/gatsby-node.js b/packages/gatsby-plugin-preact/src/gatsby-node.js
@@ -1,4 +1,4 @@
-exports.modifyWebpackConfig = ({ stage, actions }) => {
+exports.onCreateWebpackConfig = ({ stage, actions }) => {
   // Requiring the server version of React-dom is hardcoded right now
   // in the development server. So we'll just avoid loading Preact there
   // for now.

diff --git a/packages/gatsby-plugin-react-next/src/gatsby-node.js b/packages/gatsby-plugin-react-next/src/gatsby-node.js
@@ -6,7 +6,7 @@ const rootReact = resolve.sync(`react`, {
 })
 const React = require(rootReact)
 
-exports.modifyWebpackConfig = ({ actions, plugins }) => {
+exports.onCreateWebpackConfig = ({ actions, plugins }) => {
   if (React.version.slice(0, 2) === `16`) return
 
   actions.setWebpackConfig({

diff --git a/packages/gatsby-plugin-sass/src/gatsby-node.js b/packages/gatsby-plugin-sass/src/gatsby-node.js
@@ -1,4 +1,4 @@
-exports.modifyWebpackConfig = (
+exports.onCreateWebpackConfig = (
   { actions, stage, rules, plugins, loaders },
   { postCssPlugins, ...sassOptions }
 ) => {

diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js
@@ -29,7 +29,6 @@ const getImageSize = file => {
 
 const duotone = require(`./duotone`)
 const { boundActionCreators } = require(`gatsby/dist/redux/actions`)
-const reporter = require(`gatsby-cli/lib/reporter`)
 
 // Promisify the sharp prototype (methods) to promisify the alternative (for
 // raw) callback-accepting toBuffer(...) method

diff --git a/packages/gatsby-plugin-stylus/src/gatsby-node.js b/packages/gatsby-plugin-stylus/src/gatsby-node.js
@@ -19,7 +19,7 @@
  *   },
  * ],
  */
-exports.modifyWebpackConfig = (
+exports.onCreateWebpackConfig = (
   { actions, stage, rules, plugins, loaders },
   { postCssPlugins, ...stylusOptions }
 ) => {

diff --git a/packages/gatsby-plugin-typescript/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-typescript/src/__tests__/gatsby-node.js
@@ -4,7 +4,7 @@ const babelPluginRemoveQueries = require(`babel-plugin-remove-graphql-queries`)
   .default
 const {
   resolvableExtensions,
-  modifyWebpackConfig,
+  onCreateWebpackConfig,
   preprocessSource,
 } = require(`../gatsby-node`)
 
@@ -34,15 +34,15 @@ describe(`gatsby-plugin-typescript`, () => {
       loader: jest.fn(),
     }
 
-    modifyWebpackConfig({ config, babelConfig }, { compilerOptions: {} })
+    onCreateWebpackConfig({ config, babelConfig }, { compilerOptions: {} })
 
     expect(args.actions.setWebpackConfig).toHaveBeenCalledTimes(1)
     const lastCall = args.actions.setWebpackConfig.mock.calls.pop()
     expect(lastCall).toMatchSnapshot()
   })
 
   it(`adds the remove graphql queries plugin`, () => {
-    modifyWebpackConfig(args, { compilerOptions: {} })
+    onCreateWebpackConfig(args, { compilerOptions: {} })
 
     expect(args.loaders.js).toHaveBeenCalledTimes(1)
     const lastCall = args.loaders.js.mock.calls.pop()
@@ -59,7 +59,7 @@ describe(`gatsby-plugin-typescript`, () => {
     }
     const options = { compilerOptions: { foo: `bar` }, transpileOnly: false }
 
-    modifyWebpackConfig({ config, babelConfig }, options)
+    onCreateWebpackConfig({ config, babelConfig }, options)
 
     const expectedOptions = {
       compilerOptions: {
@@ -89,7 +89,7 @@ describe(`gatsby-plugin-typescript`, () => {
     const config = {
       loader: jest.fn(),
     }
-    modifyWebpackConfig({ config, babelConfig }, { compilerOptions: {} })
+    onCreateWebpackConfig({ config, babelConfig }, { compilerOptions: {} })
 
     const expectedOptions = {
       compilerOptions: {

diff --git a/packages/gatsby-plugin-typescript/src/gatsby-node.js b/packages/gatsby-plugin-typescript/src/gatsby-node.js
@@ -11,7 +11,7 @@ const compilerDefaults = {
 
 module.exports.resolvableExtensions = () => [`.ts`, `.tsx`]
 
-module.exports.modifyWebpackConfig = (
+module.exports.onCreateWebpackConfig = (
   { actions, loaders },
   { compilerOptions, ...options }
 ) => {

diff --git a/packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.js.snap b/packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.js.snap
@@ -4,10 +4,10 @@ exports[`Load plugins Load plugins for a site 1`] = `
 Array [
   Object {
     "browserAPIs": Array [],
-    "id": "Plugin load-babel-config",
-    "name": "load-babel-config",
+    "id": "Plugin dev-404-page",
+    "name": "dev-404-page",
     "nodeAPIs": Array [
-      "onCreateBabelConfig",
+      "createPagesStatefully",
     ],
     "pluginOptions": Object {
       "plugins": Array [],
@@ -18,10 +18,10 @@ Array [
   },
   Object {
     "browserAPIs": Array [],
-    "id": "Plugin dev-404-page",
-    "name": "dev-404-page",
+    "id": "Plugin load-babel-config",
+    "name": "load-babel-config",
     "nodeAPIs": Array [
-      "createPagesStatefully",
+      "onCreateBabelConfig",
     ],
     "pluginOptions": Object {
       "plugins": Array [],
@@ -102,16 +102,6 @@ Array [
     "ssrAPIs": Array [],
     "version": "1.0.0",
   },
-  Object {
-    "browserAPIs": Array [],
-    "name": "TEST",
-    "nodeAPIs": Array [],
-    "pluginOptions": Object {
-      "plugins": Array [],
-    },
-    "resolve": "",
-    "ssrAPIs": Array [],
-  },
   Object {
     "browserAPIs": Array [],
     "id": "Plugin default-site-plugin",
@@ -131,10 +121,10 @@ exports[`Load plugins Loads plugins defined with an object but without an option
 Array [
   Object {
     "browserAPIs": Array [],
-    "id": "Plugin load-babel-config",
-    "name": "load-babel-config",
+    "id": "Plugin dev-404-page",
+    "name": "dev-404-page",
     "nodeAPIs": Array [
-      "onCreateBabelConfig",
+      "createPagesStatefully",
     ],
     "pluginOptions": Object {
       "plugins": Array [],
@@ -145,10 +135,10 @@ Array [
   },
   Object {
     "browserAPIs": Array [],
-    "id": "Plugin dev-404-page",
-    "name": "dev-404-page",
+    "id": "Plugin load-babel-config",
+    "name": "load-babel-config",
     "nodeAPIs": Array [
-      "createPagesStatefully",
+      "onCreateBabelConfig",
     ],
     "pluginOptions": Object {
       "plugins": Array [],

diff --git a/packages/gatsby/src/utils/api-node-docs.js b/packages/gatsby/src/utils/api-node-docs.js
@@ -179,7 +179,7 @@ exports.onCreateBabelConfig = true
  * @param {object} $0.plugins A set of preconfigured webpack config plugins
  * @param {object} $0.actions
  * @example
- * exports.modifyWebpackConfig = ({
+ * exports.onCreateWebpackConfig = ({
  *  stage, getConfig, rules, loaders, actions
  * }) => {
  *   actions.setWebpackConfig({
@@ -194,7 +194,7 @@ exports.onCreateBabelConfig = true
  *   });
  * }
  */
-exports.modifyWebpackConfig = true
+exports.onCreateWebpackConfig = true
 
 /**
  * Called at the start of the bootstrap process before any other extension APIs are called.

diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js
@@ -463,7 +463,7 @@ module.exports = async (
   store.dispatch(actions.replaceWebpackConfig(config))
   const getConfig = () => store.getState().webpack
 
-  await apiRunnerNode(`modifyWebpackConfig`, {
+  await apiRunnerNode(`onCreateWebpackConfig`, {
     getConfig,
     stage,
     rules,