react changelog

This commit adds a Promise as a child test to the Flight fixture in the App.js file. The Promise is created with a delayed resolution of 'deferred text' and is then rendered in the App component using React Suspense. This change ensures that the Promise as a child hydrates without errors. Additionally, the smoke test in the smoke.test.js file is modified to expect the rendered text from the Promise to match 'Promise as a child hydrates without errors: deferred text', verifying that the Promise is working as expected in the UI.

Overall, this commit introduces a Promise as a child test in the Flight fixture, demonstrating the use of asynchronous behavior in the UI rendering process. The change also includes modifications to the smoke test to validate the correct rendering of the Promise text, ensuring that the Promise as a child component functions without errors and displays the expected text content in the application.

Files changed

• fixtures/flight/__tests__/__e2e__/smoke.test.js
• fixtures/flight/src/App.js

This commit introduces a flag to disable test-utils in many builds and removes test-utils implementations from builds that do not support it. The commit also includes changes to the ReactTestUtils file, updating the imports and reorganizing the code. Additionally, a new file, ReactTestUtilsFB, is added to the test-utils folder. The commit also includes modifications to the inlinedHostConfigs file to include the test-utils module in the list of modules. Overall, the commit focuses on managing test-utils implementations and ensuring proper functionality with tests in different build configurations.

Files changed

• packages/react-dom/src/__tests__/ReactTestUtils-test.js
• packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap
• packages/react-dom/src/test-utils/ReactTestUtils.js
• packages/react-dom/test-utils.fb.js
• scripts/shared/inlinedHostConfigs.js

This commit focuses on optimizing the method names in ReactDOMCurrentDispatcher by shortening them to align with the hint codes used in Flight. These methods are only called internally and do not require long descriptive names. By aligning them with hint codes, the commit aims to make the code more concise and easier to understand. The changes involve modifying method names in various files such as ReactFiberConfigDOM.js, ReactDOMFlightServerHostDispatcher.js, and ReactFizzConfigDOM.js. Additionally, changes are made to related files like ReactDOMSharedInternalsFB.js, ReactDOMFloat.js, ReactDOMFlushSync.js, and ReactDOMTypes.js to reflect these modifications.

Overall, the commit streamlines the method names in ReactDOMCurrentDispatcher to improve code readability and maintain consistency with Flight hint codes. This optimization is done to make the internal implementation more concise and aligned with the overall codebase structure. The changes are applied across different files related to React DOM bindings to ensure uniformity in naming conventions and enhance code maintainability.

Files changed

• packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
• packages/react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js
• packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
• packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js
• packages/react-dom/src/ReactDOMSharedInternals.js
• packages/react-dom/src/ReactDOMSharedInternalsFB.js
• packages/react-dom/src/shared/ReactDOMFloat.js
• packages/react-dom/src/shared/ReactDOMFlushSync.js
• packages/react-dom/src/shared/ReactDOMTypes.js

This commit in the Fiber module of React updates the hydration scheduling to use the real event priority instead of the reconciler's update priority when no explicit update priority is set. Previously, the hydration scheduling used the reconciler's update priority, but there was a plan to switch to event priority if no update priority was specified. This change implements that plan by referring to the event priority in the absence of an explicit update priority, ensuring more accurate and efficient hydration scheduling.

The specific changes include modifying the ReactDOMEventReplaying.js file in the react-dom-bindings package, with 2 additions, 5 deletions, and 7 changes. The update replaces the getCurrentUpdatePriority function with resolveUpdatePriority to determine the priority for hydration targets. By making this adjustment, the hydration scheduling now aligns with the event priority, improving the overall performance and reliability of hydration in React applications.

Files changed

• packages/react-dom-bindings/src/events/ReactDOMEventReplaying.js

This commit addresses the issue of assertions not being flushed before the act function in some test cases, which was causing problems in a specific pull request. The fix includes adding assertLog statements in various test files to ensure that the assertions are properly handled before and after the act function is called. The changes made in the affected test files aim to resolve this issue and prevent any blocking issues in the future. Additionally, the commit mentions that more complex and interesting cases will be addressed in separate pull requests to further enhance the testing process. Overall, the changes made in this commit aim to improve the testing environment and ensure the proper handling of assertions during test execution.

Files changed

• packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
• packages/react-dom/src/__tests__/ReactDOMFizzDeferredValue-test.js
• packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
• packages/react-dom/src/__tests__/ReactDOMRoot-test.js
• packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
• packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
• packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
• packages/use-subscription/src/__tests__/useSubscription-test.js
• packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js

This commit addresses the issue of preloading images inside <noscript> tags by updating the <noscript> scope check in the opt-out for preloading in Fizz. The <noscript> scopes are considered inert in Fizz, as they are assumed to be used in rare and adverse circumstances. Previously, when preload support for <img> tags was added, the noscript scope check was not included in the opt-out for preloading. This change ensures that images inside <noscript> tags are not preloaded, fixing the issue raised in #27910.

The changes made in this commit include modifications to the ReactFizzConfigDOM.js file and the ReactDOMFloat-test.js file. In ReactFizzConfigDOM.js, the pictureTagInScope variable was renamed to pictureOrNoScriptTagInScope to include <noscript> tags, and the check for <noscript> scope was added to prevent preloading images inside them. In ReactDOMFloat-test.js, a test case was added to verify that preloading is omitted for images inside <noscript> tags, addressing the issue raised in #27910.

Files changed

• packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
• packages/react-dom/src/__tests__/ReactDOMFloat-test.js

This commit adds scaffolding for the requestFormReset API by introducing a new ReactDOM export called requestFormReset and creating a method on the internal ReactDOM dispatcher. The implementation of the API is not added yet, and this commit is made for review purposes. The requestFormReset function takes a form element as a parameter and checks if it was rendered by React before performing any actions. If the form element meets the criteria, it calls the requestFormResetOnFiber function on the form instance. Otherwise, it falls back to the previous dispatcher's requestFormReset method.

Overall, this commit sets up the structure for the requestFormReset API within ReactDOM, including the necessary changes in various files such as ReactFiberConfigDOM.js, ReactDOMSharedInternals.js, ReactDOMFormActions.js, and others. The actual functionality of the requestFormReset API will be explained in the next PR, and this commit focuses on laying the groundwork for its implementation and integration within the ReactDOM package.

Files changed

• packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
• packages/react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js
• packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
• packages/react-dom-bindings/src/shared/ReactDOMFormActions.js
• packages/react-dom/index.classic.fb.js
• packages/react-dom/index.experimental.js
• packages/react-dom/index.js
• packages/react-dom/index.modern.fb.js
• packages/react-dom/index.stable.js
• packages/react-dom/src/ReactDOMSharedInternals.js
• packages/react-dom/src/ReactDOMSharedInternalsFB.js
• packages/react-dom/src/client/ReactDOM.js
• packages/react-dom/src/client/ReactDOMFB.js
• packages/react-dom/src/shared/ReactDOMTypes.js
• packages/react-reconciler/src/ReactFiberHooks.js
• scripts/error-codes/codes.json

This commit addresses backwards compatibility for string refs on the WWW platform. The issue involved errors occurring with undefined string ref values when attempting to sync, as seen in a specific GitHub pull request. A test was added to replicate the failing pattern, and a fix was implemented by @acdlite in the commit. The test focused on ensuring that string refs do not detach and reattach on every render, with specific conditions and expectations set for the behavior of parent and child components in React.

Additionally, changes were made in the React reconciler and JSX element files to handle string refs appropriately for compatibility reasons. The modifications included logic to determine when to reuse old string refs to prevent detaching and reattaching them on each update, maintaining consistency for old Meta code that relies on string refs not being reattached constantly. Co-authored by Jack Pope and Andrew Clark, these adjustments aim to ensure smooth functioning and compatibility with string refs in React components.

Files changed

• packages/react-dom/src/__tests__/ReactComponent-test.js
• packages/react-reconciler/src/ReactFiberBeginWork.js
• packages/react/src/jsx/ReactJSXElement.js

This commit adds a new method called connectWithCustomMessagingProtocol to the RDT backend, which allows for connecting the backend with a custom messaging protocol. This method delegates the communication management between the frontend and backend to the owner injecting the RDT backend, unlike the existing connectToDevTools method which relies on a websocket connection. The new method returns a callback that can be used to unsubscribe the backend instance from the global DevTools hook. This change is essential for integrating RDT with non-browser environments that do not rely on websockets.

The commit also includes updates to the frontend API documentation, specifying the options available for connectWithCustomMessagingProtocol and highlighting the differences between this new method and connectToDevTools. Additionally, the commit modifies the backend file to include the implementation of the new method, specifying the options and functionality it provides for establishing communication between the backend and frontend using a custom messaging protocol.

Files changed

• packages/react-devtools-core/README.md
• packages/react-devtools-core/src/backend.js

This commit adds a new package called react-devtools-fusebox, which serves as the entry point for the React DevTools Frontend to be integrated into the Chrome DevTools panel. The package is built in ESM format, necessary for Chrome DevTools, and includes styles in a separate .css file, which is required for proper loading in Chrome DevTools. The commit also includes changes to various files such as .gitignore, package.json, README.md, and webpack configuration files to support this new package.

Additionally, the commit updates dependencies, adds necessary scripts for building the frontend locally and in production, and provides the necessary configurations for the package to function correctly within the React DevTools ecosystem. The react-devtools-fusebox package is not expected to be made public soon and is part of the new React Native debugger stack based on Chrome DevTools, codenamed "Fusebox."

Files changed

• .gitignore
• packages/react-devtools-fusebox/README.md
• packages/react-devtools-fusebox/package.json
• packages/react-devtools-fusebox/src/frontend.js
• packages/react-devtools-fusebox/webpack.config.frontend.js
• packages/react-devtools-shared/buildUtils.js
• yarn.lock

This commit adds support for propagating themes from the Chrome DevTools frontend in React DevTools Fusebox. The theme field is now optional, allowing users to customize the appearance of the DevTools interface. The next step, which is not within the scope of this project, involves teaching React DevTools to listen to theme changes. If the theme preference is set to 'auto' in the settings, the theme will be updated accordingly to match the browser devtools theme.

The changes made in this commit include modifications to the frontend.js file in the react-devtools-fusebox package. The additions include 7 new lines of code, while 2 lines were deleted, resulting in a total of 9 changes. The update introduces support for the BrowserTheme type, allowing for customization of the theme in React DevTools based on user preferences and browser devtools themes.

Files changed

• packages/react-devtools-fusebox/src/frontend.js