refactor: migrate to new jsx runtime

.eslintrc.js

@@ -30,6 +30,8 @@ module.exports = {
   rules: {
     'no-console': [0],
     'react/prop-types': [0],
+    'react/jsx-uses-react': 'off', // Not needed with new JSX transform
+    'react/react-in-jsx-scope': 'off', // Not needed with new JSX transform
     'import/no-named-as-default': 0,
     'import/order': [
       'error',
@@ -89,6 +91,8 @@ module.exports = {
       },
       rules: {
         'no-duplicate-imports': [0], // handled by @typescript-eslint
+        'react/jsx-uses-react': 'off', // Not needed with new JSX transform
+        'react/react-in-jsx-scope': 'off', // Not needed with new JSX transform
         '@typescript-eslint/ban-types': [0], // TODO enable in future
         '@typescript-eslint/no-non-null-assertion': [0],
         '@typescript-eslint/consistent-type-imports': 'error',

babel.config.js

@@ -48,14 +48,14 @@ const svgo = {
 
 function presets() {
   return [
-    '@babel/preset-react',
-    ...(!isESM ? [['@babel/preset-env', {}]] : []),
     [
-      '@emotion/babel-preset-css-prop',
+      '@babel/preset-react',
       {
-        autoLabel: 'always',
+        runtime: 'automatic',
+        importSource: '@emotion/react',
       },
     ],
+    ...(!isESM ? [['@babel/preset-env', {}]] : []),
     '@babel/preset-typescript',
   ];
 }
@@ -64,6 +64,7 @@ function plugins() {
   if (isESM) {
     return [
       ...defaultPlugins,
+      '@emotion/babel-plugin',
       [
         'transform-define',
         {
@@ -89,6 +90,7 @@ function plugins() {
   if (isTest) {
     return [
       ...defaultPlugins,
+      '@emotion/babel-plugin',
       [
         'inline-react-svg',
         {
@@ -99,13 +101,27 @@ function plugins() {
   }
 
   if (!isProduction) {
-    return [...defaultPlugins];
+    return [...defaultPlugins, '@emotion/babel-plugin'];
   }
 
-  return defaultPlugins;
+  return [...defaultPlugins, '@emotion/babel-plugin'];
 }
 
 module.exports = {
   presets: presets(),
   plugins: plugins(),
+  overrides: [
+    {
+      test: /slate\.spec\.js$/,
+      presets: [
+        [
+          '@babel/preset-react',
+          {
+            runtime: 'classic',
+            pragma: 'h',
+          },
+        ],
+      ],
+    },
+  ],
 };

package.json

@@ -27,7 +27,7 @@
     "mock:server:start": "node -e 'require(\"./cypress/utils/mock-server\").start()'",
     "mock:server:stop": "node -e 'require(\"./cypress/utils/mock-server\").stop()'",
     "lint": "run-p -c --aggregate-output \"lint:*\"",
-    "lint-quiet": "run-p -c --aggregate-output \"lint:* --quiet\"",
+    "lint-quiet": "run-p -c --aggregate-output \"lint:*\"",
     "lint:css": "stylelint --ignore-path .gitignore \"packages/**/*.{css,js,jsx,ts,tsx}\"",
     "lint:js": "eslint --color --ignore-path .gitignore \"{{packages,scripts}/**/,}*.{js,jsx,ts,tsx}\"",
     "lint:format": "prettier \"{{packages,scripts}/**/,}*.{js,jsx,ts,tsx,css}\" --list-different",
@@ -59,6 +59,7 @@
     "@babel/preset-typescript": "^7.10.4",
     "@commitlint/cli": "^16.0.0",
     "@commitlint/config-conventional": "^16.0.0",
+    "@emotion/babel-plugin": "^11.13.5",
     "@emotion/eslint-plugin": "^11.0.0",
     "@emotion/jest": "^11.11.0",
     "@octokit/rest": "^16.28.7",
@@ -158,7 +159,6 @@
   },
   "private": true,
   "dependencies": {
-    "@emotion/babel-preset-css-prop": "^11.11.0",
     "ajv": "^8.17.1",
     "ajv-errors": "^3.0.0",
     "ajv-keywords": "^5.1.0",

packages/decap-cms-backend-aws-cognito-github-proxy/src/AuthenticationPage.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { PkceAuthenticator } from 'decap-cms-lib-auth';
@@ -8,7 +8,7 @@ const LoginButtonIcon = styled(Icon)`
   margin-right: 18px;
 `;
 
-export default class GenericPKCEAuthenticationPage extends React.Component {
+export default class GenericPKCEAuthenticationPage extends Component {
   static propTypes = {
     inProgress: PropTypes.bool,
     config: PropTypes.object.isRequired,
@@ -72,9 +72,9 @@ export default class GenericPKCEAuthenticationPage extends React.Component {
         logo={config.logo}
         siteUrl={config.site_url}
         renderButtonContent={() => (
-          <React.Fragment>
+          <Fragment>
             <LoginButtonIcon type="link" /> {inProgress ? t('auth.loggingIn') : t('auth.login')}
-          </React.Fragment>
+          </Fragment>
         )}
         t={t}
       />

packages/decap-cms-backend-aws-cognito-github-proxy/src/implementation.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { GitHubBackend } from 'decap-cms-backend-github';
 import { PKCEAuthenticationPage } from 'decap-cms-ui-auth';
 

packages/decap-cms-backend-azure/src/AuthenticationPage.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { ImplicitAuthenticator } from 'decap-cms-lib-auth';
@@ -8,7 +8,7 @@ const LoginButtonIcon = styled(Icon)`
   margin-right: 18px;
 `;
 
-export default class AzureAuthenticationPage extends React.Component {
+export default class AzureAuthenticationPage extends Component {
   static propTypes = {
     onLogin: PropTypes.func.isRequired,
     inProgress: PropTypes.bool,
@@ -76,10 +76,10 @@ export default class AzureAuthenticationPage extends React.Component {
         logoUrl={config.logo_url} // Deprecated, replaced by `logo.src`
         logo={config.logo}
         renderButtonContent={() => (
-          <React.Fragment>
+          <Fragment>
             <LoginButtonIcon type="azure" />
             {inProgress ? t('auth.loggingIn') : t('auth.loginWithAzure')}
-          </React.Fragment>
+          </Fragment>
         )}
         t={t}
       />

packages/decap-cms-backend-bitbucket/src/AuthenticationPage.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { NetlifyAuthenticator, ImplicitAuthenticator } from 'decap-cms-lib-auth';
@@ -8,7 +8,7 @@ const LoginButtonIcon = styled(Icon)`
   margin-right: 18px;
 `;
 
-export default class BitbucketAuthenticationPage extends React.Component {
+export default class BitbucketAuthenticationPage extends Component {
   static propTypes = {
     onLogin: PropTypes.func.isRequired,
     inProgress: PropTypes.bool,
@@ -91,10 +91,10 @@ export default class BitbucketAuthenticationPage extends React.Component {
         logo={config.logo}
         siteUrl={config.site_url}
         renderButtonContent={() => (
-          <React.Fragment>
+          <Fragment>
             <LoginButtonIcon type="bitbucket" />
             {inProgress ? t('auth.loggingIn') : t('auth.loginWithBitbucket')}
-          </React.Fragment>
+          </Fragment>
         )}
         t={t}
       />

packages/decap-cms-backend-bitbucket/src/git-lfs-client.ts

@@ -1,4 +1,4 @@
-import minimatch from 'minimatch';
+import { minimatch } from 'minimatch';
 import { unsentRequest } from 'decap-cms-lib-util';
 
 import type { ApiRequest, PointerFile } from 'decap-cms-lib-util';

packages/decap-cms-backend-git-gateway/src/netlify-lfs-client.ts

@@ -1,7 +1,7 @@
 import { flow, fromPairs, map } from 'lodash/fp';
 import isPlainObject from 'lodash/isPlainObject';
 import isEmpty from 'lodash/isEmpty';
-import minimatch from 'minimatch';
+import { minimatch } from 'minimatch';
 import { unsentRequest } from 'decap-cms-lib-util';
 
 import type { ApiRequest, PointerFile } from 'decap-cms-lib-util';

packages/decap-cms-backend-gitea/src/AuthenticationPage.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { PkceAuthenticator } from 'decap-cms-lib-auth';
@@ -8,7 +8,7 @@ const LoginButtonIcon = styled(Icon)`
   margin-right: 18px;
 `;
 
-export default class GiteaAuthenticationPage extends React.Component {
+export default class GiteaAuthenticationPage extends Component {
   static propTypes = {
     inProgress: PropTypes.bool,
     config: PropTypes.object.isRequired,
@@ -68,10 +68,10 @@ export default class GiteaAuthenticationPage extends React.Component {
         logo={config.logo}
         siteUrl={config.site_url}
         renderButtonContent={() => (
-          <React.Fragment>
+          <Fragment>
             <LoginButtonIcon type="gitea" />{' '}
             {inProgress ? t('auth.loggingIn') : t('auth.loginWithGitea')}
-          </React.Fragment>
+          </Fragment>
         )}
         t={t}
       />

packages/decap-cms-backend-github/src/AuthenticationPage.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { NetlifyAuthenticator } from 'decap-cms-lib-auth';
@@ -21,7 +21,7 @@ const ForkButtonsContainer = styled.div`
   align-items: center;
 `;
 
-export default class GitHubAuthenticationPage extends React.Component {
+export default class GitHubAuthenticationPage extends Component {
   static propTypes = {
     onLogin: PropTypes.func.isRequired,
     inProgress: PropTypes.bool,
@@ -107,10 +107,10 @@ export default class GitHubAuthenticationPage extends React.Component {
     return inProgress || this.state.findingFork ? (
       t('auth.loggingIn')
     ) : (
-      <React.Fragment>
+      <Fragment>
         <LoginButtonIcon type="github" />
         {t('auth.loginWithGitHub')}
-      </React.Fragment>
+      </Fragment>
     );
   };
 

packages/decap-cms-backend-github/src/implementation.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import semaphore from 'semaphore';
 import trimStart from 'lodash/trimStart';
 import { stripIndent } from 'common-tags';

packages/decap-cms-backend-gitlab/src/AuthenticationPage.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import {
@@ -39,7 +39,7 @@ const clientSideAuthenticators = {
     }),
 };
 
-export default class GitLabAuthenticationPage extends React.Component {
+export default class GitLabAuthenticationPage extends Component {
   static propTypes = {
     onLogin: PropTypes.func.isRequired,
     inProgress: PropTypes.bool,
@@ -114,10 +114,10 @@ export default class GitLabAuthenticationPage extends React.Component {
         logo={config.logo}
         siteUrl={config.site_url}
         renderButtonContent={() => (
-          <React.Fragment>
+          <Fragment>
             <LoginButtonIcon type="gitlab" />{' '}
             {inProgress ? t('auth.loggingIn') : t('auth.loginWithGitLab')}
-          </React.Fragment>
+          </Fragment>
         )}
         t={t}
       />