-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[core] Add
react_next workflow in CircleCI (#13360)
Co-authored-by: Lukas <llukas.tyla@gmail.com>
- Loading branch information
1 parent
18b7be6
commit 13403cd
Showing
4 changed files
with
209 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| /* eslint-disable no-console */ | ||
| /** | ||
| * Given the dist tag fetch the corresponding | ||
| * version and make sure this version is used throughout the repository. | ||
| * | ||
| * If you work on this file: | ||
| * WARNING: This script can only use built-in modules since it has to run before | ||
| * `pnpm install` | ||
| */ | ||
| import childProcess from 'child_process'; | ||
| import fs from 'fs'; | ||
| import os from 'os'; | ||
| import path from 'path'; | ||
| import { promisify } from 'util'; | ||
| import { getWorkspaceRoot } from './utils.mjs'; | ||
|
|
||
| // TODO: reuse the `useReactVersion.mjs` from the monorepo | ||
|
|
||
| const exec = promisify(childProcess.exec); | ||
|
|
||
| // packages published from the react monorepo using the same version | ||
| const reactPackageNames = ['react', 'react-dom', 'react-is', 'react-test-renderer', 'scheduler']; | ||
| const devDependenciesPackageNames = ['@testing-library/react']; | ||
|
|
||
| // if we need to support more versions we will need to add new mapping here | ||
| const additionalVersionsMappings = { | ||
| 17: { | ||
| '@testing-library/react': '^12.1.0', | ||
| }, | ||
| 19: {}, | ||
| }; | ||
|
|
||
| async function main(version) { | ||
| if (typeof version !== 'string') { | ||
| throw new TypeError(`expected version: string but got '${version}'`); | ||
| } | ||
|
|
||
| if (version === 'stable') { | ||
| console.log('Nothing to do with stable'); | ||
| return; | ||
| } | ||
|
|
||
| const packageJsonPath = path.resolve(getWorkspaceRoot(), 'package.json'); | ||
| const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, { encoding: 'utf8' })); | ||
|
|
||
| // the version is something in format: "17.0.0" | ||
| let majorVersion = null; | ||
|
|
||
| if (version.startsWith('^') || version.startsWith('~') || !Number.isNaN(version.charAt(0))) { | ||
| majorVersion = version.replace('^', '').replace('~', '').split('.')[0]; | ||
| } | ||
|
|
||
| await Promise.all( | ||
| reactPackageNames.map(async (reactPackageName) => { | ||
| const { stdout: versions } = await exec(`npm dist-tag ls ${reactPackageName} ${version}`); | ||
| const tagMapping = versions.split('\n').find((mapping) => { | ||
| return mapping.startsWith(`${version}: `); | ||
| }); | ||
|
|
||
| let packageVersion = null; | ||
|
|
||
| if (tagMapping === undefined) { | ||
| // Some specific version is being requested | ||
| if (majorVersion) { | ||
| packageVersion = version; | ||
| if (reactPackageName === 'scheduler') { | ||
| // get the scheduler version from the react-dom's dependencies entry | ||
| const { stdout: reactDOMDependenciesString } = await exec( | ||
| `npm view --json react-dom@${version} dependencies`, | ||
| ); | ||
| packageVersion = JSON.parse(reactDOMDependenciesString).scheduler; | ||
| } | ||
| } else { | ||
| throw new Error(`Could not find '${version}' in "${versions}"`); | ||
| } | ||
| } else { | ||
| packageVersion = tagMapping.replace(`${version}: `, ''); | ||
| } | ||
|
|
||
| packageJson.resolutions[reactPackageName] = packageVersion; | ||
| }), | ||
| ); | ||
|
|
||
| // At this moment all dist tags reference React 18 version, so we don't need | ||
| // to update these dependencies unless an older version is used, or when the | ||
| // next/experimental dist tag reference to a future version of React | ||
| // packageJson.devDependencies['@testing-library/react'] = 'alpha'; | ||
|
|
||
| if (majorVersion && additionalVersionsMappings[majorVersion]) { | ||
| devDependenciesPackageNames.forEach((packageName) => { | ||
| if (!additionalVersionsMappings[majorVersion][packageName]) { | ||
| throw new Error( | ||
| `Version ${majorVersion} does not have version defined for the ${packageName}`, | ||
| ); | ||
| } | ||
| packageJson.devDependencies[packageName] = | ||
| additionalVersionsMappings[majorVersion][packageName]; | ||
| }); | ||
| } | ||
|
|
||
| // add newline for clean diff | ||
| fs.writeFileSync(packageJsonPath, `${JSON.stringify(packageJson, null, 2)}${os.EOL}`); | ||
| } | ||
|
|
||
| const [version = process.env.REACT_VERSION] = process.argv.slice(2); | ||
| main(version).catch((error) => { | ||
| console.error(error); | ||
| process.exit(1); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| # Testing | ||
|
|
||
| ## Testing multiple versions of React | ||
|
|
||
| You can check integration of different versions of React (for example different [release channels](https://react.dev/community/versioning-policy) or PRs to React) by running the following commands: | ||
|
|
||
| 1. `node scripts/useReactVersion.mjs <version>`. | ||
|
|
||
| Possible values for `version`: | ||
|
|
||
| - default: `stable` (minimum supported React version) | ||
| - a tag on npm, for example `next`, `experimental` or `latest` | ||
| - an older version, for example `^17.0.0` | ||
|
|
||
| 2. `pnpm install` | ||
|
|
||
| ### CI | ||
|
|
||
| #### `next` version | ||
|
|
||
| For `react@next` specifically, there's a `react-next` workflow in our CircleCI pipeline that you can trigger in CircleCI on the PR you want to test: | ||
|
|
||
| 1. Go to https://app.circleci.com/pipelines/github/mui/mui-x?branch=pull/PR_NUMBER and replace `PR_NUMBER` with the PR number you want to test. | ||
| 2. Click `Trigger Pipeline` button. | ||
| 3. Expand `Add parameters (optional)` and add the following parameter: | ||
|
|
||
| | Parameter type | Name | Value | | ||
| | :------------- | :--------- | :----------- | | ||
| | `string` | `workflow` | `react-next` | | ||
|
|
||
| 4. Click `Trigger Pipeline` button. | ||
|
|
||
| #### Other versions | ||
|
|
||
| You can pass the same `version` to our CircleCI pipeline as well: | ||
|
|
||
| With the following API request we're triggering a run of the default workflow in | ||
| PR #24289 for `react@next` | ||
|
|
||
| ```bash | ||
| curl --request POST \ | ||
| --url https://circleci.com/api/v2/project/gh/mui/mui-x/pipeline \ | ||
| --header 'content-type: application/json' \ | ||
| --header 'Circle-Token: $CIRCLE_TOKEN' \ | ||
| --data-raw '{"branch":"pull/24289/head","parameters":{"react-version":"next"}}' | ||
| ``` |