react changelog

This commit introduces a standardized permissions configuration across various GitHub workflows within the repository. Specifically, it adds an empty permissions: {} entry to multiple workflow YAML files, which serves to explicitly define the permissions needed for the workflows to execute. This change enhances security and clarity by ensuring that workflows operate with only the permissions they require, thereby reducing the risk of unintended access.

Additionally, some workflows have been updated to include specific permissions for actions like reading content and artifacts, particularly in jobs that depend on previous workflow outputs. Overall, this commit reflects a commitment to improving the governance of workflow permissions, aligning with best practices for GitHub Actions and enhancing the maintainability of the CI/CD pipeline.

Files changed

• .github/workflows/compiler_discord_notify.yml
• .github/workflows/compiler_playground.yml
• .github/workflows/compiler_prereleases.yml
• .github/workflows/compiler_prereleases_manual.yml
• .github/workflows/compiler_prereleases_nightly.yml
• .github/workflows/compiler_prereleases_weekly.yml
• .github/workflows/compiler_typescript.yml
• .github/workflows/devtools_regression_tests.yml
• .github/workflows/runtime_build_and_test.yml
• .github/workflows/runtime_discord_notify.yml
• .github/workflows/runtime_eslint_plugin_e2e.yml
• .github/workflows/runtime_fuzz_tests.yml
• .github/workflows/runtime_prereleases.yml
• .github/workflows/runtime_prereleases_manual.yml
• .github/workflows/runtime_prereleases_nightly.yml
• .github/workflows/runtime_releases_from_npm_manual.yml
• .github/workflows/shared_check_maintainer.yml
• .github/workflows/shared_cleanup_merged_branch_caches.yml
• .github/workflows/shared_cleanup_stale_branch_caches.yml
• .github/workflows/shared_close_direct_sync_branch_prs.yml
• .github/workflows/shared_label_core_team_prs.yml
• .github/workflows/shared_lint.yml
• .github/workflows/shared_stale.yml

This commit updates the runtime_commit_artifacts.yml file to include necessary permissions for writing to the contents section of GitHub actions. The changes were made because it was determined that write permissions are required for the workflow to function correctly when pushing commits to the builds/facebook-www and builds/facebook-fbsource repositories.

Specifically, the commit adds six lines to the YAML configuration, specifying the permissions needed for the relevant jobs in the workflow. This adjustment ensures that the actions can properly execute without encountering permission errors when attempting to commit artifacts.

Files changed

• .github/workflows/runtime_commit_artifacts.yml

This commit optimizes the handling of React components defined with arrow functions and implicit returns when using the compilationMode: 'infer' setting. It addresses issues related to the identification of return types in these components, which can improve compilation efficiency and correctness. The main change involves modifying the logic in the returnsNonNode function to streamline how it determines whether a return statement yields a non-node value, thus enhancing the performance of the React compiler.

Additionally, the commit introduces new test fixtures to validate the behavior of the compiler with arrow functions that utilize implicit returns. These tests ensure that the optimizations are functioning as intended and provide a reference for expected output. Overall, the changes aim to refine the compilation process for a common pattern in React component definitions, ultimately contributing to better performance and reliability in React applications.

Files changed

• compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-with-implicit-return.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/arrow-function-with-implicit-return.js

This commit introduces significant enhancements to the compiler's handling of function types by adding an isConstructor: boolean property to the FunctionType. This addition allows the compiler to differentiate between constructors (currently only known globals) and non-constructors, thereby improving the encoding of polymorphic types and effects. Additionally, the commit includes the implementation of global built-ins for Map and Set, which are essential data structures in JavaScript.

To support these changes, various files in the codebase have been modified, including updates to the global types and type inference mechanisms. Furthermore, new test fixtures have been added to ensure that the functionality of the Map and Set constructors is correctly implemented and validated, covering aspects such as mutation and iteration. Overall, this commit enhances the type system and adds critical features that improve the robustness of the compiler's functionality.

Files changed

• compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts
• compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
• compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts
• compiler/packages/babel-plugin-react-compiler/src/HIR/Types.ts
• compiler/packages/babel-plugin-react-compiler/src/Inference/InferReferenceEffects.ts
• compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/map-constructor.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/map-constructor.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-add-mutate.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-add-mutate.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor-arg.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor-arg.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-copy-constructor-mutate.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-copy-constructor-mutate.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-for-of-iterate-values.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-for-of-iterate-values.ts

The commit introduces a new feature called Effect.ConditionallyMutateIterator to the compiler's optimization process. This feature is designed to handle known data structures such as arrays, maps, and sets by capturing their states, while allowing mutations for all other value types. This approach provides a more nuanced control over how different data types are treated during compilation, potentially improving performance and correctness.

In addition to the new feature, several files within the Babel plugin for the React compiler have been modified to support this change. Key updates were made in the HIR (High-Level Intermediate Representation) and inference modules, along with various test fixtures to validate the new behavior. Some tests were added, while others were modified to ensure comprehensive coverage of the new iterator semantics, particularly focusing on the interaction of the new effect with built-in data structures. An alternative approach considered was the addition of polymorphic shape definitions, but this commit opts for the conditionally mutative strategy.

Files changed

• compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts
• compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
• compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutableLifetimes.ts
• compiler/packages/babel-plugin-react-compiler/src/Inference/InferReactivePlaces.ts
• compiler/packages/babel-plugin-react-compiler/src/Inference/InferReferenceEffects.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-arg1-captures-arg0.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-captures-arg0.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-maybemutates-arg0.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-from-maybemutates-arg0.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/call-spread-argument-set.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/call-spread-argument-set.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor-arg.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-constructor-arg.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-foreach-mutate.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-types/set-foreach-mutate.tsx
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-granular-iterator-semantics.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-granular-iterator-semantics.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-inference-array-from.expect.md

This commit introduces the getRootNode(options) method for fragment instances in React, allowing it to function similarly to the existing getRootNode method on a fragment's parent host node. By implementing this feature, fragment instances can now return the root node of their parent, enhancing their interaction with the DOM. The commit includes modifications to several files, notably adding the new method to the FragmentInstanceType and updating relevant tests to validate its functionality.

In addition to the new method, the commit also adds utility functions to help retrieve the parent host instance of a fragment, which will be useful for future developments, such as proxying event dispatches. The changes include updates to the React DOM bindings and reconciliation logic, alongside comprehensive tests to ensure that the new functionality behaves as expected in various scenarios, including when fragments are mounted and unmounted. Overall, this enhancement aims to improve the usability and integration of fragment instances within the React ecosystem.

Files changed

• packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
• packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js
• packages/react-noop-renderer/src/createReactNoop.js
• packages/react-reconciler/src/ReactFiberTreeReflection.js

This commit addresses a bug related to the hoisting of let declarations in the React compiler, which was discovered while compiling Meta React code. The issue arose from the way let variable declarations and reassignments were being transformed into StoreLocal <varName> instructions, leading to incorrect code generation. Specifically, this transformation resulted in duplicate declarations and errors related to the temporal dead zone (TDZ) when the original function declaration was replaced with the compiler output. The changes made in this commit ensure that let declarations are handled correctly, preserving the TDZ and preventing duplicate declarations in the compiled output.

The modifications include significant updates to the PruneHoistedContexts.ts file, introducing new symbols to differentiate between hoisted constants and let declarations. The code now ensures that only the first encountered StoreContext instruction for let variables results in a DeclareContext, thus preventing multiple hoisted declarations. Additionally, several test cases were added or modified to validate the correct behavior of let declarations in various scenarios, ensuring that the compiler output aligns with expected JavaScript behavior and does not trigger internal errors. Overall, this commit improves the reliability of the React compiler's handling of variable scope and declarations.

Files changed

• compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneHoistedContexts.ts
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-invalid-tdz-let.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-invalid-tdz-let.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-let-declaration.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-let-declaration.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-twice-let-declaration.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-reassigned-twice-let-declaration.js
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/recursive-function-expression.expect.md
• compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/recursive-function-expression.js

This commit addresses issues related to the notification and labeling actions for forked repositories in pull requests (PRs). It ensures that these actions can execute against the target repository without needing to check out the code from the PR, making it safe to run directly from the target.

Additionally, the commit resolves previously failing checks on PRs, thereby improving the overall functionality and reliability of the CI process. The changes aim to enhance the workflow for contributors working with forked repositories, ensuring they receive appropriate notifications and labels during the PR review process.

Files changed

This commit introduces a new feature in the artifact download process that verifies the integrity of downloaded artifacts by utilizing GitHub's attestation verification tool. When downloading artifacts from a specific commit, the script now checks whether the downloaded files match the attestation generated during the build process. If attestations are not available, an error message will be displayed, indicating that the verification failed due to a 404 error. Conversely, when attestations are present, the artifacts can be successfully downloaded and verified.

The changes involve modifications to the download-build-artifacts.js script, where additional logic has been added to check for the availability of the gh command-line tool and to execute the attestation verification process. This enhancement aims to improve the security and reliability of the artifact downloading workflow by ensuring that only verified builds are utilized, thereby reducing the risk of using potentially compromised artifacts.

Files changed

• scripts/release/shared-commands/download-build-artifacts.js

This commit introduces an explicit "auto" class in React's ViewTransition system, which signifies that the built-in animation should be used for transitions. Previously, a ViewTransition class of "none" indicated the absence of a class and a ViewTransition name, while the default state (null or undefined) suggested that no specific class was assigned but the default animation would run. By adding the "auto" class, developers can now specify transitions more flexibly, allowing for cases like <ViewTransition default="foo" enter="auto">, where the "enter" transition can utilize the default animation while still having a specific default for the rest of the transitions.

The changes involve modifications to the ReactFiberViewTransitionComponent.js file, where the type definitions for ViewTransition classes are updated to include the new "auto" option. This enhances the functionality and clarity of how transitions are managed, ensuring that when "auto" is specified, it correctly returns null for class names, thereby preventing conflicts with other specified classes. Overall, this commit improves the usability of the ViewTransition feature in React, allowing for more intuitive and explicit control over animations.

Files changed

• packages/react-reconciler/src/ReactFiberViewTransitionComponent.js

The recent commit introduces a helper function, getComputedStyle, to the ViewTransitionPseudoElement class within the React DOM bindings. This addition allows developers to retrieve the computed styles of a pseudo-element, which can be particularly useful for cases where accessing the styles without an ongoing animation is necessary.

The implementation involves modifying the ViewTransitionPseudoElementType interface to include the new method, and the getComputedStyle function itself leverages the existing getComputedStyle function to return the style declaration for the specified element and selector. The changes enhance the functionality of view transitions by providing better access to styling information, thereby improving the flexibility and usability of the animation features in React.

Files changed

• packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

The commit titled "Mark shouldStartViewTransition as true when there's an enter animation" addresses a gap in the handling of view transitions during the snapshot phase of React's rendering process. Previously, the system did not correctly mark "enter" animations as needing to call startViewTransition, which would prevent them from animating unless accompanied by another update. This update introduces a new function, trackEnterViewTransitions, which checks if a ViewTransitionComponent is present in the component tree. If found, it sets a flag to ensure that the view transition can start even if no additional updates occur.

The changes made in this commit involve modifications to two files within the React reconciler package. The trackEnterViewTransitions function is added to track the presence of entering view transitions without needing to traverse the component tree, thanks to a static flag. Additionally, this function is invoked during the commit phase to ensure that entering transitions are appropriately marked for animation. Overall, this enhancement aims to improve the responsiveness and visual fluidity of React applications by ensuring that entering components can animate as intended.

Files changed

• packages/react-reconciler/src/ReactFiberCommitViewTransitions.js
• packages/react-reconciler/src/ReactFiberCommitWork.js