[core] Try out new JSX transform where available (#22455)

azure-pipelines.yml

@@ -6,6 +6,15 @@ trigger:
       - l10n
       - dependabot/*
 
+schedules:
+  - cron: '0 0 * * *'
+    displayName: Run with React canary
+    branches:
+      include:
+        - master
+        - next
+    always: true
+
 # https://developercommunity.visualstudio.com/comments/949241/view.html
 pr:
   branches:
@@ -17,6 +26,17 @@ pool:
 
 variables:
   DOCS_NEXT_CACHE_FOLDER: $(Build.SourcesDirectory)/docs/.next/cache
+  # azure-pipelines don't support variables per trigger
+  # We assume that the only scheduled job we have is for react@next
+  ${{ if eq( variables['Build.Reason'], 'Schedule' ) }}:
+    # npm dist tag for `react` (https://docs.npmjs.com/cli/dist-tag)
+    REACT_DIST_TAG: 'next'
+    # Path for artifacts uploaded to S3 that can be used as a permalink
+    S3_ARTIFACTS_PATH_PERMA: 'artifacts/$(Build.SourceBranchName)-react-$(REACT_DIST_TAG)/$(Build.SourceVersion)/'
+  ${{ if ne( variables['Build.Reason'], 'Schedule' ) }}:
+    REACT_DIST_TAG: 'stable'
+    # Preserve this path structure since it is locked in various tooling
+    S3_ARTIFACTS_PATH_PERMA: 'artifacts/$(Build.SourceBranchName)/$(Build.SourceVersion)/'
 
 steps:
   - task: NodeTool@0
@@ -25,6 +45,7 @@ steps:
     displayName: 'Install Node.js'
 
   - script: |
+      node scripts/use-react-dist-tag.js $(REACT_DIST_TAG)
       yarn install
     displayName: 'install dependencies'
 
@@ -44,7 +65,7 @@ steps:
       regionName: 'eu-central-1'
       bucketName: 'eps1lon-material-ui'
       globExpressions: '*.tgz'
-      targetFolder: 'artifacts/$(Build.SourceBranchName)/$(Build.SourceVersion)'
+      targetFolder: $(S3_ARTIFACTS_PATH_PERMA)
       filesAcl: 'public-read'
     displayName: 'Upload distributables to S3'
     condition: and(succeeded(), ne(variables['Build.Reason'], 'PullRequest'))
@@ -71,7 +92,7 @@ steps:
       yarn docs:build | tee scripts/sizeSnapshot/build/docs.next
     displayName: 'build docs for size snapshot'
     env:
-      NODE_OPTIONS: "--max_old_space_size=4096"
+      NODE_OPTIONS: '--max_old_space_size=4096'
 
   - script: |
       yarn size:snapshot
@@ -92,15 +113,15 @@ steps:
       bucketName: 'eps1lon-material-ui'
       sourceFolder: '$(System.DefaultWorkingDirectory)'
       globExpressions: 'size-snapshot.json'
-      targetFolder: 'artifacts/$(Build.SourceBranchName)/$(Build.SourceVersion)/'
+      targetFolder: $(S3_ARTIFACTS_PATH_PERMA)
       filesAcl: 'public-read'
       contentType: application/json
       logRequest: true
       logResponse: true
 
   - task: AmazonWebServices.aws-vsts-tools.S3Upload.S3Upload@1
     displayName: 'symlink size-snapshot to latest'
-    condition: and(succeeded(), ne(variables['Build.Reason'], 'PullRequest'))
+    condition: and(succeeded(), ne(variables['Build.Reason'], 'PullRequest'), ne(variables['Build.Reason'], 'Schedule'))
     inputs:
       awsCredentials: 's3 artifacts'
       regionName: 'eu-central-1'

packages/material-ui/scripts/rollup.config.js

@@ -30,6 +30,7 @@ const commonjsOptions = {
       'oneOfType',
       'element',
     ],
+    '../../node_modules/react/jsx-runtime.js': ['jsx', 'jsxs'],
     '../../node_modules/react-is/index.js': [
       'ForwardRef',
       'isFragment',

scripts/react-next.diff

@@ -1,3 +1,25 @@
+diff --git a/babel.config.js b/babel.config.js
+index 162d469804..f4b17916a4 100644
+--- a/babel.config.js
++++ b/babel.config.js
+@@ -45,7 +45,16 @@ const productionPlugins = [
+ ];
+
+ module.exports = {
+-  presets: defaultPresets.concat(['@babel/preset-react', '@babel/preset-typescript']),
++  presets: defaultPresets.concat([
++    [
++      '@babel/preset-react',
++      {
++        // default in Babel 8
++        runtime: 'automatic',
++      },
++    ],
++    '@babel/preset-typescript',
++  ]),
+   plugins: [
+     [
+       'babel-plugin-macros',
 diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
 index 8addf692fb..86ea6e6dfa 100644
 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -65,10 +87,10 @@ index 197b2f77a3..f1ead08079 100644
    });
  });
 diff --git a/packages/material-ui-styles/src/useThemeVariants/useThemeVariants.test.js b/packages/material-ui-styles/src/useThemeVariants/useThemeVariants.test.js
-index 9c99a49a1f..5d9db342e9 100644
+index 2ab151c6c8..6db6326d77 100644
 --- a/packages/material-ui-styles/src/useThemeVariants/useThemeVariants.test.js
 +++ b/packages/material-ui-styles/src/useThemeVariants/useThemeVariants.test.js
-@@ -127,11 +127,6 @@ describe('useThemeVariants', () => {
+@@ -135,11 +135,6 @@ describe('useThemeVariants', () => {
          </ThemeProvider>,
        ),
      ).toErrorDev([
@@ -81,7 +103,7 @@ index 9c99a49a1f..5d9db342e9 100644
          `Material-UI: You are using a variant value \`test\` for which you didn't define styles.`,
          `Please create a new variant matcher in your theme for this variant. To learn more about matchers visit https://next.material-ui.com/r/custom-component-variants.`,
 diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js
-index 55a501a6e6..8cabc24615 100644
+index 273e3a009d..2a6c4b1379 100644
 --- a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js
 +++ b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js
 @@ -100,7 +100,6 @@ describe('<Breadcrumbs />', () => {
@@ -107,7 +129,7 @@ index d78203151f..72ac37571b 100644
    });
 
 diff --git a/packages/material-ui/src/Tabs/Tabs.test.js b/packages/material-ui/src/Tabs/Tabs.test.js
-index 9c004c515b..648559f279 100644
+index e1365185fb..a34c50ebaa 100644
 --- a/packages/material-ui/src/Tabs/Tabs.test.js
 +++ b/packages/material-ui/src/Tabs/Tabs.test.js
 @@ -90,9 +90,6 @@ describe('<Tabs />', () => {
@@ -161,10 +183,10 @@ index 8c8f59a9d8..657a5e57bc 100644
        ]);
      });
 diff --git a/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js b/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js
-index 3fba3ffab7..532c206595 100644
+index 25dc48c4c1..b33af6309c 100644
 --- a/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js
 +++ b/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js
-@@ -275,11 +275,7 @@ describe('useMediaQuery', () => {
+@@ -277,11 +277,7 @@ describe('useMediaQuery', () => {
 
        expect(() => {
          render(<MyComponent />);

scripts/sizeSnapshot/webpack.config.js

@@ -105,7 +105,7 @@ module.exports = async function webpackConfig() {
   const config = {
     entry,
     // ideally this would be computed from the bundles peer dependencies
-    externals: /^(react|react-dom)$/,
+    externals: /^(react|react-dom|react\/jsx-runtime)$/,
     mode: 'production',
     output: {
       filename: '[name].js',