feat(react): add support for new jsx transform

jaysoo · jaysoo · commit 1a501e0ed418 · 2021-03-30T13:23:42.000-04:00
diff --git a/package.json b/package.json
@@ -46,13 +46,13 @@
     "@angular/router": "~11.2.0",
     "@angular/service-worker": "~11.2.0",
     "@angular/upgrade": "~11.2.0",
-    "@babel/core": "7.9.6",
-    "@babel/plugin-proposal-class-properties": "7.8.3",
-    "@babel/plugin-proposal-decorators": "7.8.3",
-    "@babel/plugin-transform-regenerator": "7.8.7",
-    "@babel/preset-env": "7.9.6",
-    "@babel/preset-react": "7.9.4",
-    "@babel/preset-typescript": "7.10.4",
+    "@babel/core": "7.12.13",
+    "@babel/plugin-proposal-class-properties": "7.12.13",
+    "@babel/plugin-proposal-decorators": "7.12.13",
+    "@babel/plugin-transform-regenerator": "7.12.13",
+    "@babel/preset-env": "7.12.13",
+    "@babel/preset-react": "7.12.13",
+    "@babel/preset-typescript": "7.12.13",
     "@cypress/webpack-preprocessor": "~4.1.2",
     "@nestjs/common": "^7.0.0",
     "@nestjs/core": "^7.0.0",
@@ -157,7 +157,7 @@
     "eslint-plugin-cypress": "^2.10.3",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-react": "7.21.5",
+    "eslint-plugin-react": "^7.23.1",
     "eslint-plugin-react-hooks": "4.2.0",
     "express": "4.17.1",
     "file-loader": "4.2.0",
diff --git a/packages/eslint-plugin-nx/src/configs/react-jsx.ts b/packages/eslint-plugin-nx/src/configs/react-jsx.ts
@@ -28,7 +28,7 @@ export default {
     'react/no-direct-mutation-state': 'warn',
     'react/no-is-mounted': 'warn',
     'react/no-typos': 'error',
-    'react/react-in-jsx-scope': 'error',
+    'react/react-in-jsx-scope': 'off',
     'react/require-render-return': 'error',
     'react/style-prop-object': 'warn',
     'react/jsx-no-useless-fragment': 'warn',
diff --git a/packages/react/babel.ts b/packages/react/babel.ts
@@ -2,12 +2,44 @@
  * Babel preset to provide React support for Nx.
  */
 
-module.exports = function (api: any, options: {}) {
+interface ReactBabelOptions {
+  runtime?: string;
+  importSource?: string;
+}
+
+module.exports = function (api: any, options: ReactBabelOptions) {
   api.assertVersion(7);
+  const env = api.env();
+
   return {
     presets: [
       '@nrwl/web/babel',
-      [require.resolve('@babel/preset-react'), { useBuiltIns: true }],
+      [
+        require.resolve('@babel/preset-react'),
+        getReactPresetOptions({
+          presetOptions: options,
+          env,
+        }),
+      ],
     ],
   };
 };
+
+function getReactPresetOptions({ presetOptions, env }) {
+  const reactPresetOptions: Record<string, string | boolean> = {
+    runtime: presetOptions.runtime ?? 'automatic',
+    development: env !== 'production',
+  };
+
+  // JSX spread is transformed into object spread in `@babel/plugin-transform-react-jsx`
+  // `useBuiltIns` will be removed in Babel 8.
+  if (presetOptions.runtime === 'automatic') {
+    reactPresetOptions.useBuiltIns = true;
+  }
+
+  if (presetOptions.importSource) {
+    reactPresetOptions.importSource = presetOptions.importSource;
+  }
+
+  return reactPresetOptions;
+}
diff --git a/packages/react/migrations.json b/packages/react/migrations.json
@@ -74,6 +74,12 @@
       "version": "11.2.0-beta.0",
       "description": "Move react redux typings from dependencies to devDependencies in package.json",
       "factory": "./src/migrations/update-11-2-0/move-react-redux-types-package-11-2-0"
+    },
+    "use-react-jsx-11.6.0": {
+      "cli": "nx",
+      "version": "11.6.0-beta.0",
+      "description": "Migrate tsconfig.json to allow new jsx transform to be used. Removes the need for `import React from 'react'`",
+      "factory": "./src/migrations/update-11-6-0/use-react-jsx-in-tsconfig"
     }
   },
   "packageJsonUpdates": {
@@ -416,6 +422,79 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "11.6.0": {
+      "version": "11.6.0-beta.0",
+      "packages": {
+        "react": {
+          "version": "17.0.2",
+          "alwaysAddToPackageJson": false
+        },
+        "react-dom": {
+          "version": "17.0.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/react": {
+          "version": "17.0.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/react-dom": {
+          "version": "17.0.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/styled-components": {
+          "version": "5.1.9",
+          "alwaysAddToPackageJson": false
+        },
+        "react-is": {
+          "version": "17.0.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/react-is": {
+          "version": "17.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@emotion/styled": {
+          "version": "11.1.5",
+          "alwaysAddToPackageJson": false
+        },
+        "@emotion/react": {
+          "version": "11.1.5",
+          "alwaysAddToPackageJson": false
+        },
+        "@emotion/babel-preset-css-prop": {
+          "version": "11.2.0",
+          "alwaysAddToPackageJson": false
+        },
+        "styled-jsx": {
+          "version": "3.4.4",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/react-router-dom": {
+          "version": "5.1.7",
+          "alwaysAddToPackageJson": false
+        },
+        "@testing-library/react": {
+          "version": "11.2.5",
+          "alwaysAddToPackageJson": false
+        },
+        "@reduxjs/toolkit": {
+          "version": "1.5.0",
+          "alwaysAddToPackageJson": false
+        },
+        "react-redux": {
+          "version": "7.2.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/react-redux": {
+          "version": "7.1.16",
+          "alwaysAddToPackageJson": false
+        },
+        "eslint-plugin-react": {
+          "version": "7.23.1",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -28,8 +28,8 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@babel/core": "7.9.6",
-    "@babel/preset-react": "7.9.4",
+    "@babel/core": "7.12.13",
+    "@babel/preset-react": "7.12.13",
     "@nrwl/cypress": "*",
     "@nrwl/devkit": "*",
     "@nrwl/jest": "*",
@@ -38,10 +38,10 @@
     "@nrwl/web": "*",
     "@nrwl/workspace": "*",
     "@svgr/webpack": "^5.4.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "url-loader": "^3.0.0"
   }
 }
diff --git a/packages/react/src/generators/application/files/common/.babelrc__tmpl__ b/packages/react/src/generators/application/files/common/.babelrc__tmpl__
@@ -1,7 +1,12 @@
 {
   "presets": [
-    "@nrwl/react/babel"
-    <% if (style === '@emotion/styled') { %>,"@emotion/babel-preset-css-prop"<% } %>
+    [
+      "@nrwl/react/babel", {
+        "runtime": "automatic"
+        <% if (style === '@emotion/styled') { %>,"importSource": "@emotion/react" }<% } %>
+      }
+    ]
+    <% if (style === '@emotion/styled') { %>,"@emotion/babel-plugin"<% } %>
   ],
   "plugins": [
     <% if (style === 'styled-components') { %>["styled-components", { "pure": true, "ssr": true }]<% } %>
diff --git a/packages/react/src/generators/application/files/common/src/app/__fileName__.spec.tsx__tmpl__ b/packages/react/src/generators/application/files/common/src/app/__fileName__.spec.tsx__tmpl__
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 <% if (routing) { %>
 import { BrowserRouter } from 'react-router-dom';
diff --git a/packages/react/src/generators/application/files/common/src/main.tsx__tmpl__ b/packages/react/src/generators/application/files/common/src/main.tsx__tmpl__
@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 <% if (routing) { %>
 import { BrowserRouter } from 'react-router-dom';
 <% } %>
diff --git a/packages/react/src/generators/application/files/common/tsconfig.json__tmpl__ b/packages/react/src/generators/application/files/common/tsconfig.json__tmpl__
@@ -1,7 +1,7 @@
 {
   "extends": "<%= offsetFromRoot %>tsconfig.base.json",
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "allowJs": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true
diff --git a/packages/react/src/generators/application/files/css-module/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/css-module/src/app/__fileName__.tsx__tmpl__
@@ -1,7 +1,5 @@
 <% if (classComponent) { %>
-import React, { Component } from 'react';
-<% } else { %>
-import React from 'react';
+import { Component } from 'react';
 <% } %>
 import styles from './<%= fileName %>.module.<%= style %>';
 
diff --git a/packages/react/src/generators/application/files/global-css/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/global-css/src/app/__fileName__.tsx__tmpl__
@@ -1,7 +1,5 @@
 <% if (classComponent) { %>
-import React, { Component } from 'react';
-<% } else { %>
-import React from 'react';
+import { Component } from 'react';
 <% } %>
 import './<%= fileName %>.<%= style %>';
 
diff --git a/packages/react/src/generators/application/files/none/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/none/src/app/__fileName__.tsx__tmpl__
@@ -1,7 +1,5 @@
 <% if (classComponent) { %>
-import React, { Component } from 'react';
-<% } else { %>
-import React from 'react';
+import  { Component } from 'react';
 <% } %>
 
 import { ReactComponent as Logo } from './logo.svg';
diff --git a/packages/react/src/generators/application/files/styled-jsx/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/styled-jsx/src/app/__fileName__.tsx__tmpl__
@@ -1,8 +1,5 @@
-
 <% if (classComponent) { %>
-import React, { Component } from 'react';
-<% } else { %>
-import React from 'react';
+import { Component } from 'react';
 <% } %>
 
 import { ReactComponent as Logo } from './logo.svg';
diff --git a/packages/react/src/generators/application/files/styled-module/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/styled-module/src/app/__fileName__.tsx__tmpl__
@@ -1,7 +1,5 @@
 <% if (classComponent) { %>
-import React, { Component } from 'react';
-<% } else { %>
-import React from 'react';
+import { Component } from 'react';
 <% } %>
 
 import styled from '<%= styledModule %>';
diff --git a/packages/react/src/generators/component/component.spec.ts b/packages/react/src/generators/component/component.spec.ts
@@ -1,5 +1,5 @@
 import { createApp, createLib } from '../../utils/testing-generators';
-import { readJson, Tree } from '@nrwl/devkit';
+import { logger, readJson, Tree } from '@nrwl/devkit';
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
 import { componentGenerator } from './component';
 
@@ -12,6 +12,12 @@ describe('component', () => {
     appTree = createTreeWithEmptyWorkspace();
     await createApp(appTree, 'my-app');
     await createLib(appTree, projectName);
+    jest.spyOn(logger, 'warn').mockImplementation(() => {});
+    jest.spyOn(logger, 'debug').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
   });
 
   it('should generate files', async () => {
diff --git a/packages/react/src/generators/component/files/__fileName__.spec.tsx__tmpl__ b/packages/react/src/generators/component/files/__fileName__.spec.tsx__tmpl__
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import <%= className %> from './<%= fileName %>';
diff --git a/packages/react/src/generators/library/files/lib/.babelrc__tmpl__ b/packages/react/src/generators/library/files/lib/.babelrc__tmpl__
@@ -1,7 +1,12 @@
 {
   "presets": [
-    "@nrwl/react/babel"
-    <% if (style === '@emotion/styled') { %>,"@emotion/babel-preset-css-prop"<% } %>
+    [
+      "@nrwl/react/babel", {
+        "runtime": "automatic"
+        <% if (style === '@emotion/styled') { %>,"importSource": "@emotion/react" }<% } %>
+      }
+    ]
+    <% if (style === '@emotion/styled') { %>,"@emotion/babel-plugin"<% } %>
   ],
   "plugins": [
     <% if (style === 'styled-components') { %>["styled-components", { "pure": true, "ssr": true }]<% } %>
diff --git a/packages/react/src/generators/library/files/lib/tsconfig.json__tmpl__ b/packages/react/src/generators/library/files/lib/tsconfig.json__tmpl__
@@ -1,7 +1,7 @@
 {
   "extends": "<%= offsetFromRoot %>tsconfig.base.json",
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "allowJs": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true
diff --git a/packages/react/src/generators/storybook-configuration/configuration.spec.ts b/packages/react/src/generators/storybook-configuration/configuration.spec.ts
@@ -3,6 +3,7 @@ import { Tree } from '@nrwl/devkit';
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
 import libraryGenerator from '../library/library';
 import { Linter } from '@nrwl/linter';
+import { logger } from '@nrwl/devkit';
 import applicationGenerator from '../application/application';
 import componentGenerator from '../component/component';
 import storybookConfigurationGenerator from './configuration';
@@ -17,6 +18,13 @@ describe('react:storybook-configuration', () => {
         '@storybook/react': '^6.0.21',
       },
     });
+
+    jest.spyOn(logger, 'warn').mockImplementation(() => {});
+    jest.spyOn(logger, 'debug').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
   });
 
   it('should configure everything at once', async () => {
diff --git a/packages/react/src/generators/storybook-migrate-defaults-5-to-6/migrate-defaults-5-to-6.spec.ts b/packages/react/src/generators/storybook-migrate-defaults-5-to-6/migrate-defaults-5-to-6.spec.ts
@@ -1,6 +1,6 @@
 import { createTestUILib } from '../stories/stories-lib.spec';
 import { storybookVersion } from '@nrwl/storybook';
-import { readJson, Tree, updateJson } from '@nrwl/devkit';
+import { logger, readJson, Tree, updateJson } from '@nrwl/devkit';
 import storybookConfigurationGenerator from '../storybook-configuration/configuration';
 import { storybookMigration5to6Generator } from '@nrwl/react';
 
@@ -29,6 +29,13 @@ describe('migrate-defaults-5-to-6 schematic', () => {
       generateCypressSpecs: false,
       generateStories: false,
     });
+
+    jest.spyOn(logger, 'warn').mockImplementation(() => {});
+    jest.spyOn(logger, 'debug').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
   });
 
   it('should update the correct dependencies', async () => {
diff --git a/packages/react/src/migrations/update-11-6-0/use-react-jsx-in-tsconfig.spec.ts b/packages/react/src/migrations/update-11-6-0/use-react-jsx-in-tsconfig.spec.ts
diff --git a/packages/react/src/migrations/update-11-6-0/use-react-jsx-in-tsconfig.ts b/packages/react/src/migrations/update-11-6-0/use-react-jsx-in-tsconfig.ts
diff --git a/packages/react/src/utils/styled.ts b/packages/react/src/utils/styled.ts
diff --git a/packages/react/src/utils/versions.ts b/packages/react/src/utils/versions.ts
diff --git a/packages/web/package.json b/packages/web/package.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import React from 'react';`
`2`	`1`	`import { render } from '@testing-library/react';`
`3`	`2`	`<% if (routing) { %>`
`4`	`3`	`import { BrowserRouter } from 'react-router-dom';`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"extends": "<%= offsetFromRoot %>tsconfig.base.json",`
`3`	`3`	`"compilerOptions": {`
`4`		`- "jsx": "react",`
	`4`	`+ "jsx": "react-jsx",`
`5`	`5`	`"allowJs": true,`
`6`	`6`	`"esModuleInterop": true,`
`7`	`7`	`"allowSyntheticDefaultImports": true`