How to use commitResetTextContent method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

ReactFiberCommitWork.js

Source: ReactFiberCommitWork.js Github

copy
1/**
2 * Copyright (c) 2013-present, Facebook, Inc.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 *
7 * @flow
8 */
9
10import type {HostConfig} from 'react-reconciler';
11import type {Fiber} from './ReactFiber';
12
13import {
14  enableMutatingReconciler,
15  enableNoopReconciler,
16  enablePersistentReconciler,
17} from 'shared/ReactFeatureFlags';
18import {
19  ClassComponent,
20  HostRoot,
21  HostComponent,
22  HostText,
23  HostPortal,
24  CallComponent,
25} from 'shared/ReactTypeOfWork';
26import ReactErrorUtils from 'shared/ReactErrorUtils';
27import {Placement, Update, ContentReset} from 'shared/ReactTypeOfSideEffect';
28import invariant from 'fbjs/lib/invariant';
29
30import {commitCallbacks} from './ReactFiberUpdateQueue';
31import {onCommitUnmount} from './ReactFiberDevToolsHook';
32import {startPhaseTimer, stopPhaseTimer} from './ReactDebugFiberPerf';
33
34var {invokeGuardedCallback, hasCaughtError, clearCaughtError} = ReactErrorUtils;
35
36export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
37  config: HostConfig<T, P, I, TI, HI, PI, C, CC, CX, PL>,
38  captureError: (failedFiber: Fiber, error: mixed) => Fiber | null,
39) {
40  const {getPublicInstance, mutation, persistence} = config;
41
42  var callComponentWillUnmountWithTimer = function(current, instance) {
43    startPhaseTimer(current, 'componentWillUnmount');
44    instance.props = current.memoizedProps;
45    instance.state = current.memoizedState;
46    instance.componentWillUnmount();
47    stopPhaseTimer();
48  };
49
50  // Capture errors so they don't interrupt unmounting.
51  function safelyCallComponentWillUnmount(current, instance) {
52    if (__DEV__) {
53      invokeGuardedCallback(
54        null,
55        callComponentWillUnmountWithTimer,
56        null,
57        current,
58        instance,
59      );
60      if (hasCaughtError()) {
61        const unmountError = clearCaughtError();
62        captureError(current, unmountError);
63      }
64    } else {
65      try {
66        callComponentWillUnmountWithTimer(current, instance);
67      } catch (unmountError) {
68        captureError(current, unmountError);
69      }
70    }
71  }
72
73  function safelyDetachRef(current: Fiber) {
74    const ref = current.ref;
75    if (ref !== null) {
76      if (__DEV__) {
77        invokeGuardedCallback(null, ref, null, null);
78        if (hasCaughtError()) {
79          const refError = clearCaughtError();
80          captureError(current, refError);
81        }
82      } else {
83        try {
84          ref(null);
85        } catch (refError) {
86          captureError(current, refError);
87        }
88      }
89    }
90  }
91
92  function commitLifeCycles(current: Fiber | null, finishedWork: Fiber): void {
93    switch (finishedWork.tag) {
94      case ClassComponent: {
95        const instance = finishedWork.stateNode;
96        if (finishedWork.effectTag & Update) {
97          if (current === null) {
98            startPhaseTimer(finishedWork, 'componentDidMount');
99            instance.props = finishedWork.memoizedProps;
100            instance.state = finishedWork.memoizedState;
101            instance.componentDidMount();
102            stopPhaseTimer();
103          } else {
104            const prevProps = current.memoizedProps;
105            const prevState = current.memoizedState;
106            startPhaseTimer(finishedWork, 'componentDidUpdate');
107            instance.props = finishedWork.memoizedProps;
108            instance.state = finishedWork.memoizedState;
109            instance.componentDidUpdate(prevProps, prevState);
110            stopPhaseTimer();
111          }
112        }
113        const updateQueue = finishedWork.updateQueue;
114        if (updateQueue !== null) {
115          commitCallbacks(updateQueue, instance);
116        }
117        return;
118      }
119      case HostRoot: {
120        const updateQueue = finishedWork.updateQueue;
121        if (updateQueue !== null) {
122          const instance =
123            finishedWork.child !== null ? finishedWork.child.stateNode : null;
124          commitCallbacks(updateQueue, instance);
125        }
126        return;
127      }
128      case HostComponent: {
129        const instance: I = finishedWork.stateNode;
130
131        // Renderers may schedule work to be done after host components are mounted
132        // (eg DOM renderer may schedule auto-focus for inputs and form controls).
133        // These effects should only be committed when components are first mounted,
134        // aka when there is no current/alternate.
135        if (current === null && finishedWork.effectTag & Update) {
136          const type = finishedWork.type;
137          const props = finishedWork.memoizedProps;
138          commitMount(instance, type, props, finishedWork);
139        }
140
141        return;
142      }
143      case HostText: {
144        // We have no life-cycles associated with text.
145        return;
146      }
147      case HostPortal: {
148        // We have no life-cycles associated with portals.
149        return;
150      }
151      default: {
152        invariant(
153          false,
154          'This unit of work tag should not have side-effects. This error is ' +
155            'likely caused by a bug in React. Please file an issue.',
156        );
157      }
158    }
159  }
160
161  function commitAttachRef(finishedWork: Fiber) {
162    const ref = finishedWork.ref;
163    if (ref !== null) {
164      const instance = finishedWork.stateNode;
165      switch (finishedWork.tag) {
166        case HostComponent:
167          ref(getPublicInstance(instance));
168          break;
169        default:
170          ref(instance);
171      }
172    }
173  }
174
175  function commitDetachRef(current: Fiber) {
176    const currentRef = current.ref;
177    if (currentRef !== null) {
178      currentRef(null);
179    }
180  }
181
182  // User-originating errors (lifecycles and refs) should not interrupt
183  // deletion, so don't let them throw. Host-originating errors should
184  // interrupt deletion, so it's okay
185  function commitUnmount(current: Fiber): void {
186    if (typeof onCommitUnmount === 'function') {
187      onCommitUnmount(current);
188    }
189
190    switch (current.tag) {
191      case ClassComponent: {
192        safelyDetachRef(current);
193        const instance = current.stateNode;
194        if (typeof instance.componentWillUnmount === 'function') {
195          safelyCallComponentWillUnmount(current, instance);
196        }
197        return;
198      }
199      case HostComponent: {
200        safelyDetachRef(current);
201        return;
202      }
203      case CallComponent: {
204        commitNestedUnmounts(current.stateNode);
205        return;
206      }
207      case HostPortal: {
208        // TODO: this is recursive.
209        // We are also not using this parent because
210        // the portal will get pushed immediately.
211        if (enableMutatingReconciler && mutation) {
212          unmountHostComponents(current);
213        } else if (enablePersistentReconciler && persistence) {
214          emptyPortalContainer(current);
215        }
216        return;
217      }
218    }
219  }
220
221  function commitNestedUnmounts(root: Fiber): void {
222    // While we're inside a removed host node we don't want to call
223    // removeChild on the inner nodes because they're removed by the top
224    // call anyway. We also want to call componentWillUnmount on all
225    // composites before this host node is removed from the tree. Therefore
226    // we do an inner loop while we're still inside the host node.
227    let node: Fiber = root;
228    while (true) {
229      commitUnmount(node);
230      // Visit children because they may contain more composite or host nodes.
231      // Skip portals because commitUnmount() currently visits them recursively.
232      if (
233        node.child !== null &&
234        // If we use mutation we drill down into portals using commitUnmount above.
235        // If we don't use mutation we drill down into portals here instead.
236        (!mutation || node.tag !== HostPortal)
237      ) {
238        node.child.return = node;
239        node = node.child;
240        continue;
241      }
242      if (node === root) {
243        return;
244      }
245      while (node.sibling === null) {
246        if (node.return === null || node.return === root) {
247          return;
248        }
249        node = node.return;
250      }
251      node.sibling.return = node.return;
252      node = node.sibling;
253    }
254  }
255
256  function detachFiber(current: Fiber) {
257    // Cut off the return pointers to disconnect it from the tree. Ideally, we
258    // should clear the child pointer of the parent alternate to let this
259    // get GC:ed but we don't know which for sure which parent is the current
260    // one so we'll settle for GC:ing the subtree of this child. This child
261    // itself will be GC:ed when the parent updates the next time.
262    current.return = null;
263    current.child = null;
264    if (current.alternate) {
265      current.alternate.child = null;
266      current.alternate.return = null;
267    }
268  }
269
270  if (!mutation) {
271    let commitContainer;
272    if (persistence) {
273      const {replaceContainerChildren, createContainerChildSet} = persistence;
274      var emptyPortalContainer = function(current: Fiber) {
275        const portal: {containerInfo: C, pendingChildren: CC} =
276          current.stateNode;
277        const {containerInfo} = portal;
278        const emptyChildSet = createContainerChildSet(containerInfo);
279        replaceContainerChildren(containerInfo, emptyChildSet);
280      };
281      commitContainer = function(finishedWork: Fiber) {
282        switch (finishedWork.tag) {
283          case ClassComponent: {
284            return;
285          }
286          case HostComponent: {
287            return;
288          }
289          case HostText: {
290            return;
291          }
292          case HostRoot:
293          case HostPortal: {
294            const portalOrRoot: {containerInfo: C, pendingChildren: CC} =
295              finishedWork.stateNode;
296            const {containerInfo, pendingChildren} = portalOrRoot;
297            replaceContainerChildren(containerInfo, pendingChildren);
298            return;
299          }
300          default: {
301            invariant(
302              false,
303              'This unit of work tag should not have side-effects. This error is ' +
304                'likely caused by a bug in React. Please file an issue.',
305            );
306          }
307        }
308      };
309    } else {
310      commitContainer = function(finishedWork: Fiber) {
311        // Noop
312      };
313    }
314    if (enablePersistentReconciler || enableNoopReconciler) {
315      return {
316        commitResetTextContent(finishedWork: Fiber) {},
317        commitPlacement(finishedWork: Fiber) {},
318        commitDeletion(current: Fiber) {
319          // Detach refs and call componentWillUnmount() on the whole subtree.
320          commitNestedUnmounts(current);
321          detachFiber(current);
322        },
323        commitWork(current: Fiber | null, finishedWork: Fiber) {
324          commitContainer(finishedWork);
325        },
326        commitLifeCycles,
327        commitAttachRef,
328        commitDetachRef,
329      };
330    } else if (persistence) {
331      invariant(false, 'Persistent reconciler is disabled.');
332    } else {
333      invariant(false, 'Noop reconciler is disabled.');
334    }
335  }
336  const {
337    commitMount,
338    commitUpdate,
339    resetTextContent,
340    commitTextUpdate,
341    appendChild,
342    appendChildToContainer,
343    insertBefore,
344    insertInContainerBefore,
345    removeChild,
346    removeChildFromContainer,
347  } = mutation;
348
349  function getHostParentFiber(fiber: Fiber): Fiber {
350    let parent = fiber.return;
351    while (parent !== null) {
352      if (isHostParent(parent)) {
353        return parent;
354      }
355      parent = parent.return;
356    }
357    invariant(
358      false,
359      'Expected to find a host parent. This error is likely caused by a bug ' +
360        'in React. Please file an issue.',
361    );
362  }
363
364  function isHostParent(fiber: Fiber): boolean {
365    return (
366      fiber.tag === HostComponent ||
367      fiber.tag === HostRoot ||
368      fiber.tag === HostPortal
369    );
370  }
371
372  function getHostSibling(fiber: Fiber): ?I {
373    // We're going to search forward into the tree until we find a sibling host
374    // node. Unfortunately, if multiple insertions are done in a row we have to
375    // search past them. This leads to exponential search for the next sibling.
376    // TODO: Find a more efficient way to do this.
377    let node: Fiber = fiber;
378    siblings: while (true) {
379      // If we didn't find anything, let's try the next sibling.
380      while (node.sibling === null) {
381        if (node.return === null || isHostParent(node.return)) {
382          // If we pop out of the root or hit the parent the fiber we are the
383          // last sibling.
384          return null;
385        }
386        node = node.return;
387      }
388      node.sibling.return = node.return;
389      node = node.sibling;
390      while (node.tag !== HostComponent && node.tag !== HostText) {
391        // If it is not host node and, we might have a host node inside it.
392        // Try to search down until we find one.
393        if (node.effectTag & Placement) {
394          // If we don't have a child, try the siblings instead.
395          continue siblings;
396        }
397        // If we don't have a child, try the siblings instead.
398        // We also skip portals because they are not part of this host tree.
399        if (node.child === null || node.tag === HostPortal) {
400          continue siblings;
401        } else {
402          node.child.return = node;
403          node = node.child;
404        }
405      }
406      // Check if this host node is stable or about to be placed.
407      if (!(node.effectTag & Placement)) {
408        // Found it!
409        return node.stateNode;
410      }
411    }
412  }
413
414  function commitPlacement(finishedWork: Fiber): void {
415    // Recursively insert all host nodes into the parent.
416    const parentFiber = getHostParentFiber(finishedWork);
417    let parent;
418    let isContainer;
419    switch (parentFiber.tag) {
420      case HostComponent:
421        parent = parentFiber.stateNode;
422        isContainer = false;
423        break;
424      case HostRoot:
425        parent = parentFiber.stateNode.containerInfo;
426        isContainer = true;
427        break;
428      case HostPortal:
429        parent = parentFiber.stateNode.containerInfo;
430        isContainer = true;
431        break;
432      default:
433        invariant(
434          false,
435          'Invalid host parent fiber. This error is likely caused by a bug ' +
436            'in React. Please file an issue.',
437        );
438    }
439    if (parentFiber.effectTag & ContentReset) {
440      // Reset the text content of the parent before doing any insertions
441      resetTextContent(parent);
442      // Clear ContentReset from the effect tag
443      parentFiber.effectTag &= ~ContentReset;
444    }
445
446    const before = getHostSibling(finishedWork);
447    // We only have the top Fiber that was inserted but we need recurse down its
448    // children to find all the terminal nodes.
449    let node: Fiber = finishedWork;
450    while (true) {
451      if (node.tag === HostComponent || node.tag === HostText) {
452        if (before) {
453          if (isContainer) {
454            insertInContainerBefore(parent, node.stateNode, before);
455          } else {
456            insertBefore(parent, node.stateNode, before);
457          }
458        } else {
459          if (isContainer) {
460            appendChildToContainer(parent, node.stateNode);
461          } else {
462            appendChild(parent, node.stateNode);
463          }
464        }
465      } else if (node.tag === HostPortal) {
466        // If the insertion itself is a portal, then we don't want to traverse
467        // down its children. Instead, we'll get insertions from each child in
468        // the portal directly.
469      } else if (node.child !== null) {
470        node.child.return = node;
471        node = node.child;
472        continue;
473      }
474      if (node === finishedWork) {
475        return;
476      }
477      while (node.sibling === null) {
478        if (node.return === null || node.return === finishedWork) {
479          return;
480        }
481        node = node.return;
482      }
483      node.sibling.return = node.return;
484      node = node.sibling;
485    }
486  }
487
488  function unmountHostComponents(current): void {
489    // We only have the top Fiber that was inserted but we need recurse down its
490    // children to find all the terminal nodes.
491    let node: Fiber = current;
492
493    // Each iteration, currentParent is populated with node's host parent if not
494    // currentParentIsValid.
495    let currentParentIsValid = false;
496    let currentParent;
497    let currentParentIsContainer;
498
499    while (true) {
500      if (!currentParentIsValid) {
501        let parent = node.return;
502        findParent: while (true) {
503          invariant(
504            parent !== null,
505            'Expected to find a host parent. This error is likely caused by ' +
506              'a bug in React. Please file an issue.',
507          );
508          switch (parent.tag) {
509            case HostComponent:
510              currentParent = parent.stateNode;
511              currentParentIsContainer = false;
512              break findParent;
513            case HostRoot:
514              currentParent = parent.stateNode.containerInfo;
515              currentParentIsContainer = true;
516              break findParent;
517            case HostPortal:
518              currentParent = parent.stateNode.containerInfo;
519              currentParentIsContainer = true;
520              break findParent;
521          }
522          parent = parent.return;
523        }
524        currentParentIsValid = true;
525      }
526
527      if (node.tag === HostComponent || node.tag === HostText) {
528        commitNestedUnmounts(node);
529        // After all the children have unmounted, it is now safe to remove the
530        // node from the tree.
531        if (currentParentIsContainer) {
532          removeChildFromContainer((currentParent: any), node.stateNode);
533        } else {
534          removeChild((currentParent: any), node.stateNode);
535        }
536        // Don't visit children because we already visited them.
537      } else if (node.tag === HostPortal) {
538        // When we go into a portal, it becomes the parent to remove from.
539        // We will reassign it back when we pop the portal on the way up.
540        currentParent = node.stateNode.containerInfo;
541        // Visit children because portals might contain host components.
542        if (node.child !== null) {
543          node.child.return = node;
544          node = node.child;
545          continue;
546        }
547      } else {
548        commitUnmount(node);
549        // Visit children because we may find more host components below.
550        if (node.child !== null) {
551          node.child.return = node;
552          node = node.child;
553          continue;
554        }
555      }
556      if (node === current) {
557        return;
558      }
559      while (node.sibling === null) {
560        if (node.return === null || node.return === current) {
561          return;
562        }
563        node = node.return;
564        if (node.tag === HostPortal) {
565          // When we go out of the portal, we need to restore the parent.
566          // Since we don't keep a stack of them, we will search for it.
567          currentParentIsValid = false;
568        }
569      }
570      node.sibling.return = node.return;
571      node = node.sibling;
572    }
573  }
574
575  function commitDeletion(current: Fiber): void {
576    // Recursively delete all host nodes from the parent.
577    // Detach refs and call componentWillUnmount() on the whole subtree.
578    unmountHostComponents(current);
579    detachFiber(current);
580  }
581
582  function commitWork(current: Fiber | null, finishedWork: Fiber): void {
583    switch (finishedWork.tag) {
584      case ClassComponent: {
585        return;
586      }
587      case HostComponent: {
588        const instance: I = finishedWork.stateNode;
589        if (instance != null) {
590          // Commit the work prepared earlier.
591          const newProps = finishedWork.memoizedProps;
592          // For hydration we reuse the update path but we treat the oldProps
593          // as the newProps. The updatePayload will contain the real change in
594          // this case.
595          const oldProps = current !== null ? current.memoizedProps : newProps;
596          const type = finishedWork.type;
597          // TODO: Type the updateQueue to be specific to host components.
598          const updatePayload: null | PL = (finishedWork.updateQueue: any);
599          finishedWork.updateQueue = null;
600          if (updatePayload !== null) {
601            commitUpdate(
602              instance,
603              updatePayload,
604              type,
605              oldProps,
606              newProps,
607              finishedWork,
608            );
609          }
610        }
611        return;
612      }
613      case HostText: {
614        invariant(
615          finishedWork.stateNode !== null,
616          'This should have a text node initialized. This error is likely ' +
617            'caused by a bug in React. Please file an issue.',
618        );
619        const textInstance: TI = finishedWork.stateNode;
620        const newText: string = finishedWork.memoizedProps;
621        // For hydration we reuse the update path but we treat the oldProps
622        // as the newProps. The updatePayload will contain the real change in
623        // this case.
624        const oldText: string =
625          current !== null ? current.memoizedProps : newText;
626        commitTextUpdate(textInstance, oldText, newText);
627        return;
628      }
629      case HostRoot: {
630        return;
631      }
632      default: {
633        invariant(
634          false,
635          'This unit of work tag should not have side-effects. This error is ' +
636            'likely caused by a bug in React. Please file an issue.',
637        );
638      }
639    }
640  }
641
642  function commitResetTextContent(current: Fiber) {
643    resetTextContent(current.stateNode);
644  }
645
646  if (enableMutatingReconciler) {
647    return {
648      commitResetTextContent,
649      commitPlacement,
650      commitDeletion,
651      commitWork,
652      commitLifeCycles,
653      commitAttachRef,
654      commitDetachRef,
655    };
656  } else {
657    invariant(false, 'Mutating reconciler is disabled.');
658  }
659}
660
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)