react changelog 

Here's the latest and greatest update on our project! 🎉 Check out the new features, improvements, and bug fixes we've rolled out:

### New Features
- **Support for Custom fbt-like Macro Functions**: The compiler now supports custom fbt-like macro functions! This allows developers to specify functions that compile as macros, enhancing the flexibility and power of the compiler. 🚀
- **MetaProperty Support**: We've added support for MetaProperty expressions in the compiler, allowing for more versatile coding scenarios. This includes updates to handle MetaProperty expressions and necessary test fixtures.
- **Pruned-Scope Terminal in HIR**: Introducing the PrunedScopeTerminal to the Higher-level Intermediate Representation (HIR) in the compiler. This new terminal type allows for scope-pruning passes to operate on HIR, paving the way for future optimizations.
- **HIR-based FlattenReactiveLoops**: We've implemented an HIR-based version of FlattenReactiveLoops, progressing towards HIR-everywhere. This change prunes reactive scopes within loops to simplify reconciliation.

### Improvements
- **Errored/Blocked Direct References Handling**: Errored or blocked direct references now turn the nearest element lazy, letting the nearest Suspense/Error Boundary handle it. This improvement enhances error tracking and handling during serialization of properties.
- **Nearest Parent of Errored Promise as Owner**: The nearest parent of an errored promise is now considered its owner/task, ensuring accurate error handling, especially with Server Components.

### Bugfixes
- **Treat Pruned Scope Outputs as Reactive**: Outputs of pruned reactive scopes are now treated as reactive, addressing inconsistencies where downstream scopes could depend on non-memoized values.
- **Remove Warning Prefix and toString on Console Arguments**: We've removed the 'Warning: ' prefix and automatic toString conversion on console.error and console.warn, allowing for richer and clearer logging.
- **Revert Bad Push**: Reverted a previous bad push to correct workflow and artifact handling issues.

### Chore
- **Remove Unused Scripts**: Cleaned up the compiler's package.json file by removing unused scripts, making the codebase cleaner and more efficient.

That's all for now! Keep coding and stay awesome! 😎💻

Included Commits

2024-06-07T19:10:59 See commit

This commit addresses the issue with non-reactive pruned scopes by ensuring that the outputs of pruned reactive scopes are treated as reactive. Previously, values from pruned scopes were not memoized, leading to potential inconsistencies where downstream scopes could depend on these values assuming they would never change. This fix aims to prevent developers from observing different versions of a value - a freshly created one if observed outside a scope, or a cached one if observed inside a scope that used the value but did not depend on it.

Although this fix is considered partial, as it does not cover control variables, it should resolve most issues in practice. The ultimate solution involves marking these values as reactive and re-running InferReactivePlaces, which can be done once the pipeline is fully converted to use HIR everywhere. This commit should address the issue of non-reactive pruned scopes and improve the consistency of value observations within different scopes.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CollectReactiveIdentifiers.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-pruned-scope-leaks-value.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-pruned-scope-leaks-value.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-of.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-mutable-map-after-hook.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value-via-alias.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value-via-alias.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-pruned-scope-leaks-value.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-reactivity-value-block.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-reactivity-value-block.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/unmemoized-nonreactive-dependency-is-pruned-as-dependency.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-call-second-function-which-captures-maybe-mutable-value-dont-preserve-memoization.expect.md
  • compiler/packages/snap/src/SproutTodoFilter.ts
2024-06-08T23:18:35 See commit

This commit introduces support for MetaProperty in the compiler. The changes include modifications to various files such as BuildHIR.ts, HIR.ts, PrintHIR.ts, and others to handle MetaProperty expressions. The commit also includes additions to test fixtures and updates to the tsconfig.json file to include support for .mjs and .cjs file extensions for testing.

The testing of this feature was limited to the playground as the test runner does not currently support running tests as modules. The changes allow the compiler to handle MetaProperty expressions other than import.meta, with error handling in place for unsupported nodes. Overall, the commit enhances the compiler's capabilities by adding support for MetaProperty expressions and includes necessary updates to test fixtures and configuration files.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/visitors.ts
  • compiler/packages/babel-plugin-react-compiler/src/Inference/InferReferenceEffects.ts
  • compiler/packages/babel-plugin-react-compiler/src/Optimization/DeadCodeElimination.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/InferReactiveScopeVariables.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneNonEscapingScopes.ts
  • compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-new-target-meta-property.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-new-target-meta-property.js
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-property.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-property.mjs
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/tsconfig.json
  • compiler/packages/snap/src/SproutTodoFilter.ts
  • compiler/packages/snap/src/fixture-utils.ts
2024-06-10T14:51:07 See commit

This commit reverts a bad push that was made previously. The changes made in the commit include modifications to the commit_artifacts.yml file, with 49 additions and 51 deletions. The changes involve adjusting the branches for push events and making adjustments to the workflow for downloading artifacts. The commit also includes changes to the conditions for committing www and fbsource artifacts, as well as adjustments to the signing process for files in the compiled-rn directory. Additionally, the commit includes changes related to handling GitHub authentication tokens in the CircleCI workflow.

Overall, this commit addresses the issues caused by the bad push and reverts the changes to the previous state. It involves modifications to the workflow for handling artifacts, adjusting branch conditions for committing artifacts, and making changes to the signing process for files in the compiled-rn directory. The commit also includes adjustments related to GitHub authentication tokens and handling status states during the workflow execution.

Files changed

  • .github/workflows/commit_artifacts.yml
2024-06-10T20:22:09 See commit

This commit adds a new terminal called PrunedScopeTerminal to the Higher-level Intermediate Representation (HIR) in the compiler. This addition allows for the scope-pruning passes to be ported to operate on the HIR. The changes include modifications to the HIR.ts file to define the new PrunedScopeTerminal type, as well as updates to the PrintHIR.ts and visitors.ts files to handle printing and mapping of this new terminal type. Additionally, adjustments were made in the BuildReactiveFunction.ts file to incorporate the handling of PrunedScopeTerminal within the driver class.

Overall, this commit enhances the functionality of the compiler by introducing a pruned-scope terminal in the HIR, paving the way for future scope-pruning passes to be implemented at the higher level of the compiler. The changes made across multiple files ensure that the new terminal type is properly defined, printed, and processed within the compiler's operations, contributing to the ongoing development and optimization of the compiler's capabilities.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
  • compiler/packages/babel-plugin-react-compiler/src/HIR/visitors.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts
2024-06-10T20:22:12 See commit

This commit implements an HIR-based version of FlattenReactiveLoops, marking progress towards HIR-everywhere. The changes include modifications to the Pipeline.ts file, adding the flattenReactiveLoopsHIR function to handle reactive scopes within loops. This function prunes any reactive scopes within loops like for, while, etc., as memoization within loops is not yet supported. The function ensures that memoization occurs around the loop rather than within it, to simplify reconciliation.

Additionally, a new file FlattenReactiveLoopsHIR.ts is added, which contains the implementation of the flattenReactiveLoopsHIR function. This function iterates through the blocks of the HIR function, identifying active loops and prunes any reactive scopes within those loops. It adjusts the block's terminal based on whether it is within an active loop or not. This change aims to improve the handling of reactive scopes within loops and sets the stage for potential future integration with the runtime for more efficient reconciliation.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/FlattenReactiveLoopsHIR.ts
2024-06-10T22:41:56 See commit

This commit removes the 'Warning: ' prefix and the automatic toString conversion on arguments passed to console.error and console.warn, making them behave more like normal console logs. The reason for this change is to allow for the printing of richer logs with the component stack option and to disable instrumentation in console.createTask environments that do not require it. The 'Warning: ' prefix was deemed unnecessary and potentially misleading, as it could imply an error level when using console.error. By removing these prefixes and toString conversions, the logs can now display richer objects without unnecessary formatting.

This change affects multiple test files and internal modules across different packages, as it modifies the behavior of console.error and console.warn in various scenarios. The commit also mentions that React Native may need to make adjustments before this change can be fully implemented, as it depends on the prefix in a way that may not align with the new approach. Overall, this update aims to streamline the logging process and improve the clarity of console messages within the React codebase.

Files changed

  • packages/internal-test-utils/shouldIgnoreConsoleError.js
  • packages/react-cache/src/__tests__/ReactCacheOld-test.internal.js
  • packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
  • packages/react-devtools-shared/src/__tests__/setupTests.js
  • packages/react-devtools-shared/src/__tests__/store-test.js
  • packages/react-devtools-shell/src/app/index.js
  • packages/react-dom-bindings/src/client/validateDOMNesting.js
  • packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
  • packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
  • packages/react-dom/src/__tests__/ReactComponent-test.js
  • packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js
  • packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
  • packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js
  • packages/react-dom/src/__tests__/ReactDOM-test.js
  • packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
  • packages/react-dom/src/__tests__/ReactDOMComponent-test.js
  • packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js
  • packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
  • packages/react-dom/src/__tests__/ReactDOMFloat-test.js
  • packages/react-dom/src/__tests__/ReactDOMForm-test.js
  • packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
  • packages/react-dom/src/__tests__/ReactDOMInput-test.js
  • packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js
  • packages/react-dom/src/__tests__/ReactDOMOption-test.js
  • packages/react-dom/src/__tests__/ReactDOMSelect-test.js
  • packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
  • packages/react-dom/src/__tests__/ReactDOMServerIntegrationLegacyContext-test.js
  • packages/react-dom/src/__tests__/ReactDOMServerIntegrationRefs-test.js
  • packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js
  • packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.js
  • packages/react-dom/src/__tests__/ReactDOMSingletonComponents-test.js
  • packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
  • packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.js
  • packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
  • packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
  • packages/react-dom/src/__tests__/ReactLegacyMount-test.js
  • packages/react-dom/src/__tests__/ReactLegacyUpdates-test.js
  • packages/react-dom/src/__tests__/ReactMountDestruction-test.js
  • packages/react-dom/src/__tests__/ReactMultiChildText-test.js
  • packages/react-dom/src/__tests__/ReactRenderDocument-test.js
  • packages/react-dom/src/__tests__/ReactServerRendering-test.js
  • packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
  • packages/react-dom/src/__tests__/ReactUpdates-test.js
  • packages/react-dom/src/__tests__/findDOMNodeFB-test.js
  • packages/react-dom/src/__tests__/refs-test.js
  • packages/react-dom/src/__tests__/validateDOMNesting-test.js
  • packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js
  • packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
  • packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
  • packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
  • packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
  • packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
  • packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
  • packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
  • packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
  • packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
  • packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
  • packages/react-reconciler/src/__tests__/ReactMemo-test.js
  • packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js
  • packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
  • packages/react-reconciler/src/__tests__/ReactUse-test.js
  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js
  • packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js
  • packages/react/src/__tests__/ReactChildren-test.js
  • packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
  • packages/react/src/__tests__/ReactContextValidator-test.js
  • packages/react/src/__tests__/ReactES6Class-test.js
  • packages/react/src/__tests__/ReactElementClone-test.js
  • packages/react/src/__tests__/ReactElementValidator-test.internal.js
  • packages/react/src/__tests__/ReactJSXElementValidator-test.js
  • packages/react/src/__tests__/ReactJSXRuntime-test.js
  • packages/react/src/__tests__/ReactPureComponent-test.js
  • packages/react/src/__tests__/ReactStrictMode-test.js
  • packages/react/src/__tests__/ReactTypeScriptClass-test.ts
  • packages/react/src/__tests__/createReactClassIntegration-test.js
  • packages/react/src/__tests__/forwardRef-test.js
  • packages/shared/consoleWithStackDev.js
2024-06-11T00:26:10 See commit

This commit removes two unused scripts, "bundle:meta" and "bundle:oss", from the compiler's package.json file. These scripts were no longer being utilized and were therefore deleted to streamline the codebase. The changes made in this commit resulted in a reduction of 2 lines of code in the package.json file.

The pull request associated with this commit has been resolved, and the changes have been successfully implemented in the codebase. By removing the unused scripts, the compiler's package.json file is now cleaner and more efficient, with unnecessary code removed. This helps improve the overall maintainability and readability of the codebase for developers working on the project.

Files changed

  • compiler/package.json
2024-06-11T22:10:24 See commit

This commit (#29814) introduces a change in error handling for promises in React. Previously, the owner and task of an errored promise were determined based on the nearest Fiber. However, with this update, the nearest parent of an errored promise is now considered as its owner/task. This change ensures that the error's owner/task is captured correctly, especially in scenarios involving Server Components.

To implement this change, modifications were made in various files such as ReactFlightClient, ReactFlight-test, getComponentNameFromFiber, ReactChildFiber, ReactFlightServer, and ReactTypes. Specifically, a new approach was implemented to determine the owner/task of an error, with special attention given to Server Components. Additionally, serialization issues related to ConsoleTask objects were addressed to ensure proper error handling in different components/tasks. Overall, this update enhances error handling for promises in React by accurately identifying the owner/task of an errored promise.

Files changed

  • .eslintrc.js
  • packages/react-client/src/ReactFlightClient.js
  • packages/react-client/src/__tests__/ReactFlight-test.js
  • packages/react-reconciler/src/ReactChildFiber.js
  • packages/react-reconciler/src/getComponentNameFromFiber.js
  • packages/react-server/src/ReactFlightServer.js
  • packages/shared/ReactTypes.js
2024-06-11T23:12:39 See commit

This commit allows errored or blocked direct references to turn the nearest element lazy, meaning that the nearest Suspense/Error Boundary can handle the error even if it is defined by the model itself. It ensures that errors during serialization of properties can be associated with the nearest JSX element, allowing for the source code of that line to be identified. While the component name may be lost in error messages, efforts have been made to improve error handling and identification of source code lines.

The implementation of this feature focuses on the Client rather than the Server, as it covers Client References that may encounter errors. By tracking the phases of Elements during JSON parsing, the mechanism for handling blocked information has been refactored to allow the nearest element or root Chunk to handle errors. The commit also suggests further exploration of edge cases by interested contributors.

Files changed

  • .eslintrc.js
  • packages/react-client/src/ReactFlightClient.js
  • packages/react-client/src/__tests__/ReactFlight-test.js
  • packages/react-reconciler/src/ReactFiberBeginWork.js
  • packages/react-reconciler/src/getComponentNameFromFiber.js
  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
  • packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
  • packages/react-server/src/ReactFlightServer.js
2024-06-14T00:18:16 See commit

This commit introduces support for custom fbt-like macro functions in the compiler. It includes changes to the Environment configuration schema to add a new field called customMacros, which allows specifying functions that the application compiles as macros. These custom macros are handled in a way that ensures they are not compiled to rename the macro or separate the function from its argument, similar to how the Meta APIs such as featureflag("name-of-feature-flag") are handled. Additionally, the commit includes modifications to various files such as CodegenReactiveFunction.ts, index.ts, and MemoizeFbtAndMacroOperandsInSameScope.ts to implement the support for custom macros and update references accordingly.

Furthermore, the commit includes additions to test fixtures and the compiler to accommodate the changes related to custom macros. For example, a new test fixture repro-cx-assigned-to-temporary.js is added to demonstrate the usage of custom macros, and modifications are made to the compiler to handle the custom macros specified in the source code. Overall, this commit enhances the compiler's capabilities by allowing developers to define and use custom macro functions similar to fbt in their applications.

Files changed

  • compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts
  • compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/index.ts
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-assigned-to-temporary.expect.md
  • compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-assigned-to-temporary.js
  • compiler/packages/snap/src/compiler.ts