From 9a594bdb58e81cfb2959d81b790922c7bdbb37cd Mon Sep 17 00:00:00 2001 From: Zoheb Ahmed <75200954+oneknucklehead@users.noreply.github.com> Date: Fri, 1 Apr 2022 13:29:57 +0530 Subject: [PATCH] chore(babel-preset-gatsby): Updated README to include babel presets (#35069) Co-authored-by: gatsbybot Co-authored-by: Lennart --- .../reference/config-files/gatsby-config.md | 7 +++-- packages/babel-preset-gatsby/README.md | 26 ++++++++++++++++++- 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/docs/docs/reference/config-files/gatsby-config.md b/docs/docs/reference/config-files/gatsby-config.md index aa4cc2f182f67..9193a4ff39526 100644 --- a/docs/docs/reference/config-files/gatsby-config.md +++ b/docs/docs/reference/config-files/gatsby-config.md @@ -370,7 +370,7 @@ See more about [adding develop middleware](/docs/api-proxy/#advanced-proxying). ## jsxRuntime -Setting to "automatic" allows the use of JSX without having to import React. More information can be found on the [Introducing the new JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) blog post. +Setting to `automatic` allows the use of JSX without having to import React. More information can be found on the [Introducing the new JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) blog post. ```javascript:title=gatsby-config.js module.exports = { @@ -380,10 +380,13 @@ module.exports = { ## jsxImportSource -With the new jsxRuntime you can set which package React should use as underlying jsx transformer. For example you can set it to "@emotion/react" so by default @emotion/react is used instead of the react package. +When `jsxRuntime` is set you can choose which package React should use as underlying JSX transformer with `jsxImportSource`. For example you can set it to `@emotion/react` so by default `@emotion/react` is used instead of the `react` package. ```javascript:title=gatsby-config.js module.exports = { + jsxRuntime: "automatic", jsxImportSource: "@emotion/react", } ``` + +**Please note:** For now you'll also need to set this configuration inside `babel-preset-gatsby`, see [its jsxImportSource documentation](https://github.com/gatsbyjs/gatsby/blob/master/packages/babel-preset-gatsby/README.md#reactImportSource). diff --git a/packages/babel-preset-gatsby/README.md b/packages/babel-preset-gatsby/README.md index 67adc55ffb5a2..d89866521aeb4 100644 --- a/packages/babel-preset-gatsby/README.md +++ b/packages/babel-preset-gatsby/README.md @@ -37,4 +37,28 @@ npm install --dev babel-preset-gatsby `{ [string]: number | string }`, defaults to `{ "browsers": ["last 4 versions", "safari >= 7", "ie >= 9"] }` in production and `{ "browsers": ["last 2 versions", "not ie <= 11", "not android 4.4.3"] }` in development when targeting the browser and `{ "node": 6 }` in production and `{ "node": "current" }` in development when targeting Node.js. -Use this option to configure [custom target browsers](https://www.gatsbyjs.com/docs/babel/). +Use this option to configure [custom target browsers](https://www.gatsbyjs.com/docs/how-to/custom-configuration/babel/). + +### `reactRuntime` + +`'classic' | 'automatic'`, defaults to `'classic'`. Allows the use of JSX without having to import React (learn more in the [official blog post](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)). If you only want to set the runtime to `automatic` without a custom JSX transformer, you can use the [`gatsby-config` option](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/#jsxruntime). + +### `reactImportSource` + +`string`, defaults to `null`. Set which package React should use as underlying JSX transformer. For example you can set it to `@emotion/react` so by default `@emotion/react` is used instead of the react package. In order to use `reactImportSource` you must set `reactRuntime` to automatic. + +Example: + +```json +{ + "presets": [ + [ + "babel-preset-gatsby", + { + "reactRuntime": "automatic", + "reactImportSource": "@emotion/react" + } + ] + ] +} +```