Add babel-preset-gatsby (gatsbyjs#8724)

Part of gatsbyjs#6170 

This PR adds `babel-preset-gatsby`, a new package that exposes our babel config as a handy preset that we can re-use in all our internal packages as well as in public packages.

I've added a new option, `targets`, to overwrite the preset-env targets. You can see the changes in the updated Babel documentation.

In gatsbyjs#6170, @DSchau mentioned that we want to replace [`babel-loader-helpers`][] with this preset as well (eventually). I'm not really sure what this helper is doing right now so I decided to not touch it. It seems like the helper is used for users of Gatsby.

I'm thinking now that my changes to the Babel documentation article should not be made until we also upgrade the above helper to use our preset (e.g. the helper adds `babel-plugin-macros` which is not used in our internal preset). Let me know if I should revert my changes to the article.

There are a few other guides that explain a custom babel config. Should I update them as well (test-css-in-js and unit-testing)?

[`babel-loader-helpers`]: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/babel-loader-helpers.js

.babelrc.js

@@ -6,10 +6,8 @@ if (process.env.NODE_ENV !== `test`) {
   ignore.push(`**/__tests__`)
 }
 
-const presetAbsPath = require(`path`).join(__dirname, '.babel-preset.js')
-
 module.exports = {
   sourceMaps: true,
-  presets: [presetAbsPath],
+  presets: ["babel-preset-gatsby-package"],
   ignore,
 }

docs/docs/babel.md

@@ -22,48 +22,25 @@ browsers.
 ## How to use a custom .babelrc file
 
 Gatsby ships with a default .babelrc setup that should work for most sites. If you'd like
-to add custom Babel presets or plugins, we recommend copying our default .babelrc below
-to the root of your site and modifying it per your needs.
+to add custom Babel presets or plugins, you can create your own `.babelrc` at the root of your site, import [`babel-preset-gatsby`](https://github.com/gatsbyjs/gatsby/tree/master/packages/babel-preset-gatsby), and overwrite the `target` option.
+
+```bash
+npm install --save babel-preset-gatsby
+```
 
 ```json5:title=.babelrc
 {
   presets: [
     [
-      "@babel/preset-env",
+      "babel-preset-gatsby",
       {
-        loose: true,
-        modules: false,
-        useBuiltIns: "usage",
-        shippedProposals: true,
         targets: {
           browsers: [">0.25%", "not dead"],
         },
       },
     ],
-    [
-      "@babel/preset-react",
-      {
-        useBuiltIns: true,
-        pragma: "React.createElement",
-      },
-    ],
-  ],
-  plugins: [
-    [
-      "@babel/plugin-proposal-class-properties",
-      {
-        loose: true,
-      },
-    ],
-    "@babel/plugin-syntax-dynamic-import",
-    "babel-plugin-macros",
-    [
-      "@babel/plugin-transform-runtime",
-      {
-        helpers: true,
-        regenerator: true,
-      },
-    ],
   ],
 }
 ```
+
+For more advanced configurations, you can also copy the defaults from [`babel-preset-gatsby`](https://github.com/gatsbyjs/gatsby/tree/master/packages/babel-preset-gatsby) and customize them to suit your needs.

docs/docs/testing-css-in-js.md

@@ -22,12 +22,10 @@ If you followed along with the [Unit testing guide](/docs/unit-testing) you'll h
 
 ```diff:title=jest-preprocess.js
 const babelOptions = {
-  presets: ["@babel/react", "@babel/env"],
-  plugins: [
+  presets: ["babel-preset-gatsby"],
++  plugins: [
 +    "emotion",
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-class-properties",
-  ],
++  ],
 }
 
 module.exports = require("babel-jest").createTransformer(babelOptions)

docs/docs/unit-testing.md

@@ -22,7 +22,7 @@ First you need to install Jest and some more required packages. You need to
 install Babel 7 as it's required by Jest.
 
 ```sh
-npm install --save-dev jest babel-jest react-test-renderer identity-obj-proxy 'babel-core@^7.0.0-0' @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-proposal-optional-chaining
+npm install --save-dev jest babel-jest react-test-renderer identity-obj-proxy 'babel-core@^7.0.0-0' @babel/core babel-preset-gatsby
 ```
 
 Because Gatsby handles its own Babel configuration, you will need to manually
@@ -61,11 +61,7 @@ with a minimal config.
 
 ```js:title=jest-preprocess.js
 const babelOptions = {
-  presets: ["@babel/react", "@babel/env"],
-  plugins: [
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-class-properties",
-  ],
+  presets: ["babel-preset-gatsby"],
 }
 
 module.exports = require("babel-jest").createTransformer(babelOptions)

jest-transformer.js

@@ -1,3 +1,2 @@
-const presetAbsPath = require(`path`).join(__dirname, `.babel-preset.js`)
-const babelPreset = require(presetAbsPath)()
+const babelPreset = require(`babel-preset-gatsby-package`)()
 module.exports = require(`babel-jest`).createTransformer(babelPreset)

package.json

@@ -2,12 +2,6 @@
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/node": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.0.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "8.2.1",

packages/babel-plugin-remove-graphql-queries/.babelrc

@@ -1,5 +1,5 @@
 {
   "presets": [
-    ["../../.babel-preset.js"]
+    ["babel-preset-gatsby-package"]
   ]
 }

packages/babel-preset-gatsby-package/.gitignore

@@ -0,0 +1,2 @@
+/*.js
+yarn.lock

packages/babel-preset-gatsby-package/.npmignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples

packages/babel-preset-gatsby-package/README.md

@@ -0,0 +1,40 @@
+# babel-preset-gatsby-package
+
+This [Babel](https://babeljs.io/) preset is used for our internal packages. If you're looking for the preset a **Gatsby Site** can use, please refer to [babel-preset-gatsby](https://github.com/gatsbyjs/gatsby/blob/master/packages/babel-preset-gatsby/README.md) instead.
+
+## Packages
+
+- [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env)
+- [`@babel/preset-react`](https://babeljs.io/docs/en/babel-preset-react)
+- [`@babel/preset-flow`](https://babeljs.io/docs/en/babel-preset-flow)
+- [`@babel/plugin-proposal-class-properties`](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)
+- [`@babel/plugin-proposal-optional-chaining`](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining)
+- [`@babel/plugin-transform-runtime`](https://babeljs.io/docs/en/babel-plugin-transform-runtime#docsNav)
+
+## Usage
+
+Install `babel-preset-gatsby-package` and add a `.babelrc` file with the following content to the root of your project:
+
+```bash
+npm install --dev babel-preset-gatsby-package
+```
+
+```json
+{
+  "presets": ["babel-preset-gatsby-package"]
+}
+```
+
+## Options
+
+### `browser`
+
+`boolean`, defaults to `false`.
+
+Defines if [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) is configured to target browsers or Node.js environments.
+
+### `debug`
+
+`boolean`, defaults to `false`.
+
+Outputs the targets/plugins used and the version specified in [plugin data version](https://github.com/babel/babel/blob/master/packages/babel-preset-env/data/plugins.json) to `console.log`.

packages/babel-preset-gatsby-package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "babel-preset-gatsby-package",
+  "version": "0.1.0",
+  "author": "Philipp Spiess <[email protected]>",
+  "dependencies": {
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0"
+  },
+  "license": "MIT",
+  "main": "src/index.js"
+}

packages/babel-preset-gatsby-package/src/__tests__/index.js

@@ -0,0 +1,138 @@
+const preset = require(`../`)
+const path = require(`path`)
+
+it(`Specifies proper presets and plugins in Node mode`, () => {
+  const { presets, plugins } = preset()
+
+  expect(presets).toEqual([
+    [
+      expect.stringContaining(path.join(`@babel`, `preset-env`)),
+      {
+        debug: false,
+        loose: true,
+        modules: `commonjs`,
+        shippedProposals: true,
+        targets: {
+          node: `current`,
+        },
+        useBuiltIns: `entry`,
+      },
+    ],
+    [
+      expect.stringContaining(path.join(`@babel`, `preset-react`)),
+      { development: true },
+    ],
+    expect.stringContaining(path.join(`@babel`, `preset-flow`)),
+  ])
+  expect(plugins).toEqual([
+    expect.stringContaining(
+      path.join(`@babel`, `plugin-proposal-class-properties`)
+    ),
+    expect.stringContaining(
+      path.join(`@babel`, `plugin-proposal-optional-chaining`)
+    ),
+    expect.stringContaining(path.join(`@babel`, `plugin-transform-runtime`)),
+  ])
+})
+
+it(`Specifies proper presets and plugins in debug Node mode`, () => {
+  const { presets, plugins } = preset(null, { debug: true })
+
+  expect(presets).toEqual([
+    [
+      expect.stringContaining(path.join(`@babel`, `preset-env`)),
+      {
+        debug: true,
+        loose: true,
+        modules: `commonjs`,
+        shippedProposals: true,
+        targets: {
+          node: `current`,
+        },
+        useBuiltIns: `entry`,
+      },
+    ],
+    [
+      expect.stringContaining(path.join(`@babel`, `preset-react`)),
+      { development: true },
+    ],
+    expect.stringContaining(path.join(`@babel`, `preset-flow`)),
+  ])
+  expect(plugins).toEqual([
+    expect.stringContaining(
+      path.join(`@babel`, `plugin-proposal-class-properties`)
+    ),
+    expect.stringContaining(
+      path.join(`@babel`, `plugin-proposal-optional-chaining`)
+    ),
+    expect.stringContaining(path.join(`@babel`, `plugin-transform-runtime`)),
+  ])
+})
+
+it(`Specifies proper presets and plugins in browser mode`, () => {
+  const { presets, plugins } = preset(null, { browser: true })
+
+  expect(presets).toEqual([
+    [
+      expect.stringContaining(path.join(`@babel`, `preset-env`)),
+      {
+        debug: false,
+        loose: true,
+        modules: `commonjs`,
+        shippedProposals: true,
+        targets: {
+          browsers: [`last 2 versions`, `not ie <= 11`, `not android 4.4.3`],
+        },
+        useBuiltIns: false,
+      },
+    ],
+    [
+      expect.stringContaining(path.join(`@babel`, `preset-react`)),
+      { development: true },
+    ],
+    expect.stringContaining(path.join(`@babel`, `preset-flow`)),
+  ])
+  expect(plugins).toEqual([
+    expect.stringContaining(
+      path.join(`@babel`, `plugin-proposal-class-properties`)
+    ),
+    expect.stringContaining(
+      path.join(`@babel`, `plugin-proposal-optional-chaining`)
+    ),
+    expect.stringContaining(path.join(`@babel`, `plugin-transform-runtime`)),
+  ])
+})
+
+it(`Specifies proper presets and plugins in debug browser mode`, () => {
+  const { presets, plugins } = preset(null, { browser: true, debug: true })
+
+  expect(presets).toEqual([
+    [
+      expect.stringContaining(path.join(`@babel`, `preset-env`)),
+      {
+        debug: true,
+        loose: true,
+        modules: `commonjs`,
+        shippedProposals: true,
+        targets: {
+          browsers: [`last 2 versions`, `not ie <= 11`, `not android 4.4.3`],
+        },
+        useBuiltIns: false,
+      },
+    ],
+    [
+      expect.stringContaining(path.join(`@babel`, `preset-react`)),
+      { development: true },
+    ],
+    expect.stringContaining(path.join(`@babel`, `preset-flow`)),
+  ])
+  expect(plugins).toEqual([
+    expect.stringContaining(
+      path.join(`@babel`, `plugin-proposal-class-properties`)
+    ),
+    expect.stringContaining(
+      path.join(`@babel`, `plugin-proposal-optional-chaining`)
+    ),
+    expect.stringContaining(path.join(`@babel`, `plugin-transform-runtime`)),
+  ])
+})