meta: add support for `Fragment` short syntax (#4953)

babel.config.js

@@ -21,7 +21,7 @@ module.exports = (api) => {
       }],
     ],
     plugins: [
-      ['@babel/plugin-transform-react-jsx', { pragma: 'h' }],
+      ['@babel/plugin-transform-react-jsx', { pragma: 'h', pragmaFrag: 'Fragment' }],
       process.env.NODE_ENV !== 'dev' && 'babel-plugin-inline-package-json',
     ].filter(Boolean),
   }

bin/build-lib.js

@@ -114,7 +114,14 @@ async function buildLib () {
       },
     }]
     const isTSX = file.endsWith('.tsx')
-    if (isTSX || file.endsWith('.ts')) { plugins.push(['@babel/plugin-transform-typescript', { disallowAmbiguousJSXLike: true, isTSX, jsxPragma: 'h' }]) }
+    if (isTSX || file.endsWith('.ts')) {
+      plugins.push(['@babel/plugin-transform-typescript', {
+        disallowAmbiguousJSXLike: true,
+        isTSX,
+        jsxPragma: 'h',
+        jsxPragmaFrag: 'Fragment',
+      }])
+    }
 
     const { code, map } = await babel.transformFileAsync(file, {
       sourceMaps: true,

packages/@uppy/dashboard/src/components/AddFiles.jsx

@@ -225,12 +225,12 @@ class AddFiles extends Component {
     const lastTwoAcquirers = acquirersWithoutLastTwo.splice(acquirers.length - 2, acquirers.length)
 
     return (
-      <Fragment>
+      <>
         {acquirersWithoutLastTwo.map((acquirer) => this.renderAcquirer(acquirer))}
         <span role="presentation" style={{ 'white-space': 'nowrap' }}>
           {lastTwoAcquirers.map((acquirer) => this.renderAcquirer(acquirer))}
         </span>
-      </Fragment>
+      </>
     )
   }
 
@@ -258,7 +258,7 @@ class AddFiles extends Component {
     const renderList = (l) => l.map(({ key, elements }) => <Fragment key={key}>{elements}</Fragment>)
 
     return (
-      <Fragment>
+      <>
         {this.renderDropPasteBrowseTagline(list.length)}
 
         <div className="uppy-Dashboard-AddFiles-list" role="tablist">
@@ -268,7 +268,7 @@ class AddFiles extends Component {
             {renderList(lastTwo)}
           </span>
         </div>
-      </Fragment>
+      </>
     )
   }
 

packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.jsx

@@ -48,11 +48,11 @@ const renderAuthor = (props) => {
         {truncateString(author.name, 13)}
       </a>
       {providerName ? (
-        <Fragment>
+        <>
           {` ${dot} `}
           {providerName}
           {` ${dot} `}
-        </Fragment>
+        </>
       ) : null}
     </div>
   )