react changelog

Welcome to the latest updates! We've been busy making some exciting changes and improvements. Here's a rundown of what's new and improved:

New Features

  • Show Outlined Functions in Logging and Playground: We've enhanced the compiler to show outlined functions in logging and the playground, giving you better visibility and understanding of outlined functions during compilation and reactive function generation. 🎉
  • Add process_artifacts_combined Job: A new job has been added to streamline artifact handling in the workflow, making necessary files easily accessible and organized for future use.
  • Add run_fixtures_flight_tests Workflow: Automate running Flight tests on fixtures, ensuring consistent execution and archiving results for analysis.
  • Add check_error_codes Step: This new step in the GitHub Actions workflow searches for unminified errors, enhancing our automated testing and validation process.
  • Add RELEASE_CHANNEL_stable_yarn_test_dom_fixtures Workflow: This workflow checks fixtures DOM in the stable release channel, improving the testing process for stable releases.

Improvements

  • Use yargs to Parse Args in download-experimental-build: The script now uses yargs to parse arguments, adding flexibility and improving user experience with a summary message.
  • Parallelize yarn build: By parallelizing the build process, we've significantly reduced build times, enhancing efficiency for contributors.
  • Fork download-experimental-build.js for GitHub Actions: We've forked the original script to make it easier to review and eventually streamline the process of downloading experimental build artifacts.

Bugfixes

  • Fix Sizebot Job Dependency: Addressed an issue with the sizebot job by adding the necessary build_and_lint dependency.
  • Update Sizebot Node Modules Caching Strategy: Improved caching strategy to ensure correct modules are cached for the sizebot download job.
  • Don't Wrap Non-ASCII FBT Operands in JSXExpressionContainer: Fixed an issue in the compiler to handle non-ASCII FBT operands appropriately, ensuring they are not wrapped unnecessarily.

Chores

  • Remove RELEASE_CHANNEL_stable_yarn_test_dom_fixtures from CircleCI: Streamlined the build process by removing unnecessary steps and configurations related to DOM fixture tests.

We hope these updates make your development experience smoother and more efficient. Happy coding! 🚀

Included Commits

2024-07-12T15:21:08 See commit

This commit parallelizes the yarn build process for the React project by making changes to the CircleCI configuration, GitHub workflows, and various scripts. The changes include modifications to the .circleci/config.yml file, .github/workflows/runtime_build.yml file, and scripts/rollup/build-all-release-channels.js and scripts/rollup/stats.js files. Additionally, a new script called build-ghaction.js is added as part of this commit.

By parallelizing the yarn build process, the build time for the React project is likely to be significantly reduced as multiple tasks can now be executed simultaneously. This optimization improves the efficiency of the build process and enhances the overall development workflow for contributors working on the React project.

Files changed

  • .circleci/config.yml
  • .github/workflows/runtime_build.yml
  • scripts/rollup/build-all-release-channels.js
  • scripts/rollup/build-ghaction.js
  • scripts/rollup/stats.js
2024-07-12T15:21:08 See commit

This commit adds a new job called process_artifacts_combined to the runtime_build.yml workflow file. This job runs on ubuntu-latest and includes steps to restore cached node_modules, install dependencies, restore archived builds, display the structure of the build, scrape warning messages, compress the build directory into a tarball, and archive build artifacts. The commit also includes changes to the workflow file, with 42 additions and no deletions.

The purpose of this new job is to streamline the process of handling artifacts and build outputs in the workflow. By combining and archiving artifacts, the job helps ensure that the necessary files are easily accessible and organized for future use. Additionally, the commit mentions a TODO item to migrate scripts to use the 'build' directory instead of 'build2', indicating a potential future improvement in the workflow.

Files changed

  • .github/workflows/runtime_build.yml
2024-07-16T03:10:07 See commit

This commit introduces changes to the compiler to show outlined functions in logging and the playground. The modifications include adding functions to print outlined functions with React components and reactive functions. The changes involve updating multiple files within the compiler, such as EditorImpl.tsx, PrintHIR.ts, CodegenReactiveFunction.ts, and logger.ts. These updates allow for better visibility and understanding of outlined functions within the compiler's processes and outputs.

Specifically, the commit includes new functions like printFunctionWithOutlined and printReactiveFunctionWithOutlined, which enhance the logging capabilities by displaying outlined functions alongside the main functions. Additionally, the changes involve updating existing functions and removing unnecessary code related to logging outlined functions. These modifications aim to improve the developer experience by providing more detailed information about outlined functions during the compilation and reactive function generation processes.

Files changed

  • compiler/apps/playground/components/Editor/EditorImpl.tsx
  • compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts
  • compiler/packages/babel-plugin-react-compiler/src/Utils/logger.ts
2024-07-16T18:35:39 See commit

This commit adds a new step called check_error_codes to the GitHub Actions workflow for the React project. This step is responsible for searching build artifacts for unminified errors. It runs on the ubuntu-latest environment and includes tasks such as restoring cached node modules, installing dependencies with yarn, restoring archived builds, displaying the structure of the build, and searching for unminified errors. If unminified errors are found, the step will output a message indicating that either the error codes map should be updated or error minification should be disabled for the affected build.

The changes made in this commit are focused on modifying the .github/workflows/runtime_build_and_test.yml file. Specifically, 30 lines of code were added to implement the check_error_codes step, while no deletions were made. The purpose of this addition is to enhance the automated testing and validation process within the GitHub Actions workflow, ensuring that unminified errors are identified and addressed appropriately during the build and test stages of the React project.

Files changed

  • .github/workflows/runtime_build_and_test.yml
2024-07-16T18:35:40 See commit

This commit adds a new workflow called run_fixtures_flight_tests to the GitHub Actions configuration file runtime_build_and_test.yml. This workflow is responsible for running Flight tests on fixtures. It includes steps such as checking out the code, setting up the node environment, restoring cached node modules, installing dependencies, downloading archived build artifacts, installing fixture dependencies, running tests using Playwright, and archiving test results and reports as artifacts. This workflow is triggered after the build_and_lint workflow is completed.

The purpose of this addition is to automate the process of running Flight tests on fixtures in the React project. By setting up this workflow in GitHub Actions, developers can ensure that the Flight tests are consistently executed and the results are archived for further analysis. This contributes to the overall testing and quality assurance process of the project.

Files changed

  • .github/workflows/runtime_build_and_test.yml
2024-07-16T18:35:41 See commit

This commit adds a new workflow called RELEASE_CHANNEL_stable_yarn_test_dom_fixtures to the GitHub Actions configuration file runtime_build_and_test.yml. This workflow is designed to check fixtures DOM in the stable release channel. It includes steps to set up the node environment, restore cached node modules, install dependencies, restore archived build artifacts, display the structure of the build, and run DOM fixture tests using yarn commands. This addition aims to enhance the testing process for the stable release channel of the project.

In addition to the new workflow, this commit also includes modifications to the existing GitHub Actions workflow. Specifically, it updates the build_and_lint job to include a step that checks release dependencies using the yarn check-release-dependencies command. Overall, these changes aim to improve the testing and quality assurance processes for the project, specifically focusing on the stable release channel.

Files changed

  • .github/workflows/runtime_build_and_test.yml
2024-07-16T18:35:42 See commit

This commit removes the RELEASE_CHANNEL_stable_yarn_test_dom_fixtures from the CircleCI configuration file. This change involves deleting 50 lines of code related to restoring and saving yarn cache for fixtures/dom, installing dependencies, and running DOM fixture tests. The commit also resolves a specific pull request on GitHub related to this change.

By removing the RELEASE_CHANNEL_stable_yarn_test_dom_fixtures from the CircleCI configuration, the commit streamlines the build process by eliminating unnecessary steps and configurations for running DOM fixture tests. This change reduces complexity in the configuration file and improves the efficiency of the build process by removing redundant steps related to yarn cache management and test execution in the fixtures/dom directory. The commit is linked to a specific pull request on GitHub for further context and resolution of the changes made.

Files changed

  • .circleci/config.yml
2024-07-18T19:33:51 See commit

This commit in the compiler package of Babel-plugin-react-compiler addresses an issue where non-ASCII fbt operands in JSXExpressionContainer were being wrapped. The changes involve not wrapping these non-ASCII fbt operands in JSXExpressionContainer. The commit modifies the Pipeline.ts and CodegenReactiveFunction.ts files, updating the code to handle fbt operands differently. Specifically, it introduces a new function memoizeFbtAndMacroOperandsInSameScope that now returns a Set of IdentifierId, and this set is used in the codegenFunction function to handle fbt operands appropriately.

Additionally, the commit includes changes in the MemoizeFbtAndMacroOperandsInSameScope.ts file, where the function signature is updated to return a Set of IdentifierId. Some test fixtures related to fbt parameters with quotes and Unicode characters are also added to showcase the changes in handling these scenarios. Overall, the commit aims to improve the handling of fbt operands in JSXExpressionContainer, especially when they involve non-ASCII characters, ensuring they are not wrapped unnecessarily.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-with-quotes.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-param-with-unicode.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-newline.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-quotes.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-unicode.expect.md
2024-07-18T20:19:10 See commit

This commit updates the download-experimental-build-ghaction.js script in the scripts/release folder of the React repository. The changes include using the yargs library to parse arguments for the download-experimental-build script. The script now accepts arguments such as releaseChannel, commit, skipTests, and allowBrokenCI, allowing for more flexibility in downloading experimental builds. Additionally, a new function printSummary(commit) is added to provide a summary message after downloading an experimental build, including instructions on how to download the build again.

Overall, this commit enhances the functionality of the download-experimental-build script by adding argument parsing capabilities and improving the user experience with a summary message. The changes aim to make it easier for developers to download experimental builds of React and provide clear instructions on how to repeat the download process. These updates contribute to a more user-friendly and efficient workflow for accessing experimental builds in the React repository.

Files changed

  • scripts/release/download-experimental-build-ghaction.js
2024-07-18T20:19:10 See commit

This commit involves forking the original file scripts/release/download-experimental-build.js without any modifications in order to make the review process easier. The original script had assumptions about CircleCI that were complex to disentangle, so a temporary fork was created for GitHub actions. The plan is to eventually remove the original file and rename this fork back to the original naming.

The new file created from the fork is named scripts/release/download-experimental-build-ghaction.js and includes additions related to handling default parameter values, downloading build artifacts, parsing parameters, and printing a summary. The script is designed to run in a specific directory and work with public packages, ultimately aiming to streamline the process of downloading experimental build artifacts.

Files changed

  • scripts/release/download-experimental-build-ghaction.js
2024-07-18T21:35:53 See commit

This commit fixes an issue with the sizebot job in the runtime_build_and_test workflow by adding the build_and_lint dependency. Previously, the sizebot job was omitting this dependency, which was causing issues. The changes made in this commit ensure that the sizebot job now correctly depends on both build_and_lint and download_base_build_for_sizebot, resolving the issue.

The modification made in the runtime_build_and_test.yml file includes changing the needs parameter in the sizebot job to include build_and_lint in addition to download_base_build_for_sizebot. This change ensures that the sizebot job runs successfully by depending on the necessary dependencies. Overall, this commit addresses a specific issue in the workflow configuration, ensuring that the sizebot job functions correctly within the React project.

Files changed

  • .github/workflows/runtime_build_and_test.yml
2024-07-18T21:35:56 See commit

This commit updates the caching strategy for the sizebot node_modules in the root repo. The download job for sizebot requires modules from both the root repo and a nested yarn lockfile in scripts/release. The commit calculates the hash for the cache using both lockfiles to ensure that the correct modules are cached.

The changes include modifying the runtime_build_and_test.yml file in the .github/workflows directory. The path for caching node_modules is updated to include all node_modules directories, and the key for caching is now based on the hash of both the root yarn.lock file and the nested yarn.lock file in scripts/release. This update ensures that the correct modules are cached for the sizebot download job.

Files changed

  • .github/workflows/runtime_build_and_test.yml