[react-core] Add experimental React Scope component API (#16587)

Author: trueadm

packages/react-dom/src/events/DOMEventResponderSystem.js

@@ -12,7 +12,7 @@ import {
   PASSIVE_NOT_SUPPORTED,
 } from 'legacy-events/EventSystemFlags';
 import type {AnyNativeEvent} from 'legacy-events/PluginModuleType';
-import {HostComponent, SuspenseComponent} from 'shared/ReactWorkTags';
+import {HostComponent} from 'shared/ReactWorkTags';
 import type {EventPriority} from 'shared/ReactTypes';
 import type {
   ReactDOMEventResponder,
@@ -238,28 +238,6 @@ const eventResponderContext: ReactDOMResponderContext = {
       }
     }
   },
-  getFocusableElementsInScope(deep: boolean): Array<HTMLElement> {
-    validateResponderContext();
-    const focusableElements = [];
-    const eventResponderInstance = ((currentInstance: any): ReactDOMEventResponderInstance);
-    const currentResponder = eventResponderInstance.responder;
-    let focusScopeFiber = eventResponderInstance.fiber;
-    if (deep) {
-      let deepNode = focusScopeFiber.return;
-      while (deepNode !== null) {
-        if (doesFiberHaveResponder(deepNode, currentResponder)) {
-          focusScopeFiber = deepNode;
-        }
-        deepNode = deepNode.return;
-      }
-    }
-    const child = focusScopeFiber.child;
-
-    if (child !== null) {
-      collectFocusableElements(child, focusableElements);
-    }
-    return focusableElements;
-  },
   getActiveDocument,
   objectAssign: Object.assign,
   getTimeStamp(): number {
@@ -335,33 +313,6 @@ function validateEventValue(eventValue: any): void {
   }
 }
 
-function collectFocusableElements(
-  node: Fiber,
-  focusableElements: Array<HTMLElement>,
-): void {
-  if (isFiberSuspenseAndTimedOut(node)) {
-    const fallbackChild = getSuspenseFallbackChild(node);
-    if (fallbackChild !== null) {
-      collectFocusableElements(fallbackChild, focusableElements);
-    }
-  } else {
-    if (isFiberHostComponentFocusable(node)) {
-      focusableElements.push(node.stateNode);
-    } else {
-      const child = node.child;
-
-      if (child !== null) {
-        collectFocusableElements(child, focusableElements);
-      }
-    }
-  }
-  const sibling = node.sibling;
-
-  if (sibling !== null) {
-    collectFocusableElements(sibling, focusableElements);
-  }
-}
-
 function doesFiberHaveResponder(
   fiber: Fiber,
   responder: ReactDOMEventResponder,
@@ -382,33 +333,6 @@ function getActiveDocument(): Document {
   return ((currentDocument: any): Document);
 }
 
-function isFiberHostComponentFocusable(fiber: Fiber): boolean {
-  if (fiber.tag !== HostComponent) {
-    return false;
-  }
-  const {type, memoizedProps} = fiber;
-  if (memoizedProps.tabIndex === -1 || memoizedProps.disabled) {
-    return false;
-  }
-  if (memoizedProps.tabIndex === 0 || memoizedProps.contentEditable === true) {
-    return true;
-  }
-  if (type === 'a' || type === 'area') {
-    return !!memoizedProps.href && memoizedProps.rel !== 'ignore';
-  }
-  if (type === 'input') {
-    return memoizedProps.type !== 'hidden' && memoizedProps.type !== 'file';
-  }
-  return (
-    type === 'button' ||
-    type === 'textarea' ||
-    type === 'object' ||
-    type === 'select' ||
-    type === 'iframe' ||
-    type === 'embed'
-  );
-}
-
 function processTimers(
   timers: Map<number, ResponderTimer>,
   delay: number,
@@ -626,14 +550,6 @@ function validateResponderContext(): void {
   );
 }
 
-function isFiberSuspenseAndTimedOut(fiber: Fiber): boolean {
-  return fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
-}
-
-function getSuspenseFallbackChild(fiber: Fiber): Fiber | null {
-  return ((((fiber.child: any): Fiber).sibling: any): Fiber).child;
-}
-
 export function dispatchEventForResponderEventSystem(
   topLevelType: string,
   targetFiber: null | Fiber,

packages/react-events/README.md

@@ -92,11 +92,6 @@ const event = { type: 'press', target, pointerType, x, y };
 context.dispatchEvent('onPress', event, DiscreteEvent);
 ```
 
-### getFocusableElementsInScope(): Array<Element>
-
-Returns every DOM element that can be focused within the scope of the Event
-Responder instance.
-
 ### isTargetWithinNode(target: Element, element: Element): boolean
 
 Returns `true` if `target` is a child of `element`.

packages/react-reconciler/src/ReactFiber.js

@@ -15,6 +15,7 @@ import type {
   ReactEventResponder,
   ReactEventResponderInstance,
   ReactFundamentalComponent,
+  ReactScope,
 } from 'shared/ReactTypes';
 import type {RootTag} from 'shared/ReactRootTags';
 import type {WorkTag} from 'shared/ReactWorkTags';
@@ -32,6 +33,7 @@ import {
   enableProfilerTimer,
   enableFundamentalAPI,
   enableUserTimingAPI,
+  enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {NoEffect, Placement} from 'shared/ReactSideEffectTags';
 import {ConcurrentRoot, BatchedRoot} from 'shared/ReactRootTags';
@@ -56,6 +58,7 @@ import {
   SimpleMemoComponent,
   LazyComponent,
   FundamentalComponent,
+  ScopeComponent,
 } from 'shared/ReactWorkTags';
 import getComponentName from 'shared/getComponentName';
 
@@ -86,6 +89,7 @@ import {
   REACT_MEMO_TYPE,
   REACT_LAZY_TYPE,
   REACT_FUNDAMENTAL_TYPE,
+  REACT_SCOPE_TYPE,
 } from 'shared/ReactSymbols';
 
 let hasBadMapPolyfill;
@@ -674,6 +678,16 @@ export function createFiberFromTypeAndProps(
                 );
               }
               break;
+            case REACT_SCOPE_TYPE:
+              if (enableScopeAPI) {
+                return createFiberFromScope(
+                  type,
+                  pendingProps,
+                  mode,
+                  expirationTime,
+                  key,
+                );
+              }
           }
         }
         let info = '';
@@ -766,6 +780,19 @@ export function createFiberFromFundamental(
   return fiber;
 }
 
+function createFiberFromScope(
+  scope: ReactScope,
+  pendingProps: any,
+  mode: TypeOfMode,
+  expirationTime: ExpirationTime,
+  key: null | string,
+) {
+  const fiber = createFiber(ScopeComponent, pendingProps, key, mode);
+  fiber.type = scope;
+  fiber.expirationTime = expirationTime;
+  return fiber;
+}
+
 function createFiberFromProfiler(
   pendingProps: any,
   mode: TypeOfMode,

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -41,6 +41,7 @@ import {
   LazyComponent,
   IncompleteClassComponent,
   FundamentalComponent,
+  ScopeComponent,
 } from 'shared/ReactWorkTags';
 import {
   NoEffect,
@@ -63,6 +64,7 @@ import {
   enableSuspenseServerRenderer,
   enableFundamentalAPI,
   warnAboutDefaultPropsOnFunctionComponents,
+  enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
@@ -2672,6 +2674,19 @@ function updateFundamentalComponent(
   return workInProgress.child;
 }
 
+function updateScopeComponent(current, workInProgress, renderExpirationTime) {
+  const nextProps = workInProgress.pendingProps;
+  const nextChildren = nextProps.children;
+
+  reconcileChildren(
+    current,
+    workInProgress,
+    nextChildren,
+    renderExpirationTime,
+  );
+  return workInProgress.child;
+}
+
 export function markWorkInProgressReceivedUpdate() {
   didReceiveUpdate = true;
 }
@@ -3158,6 +3173,16 @@ function beginWork(
       }
       break;
     }
+    case ScopeComponent: {
+      if (enableScopeAPI) {
+        return updateScopeComponent(
+          current,
+          workInProgress,
+          renderExpirationTime,
+        );
+      }
+      break;
+    }
   }
   invariant(
     false,

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -32,6 +32,7 @@ import {
   enableFlareAPI,
   enableFundamentalAPI,
   enableSuspenseCallback,
+  enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -49,6 +50,7 @@ import {
   SimpleMemoComponent,
   SuspenseListComponent,
   FundamentalComponent,
+  ScopeComponent,
 } from 'shared/ReactWorkTags';
 import {
   invokeGuardedCallback,
@@ -617,6 +619,7 @@ function commitLifeCycles(
     case SuspenseListComponent:
     case IncompleteClassComponent:
     case FundamentalComponent:
+    case ScopeComponent:
       return;
     default: {
       invariant(
@@ -691,6 +694,10 @@ function commitAttachRef(finishedWork: Fiber) {
       default:
         instanceToUse = instance;
     }
+    // Moved outside to ensure DCE works with this flag
+    if (enableScopeAPI && finishedWork.tag === ScopeComponent) {
+      instanceToUse = instance.methods;
+    }
     if (typeof ref === 'function') {
       ref(instanceToUse);
     } else {
@@ -1383,6 +1390,13 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       }
       return;
     }
+    case ScopeComponent: {
+      if (enableScopeAPI) {
+        const scopeInstance = finishedWork.stateNode;
+        scopeInstance.fiber = finishedWork;
+      }
+      return;
+    }
     default: {
       invariant(
         false,

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -9,7 +9,10 @@
 
 import type {Fiber} from './ReactFiber';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
-import type {ReactFundamentalComponentInstance} from 'shared/ReactTypes';
+import type {
+  ReactFundamentalComponentInstance,
+  ReactScopeInstance,
+} from 'shared/ReactTypes';
 import type {FiberRoot} from './ReactFiberRoot';
 import type {
   Instance,
@@ -47,6 +50,7 @@ import {
   LazyComponent,
   IncompleteClassComponent,
   FundamentalComponent,
+  ScopeComponent,
 } from 'shared/ReactWorkTags';
 import {NoMode, BatchedMode} from './ReactTypeOfMode';
 import {
@@ -112,6 +116,7 @@ import {
   enableSuspenseServerRenderer,
   enableFlareAPI,
   enableFundamentalAPI,
+  enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {
   markSpawnedWork,
@@ -123,6 +128,7 @@ import {createFundamentalStateInstance} from './ReactFiberFundamental';
 import {Never} from './ReactFiberExpirationTime';
 import {resetChildFibers} from './ReactChildFiber';
 import {updateEventListeners} from './ReactFiberEvents';
+import {createScopeMethods} from './ReactFiberScope';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -1213,6 +1219,31 @@ function completeWork(
       }
       break;
     }
+    case ScopeComponent: {
+      if (enableScopeAPI) {
+        if (current === null) {
+          const type = workInProgress.type;
+          const scopeInstance: ReactScopeInstance = {
+            fiber: workInProgress,
+            methods: null,
+          };
+          workInProgress.stateNode = scopeInstance;
+          scopeInstance.methods = createScopeMethods(type, scopeInstance);
+          if (workInProgress.ref !== null) {
+            markRef(workInProgress);
+            markUpdate(workInProgress);
+          }
+        } else {
+          if (current.ref !== workInProgress.ref) {
+            markRef(workInProgress);
+          }
+          if (workInProgress.ref !== null) {
+            markUpdate(workInProgress);
+          }
+        }
+      }
+      break;
+    }
     default:
       invariant(
         false,