How to use detachFiberAfterEffects 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
1import { NoFlags } from "./ReactFiberFlags";
2
3let nextEffect = null;
4
5export function commitPassiveUnmountEffects(firstChild) {
6  nextEffect = firstChild;
7  commitPassiveUnmountEffects_begin();
8}
9
10function commitPassiveUnmountEffects_begin() {
11  while (nextEffect !== null) {
12    const fiber = nextEffect;
13    const child = fiber.child;
14
15    if ((nextEffect.flags & ChildDeletion) !== NoFlags) {
16      const deletions = fiber.deletions;
17      if (deletions !== null) {
18        for (let i = 0; i < deletions.length; i++) {
19          const fiberToDelete = deletions[i];
20          nextEffect = fiberToDelete;
21          commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
22            fiberToDelete,
23            fiber
24          );
25
26          // Now that passive effects have been processed, it's safe to detach lingering pointers.
27          const alternate = fiberToDelete.alternate;
28          detachFiberAfterEffects(fiberToDelete);
29          if (alternate !== null) {
30            detachFiberAfterEffects(alternate);
31          }
32        }
33
34        nextEffect = fiber;
35      }
36    }
37
38    if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null) {
39      ensureCorrectReturnPointer(child, fiber);
40      nextEffect = child;
41    } else {
42      commitPassiveUnmountEffects_complete();
43    }
44  }
45}
46
47function commitPassiveUnmountEffects_complete() {
48  while (nextEffect !== null) {
49    const fiber = nextEffect;
50    if ((fiber.flags & Passive) !== NoFlags) {
51      // setCurrentDebugFiberInDEV(fiber);
52      commitPassiveUnmountOnFiber(fiber);
53      // resetCurrentDebugFiberInDEV();
54    }
55
56    const sibling = fiber.sibling;
57    if (sibling !== null) {
58      ensureCorrectReturnPointer(sibling, fiber.return);
59      nextEffect = sibling;
60      return;
61    }
62
63    nextEffect = fiber.return;
64  }
65}
66
67function commitPassiveUnmountOnFiber(finishedWork) {
68  switch (finishedWork.tag) {
69    case FunctionComponent:
70    case ForwarfRef:
71    case SimpleMemoComponent: {
72      // if (
73      //     enableProfilerTimer &&
74      //     enableProfilerCommitHooks &&
75      //     finishedWork.mode & ProfileMode
76      //   ) {
77      //     startPassiveEffectTimer();
78      //     commitHookEffectListUnmount(
79      //       HookPassive | HookHasEffect,
80      //       finishedWork,
81      //       finishedWork.return,
82      //     );
83      //     recordPassiveEffectDuration(finishedWork);
84      //   } else {
85      commitHookEffectListUnmount(
86        HookPassive | HookHasEffect,
87        finishedWork,
88        finishedWork.return
89      );
90      //   }
91
92      break;
93    }
94  }
95}
96
97function commitHookEffectListUnmount(flags, finishedWork, nearestMountedAncestor) {
98    const updateQueue = finishedWork.updateQueue
99    const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
100    if (lastEffect !== null) {
101        const firstEffect = lastEffect.next;
102        let effect = firstEffect;
103        do {
104            if ((effect.tag & flags) === flags) {
105                // Unmount
106                const destroy = effect.destroy;
107                effect.destroy = undefined;
108                if (destroy !== undefined) {
109                    safelyCallDestroy(finishedWork, nearestMountedAncestor)
110                }
111            }
112            effect = effect.next;
113        } while (effect !== firstEffect)
114    }
115}
116
Full Screen

FiberCommitWork.js

Source: FiberCommitWork.js Github

copy
1import{
2 HostRoot,
3 HostText,
4 HostComponent,
5 FunctionComponent,
6 BeforeMutationMask,
7 MutationMask,
8 NoFlags,
9 ContentReset,
10 Placement,
11 Update,
12 PlacementAndUpdate,
13 LayoutMask,
14 SuspenseComponent,
15 OffscreenComponent,
16 ChildDeletion,
17 PassiveMask,
18 Passive,
19 HookPassive,
20 HookHasEffect
21} from '@Jeact/shared/Constants';
22import {
23    resolveRetryWakeable
24} from '@Jeact/vDOM/FiberWorkLoop';
25import {
26    updateFiberProps,
27    detachDeletedInstance
28} from '@Jeact/vDOM/DOMComponentTree';
29import { updateDOMProperties } from '@Jeact/vDOM/DOMComponent'
30
31let nextEffect = null;
32
33export function commitBeforeMutationEffects(firstChild){
34    nextEffect = firstChild;
35    commitBeforeMutationEffects_begin();
36}
37
38function commitBeforeMutationEffects_begin(){
39    while(nextEffect !== null){
40        const fiber = nextEffect;
41
42        const deletions = fiber.deletions;
43        if(deletions !== null){
44            for (let i = 0; i < deletions.length; i++){
45                const deletion = deletions[i];
46                // commitBeforeMutationEffectsDeletion(deletion);
47            }
48        }
49        const child = fiber.child;
50        if(
51            (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&
52            child !== null
53        ){
54            nextEffect = child;
55        } else {
56            commitBeforeMutationEffects_complete();
57        }
58    }
59}
60
61function commitBeforeMutationEffects_complete(){
62    while(nextEffect !== null){
63        const fiber = nextEffect;
64        commitBeforeMutationEffectsOnFiber(fiber);
65
66        const sibling = fiber.sibling;
67        if(sibling !== null){
68            nextEffect = sibling;
69            return;
70        }
71
72        nextEffect = fiber.return;
73    }
74}
75
76function commitBeforeMutationEffectsOnFiber(finishedWork){
77    const current = finishedWork.alternate;
78    const flags = finishedWork.flags;
79}
80
81function commitHookEffectListUnmount(
82    flags, 
83    finishedWork, 
84    nearestMountedAncestor
85){
86    const updateQueue = finishedWork.updateQueue;
87    const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
88    if (lastEffect !== null){
89        const firstEffect = lastEffect.next;
90        let effect = firstEffect;
91        do {
92            if ((effect.tag & flags) === flags){
93                // unmount
94                const destroy = effect.destroy;
95                effect.destroy = undefined;
96                if (destroy !== undefined){
97                     destroy();
98                }
99            }
100            effect = effect.next;
101        } while (effect !== firstEffect);
102    }
103}
104
105function commitHookEffectListMount(tag, finishedWork){
106    const updateQueue = finishedWork.updateQueue;
107    const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
108    if (lastEffect !== null){
109        const firstEffect = lastEffect.next;
110        let effect = firstEffect;
111        do {
112            if ((effect.tag & tag) === tag){
113                // Mount
114                const create = effect.create;
115                effect.destroy = create();
116            }
117            effect = effect.next;
118        } while(effect !== firstEffect);
119    }
120}
121
122function attachSuspenseRetryListeners(finishedWork){
123  const wakeables = finishedWork.updateQueue;
124  if (wakeables !== null){
125    finishedWork.updateQueue = null;
126    let retryCache = finishedWork.stateNode;
127    if(retryCache === null){
128      retryCache = finishedWork.stateNode = new WeakSet()
129    }
130    wakeables.forEach(wakeable => {
131      const retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);
132        if(!retryCache.has(wakeable)){
133          retryCache.add(wakeable);
134          wakeable.then(retry, retry); 
135        }
136    })
137  }
138}
139
140export function commitMutationEffects(root,firstChild){
141    nextEffect = firstChild;
142    commitMutationEffects_begin(root);
143}
144
145function commitMutationEffects_begin(root){
146    while(nextEffect !== null){
147        const fiber = nextEffect;
148
149        const deletions = fiber.deletions;
150        if(deletions !==null ){
151            for (let i = 0; i < deletions.length; i++){
152                const childToDelete = deletions[i];
153                commitDeletion(root, childToDelete, fiber);
154            }
155        }
156
157        const child = fiber.child;
158        if((fiber.subtreeFlags & MutationMask) !== NoFlags && child !== null){
159            nextEffect = child;
160        } else {
161            commitMutationEffects_complete(root);
162        }
163    }
164}
165
166function commitMutationEffects_complete(root){
167    while(nextEffect !== null){
168        const fiber = nextEffect;
169        commitMutationEffectsOnFiber(fiber, root);
170        const sibling = fiber.sibling;
171        if (sibling !== null){
172            nextEffect = sibling;
173            return;
174        }
175        nextEffect = fiber.return;
176    }
177}
178
179function commitMutationEffectsOnFiber(finishedWork, root){
180    const flags = finishedWork.flags;
181    const primaryFlags = flags & (Placement | Update);
182    switch(primaryFlags){
183        case Placement:{
184            commitPlacement(finishedWork);
185            finishedWork.flags &= ~Placement;
186            break;
187        }
188        case PlacementAndUpdate:{
189            // Placement
190            commitPlacement(finishedWork);
191            finishedWork.flags &= ~Placement;
192
193            //Update
194            const current = finishedWork.alternate;
195            commitWork(current, finishedWork);
196            break;
197        }
198        case Update:{
199            const current = finishedWork.alternate;
200            commitWork(current, finishedWork);
201            break;
202        }
203    }
204}
205
206export function commitLayoutEffects(finishedWork, root, committedLanes){
207    nextEffect = finishedWork;
208    commitLayoutEffects_begin(finishedWork, root, committedLanes);
209}
210
211function commitLayoutEffects_begin(subtreeRoot, root, committedLanes){
212    while (nextEffect !== null){
213        const fiber = nextEffect;
214        const firstChild = fiber.child;
215        if ((fiber.subtreeFlags & LayoutMask) !== NoFlags && firstChild !== null){
216            nextEffect = firstChild;
217        } else {
218            commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
219        }
220    }
221}
222
223function commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes){
224    while (nextEffect !== null){
225        const fiber = nextEffect;
226        if((fiber.flags & LayoutMask) !== NoFlags){
227            const current = fiber.alternate;
228            commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
229        }
230
231        if (fiber === subtreeRoot){
232            nextEffect = null;
233            return;
234        }
235
236        const sibling = fiber.sibling;
237        if (sibling !== null){
238            nextEffect = sibling;
239            return;
240        }
241
242        nextEffect = fiber.return;
243    }
244}
245
246export function commitPassiveMountEffects(root, finishedWork){
247    nextEffect = finishedWork;
248    commitPassiveMountEffects_begin(finishedWork, root);
249}
250
251function commitPassiveMountEffects_begin(subtreeRoot, root){
252    while(nextEffect!== null){
253        const fiber = nextEffect;
254        const firstChild = fiber.child;
255        if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null){
256            nextEffect = firstChild;
257        } else {
258            commitPassiveMountEffects_complete(subtreeRoot, root);
259        }
260    }
261}
262
263function commitPassiveMountEffects_complete(subtreeRoot, root){
264    while(nextEffect !== null){
265        const fiber = nextEffect;
266        if ((fiber.flags & Passive) !== NoFlags){
267            commitPassiveMountEffectsOnFiber(root, fiber);
268        }
269
270        if (fiber === subtreeRoot){
271            nextEffect = null;
272            return ;
273        }
274
275        const sibling = fiber.sibling;
276        if (sibling !== null){
277            nextEffect = sibling;
278            return;
279        }
280
281        nextEffect = fiber.return;
282    }
283}
284
285function commitPassiveMountOnFiber(finishedRoot, finishedWork){
286    switch(finishedWork.tag){
287        case FunctionComponent:{
288            commitHookEffectListMount(
289                HookPassive | HookHasEffect, 
290                finishedWork
291            );
292            break;
293        }
294    }
295}
296
297function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork, committedLanes){
298    if ((finishedWork.flags & Update) !== NoFlags){
299        switch(finishedWork.tag){
300            default:
301                break;
302        }
303    }
304}
305
306export function commitPassiveUnmountEffects(firstChild){
307    nextEffect = firstChild;
308    commitPassiveUnmountEffects_begin();
309}
310
311function commitPassiveUnmountEffects_begin(){
312    while(nextEffect !== null){
313        const fiber = nextEffect;
314        const child = fiber.child;
315
316        if ((nextEffect.flags & ChildDeletion) !== NoFlags){
317            const deletions = fiber.deletions;
318            if(deletions !== null){
319                for (let i = 0; i < deletions.length; i++){
320                    const fiberToDel = deletions[i];
321                    nextEffect = fiberToDel;
322                    commitPassiveUnmountEffectsInDelTree_begin(
323                        fiberToDel,
324                        fiber,
325                    )
326                }
327            }
328        }
329        if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null){
330            nextEffect = child;
331        } else {
332            commitPassiveUnmountEffects_complete();
333        }
334    }
335}
336
337function commitPassiveUnmountEffects_complete(){
338    while (nextEffect !== null){
339        const fiber = nextEffect;
340        if ((fiber.flags & Passive) !== NoFlags){
341            commitPassiveUnmountOnFiber(fiber);
342        }
343
344        const sibling = fiber.sibling;
345        if (sibling !== null){
346            nextEffect = sibling;
347            return;
348        }
349
350        nextEffect = fiber.return;
351    }
352}
353
354function commitPassiveUnmountOnFiber(finishedWork){
355    switch(finishedWork.tag){
356        case FunctionComponent:{
357            commitHookEffectListUnmount(
358                HookPassive | HookHasEffect,
359                finishedWork,
360                finishedWork.return
361            )
362        }
363    }
364}
365
366function commitPassiveUnmountEffectsInDelTree_begin(
367    deletedSubtreeRoot,
368    nearestMountedAncestor
369){
370    while (nextEffect !== null){
371        const fiber = nextEffect;
372        
373        commitPassiveUnmountEffectsInDelTreeOnFiber(
374            fiber, 
375            nearestMountedAncestor
376        );
377
378        const child = fiber.child;
379        if (child !== null){
380            nextEffect = child;
381        } else {
382            commitPassiveUnmountEffectsInDelTree_complete(
383                deletedSubtreeRoot
384            )
385        }
386    }
387}
388
389function commitPassiveUnmountEffectsInDelTree_complete(deletedSubtreeRoot){
390    while (nextEffect !== null){
391        const fiber = nextEffect;
392        const sibling = fiber.sibling;
393        const returnFiber = fiber.return;
394        if (fiber === deletedSubtreeRoot){
395            detachFiberAfterEffects(fiber);
396            nextEffect = null;
397            return;
398        }
399        if (sibling !== null){
400            nextEffect = sibling;
401            return;
402        }
403        nextEffect = returnFiber;
404    }
405}
406
407function commitPassiveUnmountEffectsInDelTreeOnFiber(
408    current, nearestMountedAncestor
409){
410    switch(current.tag){
411        case FunctionComponent:{
412            commitHookEffectListUnmount(
413                HookPassive,
414                current,
415                nearestMountedAncestor
416            );
417            break;
418        }
419    }
420}
421
422function commitUnmount(finishedRoot, current, nearestMountedAncestor){
423    switch(current.tag){
424        case FunctionComponent:
425        case HostComponent:
426            return;
427    }
428}
429
430function commitNestedUnmounts(finishedRoot, root, nearestMountedAncestor){
431    let node = root;
432    while(true){
433        commitUnmount(finishedRoot, node, nearestMountedAncestor);
434        if(node.child !== null){
435            node.child.return = node;
436            node = node.child;
437            continue;
438        }
439        if (node === root){
440            return;
441        }
442        while (node.sibling === null){
443            if (node.return === null || node.return === root){
444                return;
445            }
446            node = node.return;
447        }
448        node.sibling.return = node.return;
449        node = node.sibling;
450    }
451}
452
453function detachFiberMutation(fiber){
454    const alternate = fiber.alternate;
455    if (alternate !== null){
456        alternate.return = null;
457    }
458    fiber.return = null;
459}
460
461function detachFiberAfterEffects(fiber){
462    const alternate = fiber.alternate;
463    if (alternate !== null){
464        fiber.alternate = null;
465        detachFiberAfterEffects(alternate);
466    }
467
468    fiber.child = null;
469    fiber.deletions = null;
470    fiber.sibling = null;
471
472    if (fiber.tag === HostComponent){
473        if(fiber.stateNode !== null){
474            detachDeletedInstance(fiber.stateNode);
475        }
476    }
477    fiber.stateNode = null;
478}
479
480function toggleAllChildren(finishedWork, isHidden){
481  let hostSubtreeRoot = null;
482
483  let node = finishedWork;
484  while(true){
485    if (node.tag === HostComponent){
486      if(hostSubtreeRoot === null){
487        hostSubtreeRoot = node;
488        const instance = node.stateNode;
489        if (isHidden){
490          const style = instance.style;
491          if(typeof style.setProperty === 'function'){
492            style.setProperty('display', 'none', 'important');
493          } else {
494            style.display = 'none';
495          }
496        } else {
497          instance.style.removeProperty('display');
498        }
499      }
500    } else if (node.tag === HostText){
501      if(hostSubtreeRoot === null){
502        const instance = node.stateNode;
503        if (isHidden){
504            instance.nodeValue ='';
505        } else {
506            instance.nodeValue = node.memoizedProps;
507        }
508      }
509    } else if(
510      node.tag === OffscreenComponent &&
511      node.memoizedState !== null &&
512      node !== finishedWork
513    ){
514      debugger;
515    } else if (node.child !== null){
516        node.child.return = node;
517        node = node.child;
518        continue;
519    }
520    if (node == finishedWork){
521        return;
522    }
523    while(node.sibling === null){
524      if (node.return === null || node.return === finishedWork){
525        return;
526      }
527      if(hostSubtreeRoot === node){
528        hostSubtreeRoot = null;
529      }
530      node = node.return;
531    }
532    if(hostSubtreeRoot === node){
533      hostSubtreeRoot = null;
534    }
535    node.sibling.return = node.return;
536    node = node.sibling;
537  }
538}
539
540function getHostParentFiber(fiber){
541    let parent = fiber.return;
542    while (parent!== null){
543        if (isHostParent(parent)){
544            return parent;
545        }
546        parent = parent.return;
547    }
548}
549
550function isHostParent(fiber){
551    return (
552        fiber.tag === HostRoot ||
553        fiber.tag === HostComponent
554        );
555}
556
557function getHostSibling(fiber){
558    let node = fiber;
559    siblings: while (true){
560        while(node.sibling === null){
561            if (node.return === null || isHostParent(node.return)){
562                return null;
563            }
564            node = node.return;
565        }
566        node.sibling.return = node.return;
567        node = node.sibling;
568        while (
569            node.tag !== HostComponent &&
570            node.tag !== HostText
571        ){
572            if (node.flags & Placement){
573                continue siblings;
574            }
575
576            if (node.child === null){
577                continue siblings;
578            } else {
579                node.child.return = node;
580                node = node.child;
581            }
582        }
583        if (!(node.flags & Placement)){
584            return node.stateNode;
585        }
586    }
587}
588
589function commitPlacement(finishedWork){
590    const parentFiber = getHostParentFiber(finishedWork);
591    let parent;
592    let isContainer;
593    const parentStateNode = parentFiber.stateNode;
594    switch(parentFiber.tag){
595        case HostComponent:
596            parent = parentStateNode;
597            isContainer = false;
598            break;
599        case HostRoot:
600            parent = parentStateNode.container;
601            isContainer = true;
602            break;
603        default:
604            console.error('Unknown parentFiber', parentFiber.tag);
605    }
606
607    const before = getHostSibling(finishedWork);
608    if(isContainer){
609        insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
610    } else {
611        insertOrAppendPlacementNode(finishedWork, before, parent);
612    }
613}
614
615function insertOrAppendPlacementNodeIntoContainer(node, before, parent){
616    const tag = node.tag;
617    const isHost = tag === HostComponent || tag === HostText;
618    if (isHost){
619        const stateNode =node.stateNode;
620        if (before){
621            parent.insertBefore(stateNode, before)
622        } else {
623            parent.append(stateNode);
624        }
625    } else {
626        const child = node.child;
627        if (child !== null){
628            insertOrAppendPlacementNodeIntoContainer(child, before, parent);
629            let sibling = child.sibling;
630            while (sibling !== null ){
631                insertOrAppendPlacementNodeIntoContainer(
632                    sibling, 
633                    before, 
634                parent);
635
636                sibling = sibling.sibling;
637            }
638        }
639    }
640}
641
642function insertOrAppendPlacementNode(node, before, parent){
643    const tag = node.tag;
644    const isHost = tag === HostComponent || tag === HostText;
645    if (isHost){
646        const stateNode = node.stateNode;
647        if (before){
648            parent.insertBefore(stateNode, before);
649        } else {
650            parent.append(stateNode);
651        }
652    } else {
653        const child = node.child;
654        if(child !== null){
655            insertOrAppendPlacementNode(child, before, parent);
656            let sibling = child.sibling;
657            while(sibling !== null){
658                insertOrAppendPlacementNode(sibling, before, parent);
659                sibling = sibling.sibling;
660            }
661        }
662    }
663}
664
665function unmountHostComponents(finishedRoot, current, nearestMountedAncestor){
666    let node = current;
667    let currentParentIsValid = false;
668    let currentParent;
669    let currentParentIsContainer;
670    while(true){
671        if (!currentParentIsValid){
672            let parent = node.return;
673            findParent: while(true){
674                const parentStateNode = parent.stateNode;
675                switch(parent.tag){
676                    case HostComponent:
677                        currentParent = parentStateNode;
678                        currentParentIsContainer = false;
679                        break findParent;
680                    case HostRoot:
681                        currentParent = parentStateNode.container;
682                        currentParentIsContainer = true;
683                        break findParent;
684                }
685                parent = parent.return;
686            }
687            currentParentIsValid = true;
688        }
689
690        if (node.tag === HostComponent || node.tag === HostText){
691            commitNestedUnmounts(finishedRoot, node, nearestMountedAncestor);
692            currentParent.removeChild(node.stateNode);
693        } else {
694            commitUnmount(finishedRoot, node, nearestMountedAncestor);
695            if (node.child !== null){
696                node.child.return = node;
697                node = node.child;
698                continue;
699            }
700        }
701        if (node === current){
702            return;
703        }
704        while (node.sibling === null){
705            if (node.return === null || node.return === current){
706                return;
707            }
708            node = node.return;
709        }
710        node.sibling.return = node.return;
711        node = node.sibling;
712    }
713
714}
715
716function commitDeletion(finishedRoot, current, nearestMountedAncestor){
717    unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
718    detachFiberMutation(current);
719}
720
721function commitWork(current, finishedWork){
722  switch(finishedWork.tag){
723    case HostComponent:{
724      const instance = finishedWork.stateNode;
725      if (instance !== null){
726        const newProps = finishedWork.memoizedProps;
727        const oldProps = current !== null ? current.memoizedProps : newProps;
728        const type = finishedWork.type;
729        const updatePayload = finishedWork.updateQueue;
730        finishedWork.updateQueue = null;
731        if (updatePayload !== null){
732          commitUpdate(
733            instance,
734            updatePayload,
735            type,
736            oldProps,
737            newProps,
738            finishedWork,
739          )
740        }
741      }
742      return;
743    }
744    case SuspenseComponent:{
745      commitSuspenseComponent(finishedWork);
746      attachSuspenseRetryListeners(finishedWork);
747      return;
748    }
749    case OffscreenComponent:{
750      const newState = finishedWork.memoizedState;
751      const isHidden = newState !== null;
752      toggleAllChildren(finishedWork, isHidden);
753      return;
754    }
755    case HostText:{
756      const textInstance = finishedWork.stateNode;
757      const newText = finishedWork.memoizedProps;
758      textInstance.nodeValue = newText;
759    }
760  }
761}
762
763function commitSuspenseComponent(finishedWork){
764  const newState = finishedWork.memoizedState;
765  if (newState !== null){
766    const primaryChildParent = finishedWork.child;
767    //hideOrUnhideAllChildren()
768    toggleAllChildren(primaryChildParent, true); 
769  }
770}
771
772function commitUpdate(
773    domElement,
774    updatePayload,
775    type,
776    oldProps,
777    newProps,
778    internalInstanceHandle
779){
780    updateFiberProps(domElement, newProps);
781    updateDOMProperties(domElement, updatePayload);
782}
Full Screen

ReactFiberWorkLoop.js

Source: ReactFiberWorkLoop.js Github

copy
1import {
2  flushSyncCallbackQueue,
3  now,
4  getCurrentPriorityLevel,
5  ImmediatePriority as ImmediateSchedulerPriority,
6  UserBlockingPriority,
7  NoPriority as NoSchedulerPriority,
8  NormalPriority as NormalSchedulerPriority,
9  UserBlockingPriority as UserBlockingSchedulerPriority,
10  runWithPriority,
11  scheduleCallback,
12  cancelCallback,
13  scheduleSyncCallback,
14  requestPaint,
15} from './SchedulerWithReactIntegration';
16import {
17  NoTimestamp,
18  SyncLane,
19  SyncBatchedLane,
20  NoLanes,
21  findUpdateLane,
22  schedulerPriorityToLanePriority,
23  InputDiscreteLanePriority,
24  mergeLanes,
25  markRootUpdated,
26  markRootSuspended as markRootSuspendedDontCallThisOneDirectly,
27  includesSomeLane,
28  OffscreenLane,
29  getNextLanes,
30  markRootFinished,
31  hasDiscreteLanes,
32  markStarvedLanesAsExpired,
33  returnNextLanesPriority,
34  SyncLanePriority,
35  lanePriorityToSchedulerPriority,
36  SyncBatchedLanePriority,
37} from './ReactFiberLane';
38import { ConcurrentMode, BlockingMode, NoMode } from './ReactTypeOfMode';
39import { requestCurrentTransition, NoTransition } from './ReactFiberTransition';
40import { ContextOnlyDispatcher } from './ReactFiberHooks';
41import { unwindInterruptedWork, unwindWork } from './ReactFiberUnwindWork';
42import { createWorkInProgress } from './ReactFiber';
43import { beginWork } from './ReactFiberBeginWork';
44import {
45  NoFlags,
46  Incomplete,
47  PerformedWork,
48  HostEffectMask,
49  Snapshot,
50  Passive,
51  Deletion,
52  ContentReset,
53  Ref,
54  Placement,
55  Update,
56  Hydrating,
57  PlacementAndUpdate,
58  HydratingAndUpdate,
59} from './ReactFiberFlags';
60import { completeWork } from './ReactFiberCompleteWork';
61import { LegacyRoot } from './ReactRootTags';
62import {
63  HostRoot,
64  OffscreenComponent,
65  LegacyHiddenComponent,
66} from './ReactWorkTags';
67import { resetContextDependencies } from './ReactFiberNewContext';
68import {
69  noTimeout,
70  clearContainer,
71  prepareForCommit,
72  resetAfterCommit,
73} from './ReactFiberHostConfig';
74import ReactSharedInternals from '../../ReactSharedInternals';
75import {
76  commitBeforeMutationLifeCycles,
77  commitResetTextContent,
78  commitDetachRef,
79  commitPlacement,
80  commitWork,
81} from './ReactFiberCommitWork';
82
83const invariant = require('invariant');
84
85const { ReactCurrentDispatcher, ReactCurrentOwner } = ReactSharedInternals;
86
87const NoContext = 0b0000000;
88const BatchedContext = 0b0000001;
89const LegacyUnbatchedContext = 0b0001000;
90const RenderContext = 0b0010000;
91const CommitContext = 0b0100000;
92const DiscreteEventContext = 0b0000100;
93const RetryAfterError = 0b1000000;
94
95const RootIncomplete = 0;
96const RootErrored = 2;
97const RootSuspendedWithDelay = 4;
98const RootCompleted = 5;
99
100let executionContext = NoContext;
101let workInProgress = null;
102
103let workInProgressRootRenderTargetTime = Infinity;
104let workInProgressRootIncludedLanes = NoLanes;
105
106let currentEventTime = NoTimestamp;
107let currentEventWipLanes = NoLanes;
108
109const RENDER_TIMEOUT_MS = 500;
110
111const NESTED_UPDATE_LIMIT = 50;
112
113let nestedPassiveUpdateCount = 0;
114let nestedUpdateCount = 0;
115let rootWithNestedUpdates = null;
116
117let workInProgressRoot = null;
118let workInProgressRootUpdatedLanes = NoLanes;
119let workInProgressRootExitStatus = RootIncomplete;
120let workInProgressRootRenderLanes = NoLanes;
121let workInProgressRootPingedLanes = NoLanes;
122let workInProgressRootSkippedLanes = NoLanes;
123
124let subtreeRenderLanes = NoLanes;
125
126let workInProgressRootFatalError = null;
127let legacyErrorBoundariesThatAlreadyFailed = null;
128let hasUncaughtError = false;
129let firstUncaughtError = null;
130
131let nextEffect = null;
132
133let pendingPassiveEffectsRenderPriority = NoSchedulerPriority;
134let rootWithPendingPassiveEffects = null;
135let pendingPassiveEffectsLanes = NoLanes;
136let rootDoesHavePassiveEffects = false;
137let pendingPassiveHookEffectsUnmount = [];
138
139let rootsWithPendingDiscreteUpdates = null;
140
141let mostRecentlyUpdatedRoot = null;
142
143const resetRenderTimer = () =>
144  (workInProgressRootRenderTargetTime = now() + RENDER_TIMEOUT_MS);
145
146const unbatchedUpdates = (fn, a) => {
147  const prevExecutionContext = executionContext;
148  executionContext &= BatchedContext;
149  executionContext |= LegacyUnbatchedContext;
150
151  // executionContext: 8, prevExecutionContext: 0
152
153  try {
154    return fn(a);
155  } finally {
156    executionContext = prevExecutionContext;
157    if (executionContext === NoContext) {
158      resetRenderTimer();
159      flushSyncCallbackQueue();
160    }
161  }
162};
163
164const requestEventTime = () => {
165  if ((executionContext & (RenderContext | CommitContext)) !== NoContext)
166    return now();
167
168  if (currentEventTime !== NoTimestamp) return currentEventTime;
169
170  currentEventTime = now();
171
172  return currentEventTime;
173};
174
175const requestUpdateLane = (fiber) => {
176  const { mode } = fiber;
177  if ((mode & BlockingMode) === NoMode) return SyncLane;
178  else if ((mode & ConcurrentMode) === NoMode)
179    return getCurrentPriorityLevel() === ImmediateSchedulerPriority
180      ? SyncLane
181      : SyncBatchedLane;
182
183  if (currentEventWipLanes === NoLanes) {
184    currentEventWipLanes = workInProgressRootIncludedLanes;
185  }
186
187  const isTransition = requestCurrentTransition() !== NoTransition;
188
189  if (isTransition) {
190    // todo
191  }
192
193  const schedulerPriority = getCurrentPriorityLevel();
194  let lane;
195
196  if (
197    (executionContext & DiscreteEventContext) !== NoContext &&
198    schedulerPriority === UserBlockingPriority
199  )
200    lane = findUpdateLane(InputDiscreteLanePriority, currentEventWipLanes);
201  else {
202    const schedulerLanePriority =
203      schedulerPriorityToLanePriority(schedulerPriority);
204
205    lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
206  }
207
208  return lane;
209};
210
211const checkForNestedUpdates = () => {
212  if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
213    nestedUpdateCount = 0;
214    rootWithNestedUpdates = null;
215    invariant(
216      false,
217      'Maximum update depth exceeded. This can happen when a component ' +
218        'repeatedly calls setState inside componentWillUpdate or ' +
219        'componentDidUpdate. React limits the number of nested updates to ' +
220        'prevent infinite loops.'
221    );
222  }
223};
224
225const markUpdateLaneFromFiberToRoot = (sourceFiber, lane) => {
226  sourceFiber.lanes = mergeLanes(sourceFiber.lanes, lane);
227  let { alternate } = sourceFiber;
228  if (alternate !== null) {
229    alternate.lanes = mergeLanes(alternate.lanes, lane);
230  }
231
232  let node = sourceFiber;
233  let parent = sourceFiber.return;
234  while (parent !== null) {
235    parent.childLanes = mergeLanes(parent.childLanes, lane);
236    alternate = parent.alternate;
237    if (alternate !== null) {
238      alternate.childLanes = mergeLanes(alternate.childLanes, lane);
239    }
240    node = parent;
241    parent = parent.return;
242  }
243
244  if (node.tag === HostRoot) {
245    const root = node.stateNode;
246    return root;
247  } else {
248    return null;
249  }
250};
251
252const markRootSuspended = (root, suspendedLanes) => {
253  suspendedLanes = removeLanes(suspendedLanes, workInProgressRootPingedLanes);
254  suspendedLanes = removeLanes(suspendedLanes, workInProgressRootUpdatedLanes);
255
256  markRootSuspendedDontCallThisOneDirectly(root, suspendedLanes);
257};
258
259const detachFiberAfterEffects = (fiber) => {
260  fiber.sibling = null;
261  fiber.stateNode = null;
262};
263
264const flushPassiveEffectsImpl = () => {
265  if (rootWithPendingPassiveEffects === null) return false;
266
267  const root = rootWithPendingPassiveEffects;
268  rootWithPendingPassiveEffects = null;
269  pendingPassiveEffectsLanes = NoLanes;
270
271  invariant(
272    (executionContext & (RenderContext | CommitContext)) === NoContext,
273    'Cannot flush passive effects while already rendering.'
274  );
275
276  const prevExecutionContext = executionContext;
277  executionContext |= CommitContext;
278
279  pendingPassiveHookEffectsUnmount = [];
280
281  pendingPassiveHookEffectsMount = [];
282
283  let effect = root.current.firstEffect;
284  while (effect !== null) {
285    const nextNextEffect = effect.nextEffect;
286    effect.nextEffect = null;
287    if (effect.flags & Deletion) {
288      detachFiberAfterEffects(effect);
289    }
290    effect = nextNextEffect;
291  }
292
293  executionContext = prevExecutionContext;
294
295  flushSyncCallbackQueue();
296
297  nestedPassiveUpdateCount =
298    rootWithPendingPassiveEffects === null ? 0 : nestedPassiveUpdateCount + 1;
299
300  return true;
301};
302
303const flushPassiveEffects = () => {
304  if (pendingPassiveEffectsRenderPriority !== NoSchedulerPriority) {
305    const priorityLevel =
306      pendingPassiveEffectsRenderPriority > NormalSchedulerPriority
307        ? NormalSchedulerPriority
308        : pendingPassiveEffectsRenderPriority;
309    pendingPassiveEffectsRenderPriority = NoSchedulerPriority;
310
311    return runWithPriority(priorityLevel, flushPassiveEffectsImpl);
312  }
313  return false;
314};
315
316const pushDispatcher = () => {
317  const prevDispatcher = ReactCurrentDispatcher.current;
318  ReactCurrentDispatcher.current = ContextOnlyDispatcher;
319  if (prevDispatcher === null) {
320    return ContextOnlyDispatcher;
321  } else {
322    return prevDispatcher;
323  }
324};
325
326const popDispatcher = (prevDispatcher) => {
327  ReactCurrentDispatcher.current = prevDispatcher;
328};
329
330const prepareFreshStack = (root, lanes) => {
331  root.finishedWork = null;
332  root.finishedLanes = NoLanes;
333
334  const timeoutHandle = root.timeoutHandle;
335  if (timeoutHandle !== noTimeout) {
336    root.timeoutHandle = noTimeout;
337    clearTimeout(timeoutHandle);
338  }
339
340  if (workInProgress !== null) {
341    let interruptedWork = workInProgress.return;
342    while (interruptedWork !== null) {
343      unwindInterruptedWork(interruptedWork);
344      interruptedWork = interruptedWork.return;
345    }
346  }
347
348  workInProgressRoot = root;
349  workInProgress = createWorkInProgress(root.current, null);
350
351  workInProgressRootRenderLanes =
352    subtreeRenderLanes =
353    workInProgressRootIncludedLanes =
354      lanes;
355  workInProgressRootExitStatus = RootIncomplete;
356  workInProgressRootFatalError = null;
357  workInProgressRootSkippedLanes = NoLanes;
358  workInProgressRootUpdatedLanes = NoLanes;
359  workInProgressRootPingedLanes = NoLanes;
360};
361
362const resetChildLanes = (completedWork) => {
363  if (
364    (completedWork.tag === LegacyHiddenComponent ||
365      completedWork.tag === OffscreenComponent) &&
366    completedWork.memoizedState !== null &&
367    !includesSomeLane(subtreeRenderLanes, OffscreenLane) &&
368    (completedWork.mode & ConcurrentMode) !== NoLanes
369  )
370    return;
371
372  let newChildLanes = NoLanes;
373
374  let child = completedWork.child;
375  while (child !== null) {
376    newChildLanes = mergeLanes(
377      newChildLanes,
378      mergeLanes(child.lanes, child.childLanes)
379    );
380    child = child.sibling;
381  }
382
383  completedWork.childLanes = newChildLanes;
384};
385
386const completeUnitOfWork = (unitOfWork) => {
387  let completedWork = unitOfWork;
388  do {
389    const current = completedWork.alternate;
390    const returnFiber = completedWork.return;
391
392    console.log(completedWork, '------completeUnitOfWork:completedWork');
393
394    if ((completedWork.flags & Incomplete) === NoFlags) {
395      const next = completeWork(current, completedWork, subtreeRenderLanes);
396      console.log(next, '------completeUnitOfWork:next');
397
398      if (next !== null) {
399        workInProgress = next;
400        return;
401      }
402
403      resetChildLanes(completedWork);
404
405      if (
406        returnFiber !== null &&
407        (returnFiber.flags & Incomplete) === NoFlags
408      ) {
409        if (returnFiber.firstEffect === null) {
410          returnFiber.firstEffect = completedWork.firstEffect;
411        }
412        if (completedWork.lastEffect !== null) {
413          if (returnFiber.lastEffect !== null) {
414            returnFiber.lastEffect.nextEffect = completedWork.firstEffect;
415          }
416          returnFiber.lastEffect = completedWork.lastEffect;
417        }
418
419        const flags = completedWork.flags;
420
421        if (flags > PerformedWork) {
422          if (returnFiber.lastEffect !== null) {
423            returnFiber.lastEffect.nextEffect = completedWork;
424          } else {
425            returnFiber.firstEffect = completedWork;
426          }
427          returnFiber.lastEffect = completedWork;
428        }
429      }
430    } else {
431      const next = unwindWork(completedWork, subtreeRenderLanes);
432
433      if (next !== null) {
434        next.flags &= HostEffectMask;
435        workInProgress = next;
436        return;
437      }
438
439      if (returnFiber !== null) {
440        returnFiber.firstEffect = returnFiber.lastEffect = null;
441        returnFiber.flags |= Incomplete;
442      }
443    }
444
445    const siblingFiber = completedWork.sibling;
446    if (siblingFiber !== null) {
447      workInProgress = siblingFiber;
448      return;
449    }
450
451    completedWork = returnFiber;
452    workInProgress = completedWork;
453  } while (completedWork !== null);
454
455  if (workInProgressRootExitStatus === RootIncomplete) {
456    workInProgressRootExitStatus = RootCompleted;
457  }
458};
459
460const performUnitOfWork = (unitOfWork) => {
461  const current = unitOfWork.alternate;
462
463  console.log({ ...unitOfWork }, '--------performUnitOfWork(workInProgress)');
464  const next = beginWork(current, unitOfWork, subtreeRenderLanes);
465  console.log({ ...next }, '--------performUnitOfWork:next');
466
467  unitOfWork.memoizedProps = unitOfWork.pendingProps;
468
469  if (next === null) {
470    completeUnitOfWork(unitOfWork);
471  } else {
472    workInProgress = next;
473  }
474
475  ReactCurrentOwner.current = null;
476};
477
478const workLoopSync = () => {
479  while (workInProgress !== null) {
480    performUnitOfWork(workInProgress);
481  }
482};
483
484const commitBeforeMutationEffects = () => {
485  while (nextEffect !== null) {
486    const current = nextEffect.alternate;
487
488    const flags = nextEffect.flags;
489    if ((flags & Snapshot) !== NoFlags) {
490      commitBeforeMutationLifeCycles(current, nextEffect);
491    }
492    if ((flags & Passive) !== NoFlags) {
493      if (!rootDoesHavePassiveEffects) {
494        rootDoesHavePassiveEffects = true;
495        scheduleCallback(NormalSchedulerPriority, () => {
496          flushPassiveEffects();
497          return null;
498        });
499      }
500    }
501
502    nextEffect = nextEffect.nextEffect;
503  }
504};
505
506const commitMutationEffects = (root, renderPriorityLevel) => {
507  while (nextEffect !== null) {
508    const flags = nextEffect.flags;
509
510    if (flags & ContentReset) {
511      commitResetTextContent(nextEffect);
512    }
513
514    if (flags & Ref) {
515      const current = nextEffect.alternate;
516      if (current !== null) {
517        commitDetachRef(current);
518      }
519    }
520
521    const primaryFlags = flags & (Placement | Update | Deletion | Hydrating);
522    console.log(primaryFlags, '------commitMutationEffects:primaryFlags');
523    switch (primaryFlags) {
524      case Placement: {
525        commitPlacement(nextEffect);
526
527        nextEffect.flags &= ~Placement;
528        break;
529      }
530      case PlacementAndUpdate: {
531        commitPlacement(nextEffect);
532
533        nextEffect.flags &= ~Placement;
534
535        const current = nextEffect.alternate;
536        commitWork(current, nextEffect);
537        break;
538      }
539      case Hydrating: {
540        nextEffect.flags &= ~Hydrating;
541        break;
542      }
543      case HydratingAndUpdate: {
544        nextEffect.flags &= ~Hydrating;
545
546        const current = nextEffect.alternate;
547        commitWork(current, nextEffect);
548        break;
549      }
550      case Update: {
551        const current = nextEffect.alternate;
552        commitWork(current, nextEffect);
553        break;
554      }
555      case Deletion: {
556        commitDeletion(root, nextEffect, renderPriorityLevel);
557        break;
558      }
559    }
560
561    nextEffect = nextEffect.nextEffect;
562  }
563};
564
565const commitLayoutEffects = (root, committedLanes) => {};
566
567const commitRootImpl = (root, renderPriorityLevel) => {
568  do {
569    flushPassiveEffects();
570  } while (rootWithPendingPassiveEffects !== null);
571
572  console.log(executionContext, '------commitRootImpl:executionContext');
573
574  invariant(
575    (executionContext & (RenderContext | CommitContext)) === NoContext,
576    'Should not already be working.'
577  );
578
579  const finishedWork = root.finishedWork;
580  const lanes = root.finishedLanes;
581
582  if (finishedWork === null) return null;
583
584  root.finishedWork = null;
585  root.finishedLanes = NoLanes;
586
587  invariant(
588    finishedWork !== root.current,
589    'Cannot commit the same tree as before. This error is likely caused by ' +
590      'a bug in React. Please file an issue.'
591  );
592
593  root.callbackNode = null;
594
595  let remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);
596  markRootFinished(root, remainingLanes);
597
598  if (rootsWithPendingDiscreteUpdates !== null) {
599    if (
600      !hasDiscreteLanes(remainingLanes) &&
601      rootsWithPendingDiscreteUpdates.has(root)
602    ) {
603      rootsWithPendingDiscreteUpdates.delete(root);
604    }
605  }
606
607  if (root === workInProgressRoot) {
608    workInProgressRoot = null;
609    workInProgress = null;
610    workInProgressRootRenderLanes = NoLanes;
611  }
612
613  let firstEffect;
614  if (finishedWork.flags > PerformedWork) {
615    if (finishedWork.lastEffect !== null) {
616      finishedWork.lastEffect.nextEffect = finishedWork;
617      firstEffect = finishedWork.firstEffect;
618    } else {
619      firstEffect = finishedWork;
620    }
621  } else {
622    firstEffect = finishedWork.firstEffect;
623  }
624
625  if (firstEffect !== null) {
626    const prevExecutionContext = executionContext;
627    executionContext |= CommitContext;
628
629    ReactCurrentOwner.current = null;
630
631    prepareForCommit(root.containerInfo);
632
633    nextEffect = firstEffect;
634
635    do {
636      try {
637        commitBeforeMutationEffects();
638      } catch (error) {
639        invariant(nextEffect !== null, 'Should be working on an effect.');
640        // captureCommitPhaseError(nextEffect, error);
641        nextEffect = nextEffect.nextEffect;
642      }
643    } while (nextEffect !== null);
644
645    nextEffect = firstEffect;
646
647    console.log({ ...nextEffect }, '------commitMutationEffects>nextEffect');
648
649    do {
650      try {
651        commitMutationEffects(root, renderPriorityLevel);
652      } catch (error) {
653        invariant(nextEffect !== null, 'Should be working on an effect.');
654        // captureCommitPhaseError(nextEffect, error);
655        nextEffect = nextEffect.nextEffect;
656      }
657    } while (nextEffect !== null);
658
659    resetAfterCommit(root.containerInfo);
660
661    root.current = finishedWork;
662    nextEffect = firstEffect;
663
664    // do {
665    //   try {
666    //     commitLayoutEffects(root, lanes);
667    //   } catch (error) {
668    //     invariant(nextEffect !== null, 'Should be working on an effect.');
669
670    //     nextEffect = nextEffect.nextEffect;
671    //   }
672    // } while (nextEffect !== null);
673
674    nextEffect = null;
675
676    requestPaint();
677
678    executionContext = prevExecutionContext;
679  } else {
680    root.current = finishedWork;
681  }
682
683  const rootDidHavePassiveEffects = rootDoesHavePassiveEffects;
684
685  if (rootDoesHavePassiveEffects) {
686    rootDoesHavePassiveEffects = false;
687    rootWithPendingPassiveEffects = root;
688    pendingPassiveEffectsLanes = lanes;
689    pendingPassiveEffectsRenderPriority = renderPriorityLevel;
690  } else {
691    nextEffect = firstEffect;
692    while (nextEffect !== null) {
693      const nextNextEffect = nextEffect.nextEffect;
694      nextEffect.nextEffect = null;
695      if (nextEffect.flags & Deletion) {
696        detachFiberAfterEffects(nextEffect);
697      }
698      nextEffect = nextNextEffect;
699    }
700  }
701
702  remainingLanes = root.pendingLanes;
703
704  legacyErrorBoundariesThatAlreadyFailed = null;
705
706  if (remainingLanes === SyncLane) {
707    if (root === rootWithNestedUpdates) {
708      nestedUpdateCount++;
709    } else {
710      nestedUpdateCount = 0;
711      rootWithNestedUpdates = root;
712    }
713  } else {
714    nestedUpdateCount = 0;
715  }
716
717  ensureRootIsScheduled(root, now());
718
719  if (hasUncaughtError) {
720    hasUncaughtError = false;
721    const error = firstUncaughtError;
722    firstUncaughtError = null;
723    throw error;
724  }
725
726  if ((executionContext & LegacyUnbatchedContext) !== NoContext) return null;
727
728  flushSyncCallbackQueue();
729
730  return null;
731};
732
733const commitRoot = (root) => {
734  const renderPriorityLevel = getCurrentPriorityLevel();
735  console.log(renderPriorityLevel, '------commitRoot:renderPriorityLevel');
736  runWithPriority(
737    ImmediateSchedulerPriority,
738    commitRootImpl.bind(null, root, renderPriorityLevel)
739  );
740  return null;
741};
742
743const renderRootSync = (root, lanes) => {
744  const prevExecutionContext = executionContext;
745  executionContext |= RenderContext;
746  const prevDispatcher = pushDispatcher();
747
748  if (workInProgressRoot !== root || workInProgressRootRenderLanes !== lanes) {
749    prepareFreshStack(root, lanes);
750  }
751
752  do {
753    try {
754      workLoopSync();
755      break;
756    } catch (thrownValue) {
757      // handleError(root, thrownValue);
758    }
759  } while (true);
760
761  resetContextDependencies();
762  executionContext = prevExecutionContext;
763
764  popDispatcher(prevDispatcher);
765
766  if (workInProgress !== null) {
767    invariant(
768      false,
769      'Cannot commit an incomplete root. This error is likely caused by a ' +
770        'bug in React. Please file an issue.'
771    );
772  }
773
774  workInProgressRoot = null;
775  workInProgressRootRenderLanes = NoLanes;
776
777  return workInProgressRootExitStatus;
778};
779
780const ensureRootIsScheduled = (root, currentTime) => {
781  const existingCallbackNode = root.callbackNode;
782
783  markStarvedLanesAsExpired(root, currentTime);
784
785  const nextLanes = getNextLanes(
786    root,
787    root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes
788  );
789  const newCallbackPriority = returnNextLanesPriority();
790
791  if (nextLanes === NoLanes) {
792    if (existingCallbackNode !== null) {
793      cancelCallback(existingCallbackNode);
794      root.callbackNode = null;
795      root.callbackPriority = NoLanePriority;
796    }
797    return;
798  }
799
800  if (existingCallbackNode !== null) {
801    const existingCallbackPriority = root.callbackPriority;
802    if (existingCallbackPriority === newCallbackPriority) return;
803
804    cancelCallback(existingCallbackNode);
805  }
806
807  let newCallbackNode;
808  if (newCallbackPriority === SyncLanePriority) {
809    newCallbackNode = scheduleSyncCallback(
810      performSyncWorkOnRoot.bind(null, root)
811    );
812  } else if (newCallbackPriority === SyncBatchedLanePriority) {
813    newCallbackNode = scheduleCallback(
814      ImmediateSchedulerPriority,
815      performSyncWorkOnRoot.bind(null, root)
816    );
817  } else {
818    const schedulerPriorityLevel =
819      lanePriorityToSchedulerPriority(newCallbackPriority);
820    newCallbackNode = scheduleCallback(
821      schedulerPriorityLevel,
822      performConcurrentWorkOnRoot.bind(null, root)
823    );
824  }
825
826  root.callbackPriority = newCallbackPriority;
827  root.callbackNode = newCallbackNode;
828};
829
830const performSyncWorkOnRoot = (root) => {
831  invariant(
832    (executionContext & (RenderContext | CommitContext)) === NoContext,
833    'Should not already be working.'
834  );
835
836  flushPassiveEffects();
837
838  let lanes;
839  let exitStatus;
840  if (
841    root === workInProgressRoot &&
842    includesSomeLane(root.expiredLanes, workInProgressRootRenderLanes)
843  ) {
844    lanes = workInProgressRootRenderLanes;
845    exitStatus = renderRootSync(root, lanes);
846    if (
847      includesSomeLane(
848        workInProgressRootIncludedLanes,
849        workInProgressRootUpdatedLanes
850      )
851    ) {
852      lanes = getNextLanes(root, lanes);
853      exitStatus = renderRootSync(root, lanes);
854    }
855  } else {
856    lanes = getNextLanes(root, NoLanes);
857    exitStatus = renderRootSync(root, lanes);
858  }
859
860  if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
861    executionContext |= RetryAfterError;
862
863    if (root.hydrate) {
864      root.hydrate = false;
865      clearContainer(root.containerInfo);
866    }
867  }
868
869  const finishedWork = root.current.alternate;
870  root.finishedWork = finishedWork;
871  root.finishedLanes = lanes;
872
873  console.log({ ...root }, '------performSyncWorkOnRoot>commitRoot(root)');
874  commitRoot(root);
875
876  ensureRootIsScheduled(root, now());
877
878  return null;
879};
880
881const scheduleUpdateOnFiber = (fiber, lane, eventTime) => {
882  checkForNestedUpdates();
883
884  const root = markUpdateLaneFromFiberToRoot(fiber, lane);
885
886  if (root === null) return null;
887
888  markRootUpdated(root, lane, eventTime);
889
890  if (root === workInProgressRoot) {
891    if ((executionContext & RenderContext) === NoContext) {
892      workInProgressRootUpdatedLanes = mergeLanes(
893        workInProgressRootUpdatedLanes,
894        lane
895      );
896    }
897    if (workInProgressRootExitStatus === RootSuspendedWithDelay) {
898      markRootSuspended(root, workInProgressRootRenderLanes);
899    }
900  }
901
902  if (lane === SyncLane) {
903    if (
904      (executionContext & LegacyUnbatchedContext) !== NoContext &&
905      (executionContext & (RenderContext | CommitContext)) === NoContext
906    ) {
907      performSyncWorkOnRoot(root);
908    } else {
909      ensureRootIsScheduled(root, eventTime);
910      if (executionContext === NoContext) {
911        resetRenderTimer();
912        flushSyncCallbackQueue();
913      }
914    }
915  } else {
916    if (
917      (executionContext & DiscreteEventContext) !== NoContext &&
918      (priorityLevel === UserBlockingSchedulerPriority ||
919        priorityLevel === ImmediateSchedulerPriority)
920    ) {
921      if (rootsWithPendingDiscreteUpdates === null) {
922        rootsWithPendingDiscreteUpdates = new Set([root]);
923      } else {
924        rootsWithPendingDiscreteUpdates.add(root);
925      }
926    }
927    ensureRootIsScheduled(root, eventTime);
928  }
929
930  mostRecentlyUpdatedRoot = root;
931};
932
933const markSkippedUpdateLanes = (lane) => {
934  workInProgressRootSkippedLanes = mergeLanes(
935    lane,
936    workInProgressRootSkippedLanes
937  );
938};
939
940const performConcurrentWorkOnRoot = (root) => {};
941
942export {
943  NoContext,
944  RetryAfterError,
945  unbatchedUpdates,
946  requestEventTime,
947  requestUpdateLane,
948  flushPassiveEffects,
949  scheduleUpdateOnFiber,
950  markSkippedUpdateLanes,
951};
952
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)