mirror of
https://github.com/facebook/react.git
synced 2026-02-26 18:58:05 +00:00
edd05f181b
This PR adds a `unstable_reactFragments?: Set<FragmentInstance>` property to DOM nodes that belong to a Fragment with a ref (top level host components). This allows you to access a FragmentInstance from a DOM node. This is flagged behind `enableFragmentRefsInstanceHandles`. The primary use case to unblock is reusing IntersectionObserver instances. A fairly common practice is to cache and reuse IntersectionObservers that share the same config, with a map of node->callbacks to run for each entry in the IO callback. Currently this is not possible with Fragment Ref `observeUsing` because the key in the cache would have to be the `FragmentInstance` and you can't find it without a handle from the node. This works now by accessing `entry.target.fragments`. This also opens up possibilities to use `FragmentInstance` operations in other places, such as events. We can do `event.target.unstable_reactFragments`, then access `fragmentInstance.getClientRects` for example. In a future PR, we can assign an event's `currentTarget` as the Fragment Ref for a more direct handle when the event has been dispatched by the Fragment itself. The first commit here implemented a handle only on observed elements. This is awkward because there isn't a good way to document or expose this temporary property. `element.fragments` is closer to what we would expect from a DOM API if a standard was implemented here. And by assigning it to all top-level nodes of a Fragment, it can be used beyond the cached IntersectionObserver callback. One tradeoff here is adding extra work during the creation of FragmentInstances as well as keeping track of adding/removing nodes. Previously we only track the Fiber on creation but here we add a traversal which could apply to a large set of top-level host children. The `element.unstable_reactFragments` Set can also be randomly ordered.
30 lines
1.3 KiB
JavaScript
30 lines
1.3 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict
|
|
*/
|
|
|
|
// In xplat, these flags are controlled by GKs. Because most GKs have some
|
|
// population running in either mode, we should run our tests that way, too,
|
|
//
|
|
// Use __VARIANT__ to simulate a GK. The tests will be run twice: once
|
|
// with the __VARIANT__ set to `true`, and once set to `false`.
|
|
//
|
|
// TODO: __VARIANT__ isn't supported for React Native flags yet. You can set the
|
|
// flag here but it won't be set to `true` in any of our test runs. Need to
|
|
// add a test configuration for React Native.
|
|
|
|
export const alwaysThrottleRetries = __VARIANT__;
|
|
export const enableObjectFiber = __VARIANT__;
|
|
export const enableHiddenSubtreeInsertionEffectCleanup = __VARIANT__;
|
|
export const enableEagerAlternateStateNodeCleanup = __VARIANT__;
|
|
export const passChildrenWhenCloningPersistedNodes = __VARIANT__;
|
|
export const renameElementSymbol = __VARIANT__;
|
|
export const enableFragmentRefs = __VARIANT__;
|
|
export const enableFragmentRefsScrollIntoView = __VARIANT__;
|
|
export const enableFragmentRefsInstanceHandles = __VARIANT__;
|
|
export const enableComponentPerformanceTrack = __VARIANT__;
|