Improve the future proof of using the jsx runtime

gatsbyjs · Aug 27, 2020 · 357a858 · 357a858
1 parent 2be05b7
commit 357a858
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 18 deletions.
diff --git a/packages/babel-preset-gatsby/src/index.js b/packages/babel-preset-gatsby/src/index.js
@@ -78,9 +78,11 @@ export default function preset(_, options = {}) {
         {
           useBuiltIns: true,
           pragma:
-            options.runtime === `automatic` ? null : `React.createElement`,
+            options.reactRuntime === `automatic`
+              ? undefined
+              : `React.createElement`,
           development: stage === `develop`,
-          runtime: options.runtime || `classic`,
+          runtime: options.reactRuntime || `classic`,
         },
       ],
     ],

diff --git a/packages/gatsby/src/utils/babel-loader-helpers.js b/packages/gatsby/src/utils/babel-loader-helpers.js
@@ -24,7 +24,7 @@ const getCustomOptions = stage => {
 const prepareOptions = (babel, options = {}, resolve = require.resolve) => {
   const pluginBabelConfig = loadCachedConfig()
 
-  const { stage, runtime } = options
+  const { stage, reactRuntime } = options
 
   // Required plugins/presets
   const requiredPlugins = [
@@ -67,7 +67,7 @@ const prepareOptions = (babel, options = {}, resolve = require.resolve) => {
         resolve(`babel-preset-gatsby`),
         {
           stage,
-          runtime,
+          reactRuntime,
         },
       ],
       {

diff --git a/packages/gatsby/src/utils/babel-loader.js b/packages/gatsby/src/utils/babel-loader.js
@@ -24,11 +24,11 @@ const {
 module.exports = babelLoader.custom(babel => {
   const toReturn = {
     // Passed the loader options.
-    customOptions({ stage = `test`, runtime = `classic`, ...options }) {
+    customOptions({ stage = `test`, reactRuntime = `classic`, ...options }) {
       return {
         custom: {
           stage,
-          runtime,
+          reactRuntime,
         },
         loader: {
           sourceType: `unambiguous`,

diff --git a/packages/gatsby/src/utils/eslint-config.ts b/packages/gatsby/src/utils/eslint-config.ts
@@ -1,7 +1,10 @@
 import { printSchema, GraphQLSchema } from "graphql"
 import { CLIEngine } from "eslint"
 
-export const eslintConfig = (schema: GraphQLSchema): CLIEngine.Options => {
+export const eslintConfig = (
+  schema: GraphQLSchema,
+  usingJsxRuntime: boolean
+): CLIEngine.Options => {
   return {
     useEslintrc: false,
     resolvePluginsRelativeTo: __dirname,
@@ -14,6 +17,12 @@ export const eslintConfig = (schema: GraphQLSchema): CLIEngine.Options => {
       extends: [require.resolve(`eslint-config-react-app`)],
       plugins: [`graphql`],
       rules: {
+        // New versions of react use a special jsx runtime that remove the requirement
+        // for having react in scope for jsx. Once the jsx runtime is backported to all
+        // versions of react we can make this always be `off`.
+        // I would also assume that eslint-config-react-app will switch their flag to `off`
+        // when jsx runtime is stable in all common versions of React.
+        "react/react-in-jsx-scope": usingJsxRuntime ? `off` : `error`, // Conditionally apply for reactRuntime?
         "import/no-webpack-loader-syntax": [0],
         "graphql/template-strings": [
           `error`,

diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts
@@ -9,7 +9,6 @@ import MiniCssExtractPlugin from "mini-css-extract-plugin"
 import OptimizeCssAssetsPlugin from "optimize-css-assets-webpack-plugin"
 import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"
 import isWsl from "is-wsl"
-import semver from "semver"
 import { getBrowsersList } from "./browserslist"
 
 import { GatsbyWebpackStatsExtractor } from "./gatsby-webpack-stats-extractor"
@@ -138,6 +137,20 @@ export const createWebpackUtils = (
 
   const isSSR = stage.includes(`html`)
 
+  let jsxRuntimeExists = false
+
+  try {
+    // React is shipping a new jsx runtime that is to be used with
+    // an option on @babel/preset-react called `runtime: automatic`
+    // Not every version of React has this jsx-runtime yet. Eventually,
+    // it will be backported to older versions of react and this check
+    // will become unnecessary.
+    jsxRuntimeExists = !!require.resolve(`react/jsx-runtime.js`)
+  } catch (e) {
+    // If the require.resolve throws, that means this version of React
+    // does not support the jsx runtime.
+  }
+
   const makeExternalOnly = (original: RuleFactory) => (
     options = {}
   ): RuleSetRule => {
@@ -271,18 +284,10 @@ export const createWebpackUtils = (
     },
 
     js: options => {
-      let runtimeExists = false
-
-      try {
-        runtimeExists = !!require.resolve(`react/jsx-runtime.js`)
-        console.log({ runtimeExists })
-      } catch (e) {
-        // no-op.
-      }
       return {
         options: {
           stage,
-          runtime: runtimeExists ? `automatic` : `classic`,
+          reactRuntime: jsxRuntimeExists ? `automatic` : `classic`,
           // TODO add proper cache keys
           cacheDirectory: path.join(
             program.directory,
@@ -313,7 +318,7 @@ export const createWebpackUtils = (
     },
 
     eslint: (schema: GraphQLSchema) => {
-      const options = eslintConfig(schema)
+      const options = eslintConfig(schema, jsxRuntimeExists)
 
       return {
         options,