react changelog

This commit introduces a new shorthand command for building the view-transition fixture within the project, aimed at streamlining the development and testing process. The new command, build-for-vt-dev, is designed to be a faster alternative that omits unnecessary components required for the full flight build, thereby reducing rebuild times during testing.

The change involves a modification to the package.json file, where the new build command is added alongside existing commands. This improvement is particularly beneficial for developers who frequently test the view-transition fixture, as it simplifies the build process without compromising functionality. The commit was co-authored by Hendrik Liebau, indicating collaborative efforts in enhancing the project's build efficiency.

Files changed

• package.json

This commit introduces a polyfill for the onScrollEnd event in Safari, addressing the lack of support for the scrollend event in that browser. Previously, the onScrollEnd functionality only worked in Chrome and Firefox, and since Safari's support is uncertain, the polyfill was developed to ensure consistent behavior across browsers. The implementation follows the existing synthetic event system while allowing for feature detection of the scrollend property. If native support is absent, it listens for scroll events and employs a debounce mechanism to determine when scrolling has stopped, thus triggering the onScrollEnd event.

The polyfill is implemented as a plugin and integrates with existing event handling systems in React. It manages the state of touch and mouse interactions to accurately fire the onScrollEnd event at the right time, ensuring synchronization with other gesture-related functionalities. The changes include modifications to various files in the React codebase, including the addition of a new ScrollEndEventPlugin that handles the event extraction and dispatching process. This enhancement not only improves cross-browser compatibility but also aligns with other internal updates related to gesture handling in React.

Files changed

• packages/react-dom-bindings/src/client/ReactDOMComponent.js
• packages/react-dom-bindings/src/client/ReactDOMComponentTree.js
• packages/react-dom-bindings/src/events/DOMEventProperties.js
• packages/react-dom-bindings/src/events/DOMPluginEventSystem.js
• packages/react-dom-bindings/src/events/plugins/ScrollEndEventPlugin.js
• packages/shared/ReactFeatureFlags.js
• packages/shared/forks/ReactFeatureFlags.native-fb.js
• packages/shared/forks/ReactFeatureFlags.native-oss.js
• packages/shared/forks/ReactFeatureFlags.test-renderer.js
• packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
• packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
• packages/shared/forks/ReactFeatureFlags.www.js

This commit introduces a dynamic feature flag for the enableScrollEndPolyfill in the React codebase, specifically targeting the www environment. The change modifies two files: ReactFeatureFlags.www-dynamic.js and ReactFeatureFlags.www.js. In the dynamic flags file, the new flag is added, while in the static flags file, it has been included in the exports, replacing its previous hard-coded value of false.

The update is part of a broader effort to make feature flags more adaptable, allowing for easier testing and deployment of experimental features. The commit notes that the existing flags were hard-coded to default values used in open source, and there is a plan to update tests accordingly to ensure they function correctly in both modes.

Files changed

• packages/shared/forks/ReactFeatureFlags.www-dynamic.js
• packages/shared/forks/ReactFeatureFlags.www.js

This commit introduces a significant enhancement to the useSwipeTransition feature by implementing a mechanism that allows for a smooth transition during swipe gestures. Instead of immediately switching to the destination state, the current state remains active, enabling ongoing interactions such as video playback while the swipe gesture is initiated. To achieve this, the destination state is treated as the "old" state, and a clone of the relevant View Transition boundary is rendered offscreen to prevent flickering that would occur if the old state was displayed on screen. The implementation includes cloning the container and positioning it correctly, with provisions for deeper elements in the DOM tree while minimizing performance impacts.

Additionally, the commit addresses the complexities of animating the cloned states back into view. It adjusts keyframes for animations to ensure that elements transition smoothly without disrupting user experience, even when pseudo-elements are involved. The approach balances the need for functionality with the potential for future optimizations, such as improving performance for absolutely positioned boundaries. Overall, this update lays the groundwork for a more responsive and visually appealing swipe transition experience in React applications.

Files changed

• fixtures/view-transition/src/components/Page.js
• packages/react-art/src/ReactFiberConfigART.js
• packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
• packages/react-native-renderer/src/ReactFiberConfigNative.js
• packages/react-noop-renderer/src/createReactNoop.js
• packages/react-reconciler/src/ReactFiberApplyGesture.js
• packages/react-reconciler/src/ReactFiberCommitWork.js
• packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js
• packages/react-reconciler/src/ReactFiberRoot.js
• packages/react-reconciler/src/ReactFiberWorkLoop.js
• packages/react-reconciler/src/ReactInternalTypes.js
• packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
• packages/react-test-renderer/src/ReactFiberConfigTestHost.js
• scripts/error-codes/codes.json

The commit titled "Remove unused netlify.toml" indicates that the file netlify.toml is no longer needed in the project. The author has determined that it is not in use anymore, signaling a cleanup effort to streamline the codebase by eliminating unnecessary files.

As part of this commit, the netlify.toml file has been removed, which may contribute to improved project maintainability and clarity. This action reflects a common practice in software development to remove obsolete configurations that could potentially cause confusion or clutter in the repository.

Files changed

This commit introduces support for the beforetoggle and toggle events for dialog elements in the React DOM bindings. Specifically, it modifies the ReactDOMComponent.js file to listen for these new events, alongside existing events like cancel and close. The changes ensure that the dialog component can now respond to these events, enhancing its interactivity and user experience.

In addition to the modifications in the core functionality, the commit also includes updates to the test suite in ReactDOMEventPropagation-test.js. It adds two new test cases that validate the handling of the onBeforeToggle and onToggle events for dialog components. These tests simulate the dispatching of the respective events and ensure that the React event system correctly processes them, confirming that the new features work as intended.

Files changed

• packages/react-dom-bindings/src/client/ReactDOMComponent.js
• packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js

The commit titled "[Flight] Expose registerServerReference from the client builds (#32534)" introduces a new function, registerServerReference, to the client builds of React Flight. This function allows for the registration of server references that are present in the current environment and may also exist on a remote server. The update ensures that when a value originates from a remote server, it is automatically registered, facilitating the ability to pass references back to the server even when using the serverModuleMap option. This capability was previously available without the serverModuleMap, but the addition of this option had caused a break in the process due to the handling of real functions versus proxies.

The commit modifies several files, including ReactFlightClient.js and ReactFlightReplyClient.js, to implement the new registration functionality. It allows functions that have not yet been passed from the remote server to be registered eagerly, similar to the existing import('/server').registerServerReference(), but now also accessible via import('/client').registerServerReference(). The change also emphasizes that while the registration could potentially be shared, it might not always be feasible due to different remote server configurations. The commit includes updates to various test files to validate the new functionality, ensuring that server references can be successfully registered and passed back to the server as intended.

Files changed

• packages/react-client/src/ReactFlightClient.js
• packages/react-client/src/ReactFlightReplyClient.js
• packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js
• packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js
• packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js
• packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js
• packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js
• packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js
• packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js
• packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js
• packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
• packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReplyEdge-test.js
• packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js
• packages/react-server/src/ReactFlightReplyServer.js

This commit addresses an issue with the Discord notification title in the GitHub Actions workflow for publishing releases from NPM. The modification involves a change in the way the title is constructed, ensuring that the " (dry run)" suffix only appears when the inputs.dry condition is met, improving the clarity of the notification message.

Specifically, the update modifies the embed-title line in the .github/workflows/runtime_releases_from_npm_manual.yml file. The previous implementation did not handle the conditional output effectively, which could lead to unnecessary text in the title when a dry run was not performed. The new version ensures that the title is cleaner and more accurately reflects the action being taken.

Files changed

• .github/workflows/runtime_releases_from_npm_manual.yml

The commit updates the engines declaration in the eslint-plugin-react-hooks package to require Node.js version 18 or higher. This change is part of the preparations for merging the compiler plugin into the existing plugin, which is referenced in a related commit.

As a result of this update, there is a breaking change for users relying on older versions of Node, as the minimum required version has been raised from 10 to 18. The commit is co-authored by a contributor named Lauren.

Files changed

• packages/eslint-plugin-react-hooks/package.json

The recent commit for the eslint-plugin-react-hooks introduces a significant update by changing the alias for the recommended configuration to point to the newly implemented flat config instead of the legacy rc-based config. This change is part of a planned transition that began with version 5.2.0, where the flat config was initially labeled as recommended-latest. The update streamlines the user experience by making the flat config the default option, while the legacy configuration is still available under recommended-legacy for users who wish to continue using the older setup. Additionally, the recommended-latest config has been deprecated and will be removed in a future major version.

The README has been revised to reflect these changes, with clear instructions for users on how to transition to the flat config and maintain compatibility with the legacy config if needed. Furthermore, the commit includes updates to the v9 fixture to demonstrate the use of TypeScript configuration, ensuring that type validations are correct. This update marks a breaking change and is co-authored by a contributor, indicating collaborative development efforts for enhancing the plugin's functionality.

Files changed

• fixtures/eslint-v9/eslint.config.ts
• fixtures/eslint-v9/package.json
• fixtures/eslint-v9/tsconfig.json
• fixtures/eslint-v9/yarn.lock
• packages/eslint-plugin-react-hooks/README.md
• packages/eslint-plugin-react-hooks/src/index.ts

This commit addresses an issue in the GitHub Actions workflow configurations for the React project, specifically regarding the incorrect use of the continue-on-error option. Previously, this option was set to true in several job definitions to ensure that all jobs in the matrix would run regardless of failures, allowing for comprehensive failure identification during regression tests. However, it was noted that the continue-on-error setting allows a workflow to pass even if a job fails, which is misleading and not the intended behavior.

To rectify this, the commit replaces continue-on-error: true with the fail-fast: false option in multiple YAML workflow files. This change ensures that if a job fails, it will not falsely indicate success, aligning the workflow behavior with the intention of accurately reporting job outcomes. Overall, the update enhances the reliability of the testing process by ensuring that failures are appropriately reported and addressed.

Files changed

• .github/workflows/compiler_typescript.yml
• .github/workflows/devtools_regression_tests.yml
• .github/workflows/runtime_build_and_test.yml
• .github/workflows/runtime_eslint_plugin_e2e.yml