How to use findRootContainerNode method in Playwright Internal

1import SimpleEventPlugin from './SimpleEventPlugin';
2import {
3	DiscreteEvent,
4	UserBlockingEvent,
5	ContinuousEvent,
6} from '../../shared/ReactTypes';
7import { PLUGIN_EVENT_SYSTEM } from '../../events/EventSystemFlags';
8import { discreteUpdates, batchedEventUpdates } from './ReactGenericBatching';
9import getEventTarget from './getEventTarget';
10import { getClosestInstanceFromNode } from '../ReactDOMComponentTree';
11import { HostRoot } from '../../shared/ReactWorkTags';
12import { getRawEventName } from './DOMTopLevelEventTypes';
13import {
14	addEventCaptureListener,
15	addEventBubbleListener,
16} from './EventListener';
17import { runExtractedPluginEventsInBatch } from '../../events/EventPluginHub'
18
19const { getEventPriority } = SimpleEventPlugin;
20
21const CALLBACK_BOOKKEEPING_POOL_SIZE = 10;
22const callbackBookkeepingPool = [];
23
24export let _enabled = true;
25
26export function setEnabled(enabled) {
27	_enabled = !!enabled;
28}
29
30export function isEnabled() {
31	return _enabled;
32}
33
34function releaseTopLevelCallbackBookKeeping(instance) {
35	instance.topLevelType = null;
36	instance.nativeEvent = null;
37	instance.targetInst = null;
38	instance.ancestors.length = 0;
39	if (callbackBookkeepingPool.length < CALLBACK_BOOKKEEPING_POOL_SIZE) {
40		callbackBookkeepingPool.push(instance);
41	}
42}
43
44function getTopLevelCallbackBookKeeping(topLevelType, nativeEvent, targetInst) {
45	if (callbackBookkeepingPool.length) {
46		// 复用
47		const instance = callbackBookkeepingPool.pop();
48
49		instance.topLevelType = topLevelType;
50		instance.nativeEvent = nativeEvent;
51		instance.targetInst = targetInst;
52		return instance;
53	}
54	return {
55		topLevelType,
56		nativeEvent,
57		targetInst,
58		ancestors: [],
59	};
60}
61
62function findRootContainerNode(inst) {
63	while (inst.return) {
64		inst = inst.return;
65	}
66	if (inst.tag !== HostRoot) {
67		// This can happen if we're in a detached tree.
68		return null;
69	}
70	return inst.stateNode.containerInfo;
71}
72
73function handleTopLevel(bookKeeping) {
74	let targetInst = bookKeeping.targetInst;
75
76	let ancestor = targetInst;
77	do {
78		if (!ancestor) {
79			const ancestors = bookKeeping.ancestors;
80			ancestors.push(ancestor);
81			break;
82		}
83		const root = findRootContainerNode(ancestor);
84
85		if (!root) {
86			break;
87		}
88		bookKeeping.ancestors.push(ancestor);
89
90		ancestor = getClosestInstanceFromNode(root);
91	} while (ancestor);
92
93	for (let i = 0; i < bookKeeping.ancestors.length; i++) {
94		targetInst = bookKeeping.ancestors[i];
95		const eventTarget = getEventTarget(bookKeeping.nativeEvent);
96		const topLevelType = bookKeeping.topLevelType;
97		const nativeEvent = bookKeeping.nativeEvent;
98
99		runExtractedPluginEventsInBatch(
100			topLevelType,
101			targetInst,
102			nativeEvent,
103			eventTarget,
104		);
105	}
106}
107
108function dispatchEventForPluginEventSystem(
109	topLevelType,
110	eventSystemFlags,
111	nativeEvent,
112	targetInst,
113) {
114	const bookKeeping = getTopLevelCallbackBookKeeping(
115		topLevelType,
116		nativeEvent,
117		targetInst,
118	);
119
120	try {
121		batchedEventUpdates(handleTopLevel, bookKeeping);
122	} finally {
123		releaseTopLevelCallbackBookKeeping(bookKeeping);
124	}
125}
126
127function dispatchEvent(topLevelType, eventSystemFlags, nativeEvent) {
128	if (!_enabled) {
129		return;
130	}
131
132	const nativeEventTarget = getEventTarget(nativeEvent);
133	let targetInst = getClosestInstanceFromNode(nativeEventTarget);
134
135	dispatchEventForPluginEventSystem(
136		topLevelType,
137		eventSystemFlags,
138		nativeEvent,
139		targetInst,
140	);
141}
142
143function dispatchDiscreteEvent(topLevelType, eventSystemFlags, nativeEvent) {
144	discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, nativeEvent);
145}
146
147function trapEventForPluginEventSystem(element, topLevelType, capture) {
148	let listener;
149	switch (getEventPriority(topLevelType)) {
150		case DiscreteEvent:
151			listener = dispatchDiscreteEvent.bind(
152				null,
153				topLevelType,
154				PLUGIN_EVENT_SYSTEM,
155			);
156			break;
157		case UserBlockingEvent:
158		case ContinuousEvent:
159		default:
160			listener = dispatchEvent.bind(
161				null,
162				topLevelType,
163				PLUGIN_EVENT_SYSTEM,
164			);
165			break;
166	}
167	const rawEventName = getRawEventName(topLevelType);
168	if (capture) {
169		addEventCaptureListener(element, rawEventName, listener);
170	} else {
171		addEventBubbleListener(element, rawEventName, listener);
172	}
173}
174
175export function trapBubbledEvent(topLevelType, element) {
176	trapEventForPluginEventSystem(element, topLevelType, false);
177}
178

Source: ReactDOMEventListener.js

import SimpleEventPlugin from './SimpleEventPlugin';
import {
	DiscreteEvent,
	UserBlockingEvent,
	ContinuousEvent,
} from '../../shared/ReactTypes';
import { PLUGIN_EVENT_SYSTEM } from '../../events/EventSystemFlags';
import { discreteUpdates, batchedEventUpdates } from './ReactGenericBatching';
import getEventTarget from './getEventTarget';
import { getClosestInstanceFromNode } from '../ReactDOMComponentTree';
import { HostRoot } from '../../shared/ReactWorkTags';
import { getRawEventName } from './DOMTopLevelEventTypes';
import {
	addEventCaptureListener,
	addEventBubbleListener,
} from './EventListener';
import { runExtractedPluginEventsInBatch } from '../../events/EventPluginHub'

const { getEventPriority } = SimpleEventPlugin;

const CALLBACK_BOOKKEEPING_POOL_SIZE = 10;
const callbackBookkeepingPool = [];

export let _enabled = true;

export function setEnabled(enabled) {
	_enabled = !!enabled;
}

export function isEnabled() {
	return _enabled;
}

function releaseTopLevelCallbackBookKeeping(instance) {
	instance.topLevelType = null;
	instance.nativeEvent = null;
	instance.targetInst = null;
	instance.ancestors.length = 0;
	if (callbackBookkeepingPool.length < CALLBACK_BOOKKEEPING_POOL_SIZE) {
		callbackBookkeepingPool.push(instance);
	}
}

function getTopLevelCallbackBookKeeping(topLevelType, nativeEvent, targetInst) {
	if (callbackBookkeepingPool.length) {
		// 复用
		const instance = callbackBookkeepingPool.pop();

		instance.topLevelType = topLevelType;
		instance.nativeEvent = nativeEvent;
		instance.targetInst = targetInst;
		return instance;
	}
	return {
		topLevelType,
		nativeEvent,
		targetInst,
		ancestors: [],
	};
}

function findRootContainerNode(inst) {
	while (inst.return) {
		inst = inst.return;
	}
	if (inst.tag !== HostRoot) {
		// This can happen if we're in a detached tree.
		return null;
	}
	return inst.stateNode.containerInfo;
}

function handleTopLevel(bookKeeping) {
	let targetInst = bookKeeping.targetInst;

	let ancestor = targetInst;
	do {
		if (!ancestor) {
			const ancestors = bookKeeping.ancestors;
			ancestors.push(ancestor);
			break;
		}
		const root = findRootContainerNode(ancestor);

		if (!root) {
			break;
		}
		bookKeeping.ancestors.push(ancestor);

		ancestor = getClosestInstanceFromNode(root);
	} while (ancestor);

	for (let i = 0; i < bookKeeping.ancestors.length; i++) {
		targetInst = bookKeeping.ancestors[i];
		const eventTarget = getEventTarget(bookKeeping.nativeEvent);
		const topLevelType = bookKeeping.topLevelType;
		const nativeEvent = bookKeeping.nativeEvent;

		runExtractedPluginEventsInBatch(
			topLevelType,
			targetInst,
			nativeEvent,
			eventTarget,
		);
	}
}

function dispatchEventForPluginEventSystem(
	topLevelType,
	eventSystemFlags,
	nativeEvent,
	targetInst,
) {
	const bookKeeping = getTopLevelCallbackBookKeeping(
		topLevelType,
		nativeEvent,
		targetInst,
	);

	try {
		batchedEventUpdates(handleTopLevel, bookKeeping);
	} finally {
		releaseTopLevelCallbackBookKeeping(bookKeeping);
	}
}

function dispatchEvent(topLevelType, eventSystemFlags, nativeEvent) {
	if (!_enabled) {
		return;
	}

	const nativeEventTarget = getEventTarget(nativeEvent);
	let targetInst = getClosestInstanceFromNode(nativeEventTarget);

	dispatchEventForPluginEventSystem(
		topLevelType,
		eventSystemFlags,
		nativeEvent,
		targetInst,
	);
}

function dispatchDiscreteEvent(topLevelType, eventSystemFlags, nativeEvent) {
	discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, nativeEvent);
}

function trapEventForPluginEventSystem(element, topLevelType, capture) {
	let listener;
	switch (getEventPriority(topLevelType)) {
		case DiscreteEvent:
			listener = dispatchDiscreteEvent.bind(
				null,
				topLevelType,
				PLUGIN_EVENT_SYSTEM,
			);
			break;
		case UserBlockingEvent:
		case ContinuousEvent:
		default:
			listener = dispatchEvent.bind(
				null,
				topLevelType,
				PLUGIN_EVENT_SYSTEM,
			);
			break;
	}
	const rawEventName = getRawEventName(topLevelType);
	if (capture) {
		addEventCaptureListener(element, rawEventName, listener);
	} else {
		addEventBubbleListener(element, rawEventName, listener);
	}
}

export function trapBubbledEvent(topLevelType, element) {
	trapEventForPluginEventSystem(element, topLevelType, false);
}

1/**
2 * Copyright 2013-present, Facebook, Inc.
3 * All rights reserved.
4 *
5 * This source code is licensed under the BSD-style license found in the
6 * LICENSE file in the root directory of this source tree. An additional grant
7 * of patent rights can be found in the PATENTS file in the same directory.
8 *
9 * @providesModule ReactEventListener
10 */
11
12'use strict';
13
14var EventListener = require('EventListener');
15var ExecutionEnvironment = require('ExecutionEnvironment');
16var PooledClass = require('PooledClass');
17var ReactDOMComponentTree = require('ReactDOMComponentTree');
18var ReactGenericBatching = require('ReactGenericBatching');
19var ReactTypeOfWork = require('ReactTypeOfWork');
20
21var getEventTarget = require('getEventTarget');
22var getUnboundedScrollPosition = require('getUnboundedScrollPosition');
23
24var { HostContainer } = ReactTypeOfWork;
25
26/**
27 * Find the deepest React component completely containing the root of the
28 * passed-in instance (for use when entire React trees are nested within each
29 * other). If React trees are not nested, returns null.
30 */
31function findRootContainerNode(inst) {
32  // TODO: It may be a good idea to cache this to prevent unnecessary DOM
33  // traversal, but caching is difficult to do correctly without using a
34  // mutation observer to listen for all DOM changes.
35  if (typeof inst.tag === 'number') {
36    while (inst.return) {
37      inst = inst.return;
38    }
39    if (inst.tag !== HostContainer) {
40      // This can happen if we're in a detached tree.
41      return null;
42    }
43    return inst.stateNode.containerInfo;
44  } else {
45    while (inst._hostParent) {
46      inst = inst._hostParent;
47    }
48    var rootNode = ReactDOMComponentTree.getNodeFromInstance(inst);
49    return rootNode.parentNode;
50  }
51}
52
53// Used to store ancestor hierarchy in top level callback
54function TopLevelCallbackBookKeeping(topLevelType, nativeEvent, targetInst) {
55  this.topLevelType = topLevelType;
56  this.nativeEvent = nativeEvent;
57  this.targetInst = targetInst;
58  this.ancestors = [];
59}
60Object.assign(TopLevelCallbackBookKeeping.prototype, {
61  destructor: function() {
62    this.topLevelType = null;
63    this.nativeEvent = null;
64    this.targetInst = null;
65    this.ancestors.length = 0;
66  },
67});
68PooledClass.addPoolingTo(
69  TopLevelCallbackBookKeeping,
70  PooledClass.threeArgumentPooler
71);
72
73function handleTopLevelImpl(bookKeeping) {
74  var targetInst = bookKeeping.targetInst;
75
76  // Loop through the hierarchy, in case there's any nested components.
77  // It's important that we build the array of ancestors before calling any
78  // event handlers, because event handlers can modify the DOM, leading to
79  // inconsistencies with ReactMount's node cache. See #1105.
80  var ancestor = targetInst;
81  do {
82    if (!ancestor) {
83      bookKeeping.ancestors.push(ancestor);
84      break;
85    }
86    var root = findRootContainerNode(ancestor);
87    if (!root) {
88      break;
89    }
90    bookKeeping.ancestors.push(ancestor);
91    ancestor = ReactDOMComponentTree.getClosestInstanceFromNode(
92      root
93    );
94  } while (ancestor);
95
96  for (var i = 0; i < bookKeeping.ancestors.length; i++) {
97    targetInst = bookKeeping.ancestors[i];
98    ReactEventListener._handleTopLevel(
99      bookKeeping.topLevelType,
100      targetInst,
101      bookKeeping.nativeEvent,
102      getEventTarget(bookKeeping.nativeEvent)
103    );
104  }
105}
106
107function scrollValueMonitor(cb) {
108  var scrollPosition = getUnboundedScrollPosition(window);
109  cb(scrollPosition);
110}
111
112var ReactEventListener = {
113  _enabled: true,
114  _handleTopLevel: null,
115
116  WINDOW_HANDLE: ExecutionEnvironment.canUseDOM ? window : null,
117
118  setHandleTopLevel: function(handleTopLevel) {
119    ReactEventListener._handleTopLevel = handleTopLevel;
120  },
121
122  setEnabled: function(enabled) {
123    ReactEventListener._enabled = !!enabled;
124  },
125
126  isEnabled: function() {
127    return ReactEventListener._enabled;
128  },
129
130
131  /**
132   * Traps top-level events by using event bubbling.
133   *
134   * @param {string} topLevelType Record from `EventConstants`.
135   * @param {string} handlerBaseName Event name (e.g. "click").
136   * @param {object} element Element on which to attach listener.
137   * @return {?object} An object with a remove function which will forcefully
138   *                  remove the listener.
139   * @internal
140   */
141  trapBubbledEvent: function(topLevelType, handlerBaseName, element) {
142    if (!element) {
143      return null;
144    }
145    return EventListener.listen(
146      element,
147      handlerBaseName,
148      ReactEventListener.dispatchEvent.bind(null, topLevelType)
149    );
150  },
151
152  /**
153   * Traps a top-level event by using event capturing.
154   *
155   * @param {string} topLevelType Record from `EventConstants`.
156   * @param {string} handlerBaseName Event name (e.g. "click").
157   * @param {object} element Element on which to attach listener.
158   * @return {?object} An object with a remove function which will forcefully
159   *                  remove the listener.
160   * @internal
161   */
162  trapCapturedEvent: function(topLevelType, handlerBaseName, element) {
163    if (!element) {
164      return null;
165    }
166    return EventListener.capture(
167      element,
168      handlerBaseName,
169      ReactEventListener.dispatchEvent.bind(null, topLevelType)
170    );
171  },
172
173  monitorScrollValue: function(refresh) {
174    var callback = scrollValueMonitor.bind(null, refresh);
175    EventListener.listen(window, 'scroll', callback);
176  },
177
178  dispatchEvent: function(topLevelType, nativeEvent) {
179    if (!ReactEventListener._enabled) {
180      return;
181    }
182
183    var nativeEventTarget = getEventTarget(nativeEvent);
184    var targetInst = ReactDOMComponentTree.getClosestInstanceFromNode(
185      nativeEventTarget
186    );
187
188    var bookKeeping = TopLevelCallbackBookKeeping.getPooled(
189      topLevelType,
190      nativeEvent,
191      targetInst
192    );
193
194    try {
195      // Event queue being processed in the same cycle allows
196      // `preventDefault`.
197      ReactGenericBatching.batchedUpdates(handleTopLevelImpl, bookKeeping);
198    } finally {
199      TopLevelCallbackBookKeeping.release(bookKeeping);
200    }
201  },
202};
203
204module.exports = ReactEventListener;
205

Source: ReactEventListener.js

/**
 * Copyright 2013-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @providesModule ReactEventListener
 */

'use strict';

var EventListener = require('EventListener');
var ExecutionEnvironment = require('ExecutionEnvironment');
var PooledClass = require('PooledClass');
var ReactDOMComponentTree = require('ReactDOMComponentTree');
var ReactGenericBatching = require('ReactGenericBatching');
var ReactTypeOfWork = require('ReactTypeOfWork');

var getEventTarget = require('getEventTarget');
var getUnboundedScrollPosition = require('getUnboundedScrollPosition');

var { HostContainer } = ReactTypeOfWork;

/**
 * Find the deepest React component completely containing the root of the
 * passed-in instance (for use when entire React trees are nested within each
 * other). If React trees are not nested, returns null.
 */
function findRootContainerNode(inst) {
  // TODO: It may be a good idea to cache this to prevent unnecessary DOM
  // traversal, but caching is difficult to do correctly without using a
  // mutation observer to listen for all DOM changes.
  if (typeof inst.tag === 'number') {
    while (inst.return) {
      inst = inst.return;
    }
    if (inst.tag !== HostContainer) {
      // This can happen if we're in a detached tree.
      return null;
    }
    return inst.stateNode.containerInfo;
  } else {
    while (inst._hostParent) {
      inst = inst._hostParent;
    }
    var rootNode = ReactDOMComponentTree.getNodeFromInstance(inst);
    return rootNode.parentNode;
  }
}

// Used to store ancestor hierarchy in top level callback
function TopLevelCallbackBookKeeping(topLevelType, nativeEvent, targetInst) {
  this.topLevelType = topLevelType;
  this.nativeEvent = nativeEvent;
  this.targetInst = targetInst;
  this.ancestors = [];
}
Object.assign(TopLevelCallbackBookKeeping.prototype, {
  destructor: function() {
    this.topLevelType = null;
    this.nativeEvent = null;
    this.targetInst = null;
    this.ancestors.length = 0;
  },
});
PooledClass.addPoolingTo(
  TopLevelCallbackBookKeeping,
  PooledClass.threeArgumentPooler
);

function handleTopLevelImpl(bookKeeping) {
  var targetInst = bookKeeping.targetInst;

  // Loop through the hierarchy, in case there's any nested components.
  // It's important that we build the array of ancestors before calling any
  // event handlers, because event handlers can modify the DOM, leading to
  // inconsistencies with ReactMount's node cache. See #1105.
  var ancestor = targetInst;
  do {
    if (!ancestor) {
      bookKeeping.ancestors.push(ancestor);
      break;
    }
    var root = findRootContainerNode(ancestor);
    if (!root) {
      break;
    }
    bookKeeping.ancestors.push(ancestor);
    ancestor = ReactDOMComponentTree.getClosestInstanceFromNode(
      root
    );
  } while (ancestor);

  for (var i = 0; i < bookKeeping.ancestors.length; i++) {
    targetInst = bookKeeping.ancestors[i];
    ReactEventListener._handleTopLevel(
      bookKeeping.topLevelType,
      targetInst,
      bookKeeping.nativeEvent,
      getEventTarget(bookKeeping.nativeEvent)
    );
  }
}

function scrollValueMonitor(cb) {
  var scrollPosition = getUnboundedScrollPosition(window);
  cb(scrollPosition);
}

var ReactEventListener = {
  _enabled: true,
  _handleTopLevel: null,

  WINDOW_HANDLE: ExecutionEnvironment.canUseDOM ? window : null,

  setHandleTopLevel: function(handleTopLevel) {
    ReactEventListener._handleTopLevel = handleTopLevel;
  },

  setEnabled: function(enabled) {
    ReactEventListener._enabled = !!enabled;
  },

  isEnabled: function() {
    return ReactEventListener._enabled;
  },


  /**
   * Traps top-level events by using event bubbling.
   *
   * @param {string} topLevelType Record from `EventConstants`.
   * @param {string} handlerBaseName Event name (e.g. "click").
   * @param {object} element Element on which to attach listener.
   * @return {?object} An object with a remove function which will forcefully
   *                  remove the listener.
   * @internal
   */
  trapBubbledEvent: function(topLevelType, handlerBaseName, element) {
    if (!element) {
      return null;
    }
    return EventListener.listen(
      element,
      handlerBaseName,
      ReactEventListener.dispatchEvent.bind(null, topLevelType)
    );
  },

  /**
   * Traps a top-level event by using event capturing.
   *
   * @param {string} topLevelType Record from `EventConstants`.
   * @param {string} handlerBaseName Event name (e.g. "click").
   * @param {object} element Element on which to attach listener.
   * @return {?object} An object with a remove function which will forcefully
   *                  remove the listener.
   * @internal
   */
  trapCapturedEvent: function(topLevelType, handlerBaseName, element) {
    if (!element) {
      return null;
    }
    return EventListener.capture(
      element,
      handlerBaseName,
      ReactEventListener.dispatchEvent.bind(null, topLevelType)
    );
  },

  monitorScrollValue: function(refresh) {
    var callback = scrollValueMonitor.bind(null, refresh);
    EventListener.listen(window, 'scroll', callback);
  },

  dispatchEvent: function(topLevelType, nativeEvent) {
    if (!ReactEventListener._enabled) {
      return;
    }

    var nativeEventTarget = getEventTarget(nativeEvent);
    var targetInst = ReactDOMComponentTree.getClosestInstanceFromNode(
      nativeEventTarget
    );

    var bookKeeping = TopLevelCallbackBookKeeping.getPooled(
      topLevelType,
      nativeEvent,
      targetInst
    );

    try {
      // Event queue being processed in the same cycle allows
      // `preventDefault`.
      ReactGenericBatching.batchedUpdates(handleTopLevelImpl, bookKeeping);
    } finally {
      TopLevelCallbackBookKeeping.release(bookKeeping);
    }
  },
};

module.exports = ReactEventListener;