From 8eb5137ae1709dc2b5e72176551debd5133da7a7 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 2 Sep 2020 16:20:32 +0200 Subject: [PATCH 1/6] Use new jsx runtime with React 17 --- scripts/react-next.diff | 34 ++++++++++++++++++++++++++++------ 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/scripts/react-next.diff b/scripts/react-next.diff index 2acc5b0f55a372..b0bb3fb5720c6e 100644 --- a/scripts/react-next.diff +++ b/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', () => { , ), ).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('', () => { @@ -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('', () => { @@ -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(); From fd95b96d9c033f65a0b3687e809503595d196b1c Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 2 Sep 2020 17:22:29 +0200 Subject: [PATCH 2/6] Run size snapshot periodically with react canaries --- azure-pipelines.yml | 29 +++++++++++++++++++++++++---- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index e036b8693c1ab4..2358647ed95beb 100644 --- a/azure-pipelines.yml +++ b/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,7 +113,7 @@ 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 @@ -100,7 +121,7 @@ steps: - 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' From e04c26b3b2b699e775004724602a85263b9b931e Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 2 Sep 2020 17:23:02 +0200 Subject: [PATCH 3/6] REVERT ME LATER run with React 17 --- .circleci/config.yml | 3 +++ azure-pipelines.yml | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index b242835b8421d3..5d810efb438622 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -234,6 +234,7 @@ workflows: - l10n - /dependabot\// - test_unit: + react-dist-tag: next requires: - checkout - test_static: @@ -243,9 +244,11 @@ workflows: requires: - checkout - test_browser: + react-dist-tag: next requires: - checkout - test_regressions: + react-dist-tag: next requires: - test_unit - test_static diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 2358647ed95beb..bf495b96f7c243 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -34,7 +34,7 @@ variables: # 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' + REACT_DIST_TAG: 'next' # Preserve this path structure since it is locked in various tooling S3_ARTIFACTS_PATH_PERMA: 'artifacts/$(Build.SourceBranchName)/$(Build.SourceVersion)/' From 9c3f4b56c06990194f9c4c9c82bd1ee5848e017a Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 3 Sep 2020 09:24:01 +0200 Subject: [PATCH 4/6] fix: mark jsx and jsxs as namedExports --- packages/material-ui/scripts/rollup.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui/scripts/rollup.config.js b/packages/material-ui/scripts/rollup.config.js index 8db608a4fcd8ee..253e1cd5606642 100644 --- a/packages/material-ui/scripts/rollup.config.js +++ b/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', From b56e763e085b464684a951fbf58578c24a75a8a2 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 3 Sep 2020 09:53:36 +0200 Subject: [PATCH 5/6] consider jsx-runtime as external for now --- scripts/sizeSnapshot/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js index 5e311133754f41..1f988a2937601a 100644 --- a/scripts/sizeSnapshot/webpack.config.js +++ b/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', From 925c5e3a55360f9f7042f72d19d6a2f2acbb4c21 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 3 Sep 2020 10:16:27 +0200 Subject: [PATCH 6/6] Revert "REVERT ME LATER run with React 17" This reverts commit ca76e8724652a3b7c6a34f3d5d8e7d531711a267. --- .circleci/config.yml | 3 --- azure-pipelines.yml | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 5d810efb438622..b242835b8421d3 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -234,7 +234,6 @@ workflows: - l10n - /dependabot\// - test_unit: - react-dist-tag: next requires: - checkout - test_static: @@ -244,11 +243,9 @@ workflows: requires: - checkout - test_browser: - react-dist-tag: next requires: - checkout - test_regressions: - react-dist-tag: next requires: - test_unit - test_static diff --git a/azure-pipelines.yml b/azure-pipelines.yml index bf495b96f7c243..2358647ed95beb 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -34,7 +34,7 @@ variables: # 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: 'next' + REACT_DIST_TAG: 'stable' # Preserve this path structure since it is locked in various tooling S3_ARTIFACTS_PATH_PERMA: 'artifacts/$(Build.SourceBranchName)/$(Build.SourceVersion)/'