react changelog

Hey there, awesome devs! We've got some exciting updates and fixes to share with you. Here's the latest and greatest from our changelog:

New feature: React DevTools 5.0.2 -> 5.1.0 🎉

We've upgraded React DevTools with a bunch of cool new features and improvements! Some highlights include:

  • Support for a theme option in devtools-fusebox.
  • Added a method for connecting the backend with a custom messaging protocol.
  • Source maps for content scripts.
  • Displaying the actual pending state when inspecting useTransition.
  • And much more!

Bugfix: Improved <style> textContent escaping in Fizz 🛠️

We've fixed an issue where style text content was being escaped as HTML, which was a bit of a mess. Now, style text content is properly escaped to prevent early tag closure. This is done by encoding "s" and "S" as hexadecimal unicode representations within sequences like </style>. No more dangerouslySetInnerHTML shenanigans!

Bugfix: <script> textContent escaping similar to bootstrapScript 🛡️

Inline script children are now properly escaped to avoid breaking script parsing. This update extends the escaping functionality used for bootstrapScripts and importMaps to any inline script. We escape 's' or 'S' with the appropriate unicode code point if found within a <script> or </script> sequence. This ensures minimal escaping for readability while maintaining full JS parsing capabilities.

Improvement: CircleCI workflows converted to GitHub Actions 🚀

We've moved our devtools_regression_tests workflow from CircleCI to GitHub Actions. This change makes our CI process more integrated with GitHub, and we've tested it thoroughly in a forked repo to ensure everything runs smoothly.

Improvement: Promoted ASYNC_ITERATOR symbol to React Symbols 🔄

The ASYNC_ITERATOR symbol is now part of React Symbols, making it easier to refer to in multiple places within the codebase. This change streamlines the usage of ASYNC_ITERATOR and ensures consistency across the board.

Improvement: Added support for useFormStatus in DevTools 🧩

DevTools now supports the useFormStatus hook! We've added a new function useHostTransitionStatus and updated the Dispatcher object. This enhancement improves debugging capabilities by providing support for the useFormStatus hook and adding tests to ensure its correct functionality.

Bugfix: Removed renderToStaticNodeStream 🚫

We've removed the renderToStaticNodeStream method from React. You can now replicate its semantics using renderToPipeableStream with onAllReady or renderToReadableStream with await stream.allready. This change simplifies the codebase and aligns with our modern streaming implementation for SSR.

Chore: Removed ReactFlightFB bundles 🧹

We've cleaned up the project by removing the ReactFlightFB bundles. This change simplifies the project structure and eliminates unnecessary code related to these specific bundles, making the codebase more focused and easier to maintain.

That's all for now! Keep coding, stay awesome, and enjoy these updates! 🚀✨

Included Commits

2024-04-15T13:56:57 See commit

The commit updates React DevTools from version 5.0.2 to 5.1.0 and includes various changes and new features. Some of the changes include looking for a ReactMemoCacheSentinel on state, adding a method for connecting the backend with a custom messaging protocol, shipping source maps for content scripts, and displaying the actual pending state when inspecting useTransition. Additionally, there are updates to error messages, the removal of experimental features like module pattern function component support, and improvements to DevTools for better debugging capabilities.

Overall, the update to React DevTools 5.1.0 brings several enhancements and bug fixes to improve the development and debugging experience for React applications. New features have been added, existing features have been improved, and unnecessary or experimental elements have been removed for a more streamlined and efficient tool.

Files changed

  • packages/react-devtools-core/package.json
  • packages/react-devtools-extensions/chrome/manifest.json
  • packages/react-devtools-extensions/edge/manifest.json
  • packages/react-devtools-extensions/firefox/manifest.json
  • packages/react-devtools-inline/package.json
  • packages/react-devtools-timeline/package.json
  • packages/react-devtools/CHANGELOG.md
  • packages/react-devtools/package.json
2024-04-16T08:28:16 See commit

This commit adds support for the useFormStatus hook in the ReactDebugHooks.js file. It includes the addition of a new function useHostTransitionStatus and updates to the Dispatcher object to include this new function. Additionally, tests were added to ensure the proper functioning of the useFormStatus hook in the ReactHooksInspectionIntegrationDOM-test.js and ReactHooksInspection-test.js files.

In the CustomHooks.js file, modifications were made to import and use the useFormStatus hook from react-dom. The FormStatus component was added to display the status obtained from useFormStatus in a pre tag. This commit enhances the debugging capabilities by providing support for the useFormStatus hook and ensuring its correct functionality is tested.

Files changed

  • packages/react-debug-tools/src/ReactDebugHooks.js
  • packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js
  • packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegrationDOM-test.js
  • packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
2024-04-17T16:29:08 See commit

This commit promotes the ASYNC_ITERATOR symbol to React Symbols in order to make it easier to refer to in multiple places within the codebase. This change involves updating the ReactFlightClient.js and ReactFlightServer.js files by removing the previous declaration of ASYNC_ITERATOR as a constant and instead importing it from shared/ReactSymbols.js. This adjustment streamlines the usage of ASYNC_ITERATOR and ensures consistency when referencing it in different parts of the code.

Additionally, the commit clarifies that the same pattern is not applied to the regular Symbol.iterator because React also supports the string "@@iterator" for backward compatibility. By making this change, the codebase becomes more organized and efficient, allowing for a more straightforward and unified approach to using the ASYNC_ITERATOR symbol throughout the React application.

Files changed

  • packages/react-client/src/ReactFlightClient.js
  • packages/react-server/src/ReactFlightServer.js
  • packages/shared/ReactSymbols.js
2024-04-18T14:04:27 See commit

This commit converts the CircleCI workflows for the devtools_regression_tests in the facebook/react repository to GitHub actions workflows. The Github Actions Importer tool was used initially to convert the workflows, followed by manual editing to correct any errors in translation. The scripts called by this workflow need to be modified to work correctly.

The changes made in this commit include adding a new GitHub actions workflow file (.github/workflows/devtools_regression_tests.yml) with 137 additions and no deletions. The workflow includes jobs for downloading builds, building devtools and processing artifacts, running devtools tests for different versions, and running devtools end-to-end tests for various versions. The changes were tested in a forked repository, and the logs of the workflow can be viewed in the forked repository.

Files changed

  • .github/workflows/devtools_regression_tests.yml
2024-04-18T20:41:04 See commit

This commit removes the ReactFlightFB bundles from the project. These bundles were related to the React Server DOM FB Server and Client, as well as the experimental dom-fb-experimental bundle. The changes involve modifications to the bundles.js, forks.js, and inlinedHostConfigs.js files. Specifically, the ReactServerFB.js entry point and related configurations are removed, along with references to ReactFlightDOMServerFB.js and ReactFlightDOMClientFB.js. This removal simplifies the project structure and eliminates unnecessary code related to these specific bundles.

Overall, the removal of the ReactFlightFB bundles streamlines the project by getting rid of unnecessary configurations and entry points. This cleanup simplifies the codebase and reduces complexity by removing components that are no longer needed or in use. By eliminating these bundles, the project becomes more focused and easier to maintain, as it removes redundant code related to experimental features that are no longer relevant.

Files changed

  • scripts/rollup/bundles.js
  • scripts/rollup/forks.js
  • scripts/shared/inlinedHostConfigs.js
2024-04-19T00:24:27 See commit

This commit addresses an issue where style text content was being escaped as HTML, leading users to resort to using dangerouslySetInnerHTML as a workaround. To improve security and prevent early closure of the style tag, the escaping rules for style text content in Fizz have been updated. The text content within style tags will now be escaped to ensure that the tag scope cannot be closed prematurely. This is achieved by encoding "s" and "S" as hexadecimal unicode representations "\73 " and "\53 " respectively when found within a sequence like . The update also includes modifications to the escapeStyleTextContent function and related regex patterns to support casing, similar to the script closing tag regex for bootstrap scripts.

Additionally, the commit includes changes to the ReactDOMFizzServer test file to verify the correct behavior of the updated style text content escaping mechanism. Two test cases have been added to ensure that the "S" in "</?[Ss]style" strings are replaced with unicode escaped lowercase "s" or "S" depending on the case, while preserving the case sensitivity of nearby characters. These tests validate the functionality of the updated escaping rules for style text content in Fizz, ensuring that style tags are handled securely and accurately during rendering.

Files changed

  • packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
  • packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
2024-04-19T00:38:43 See commit

This commit addresses the issue of escaping <script> textContent similar to bootstrapScript to avoid breaking script parsing. Prior to this change, inline script children were encoded as HTML, which could lead to issues with script parsing, requiring the use of dangerouslySetInnerHTML. However, this approach lacked proper escaping, making it necessary to be even more cautious. In this PR, the escaping functionality used for bootstrapScripts and importMaps has been extended to any inline script. The approach involves escaping 's' or 'S" with the appropriate Unicode code point if it is inside a <script or </script sequence, ensuring minimal escaping for readability while maintaining full JavaScript parsing capabilities.

The commit includes modifications to the ReactFizzConfigDOM.js file, with additions and deletions made to enhance the escaping functionality for inline scripts. Additionally, tests have been added to ensure that the escaping of script content, particularly within bootstrapScriptContent, importMaps, and inline scripts, functions correctly without escaping certain characters like <, >, or &. Overall, this update aims to improve the security and reliability of rendering untrusted script content in React applications.

Files changed

  • packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
  • packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
2024-04-19T04:06:04 See commit

This commit removes the renderToStaticNodeStream method from React. It was not deprecated initially when renderToNodeStream was deprecated because it did not have a clear analog in the modern streaming implementation for server-side rendering. With the removal of renderToNodeStream in React 19, this change removes renderToStaticNodeStream as well. The commit suggests replicating the semantics of renderToStaticNodeStream using renderToPipeableStream with onAllReady or renderToReadableStream with await stream.allready.

The changes made in this commit involve removing references to renderToStaticNodeStream across different files in the React package, such as server.browser.js, server.bun.js, server.edge.js, and others. The deprecated method is removed from exports and replaced with alternatives like renderToPipeableStream and renderToReadableStream. Additionally, the commit includes modifications in test files to account for the removal of renderToStaticNodeStream.

Files changed

  • packages/react-dom/npm/server.browser.js
  • packages/react-dom/npm/server.bun.js
  • packages/react-dom/npm/server.edge.js
  • packages/react-dom/npm/server.node.js
  • packages/react-dom/server.browser.js
  • packages/react-dom/server.bun.js
  • packages/react-dom/server.edge.js
  • packages/react-dom/server.node.js
  • packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
  • packages/react-dom/src/__tests__/ReactServerRendering-test.js
  • packages/react-dom/src/server/ReactDOMFizzServerBun.js
  • packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
  • packages/react-dom/src/server/ReactDOMLegacyServerNode.js
  • packages/react-dom/src/server/react-dom-server.bun.stable.js