react changelog

The commit introduces a new feature to the ReactNoopFlightClient by adding the findSourceMapURL function, which is designed to enhance the handling of source maps within the React framework. This addition is reflected in the ReactNoopFlightClient.js file, where the FindSourceMapURLCallback type is imported and incorporated into the existing code structure. The read function is modified to accept an optional options parameter, allowing users to specify a callback for finding source map URLs.

In total, the changes consist of 8 new lines added and 2 lines removed, resulting in 10 modifications overall. The update aims to improve the functionality and flexibility of the React Noop renderer, particularly in scenarios where source maps are utilized, thereby enhancing the debugging experience for developers working with React applications.

Files changed

• packages/react-noop-renderer/src/ReactNoopFlightClient.js

This commit introduces the concept of "owner stacks" to the React DevTools, enhancing the component stack information available during debugging. When the enableOwnerStacks flag is activated, the DevTools will utilize the owner stacks from the Fiber architecture, providing more contextual information about component relationships. If this flag is not enabled, the DevTools will revert to using parent stacks. This change is particularly beneficial for visualizing "rendered by" relationships for components, especially when dealing with non-current components. The implementation replicates existing internal logic rather than injecting it, allowing for flexibility in future modifications without being tightly coupled to the core internals.

Additionally, the commit notes that the current synchronous stack will not be included in the owner stack view, as the owner stack lacks the name of the executing component. The author plans to address this by incorporating the current stack alongside the owner stack in future updates. The changes affect several files within the DevTools, including new implementations for owner stacks and modifications to existing testing frameworks to ensure compatibility and functionality.

Files changed

• packages/react-devtools-extensions/package.json
• packages/react-devtools-shared/src/__tests__/componentStacks-test.js
• packages/react-devtools-shared/src/__tests__/console-test.js
• packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js
• packages/react-devtools-shared/src/backend/DevToolsOwnerStack.js
• packages/react-devtools-shared/src/backend/console.js
• scripts/jest/devtools/setupEnv.js
• yarn.lock

This commit addresses a false positive issue related to the ValidatePreserveManualMemo function in the React compiler. The change was initiated to reproduce the specific scenario that leads to this false positive, ensuring that the validation process accurately reflects the intended behavior without unnecessary errors.

The commit is part of a broader effort to enhance the reliability of the React compiler by identifying and resolving edge cases that may lead to incorrect validations. By reproducing the issue, the team aims to better understand the underlying problem and ultimately improve the overall performance and correctness of the compilation process.

Files changed

The commit introduces a significant enhancement to the React DevTools by modifying how the current component stack is logged in the console. Specifically, it prefixes the owner stack with the current stack when an error or warning is logged. This change addresses the limitation of the native UI, where the current stack is hidden by default and not presented alongside the error message, making it difficult for developers to trace issues. By ensuring that the current stack is displayed first, developers can more easily identify the source of errors and warnings in their components.

The implementation includes modifications to the console.js file, where the logic for constructing the component stack has been updated to incorporate the current stack using a new formatOwnerStack function. Additionally, the changes were co-authored by Ruslan Lesiutin, and the commit also includes updates to tests to reflect the new logging behavior. Overall, this commit enhances the debugging experience for developers working with React by providing clearer visibility into the component hierarchy during error reporting.

Files changed

• packages/react-devtools-shared/src/__tests__/componentStacks-test.js
• packages/react-devtools-shared/src/__tests__/console-test.js
• packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js
• packages/react-devtools-shared/src/backend/console.js

This commit addresses a critical issue in the React compiler regarding the handling of identifier mutable ranges after scopes have been constructed. It highlights that once scopes are established, relying on mutable ranges for identifiers becomes invalid, particularly in the context of validating memoized effect dependencies. The commit specifically modifies the ValidateMemoizedEffectDeps and ValidatePreservedManualMemoization functions to ensure that if a dependency requires memoization, its corresponding scope must exist and be completed. Any identifiers that do not meet these criteria will result in an error, thereby enhancing the integrity of the memoization process.

Additionally, the commit includes a significant cleanup of the codebase, removing outdated logic related to mutable ranges and refining the validation mechanisms for memoization. The changes also introduce new tests to ensure the correct functioning of memoization with references, replacing an old test that produced false positives. Overall, this commit improves the robustness of the React compiler's handling of memoization, ensuring that it adheres to the expected behaviors and constraints of scope management.

Files changed

• compiler/packages/babel-plugin-react-compiler/src/HIR/BuildReactiveScopeTerminalsHIR.ts
• compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateMemoizedEffectDependencies.ts
• compiler/packages/babel-plugin-react-compiler/src/Validation/ValidatePreservedManualMemoization.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.false-positive-useMemo-with-refs.flow.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-refs.flow.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-refs.flow.js
• compiler/packages/snap/src/SproutTodoFilter.ts

This commit addresses a critical issue in the Babel plugin for React where new (Arrow)FunctionExpressions were incorrectly inserted as siblings to the original function expressions. This approach led to problems, particularly in outlining cases, as it transformed the parent of the original function into a SequenceExpression, violating several assumptions within the plugin. To resolve this, the commit introduces a new method to synthesize a VariableDeclaration that holds the newly inserted function expression. This ensures that the new function expression is treated as a true sibling to the original function without disrupting the parent structure.

The changes involve modifying the insertNewFunctionNode function to handle the insertion correctly based on the type of the original function. The commit also includes various assertions to ensure that the inserted function expressions are valid and correctly structured. Additionally, it removes outdated test cases that were no longer applicable due to these changes and adds new tests to validate the correct behavior of the outlining functionality. Overall, while the solution may seem complex, it effectively resolves the outlined issues while maintaining the integrity of the code structure within the Babel plugin.

Files changed

• compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-outlining-in-func-expr.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-outlining-in-func-expr.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-func-expr.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-func-expr.js

This commit addresses a bug related to the resolution of references to deduplicated properties in lazy-loaded elements within a React application. The issue arose when a model referenced a deduplicated object of a blocked element that had been transformed into a lazy element. The fix ensures that the system waits for the lazy element's chunk to resolve before attempting to access its properties, thereby preventing a runtime error that occurred when trying to read properties of an undefined value. This was highlighted by a new test that failed due to the absence of this handling.

The changes made include modifications to the getOutlinedModel function to check if the value being accessed is of the lazy type. If it is, the code now correctly waits for the referenced chunk to resolve before proceeding. Additionally, a new test was added to verify that deduplicated objects in blocked models referencing other blocked models are resolved correctly. This fix is crucial for maintaining the integrity of data rendering in the application, especially after the recent update of React in the Next.js framework.

Files changed

• packages/react-client/src/ReactFlightClient.js
• packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js

The commit introduces a new feature to the React Server Components (RSC) server, allowing developers to customize the stack frame filtering when errors are sent to the client. This feature is particularly useful for excluding specific functions, such as those within node_modules, from the stack trace. The filtering mechanism is designed to enhance error reporting by providing cleaner and more relevant stack traces, although it does not filter out Server Components from the parent stack, maintaining a view of the component tree.

Key changes include the addition of a filterStackFrame option in various server modules that allows users to define their own filtering logic. The commit also includes modifications to existing test cases to validate the new functionality, ensuring that the error handling behaves as expected in development mode. Overall, this enhancement aims to improve the developer experience by making error debugging more straightforward and manageable.

Files changed

• packages/react-client/src/__tests__/ReactFlight-test.js
• packages/react-html/src/ReactHTMLServer.js
• packages/react-noop-renderer/src/ReactNoopFlightServer.js
• packages/react-server-dom-esm/src/ReactFlightDOMServerNode.js
• packages/react-server-dom-turbopack/src/ReactFlightDOMServerBrowser.js
• packages/react-server-dom-turbopack/src/ReactFlightDOMServerNode.js
• packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
• packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
• packages/react-server/src/ReactFlightServer.js

This commit enhances the React Flight framework by incorporating the environment name into the virtual URL and the findSourceMapURL function. This addition allows developers to better identify and locate source maps in scenarios where multiple server environments are in use. The changes involve modifying the public protocol to include the environment name, which is parsed from the rsc://React/ prefixed URLs during the stack trace capture process.

In terms of implementation, the commit introduces modifications across several files, primarily in the ReactFlightClient.js, where the FindSourceMapURLCallback type is updated to accept an additional environmentName parameter. This change propagates through various functions that build call stacks and manage error handling, ensuring that the environment context is preserved. Additionally, test cases in ReactFlight-test.js are adjusted to accommodate the new environment parameter, ensuring that the functionalities are thoroughly validated and that the expected behavior aligns with the updated protocol. Overall, this commit aims to improve debugging capabilities within React's server-rendered components by providing clearer context for source map retrieval.

Files changed

• packages/react-client/src/ReactFlightClient.js
• packages/react-client/src/__tests__/ReactFlight-test.js
• packages/react-server/src/ReactFlightServer.js

This commit introduces a new GitHub Actions workflow specifically for running regression tests on the React DevTools. The workflow, titled "DevTools Regression Tests," is designed to automate various tasks, including downloading the necessary builds, processing artifacts, and executing tests across multiple versions of React. It includes steps for setting up the environment, caching dependencies, and archiving important build artifacts such as the DevTools and browser extensions.

While the commit is primarily a direct copy from the existing CircleCI configuration, the author notes some inefficiencies that they plan to address in future updates. The workflow is scheduled to run automatically on a cron basis and can also be triggered manually with optional inputs, such as a specific commit SHA for prerelease testing. Overall, this addition aims to enhance the CI/CD process for React DevTools by ensuring that regression tests are consistently executed and monitored.

Files changed

• .github/workflows/devtools_regression_tests.yml

This commit removes the devtools_regression_tests workflow from CircleCI, as it has been migrated to GitHub Actions. The changes involve significant modifications to the .circleci/config.yml file, resulting in the deletion of 124 lines of code that were previously responsible for managing various jobs related to downloading builds, processing artifacts, and running regression tests for React DevTools across different versions.

The removal of this workflow is part of an effort to streamline the testing process by consolidating it within GitHub Actions, which may offer improved integration and efficiency. This transition reflects a broader trend in software development to leverage GitHub's capabilities for CI/CD, thereby enhancing the overall development workflow for the React project.

Files changed

• .circleci/config.yml

This commit introduces a temporary fork of the runtime_commit_artifacts workflow within the GitHub Actions framework, aimed at facilitating the testing of artifact dependencies without requiring immediate merging into the main branch. The original job for DiffTrain remains unchanged, while the new forked workflow is designed to download artifacts from the latest commit. The steps that previously pushed changes to protected branches have been removed to ensure a safe testing environment, and the workflow is set to trigger only after the completion of the runtime_build_and_test workflow to prevent failures due to unbuilt artifacts.

The added workflow file, runtime_commit_artifacts_v2.yml, includes detailed steps for checking out necessary code, retrieving version strings, and organizing files into a compiled structure for both Meta WWW and fbsource. It incorporates various job steps, such as caching node modules, downloading artifacts, and moving relevant files into designated folders. Finally, the workflow uploads the compiled artifacts for future use, ensuring that the process is both efficient and organized while maintaining compatibility with existing systems.

Files changed

• .github/workflows/runtime_commit_artifacts_v2.yml