[Flare] Tweaks to Flare system design and API (#16264)

Author: trueadm

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -11,6 +11,7 @@ import type {
 ReactContext,
 ReactProviderType,
 ReactEventResponder,
+ReactEventResponderListener,
 }from'shared/ReactTypes';
 importtype{Fiber}from'react-reconciler/src/ReactFiber';
 importtype{Hook}from'react-reconciler/src/ReactFiberHooks';
@@ -25,8 +26,6 @@ import {
 ForwardRef,
 }from'shared/ReactWorkTags';
 
-constemptyObject={};
-
 typeCurrentDispatcherRef=typeofReactSharedInternals.ReactCurrentDispatcher;
 
 // Used to track hooks called during a render
@@ -221,17 +220,20 @@ function useMemo<T>(
 returnvalue;
 }
 
-function useListener(
+function useResponder(
  responder: ReactEventResponder<any,any>,
- hookProps: ?Object,
-): void {
-constlistenerProps=hookProps||emptyObject;
+ listenerProps: Object,
+): ReactEventResponderListener<any,any>{
 // Don't put the actual event responder object in, just its displayName
 constvalue={
 responder: responder.displayName||'EventResponder',
 props: listenerProps,
 };
-hookLog.push({primitive: 'Listener',stackError: newError(), value});
+hookLog.push({primitive: 'Responder',stackError: newError(), value});
+return{
+ responder,
+props: listenerProps,
+};
 }
 
 const Dispatcher: DispatcherType = {
@@ -246,7 +248,7 @@ const Dispatcher: DispatcherType = {
 useReducer,
 useRef,
 useState,
-useListener,
+useResponder,
 };
 
 // Inspect

packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js

@@ -22,19 +22,21 @@ describe('ReactHooksInspection', () => {
 ReactDebugTools=require('react-debug-tools');
 });
 
-it('should inspect a simple useListener hook',()=>{
+it('should inspect a simple useResponder hook',()=>{
 constTestResponder=React.unstable_createResponder('TestResponder',{});
 
 functionFoo(props){
-React.unstable_useListener(TestResponder,{preventDefault: false});
-return<divresponders={<TestResponder/>}>Hello world</div>;
+constlistener=React.unstable_useResponder(TestResponder,{
+preventDefault: false,
+});
+return<divlisteners={listener}>Hello world</div>;
 }
 lettree=ReactDebugTools.inspectHooks(Foo,{});
 expect(tree).toEqual([
 {
 isStateEditable: false,
 id: 0,
-name: 'Listener',
+name: 'Responder',
 value: {props: {preventDefault: false},responder: 'TestResponder'},
 subHooks: [],
 },

packages/react-dom/src/client/ReactDOMComponent.js

@@ -98,7 +98,7 @@ const AUTOFOCUS = 'autoFocus';
 constCHILDREN='children';
 constSTYLE='style';
 constHTML='__html';
-constRESPONDERS='responders';
+constLISTENERS='listeners';
 
 const{html: HTML_NAMESPACE}=Namespaces;
 
@@ -341,7 +341,7 @@ function setInitialDOMProperties(
 setTextContent(domElement,''+nextProp);
 }
 }elseif(
-(enableFlareAPI&&propKey===RESPONDERS)||
+(enableFlareAPI&&propKey===LISTENERS)||
 propKey===SUPPRESS_CONTENT_EDITABLE_WARNING||
 propKey===SUPPRESS_HYDRATION_WARNING
 ){
@@ -698,7 +698,7 @@ export function diffProperties(
 }elseif(propKey===DANGEROUSLY_SET_INNER_HTML||propKey===CHILDREN){
 // Noop. This is handled by the clear text mechanism.
 }elseif(
-(enableFlareAPI&&propKey===RESPONDERS)||
+(enableFlareAPI&&propKey===LISTENERS)||
 propKey===SUPPRESS_CONTENT_EDITABLE_WARNING||
 propKey===SUPPRESS_HYDRATION_WARNING
 ){
@@ -790,7 +790,7 @@ export function diffProperties(
 (updatePayload=updatePayload||[]).push(propKey,''+nextProp);
 }
 }elseif(
-(enableFlareAPI&&propKey===RESPONDERS)||
+(enableFlareAPI&&propKey===LISTENERS)||
 propKey===SUPPRESS_CONTENT_EDITABLE_WARNING||
 propKey===SUPPRESS_HYDRATION_WARNING
 ){
@@ -1045,7 +1045,7 @@ export function diffHydratedProperties(
 if(suppressHydrationWarning){
 // Don't bother comparing. We're ignoring all these warnings.
 }elseif(
-(enableFlareAPI&&propKey===RESPONDERS)||
+(enableFlareAPI&&propKey===LISTENERS)||
 propKey===SUPPRESS_CONTENT_EDITABLE_WARNING||
 propKey===SUPPRESS_HYDRATION_WARNING||
 // Controlled attributes are not validated

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

@@ -12,12 +12,7 @@ import {
 PASSIVE_NOT_SUPPORTED,
 }from'events/EventSystemFlags';
 importtype{AnyNativeEvent}from'events/PluginModuleType';
-import{
-HostComponent,
-FunctionComponent,
-MemoComponent,
-ForwardRef,
-}from'shared/ReactWorkTags';
+import{HostComponent}from'shared/ReactWorkTags';
 importtype{EventPriority}from'shared/ReactTypes';
 importtype{
 ReactDOMEventResponder,
@@ -67,7 +62,7 @@ export function setListenToResponderEventTypes(
 }
 
 typeEventQueueItem={|
-listeners: Array<(val: any)=>void>,
+listener: (val: any)=>void,
 value: any,
 |};
 typeEventQueue=Array<EventQueueItem>;
@@ -103,24 +98,18 @@ let currentDocument: null | Document = null;
 
 const eventResponderContext: ReactDOMResponderContext = {
 dispatchEvent(
-eventProp: string,
 eventValue: any,
+eventListener: any=>void,
 eventPriority: EventPriority,
 ): void{
 validateResponderContext();
 validateEventValue(eventValue);
 if(eventPriority<currentEventQueuePriority){
 currentEventQueuePriority=eventPriority;
 }
-const responderInstance =((currentInstance: any): ReactDOMEventResponderInstance);
-consttarget=responderInstance.fiber;
-constresponder=responderInstance.responder;
-constlisteners=collectListeners(eventProp,responder,target);
-if(listeners.length!==0){
-((currentEventQueue: any): EventQueue).push(
-createEventQueueItem(eventValue,listeners),
-);
-}
+((currentEventQueue: any): EventQueue).push(
+createEventQueueItem(eventValue,eventListener),
+);
 },
  isTargetWithinResponder(target: Element | Document): boolean {
 validateResponderContext();
@@ -392,11 +381,11 @@ function collectFocusableElements(
 
 functioncreateEventQueueItem(
 value: any,
-listeners: Array<(val: any)=>void>,
+listener: (val: any)=>void,
 ): EventQueueItem{
 return{
  value,
-listeners,
+listener,
 };
 }
 
@@ -519,70 +508,11 @@ function createDOMResponderEvent(
 };
 }
 
-functioncollectListeners(
-eventProp: string,
-eventResponder: ReactDOMEventResponder,
-target: Fiber,
-): Array<(any)=>void>{
-consteventListeners=[];
-letnode=target.return;
-nodeTraversal: while(node!==null){
-switch(node.tag){
-case HostComponent: {
-constdependencies=node.dependencies;
-
-if(dependencies!==null){
-constrespondersMap=dependencies.responders;
-
-if(respondersMap!==null&&respondersMap.has(eventResponder)){
-break nodeTraversal;
-}
-}
-break;
-}
-case FunctionComponent:
-case MemoComponent:
-case ForwardRef: {
-constdependencies=node.dependencies;
-
-if(dependencies!==null){
-constlisteners=dependencies.listeners;
-
-if(listeners!==null){
-for(
-lets=0,listenersLength=listeners.length;
-s<listenersLength;
-s++
-){
-constlistener=listeners[s];
-const{responder, props}=listener;
-constlistenerFunc=props[eventProp];
-
-if(
-responder===eventResponder&&
-typeoflistenerFunc==='function'
-){
-eventListeners.push(listenerFunc);
-}
-}
-}
-}
-}
-}
-node=node.return;
-}
-returneventListeners;
-}
-
 functionprocessEvents(eventQueue: EventQueue): void{
 for(leti=0,length=eventQueue.length;i<length;i++){
-const{value,listeners} = eventQueue[i];
- for (let s = 0, length2 = listeners.length; s <length2;s++){
-constlistener=listeners[s];
-consttype=
-typeofvalue==='object'&&value!==null ? value.type : '';
-invokeGuardedCallbackAndCatchFirstError(type,listener,undefined,value);
-}
+const{value, listener}=eventQueue[i];
+consttype=typeofvalue==='object'&&value!==null ? value.type : '';
+invokeGuardedCallbackAndCatchFirstError(type,listener,undefined,value);
 }
 }
 
@@ -663,14 +593,14 @@ function traverseAndHandleEventResponderInstances(
 // - Bubble target responder phase
 // - Root responder phase
 
+constvisitedResponders=newSet();
 constresponderEvent=createDOMResponderEvent(
 topLevelType,
 nativeEvent,
 nativeEventTarget,
 isPassiveEvent,
 isPassiveSupported,
 );
-constvisitedResponders=newSet();
 letnode=targetFiber;
 while(node!==null){
 const{dependencies, tag}=node;
@@ -687,8 +617,8 @@ function traverseAndHandleEventResponderInstances(
 !visitedResponders.has(responder)&&
 validateResponderTargetEventTypes(eventType,responder)
 ){
-constonEvent=responder.onEvent;
 visitedResponders.add(responder);
+constonEvent=responder.onEvent;
 if(onEvent!==null){
 currentInstance=responderInstance;
 responderEvent.responderTarget=((target: any):