How to use addEventBubbleListenerWithPassiveFlag method in Playwright Internal

1  function addEventBubbleListener(target, eventType, listener) {
2    target.addEventListener(eventType, listener, false);
3    return listener;
4  }
5  function addEventCaptureListener(target, eventType, listener) {
6    target.addEventListener(eventType, listener, true);
7    return listener;
8  }
9  function addEventCaptureListenerWithPassiveFlag(target, eventType, listener, passive) {
10    target.addEventListener(eventType, listener, {
11      capture: true,
12      passive: passive
13    });
14    return listener;
15  }
16  function addEventBubbleListenerWithPassiveFlag(target, eventType, listener, passive) {
17    target.addEventListener(eventType, listener, {
18      passive: passive
19    });
20    return listener;
21  }

Source: EventListener.js

  function addEventBubbleListener(target, eventType, listener) {
    target.addEventListener(eventType, listener, false);
    return listener;
  }
  function addEventCaptureListener(target, eventType, listener) {
    target.addEventListener(eventType, listener, true);
    return listener;
  }
  function addEventCaptureListenerWithPassiveFlag(target, eventType, listener, passive) {
    target.addEventListener(eventType, listener, {
      capture: true,
      passive: passive
    });
    return listener;
  }
  function addEventBubbleListenerWithPassiveFlag(target, eventType, listener, passive) {
    target.addEventListener(eventType, listener, {
      passive: passive
    });
    return listener;
  }

1import { DOCUMENT_NODE } from '../../../HTMLNodeType';
2import { IS_NON_DELEGATED, IS_CAPTURE_PHASE } from './EventSystemFlags';
3
4import { getEventListenerSet } from '../client/ReactDOMComponentTree';
5import { allNativeEvents } from './EventRegistry';
6import { createEventListenerWrapperWithPriority } from './ReactDOMEventListener';
7import {
8  addEventCaptureListener,
9  addEventBubbleListener,
10  addEventBubbleListenerWithPassiveFlag,
11  addEventCaptureListenerWithPassiveFlag,
12} from './EventListener';
13
14const listeningMarker = '_reactListening' + Math.random().toString(36).slice(2);
15
16const mediaEventTypes = [
17  'abort',
18  'canplay',
19  'canplaythrough',
20  'durationchange',
21  'emptied',
22  'encrypted',
23  'ended',
24  'error',
25  'loadeddata',
26  'loadedmetadata',
27  'loadstart',
28  'pause',
29  'play',
30  'playing',
31  'progress',
32  'ratechange',
33  'seeked',
34  'seeking',
35  'stalled',
36  'suspend',
37  'timeupdate',
38  'volumechange',
39  'waiting',
40];
41
42const nonDelegatedEvents = new Set([
43  'cancel',
44  'close',
45  'invalid',
46  'load',
47  'scroll',
48  'toggle',
49  ...mediaEventTypes,
50]);
51
52const getListenerSetKey = (domEventName, capture) =>
53  `${domEventName}__${capture ? 'capture' : 'bubble'}`;
54
55const addTrappedEventListener = (
56  targetContainer,
57  domEventName,
58  eventSystemFlags,
59  isCapturePhaseListener
60) => {
61  const listener = createEventListenerWrapperWithPriority(
62    targetContainer,
63    domEventName,
64    eventSystemFlags
65  );
66  let isPassiveListener;
67
68  if (
69    domEventName === 'touchstart' ||
70    domEventName === 'touchmove' ||
71    domEventName === 'wheel'
72  ) {
73    isPassiveListener = true;
74  }
75
76  if (isCapturePhaseListener) {
77    if (isPassiveListener !== undefined) {
78      addEventCaptureListenerWithPassiveFlag(
79        targetContainer,
80        domEventName,
81        listener,
82        isPassiveListener
83      );
84    } else {
85      addEventCaptureListener(targetContainer, domEventName, listener);
86    }
87  } else {
88    if (isPassiveListener !== undefined) {
89      addEventBubbleListenerWithPassiveFlag(
90        targetContainer,
91        domEventName,
92        listener,
93        isPassiveListener
94      );
95    } else {
96      unsubscribeListener = addEventBubbleListener(
97        targetContainer,
98        domEventName,
99        listener
100      );
101    }
102  }
103};
104
105const listenToNativeEvent = (
106  domEventName,
107  isCapturePhaseListener,
108  rootContainerElement,
109  targetElement,
110  eventSystemFlags = 0
111) => {
112  let target = rootContainerElement;
113
114  if (
115    domEventName === 'selectionchange' &&
116    rootContainerElement.nodeType !== DOCUMENT_NODE
117  ) {
118    target = rootContainerElement.ownerDocument;
119  }
120
121  if (
122    targetElement !== null &&
123    !isCapturePhaseListener &&
124    nonDelegatedEvents.has(domEventName)
125  ) {
126    if (domEventName !== 'scroll') {
127      return;
128    }
129    eventSystemFlags |= IS_NON_DELEGATED;
130    target = targetElement;
131  }
132
133  const listenerSet = getEventListenerSet(target);
134  const listenerSetKey = getListenerSetKey(
135    domEventName,
136    isCapturePhaseListener
137  );
138
139  if (!listenerSet.has(listenerSetKey)) {
140    if (isCapturePhaseListener) {
141      eventSystemFlags |= IS_CAPTURE_PHASE;
142    }
143    addTrappedEventListener(
144      target,
145      domEventName,
146      eventSystemFlags,
147      isCapturePhaseListener
148    );
149    listenerSet.add(listenerSetKey);
150  }
151};
152
153const listenToAllSupportedEvents = (rootContainerElement) => {
154  if (rootContainerElement[listeningMarker]) return;
155
156  rootContainerElement[listeningMarker] = true;
157
158  allNativeEvents.forEach((domEventName) => {
159    if (!nonDelegatedEvents.has(domEventName)) {
160      listenToNativeEvent(domEventName, false, rootContainerElement, null);
161    }
162
163    listenToNativeEvent(domEventName, true, rootContainerElement, null);
164  });
165};
166
167const listenToNonDelegatedEvent = (domEventName, targetElement) => {
168  const isCapturePhaseListener = false;
169  const listenerSet = getEventListenerSet(targetElement);
170  const listenerSetKey = getListenerSetKey(
171    domEventName,
172    isCapturePhaseListener
173  );
174  if (!listenerSet.has(listenerSetKey)) {
175    addTrappedEventListener(
176      targetElement,
177      domEventName,
178      IS_NON_DELEGATED,
179      isCapturePhaseListener
180    );
181    listenerSet.add(listenerSetKey);
182  }
183};
184
185export {
186  mediaEventTypes,
187  nonDelegatedEvents,
188  getListenerSetKey,
189  listenToNativeEvent,
190  listenToAllSupportedEvents,
191  listenToNonDelegatedEvent,
192};
193

Source: DOMPluginEventSystem.js

import { DOCUMENT_NODE } from '../../../HTMLNodeType';
import { IS_NON_DELEGATED, IS_CAPTURE_PHASE } from './EventSystemFlags';

import { getEventListenerSet } from '../client/ReactDOMComponentTree';
import { allNativeEvents } from './EventRegistry';
import { createEventListenerWrapperWithPriority } from './ReactDOMEventListener';
import {
  addEventCaptureListener,
  addEventBubbleListener,
  addEventBubbleListenerWithPassiveFlag,
  addEventCaptureListenerWithPassiveFlag,
} from './EventListener';

const listeningMarker = '_reactListening' + Math.random().toString(36).slice(2);

const mediaEventTypes = [
  'abort',
  'canplay',
  'canplaythrough',
  'durationchange',
  'emptied',
  'encrypted',
  'ended',
  'error',
  'loadeddata',
  'loadedmetadata',
  'loadstart',
  'pause',
  'play',
  'playing',
  'progress',
  'ratechange',
  'seeked',
  'seeking',
  'stalled',
  'suspend',
  'timeupdate',
  'volumechange',
  'waiting',
];

const nonDelegatedEvents = new Set([
  'cancel',
  'close',
  'invalid',
  'load',
  'scroll',
  'toggle',
  ...mediaEventTypes,
]);

const getListenerSetKey = (domEventName, capture) =>
  `${domEventName}__${capture ? 'capture' : 'bubble'}`;

const addTrappedEventListener = (
  targetContainer,
  domEventName,
  eventSystemFlags,
  isCapturePhaseListener
) => {
  const listener = createEventListenerWrapperWithPriority(
    targetContainer,
    domEventName,
    eventSystemFlags
  );
  let isPassiveListener;

  if (
    domEventName === 'touchstart' ||
    domEventName === 'touchmove' ||
    domEventName === 'wheel'
  ) {
    isPassiveListener = true;
  }

  if (isCapturePhaseListener) {
    if (isPassiveListener !== undefined) {
      addEventCaptureListenerWithPassiveFlag(
        targetContainer,
        domEventName,
        listener,
        isPassiveListener
      );
    } else {
      addEventCaptureListener(targetContainer, domEventName, listener);
    }
  } else {
    if (isPassiveListener !== undefined) {
      addEventBubbleListenerWithPassiveFlag(
        targetContainer,
        domEventName,
        listener,
        isPassiveListener
      );
    } else {
      unsubscribeListener = addEventBubbleListener(
        targetContainer,
        domEventName,
        listener
      );
    }
  }
};

const listenToNativeEvent = (
  domEventName,
  isCapturePhaseListener,
  rootContainerElement,
  targetElement,
  eventSystemFlags = 0
) => {
  let target = rootContainerElement;

  if (
    domEventName === 'selectionchange' &&
    rootContainerElement.nodeType !== DOCUMENT_NODE
  ) {
    target = rootContainerElement.ownerDocument;
  }

  if (
    targetElement !== null &&
    !isCapturePhaseListener &&
    nonDelegatedEvents.has(domEventName)
  ) {
    if (domEventName !== 'scroll') {
      return;
    }
    eventSystemFlags |= IS_NON_DELEGATED;
    target = targetElement;
  }

  const listenerSet = getEventListenerSet(target);
  const listenerSetKey = getListenerSetKey(
    domEventName,
    isCapturePhaseListener
  );

  if (!listenerSet.has(listenerSetKey)) {
    if (isCapturePhaseListener) {
      eventSystemFlags |= IS_CAPTURE_PHASE;
    }
    addTrappedEventListener(
      target,
      domEventName,
      eventSystemFlags,
      isCapturePhaseListener
    );
    listenerSet.add(listenerSetKey);
  }
};

const listenToAllSupportedEvents = (rootContainerElement) => {
  if (rootContainerElement[listeningMarker]) return;

  rootContainerElement[listeningMarker] = true;

  allNativeEvents.forEach((domEventName) => {
    if (!nonDelegatedEvents.has(domEventName)) {
      listenToNativeEvent(domEventName, false, rootContainerElement, null);
    }

    listenToNativeEvent(domEventName, true, rootContainerElement, null);
  });
};

const listenToNonDelegatedEvent = (domEventName, targetElement) => {
  const isCapturePhaseListener = false;
  const listenerSet = getEventListenerSet(targetElement);
  const listenerSetKey = getListenerSetKey(
    domEventName,
    isCapturePhaseListener
  );
  if (!listenerSet.has(listenerSetKey)) {
    addTrappedEventListener(
      targetElement,
      domEventName,
      IS_NON_DELEGATED,
      isCapturePhaseListener
    );
    listenerSet.add(listenerSetKey);
  }
};

export {
  mediaEventTypes,
  nonDelegatedEvents,
  getListenerSetKey,
  listenToNativeEvent,
  listenToAllSupportedEvents,
  listenToNonDelegatedEvent,
};