How to use markRootSuspended method in Playwright Internal

Best JavaScript code snippet using playwright-internal

ReactFiberWorkLoop.old.js

Source:ReactFiberWorkLoop.old.js

...517    // TODO: Lol maybe there's a better way to factor this besides this518    // obnoxiously named function :)519    suspendedLanes = removeLanes(suspendedLanes, workInProgressRootPingedLanes);520    suspendedLanes = removeLanes(suspendedLanes, workInProgressRootUpdatedLanes);521    markRootSuspended(root, suspendedLanes);522  } // This is the entry point for synchronous tasks that don't go523  // through Scheduler524  function performSyncWorkOnRoot(root) {525    if (!((executionContext & (RenderContext | CommitContext)) === NoContext)) {526      {527        throw Error( "Should not already be working." );528      }529    }530    flushPassiveEffects();531    var lanes;532    var exitStatus;533    if (root === workInProgressRoot && includesSomeLane(root.expiredLanes, workInProgressRootRenderLanes)) {534      // There's a partial tree, and at least one of its lanes has expired. Finish535      // rendering it before rendering the rest of the expired work....

ReactFiberWorkLoop.new.js

Source:ReactFiberWorkLoop.new.js

...472      // suspended now, right before marking the incoming update. This has the473      // effect of interrupting the current render and switching to the update.474      // TODO: Make sure this doesn't override pings that happen while we've475      // already started rendering.476      markRootSuspended(root, workInProgressRootRenderLanes);477    }478  }479  ensureRootIsScheduled(root, eventTime);480  if (481    lane === SyncLane &&482    executionContext === NoContext &&483    (fiber.mode & ConcurrentMode) === NoMode &&484    // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.485    !(__DEV__ && ReactCurrentActQueue.isBatchingLegacy)486  ) {487    // Flush the synchronous work now, unless we're already working or inside488    // a batch. This is intentionally inside scheduleUpdateOnFiber instead of489    // scheduleCallbackForFiber to preserve the ability to schedule a callback490    // without immediately flushing it. We only do this for user-initiated491    // updates, to preserve historical behavior of legacy mode.492    resetRenderTimer();493    flushSyncCallbacksOnlyInLegacyMode();494  }495  return root;496}497// This is split into a separate function so we can mark a fiber with pending498// work without treating it as a typical update that originates from an event;499// e.g. retrying a Suspense boundary isn't an update, but it does schedule work500// on a fiber.501function markUpdateLaneFromFiberToRoot(502  sourceFiber: Fiber,503  lane: Lane,504): FiberRoot | null {505  // Update the source fiber's lanes506  sourceFiber.lanes = mergeLanes(sourceFiber.lanes, lane);507  let alternate = sourceFiber.alternate;508  if (alternate !== null) {509    alternate.lanes = mergeLanes(alternate.lanes, lane);510  }511  if (__DEV__) {512    if (513      alternate === null &&514      (sourceFiber.flags & (Placement | Hydrating)) !== NoFlags515    ) {516      warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);517    }518  }519  // Walk the parent path to the root and update the child lanes.520  let node = sourceFiber;521  let parent = sourceFiber.return;522  while (parent !== null) {523    parent.childLanes = mergeLanes(parent.childLanes, lane);524    alternate = parent.alternate;525    if (alternate !== null) {526      alternate.childLanes = mergeLanes(alternate.childLanes, lane);527    } else {528      if (__DEV__) {529        if ((parent.flags & (Placement | Hydrating)) !== NoFlags) {530          warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);531        }532      }533    }534    node = parent;535    parent = parent.return;536  }537  if (node.tag === HostRoot) {538    const root: FiberRoot = node.stateNode;539    return root;540  } else {541    return null;542  }543}544export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {545  return (546    // TODO: Optimize slightly by comparing to root that fiber belongs to.547    // Requires some refactoring. Not a big deal though since it's rare for548    // concurrent apps to have more than a single root.549    workInProgressRoot !== null &&550    (fiber.mode & ConcurrentMode) !== NoMode &&551    // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),552    // then don't treat this as an interleaved update. This pattern is553    // accompanied by a warning but we haven't fully deprecated it yet. We can554    // remove once the deferRenderPhaseUpdateToNextBatch flag is enabled.555    (deferRenderPhaseUpdateToNextBatch ||556      (executionContext & RenderContext) === NoContext)557  );558}559// Use this function to schedule a task for a root. There's only one task per560// root; if a task was already scheduled, we'll check to make sure the priority561// of the existing task is the same as the priority of the next level that the562// root has work on. This function is called on every update, and right before563// exiting a task.564function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {565  const existingCallbackNode = root.callbackNode;566  // Check if any lanes are being starved by other work. If so, mark them as567  // expired so we know to work on those next.568  markStarvedLanesAsExpired(root, currentTime);569  // Determine the next lanes to work on, and their priority.570  const nextLanes = getNextLanes(571    root,572    root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,573  );574  if (nextLanes === NoLanes) {575    // Special case: There's nothing to work on.576    if (existingCallbackNode !== null) {577      cancelCallback(existingCallbackNode);578    }579    root.callbackNode = null;580    root.callbackPriority = NoLane;581    return;582  }583  // We use the highest priority lane to represent the priority of the callback.584  const newCallbackPriority = getHighestPriorityLane(nextLanes);585  // Check if there's an existing task. We may be able to reuse it.586  const existingCallbackPriority = root.callbackPriority;587  if (588    existingCallbackPriority === newCallbackPriority &&589    // Special case related to `act`. If the currently scheduled task is a590    // Scheduler task, rather than an `act` task, cancel it and re-scheduled591    // on the `act` queue.592    !(593      __DEV__ &&594      ReactCurrentActQueue.current !== null &&595      existingCallbackNode !== fakeActCallbackNode596    )597  ) {598    if (__DEV__) {599      // If we're going to re-use an existing task, it needs to exist.600      // Assume that discrete update microtasks are non-cancellable and null.601      // TODO: Temporary until we confirm this warning is not fired.602      if (603        existingCallbackNode == null &&604        existingCallbackPriority !== SyncLane605      ) {606        console.error(607          'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',608        );609      }610    }611    // The priority hasn't changed. We can reuse the existing task. Exit.612    return;613  }614  if (existingCallbackNode != null) {615    // Cancel the existing callback. We'll schedule a new one below.616    cancelCallback(existingCallbackNode);617  }618  // Schedule a new callback.619  let newCallbackNode;620  if (newCallbackPriority === SyncLane) {621    // Special case: Sync React callbacks are scheduled on a special622    // internal queue623    if (root.tag === LegacyRoot) {624      if (__DEV__ && ReactCurrentActQueue.isBatchingLegacy !== null) {625        ReactCurrentActQueue.didScheduleLegacyUpdate = true;626      }627      scheduleLegacySyncCallback(performSyncWorkOnRoot.bind(null, root));628    } else {629      scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));630    }631    if (supportsMicrotasks) {632      // Flush the queue in a microtask.633      if (__DEV__ && ReactCurrentActQueue.current !== null) {634        // Inside `act`, use our internal `act` queue so that these get flushed635        // at the end of the current scope even when using the sync version636        // of `act`.637        ReactCurrentActQueue.current.push(flushSyncCallbacks);638      } else {639        scheduleMicrotask(flushSyncCallbacks);640      }641    } else {642      // Flush the queue in an Immediate task.643      scheduleCallback(ImmediateSchedulerPriority, flushSyncCallbacks);644    }645    newCallbackNode = null;646  } else {647    let schedulerPriorityLevel;648    switch (lanesToEventPriority(nextLanes)) {649      case DiscreteEventPriority:650        schedulerPriorityLevel = ImmediateSchedulerPriority;651        break;652      case ContinuousEventPriority:653        schedulerPriorityLevel = UserBlockingSchedulerPriority;654        break;655      case DefaultEventPriority:656        schedulerPriorityLevel = NormalSchedulerPriority;657        break;658      case IdleEventPriority:659        schedulerPriorityLevel = IdleSchedulerPriority;660        break;661      default:662        schedulerPriorityLevel = NormalSchedulerPriority;663        break;664    }665    newCallbackNode = scheduleCallback(666      schedulerPriorityLevel,667      performConcurrentWorkOnRoot.bind(null, root),668    );669  }670  root.callbackPriority = newCallbackPriority;671  root.callbackNode = newCallbackNode;672}673// This is the entry point for every concurrent task, i.e. anything that674// goes through Scheduler.675function performConcurrentWorkOnRoot(root, didTimeout) {676  if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {677    resetNestedUpdateFlag();678  }679  // Since we know we're in a React event, we can clear the current680  // event time. The next update will compute a new event time.681  currentEventTime = NoTimestamp;682  currentEventTransitionLane = NoLanes;683  invariant(684    (executionContext & (RenderContext | CommitContext)) === NoContext,685    'Should not already be working.',686  );687  // Flush any pending passive effects before deciding which lanes to work on,688  // in case they schedule additional work.689  const originalCallbackNode = root.callbackNode;690  const didFlushPassiveEffects = flushPassiveEffects();691  if (didFlushPassiveEffects) {692    // Something in the passive effect phase may have canceled the current task.693    // Check if the task node for this root was changed.694    if (root.callbackNode !== originalCallbackNode) {695      // The current task was canceled. Exit. We don't need to call696      // `ensureRootIsScheduled` because the check above implies either that697      // there's a new task, or that there's no remaining work on this root.698      return null;699    } else {700      // Current task was not canceled. Continue.701    }702  }703  // Determine the next lanes to work on, using the fields stored704  // on the root.705  let lanes = getNextLanes(706    root,707    root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,708  );709  if (lanes === NoLanes) {710    // Defensive coding. This is never expected to happen.711    return null;712  }713  // We disable time-slicing in some cases: if the work has been CPU-bound714  // for too long ("expired" work, to prevent starvation), or we're in715  // sync-updates-by-default mode.716  // TODO: We only check `didTimeout` defensively, to account for a Scheduler717  // bug we're still investigating. Once the bug in Scheduler is fixed,718  // we can remove this, since we track expiration ourselves.719  const shouldTimeSlice =720    !includesBlockingLane(root, lanes) &&721    !includesExpiredLane(root, lanes) &&722    (disableSchedulerTimeoutInWorkLoop || !didTimeout);723  let exitStatus = shouldTimeSlice724    ? renderRootConcurrent(root, lanes)725    : renderRootSync(root, lanes);726  if (exitStatus !== RootIncomplete) {727    if (exitStatus === RootErrored) {728      // If something threw an error, try rendering one more time. We'll729      // render synchronously to block concurrent data mutations, and we'll730      // includes all pending updates are included. If it still fails after731      // the second attempt, we'll give up and commit the resulting tree.732      const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);733      if (errorRetryLanes !== NoLanes) {734        lanes = errorRetryLanes;735        exitStatus = recoverFromConcurrentError(root, errorRetryLanes);736      }737    }738    if (exitStatus === RootFatalErrored) {739      const fatalError = workInProgressRootFatalError;740      prepareFreshStack(root, NoLanes);741      markRootSuspended(root, lanes);742      ensureRootIsScheduled(root, now());743      throw fatalError;744    }745    // Check if this render may have yielded to a concurrent event, and if so,746    // confirm that any newly rendered stores are consistent.747    // TODO: It's possible that even a concurrent render may never have yielded748    // to the main thread, if it was fast enough, or if it expired. We could749    // skip the consistency check in that case, too.750    const renderWasConcurrent = !includesBlockingLane(root, lanes);751    const finishedWork: Fiber = (root.current.alternate: any);752    if (753      renderWasConcurrent &&754      !isRenderConsistentWithExternalStores(finishedWork)755    ) {756      // A store was mutated in an interleaved event. Render again,757      // synchronously, to block further mutations.758      exitStatus = renderRootSync(root, lanes);759      // We need to check again if something threw760      if (exitStatus === RootErrored) {761        const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);762        if (errorRetryLanes !== NoLanes) {763          lanes = errorRetryLanes;764          exitStatus = recoverFromConcurrentError(root, errorRetryLanes);765          // We assume the tree is now consistent because we didn't yield to any766          // concurrent events.767        }768      }769      if (exitStatus === RootFatalErrored) {770        const fatalError = workInProgressRootFatalError;771        prepareFreshStack(root, NoLanes);772        markRootSuspended(root, lanes);773        ensureRootIsScheduled(root, now());774        throw fatalError;775      }776    }777    // We now have a consistent tree. The next step is either to commit it,778    // or, if something suspended, wait to commit it after a timeout.779    root.finishedWork = finishedWork;780    root.finishedLanes = lanes;781    finishConcurrentRender(root, exitStatus, lanes);782  }783  ensureRootIsScheduled(root, now());784  if (root.callbackNode === originalCallbackNode) {785    // The task node scheduled for this root is the same one that's786    // currently executed. Need to return a continuation.787    return performConcurrentWorkOnRoot.bind(null, root);788  }789  return null;790}791function recoverFromConcurrentError(root, errorRetryLanes) {792  const prevExecutionContext = executionContext;793  executionContext |= RetryAfterError;794  // If an error occurred during hydration, discard server response and fall795  // back to client side render.796  if (root.isDehydrated) {797    root.isDehydrated = false;798    if (__DEV__) {799      errorHydratingContainer(root.containerInfo);800    }801    clearContainer(root.containerInfo);802  }803  const exitStatus = renderRootSync(root, errorRetryLanes);804  executionContext = prevExecutionContext;805  return exitStatus;806}807function finishConcurrentRender(root, exitStatus, lanes) {808  switch (exitStatus) {809    case RootIncomplete:810    case RootFatalErrored: {811      invariant(false, 'Root did not complete. This is a bug in React.');812    }813    // Flow knows about invariant, so it complains if I add a break814    // statement, but eslint doesn't know about invariant, so it complains815    // if I do. eslint-disable-next-line no-fallthrough816    case RootErrored: {817      // We should have already attempted to retry this tree. If we reached818      // this point, it errored again. Commit it.819      commitRoot(root);820      break;821    }822    case RootSuspended: {823      markRootSuspended(root, lanes);824      // We have an acceptable loading state. We need to figure out if we825      // should immediately commit it or wait a bit.826      if (827        includesOnlyRetries(lanes) &&828        // do not delay if we're inside an act() scope829        !shouldForceFlushFallbacksInDEV()830      ) {831        // This render only included retries, no updates. Throttle committing832        // retries so that we don't show too many loading states too quickly.833        const msUntilTimeout =834          globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - now();835        // Don't bother with a very short suspense time.836        if (msUntilTimeout > 10) {837          const nextLanes = getNextLanes(root, NoLanes);838          if (nextLanes !== NoLanes) {839            // There's additional work on this root.840            break;841          }842          const suspendedLanes = root.suspendedLanes;843          if (!isSubsetOfLanes(suspendedLanes, lanes)) {844            // We should prefer to render the fallback of at the last845            // suspended level. Ping the last suspended level to try846            // rendering it again.847            // FIXME: What if the suspended lanes are Idle? Should not restart.848            const eventTime = requestEventTime();849            markRootPinged(root, suspendedLanes, eventTime);850            break;851          }852          // The render is suspended, it hasn't timed out, and there's no853          // lower priority work to do. Instead of committing the fallback854          // immediately, wait for more data to arrive.855          root.timeoutHandle = scheduleTimeout(856            commitRoot.bind(null, root),857            msUntilTimeout,858          );859          break;860        }861      }862      // The work expired. Commit immediately.863      commitRoot(root);864      break;865    }866    case RootSuspendedWithDelay: {867      markRootSuspended(root, lanes);868      if (includesOnlyTransitions(lanes)) {869        // This is a transition, so we should exit without committing a870        // placeholder and without scheduling a timeout. Delay indefinitely871        // until we receive more data.872        break;873      }874      if (!shouldForceFlushFallbacksInDEV()) {875        // This is not a transition, but we did trigger an avoided state.876        // Schedule a placeholder to display after a short delay, using the Just877        // Noticeable Difference.878        // TODO: Is the JND optimization worth the added complexity? If this is879        // the only reason we track the event time, then probably not.880        // Consider removing.881        const mostRecentEventTime = getMostRecentEventTime(root, lanes);882        const eventTimeMs = mostRecentEventTime;883        const timeElapsedMs = now() - eventTimeMs;884        const msUntilTimeout = jnd(timeElapsedMs) - timeElapsedMs;885        // Don't bother with a very short suspense time.886        if (msUntilTimeout > 10) {887          // Instead of committing the fallback immediately, wait for more data888          // to arrive.889          root.timeoutHandle = scheduleTimeout(890            commitRoot.bind(null, root),891            msUntilTimeout,892          );893          break;894        }895      }896      // Commit the placeholder.897      commitRoot(root);898      break;899    }900    case RootCompleted: {901      // The work completed. Ready to commit.902      commitRoot(root);903      break;904    }905    default: {906      invariant(false, 'Unknown root exit status.');907    }908  }909}910function isRenderConsistentWithExternalStores(finishedWork: Fiber): boolean {911  // Search the rendered tree for external store reads, and check whether the912  // stores were mutated in a concurrent event. Intentionally using a iterative913  // loop instead of recursion so we can exit early.914  let node: Fiber = finishedWork;915  while (true) {916    if (node.flags & StoreConsistency) {917      const updateQueue: FunctionComponentUpdateQueue | null = (node.updateQueue: any);918      if (updateQueue !== null) {919        const checks = updateQueue.stores;920        if (checks !== null) {921          for (let i = 0; i < checks.length; i++) {922            const check = checks[i];923            const getSnapshot = check.getSnapshot;924            const renderedValue = check.value;925            try {926              if (!is(getSnapshot(), renderedValue)) {927                // Found an inconsistent store.928                return false;929              }930            } catch (error) {931              // If `getSnapshot` throws, return `false`. This will schedule932              // a re-render, and the error will be rethrown during render.933              return false;934            }935          }936        }937      }938    }939    const child = node.child;940    if (node.subtreeFlags & StoreConsistency && child !== null) {941      child.return = node;942      node = child;943      continue;944    }945    if (node === finishedWork) {946      return true;947    }948    while (node.sibling === null) {949      if (node.return === null || node.return === finishedWork) {950        return true;951      }952      node = node.return;953    }954    node.sibling.return = node.return;955    node = node.sibling;956  }957  // Flow doesn't know this is unreachable, but eslint does958  // eslint-disable-next-line no-unreachable959  return true;960}961function markRootSuspended(root, suspendedLanes) {962  // When suspending, we should always exclude lanes that were pinged or (more963  // rarely, since we try to avoid it) updated during the render phase.964  // TODO: Lol maybe there's a better way to factor this besides this965  // obnoxiously named function :)966  suspendedLanes = removeLanes(suspendedLanes, workInProgressRootPingedLanes);967  suspendedLanes = removeLanes(suspendedLanes, workInProgressRootUpdatedLanes);968  markRootSuspended_dontCallThisOneDirectly(root, suspendedLanes);969}970// This is the entry point for synchronous tasks that don't go971// through Scheduler972function performSyncWorkOnRoot(root) {973  if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {974    syncNestedUpdateFlag();975  }976  invariant(977    (executionContext & (RenderContext | CommitContext)) === NoContext,978    'Should not already be working.',979  );980  flushPassiveEffects();981  let lanes = getNextLanes(root, NoLanes);982  if (!includesSomeLane(lanes, SyncLane)) {983    // There's no remaining sync work left.984    ensureRootIsScheduled(root, now());985    return null;986  }987  let exitStatus = renderRootSync(root, lanes);988  if (root.tag !== LegacyRoot && exitStatus === RootErrored) {989    const prevExecutionContext = executionContext;990    executionContext |= RetryAfterError;991    // If an error occurred during hydration,992    // discard server response and fall back to client side render.993    if (root.isDehydrated) {994      root.isDehydrated = false;995      if (__DEV__) {996        errorHydratingContainer(root.containerInfo);997      }998      clearContainer(root.containerInfo);999    }1000    // If something threw an error, try rendering one more time. We'll render1001    // synchronously to block concurrent data mutations, and we'll includes1002    // all pending updates are included. If it still fails after the second1003    // attempt, we'll give up and commit the resulting tree.1004    const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);1005    if (errorRetryLanes !== NoLanes) {1006      lanes = errorRetryLanes;1007      exitStatus = renderRootSync(root, lanes);1008    }1009    executionContext = prevExecutionContext;1010  }1011  if (exitStatus === RootFatalErrored) {1012    const fatalError = workInProgressRootFatalError;1013    prepareFreshStack(root, NoLanes);1014    markRootSuspended(root, lanes);1015    ensureRootIsScheduled(root, now());1016    throw fatalError;1017  }1018  // We now have a consistent tree. Because this is a sync render, we1019  // will commit it even if something suspended.1020  const finishedWork: Fiber = (root.current.alternate: any);1021  root.finishedWork = finishedWork;1022  root.finishedLanes = lanes;1023  commitRoot(root);1024  // Before exiting, make sure there's a callback scheduled for the next1025  // pending level.1026  ensureRootIsScheduled(root, now());1027  return null;1028}1029export function flushRoot(root: FiberRoot, lanes: Lanes) {1030  if (lanes !== NoLanes) {1031    markRootEntangled(root, mergeLanes(lanes, SyncLane));1032    ensureRootIsScheduled(root, now());1033    if ((executionContext & (RenderContext | CommitContext)) === NoContext) {1034      resetRenderTimer();1035      flushSyncCallbacks();1036    }1037  }1038}1039export function getExecutionContext(): ExecutionContext {1040  return executionContext;1041}1042export function deferredUpdates<A>(fn: () => A): A {1043  const previousPriority = getCurrentUpdatePriority();1044  const prevTransition = ReactCurrentBatchConfig.transition;1045  try {1046    ReactCurrentBatchConfig.transition = 0;1047    setCurrentUpdatePriority(DefaultEventPriority);1048    return fn();1049  } finally {1050    setCurrentUpdatePriority(previousPriority);1051    ReactCurrentBatchConfig.transition = prevTransition;1052  }1053}1054export function batchedUpdates<A, R>(fn: A => R, a: A): R {1055  const prevExecutionContext = executionContext;1056  executionContext |= BatchedContext;1057  try {1058    return fn(a);1059  } finally {1060    executionContext = prevExecutionContext;1061    // If there were legacy sync updates, flush them at the end of the outer1062    // most batchedUpdates-like method.1063    if (1064      executionContext === NoContext &&1065      // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.1066      !(__DEV__ && ReactCurrentActQueue.isBatchingLegacy)1067    ) {1068      resetRenderTimer();1069      flushSyncCallbacksOnlyInLegacyMode();1070    }1071  }1072}1073export function discreteUpdates<A, B, C, D, R>(1074  fn: (A, B, C, D) => R,1075  a: A,1076  b: B,1077  c: C,1078  d: D,1079): R {1080  const previousPriority = getCurrentUpdatePriority();1081  const prevTransition = ReactCurrentBatchConfig.transition;1082  try {1083    ReactCurrentBatchConfig.transition = 0;1084    setCurrentUpdatePriority(DiscreteEventPriority);1085    return fn(a, b, c, d);1086  } finally {1087    setCurrentUpdatePriority(previousPriority);1088    ReactCurrentBatchConfig.transition = prevTransition;1089    if (executionContext === NoContext) {1090      resetRenderTimer();1091    }1092  }1093}1094// Overload the definition to the two valid signatures.1095// Warning, this opts-out of checking the function body.1096declare function flushSync<R>(fn: () => R): R;1097// eslint-disable-next-line no-redeclare1098declare function flushSync(): void;1099// eslint-disable-next-line no-redeclare1100export function flushSync(fn) {1101  // In legacy mode, we flush pending passive effects at the beginning of the1102  // next event, not at the end of the previous one.1103  if (1104    rootWithPendingPassiveEffects !== null &&1105    rootWithPendingPassiveEffects.tag === LegacyRoot &&1106    (executionContext & (RenderContext | CommitContext)) === NoContext1107  ) {1108    flushPassiveEffects();1109  }1110  const prevExecutionContext = executionContext;1111  executionContext |= BatchedContext;1112  const prevTransition = ReactCurrentBatchConfig.transition;1113  const previousPriority = getCurrentUpdatePriority();1114  try {1115    ReactCurrentBatchConfig.transition = 0;1116    setCurrentUpdatePriority(DiscreteEventPriority);1117    if (fn) {1118      return fn();1119    } else {1120      return undefined;1121    }1122  } finally {1123    setCurrentUpdatePriority(previousPriority);1124    ReactCurrentBatchConfig.transition = prevTransition;1125    executionContext = prevExecutionContext;1126    // Flush the immediate callbacks that were scheduled during this batch.1127    // Note that this will happen even if batchedUpdates is higher up1128    // the stack.1129    if ((executionContext & (RenderContext | CommitContext)) === NoContext) {1130      flushSyncCallbacks();1131    }1132  }1133}1134export function isAlreadyRendering() {1135  // Used by the renderer to print a warning if certain APIs are called from1136  // the wrong context.1137  return (1138    __DEV__ &&1139    (executionContext & (RenderContext | CommitContext)) !== NoContext1140  );1141}1142export function flushControlled(fn: () => mixed): void {1143  const prevExecutionContext = executionContext;1144  executionContext |= BatchedContext;1145  const prevTransition = ReactCurrentBatchConfig.transition;1146  const previousPriority = getCurrentUpdatePriority();1147  try {1148    ReactCurrentBatchConfig.transition = 0;1149    setCurrentUpdatePriority(DiscreteEventPriority);1150    fn();1151  } finally {1152    setCurrentUpdatePriority(previousPriority);1153    ReactCurrentBatchConfig.transition = prevTransition;1154    executionContext = prevExecutionContext;1155    if (executionContext === NoContext) {1156      // Flush the immediate callbacks that were scheduled during this batch1157      resetRenderTimer();1158      flushSyncCallbacks();1159    }1160  }1161}1162export function pushRenderLanes(fiber: Fiber, lanes: Lanes) {1163  pushToStack(subtreeRenderLanesCursor, subtreeRenderLanes, fiber);1164  subtreeRenderLanes = mergeLanes(subtreeRenderLanes, lanes);1165  workInProgressRootIncludedLanes = mergeLanes(1166    workInProgressRootIncludedLanes,1167    lanes,1168  );1169}1170export function popRenderLanes(fiber: Fiber) {1171  subtreeRenderLanes = subtreeRenderLanesCursor.current;1172  popFromStack(subtreeRenderLanesCursor, fiber);1173}1174function prepareFreshStack(root: FiberRoot, lanes: Lanes) {1175  root.finishedWork = null;1176  root.finishedLanes = NoLanes;1177  const timeoutHandle = root.timeoutHandle;1178  if (timeoutHandle !== noTimeout) {1179    // The root previous suspended and scheduled a timeout to commit a fallback1180    // state. Now that we have additional work, cancel the timeout.1181    root.timeoutHandle = noTimeout;1182    // $FlowFixMe Complains noTimeout is not a TimeoutID, despite the check above1183    cancelTimeout(timeoutHandle);1184  }1185  if (workInProgress !== null) {1186    let interruptedWork = workInProgress.return;1187    while (interruptedWork !== null) {1188      unwindInterruptedWork(interruptedWork, workInProgressRootRenderLanes);1189      interruptedWork = interruptedWork.return;1190    }1191  }1192  workInProgressRoot = root;1193  workInProgress = createWorkInProgress(root.current, null);1194  workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;1195  workInProgressRootExitStatus = RootIncomplete;1196  workInProgressRootFatalError = null;1197  workInProgressRootSkippedLanes = NoLanes;1198  workInProgressRootUpdatedLanes = NoLanes;1199  workInProgressRootPingedLanes = NoLanes;1200  enqueueInterleavedUpdates();1201  if (__DEV__) {1202    ReactStrictModeWarnings.discardPendingWarnings();1203  }1204}1205function handleError(root, thrownValue): void {1206  do {1207    let erroredWork = workInProgress;1208    try {1209      // Reset module-level state that was set during the render phase.1210      resetContextDependencies();1211      resetHooksAfterThrow();1212      resetCurrentDebugFiberInDEV();1213      // TODO: I found and added this missing line while investigating a1214      // separate issue. Write a regression test using string refs.1215      ReactCurrentOwner.current = null;1216      if (erroredWork === null || erroredWork.return === null) {1217        // Expected to be working on a non-root fiber. This is a fatal error1218        // because there's no ancestor that can handle it; the root is1219        // supposed to capture all errors that weren't caught by an error1220        // boundary.1221        workInProgressRootExitStatus = RootFatalErrored;1222        workInProgressRootFatalError = thrownValue;1223        // Set `workInProgress` to null. This represents advancing to the next1224        // sibling, or the parent if there are no siblings. But since the root1225        // has no siblings nor a parent, we set it to null. Usually this is1226        // handled by `completeUnitOfWork` or `unwindWork`, but since we're1227        // intentionally not calling those, we need set it here.1228        // TODO: Consider calling `unwindWork` to pop the contexts.1229        workInProgress = null;1230        return;1231      }1232      if (enableProfilerTimer && erroredWork.mode & ProfileMode) {1233        // Record the time spent rendering before an error was thrown. This1234        // avoids inaccurate Profiler durations in the case of a1235        // suspended render.1236        stopProfilerTimerIfRunningAndRecordDelta(erroredWork, true);1237      }1238      if (enableSchedulingProfiler) {1239        markComponentRenderStopped();1240        if (1241          thrownValue !== null &&1242          typeof thrownValue === 'object' &&1243          typeof thrownValue.then === 'function'1244        ) {1245          const wakeable: Wakeable = (thrownValue: any);1246          markComponentSuspended(1247            erroredWork,1248            wakeable,1249            workInProgressRootRenderLanes,1250          );1251        } else {1252          markComponentErrored(1253            erroredWork,1254            thrownValue,1255            workInProgressRootRenderLanes,1256          );1257        }1258      }1259      throwException(1260        root,1261        erroredWork.return,1262        erroredWork,1263        thrownValue,1264        workInProgressRootRenderLanes,1265      );1266      completeUnitOfWork(erroredWork);1267    } catch (yetAnotherThrownValue) {1268      // Something in the return path also threw.1269      thrownValue = yetAnotherThrownValue;1270      if (workInProgress === erroredWork && erroredWork !== null) {1271        // If this boundary has already errored, then we had trouble processing1272        // the error. Bubble it to the next boundary.1273        erroredWork = erroredWork.return;1274        workInProgress = erroredWork;1275      } else {1276        erroredWork = workInProgress;1277      }1278      continue;1279    }1280    // Return to the normal work loop.1281    return;1282  } while (true);1283}1284function pushDispatcher() {1285  const prevDispatcher = ReactCurrentDispatcher.current;1286  ReactCurrentDispatcher.current = ContextOnlyDispatcher;1287  if (prevDispatcher === null) {1288    // The React isomorphic package does not include a default dispatcher.1289    // Instead the first renderer will lazily attach one, in order to give1290    // nicer error messages.1291    return ContextOnlyDispatcher;1292  } else {1293    return prevDispatcher;1294  }1295}1296function popDispatcher(prevDispatcher) {1297  ReactCurrentDispatcher.current = prevDispatcher;1298}1299export function markCommitTimeOfFallback() {1300  globalMostRecentFallbackTime = now();1301}1302export function markSkippedUpdateLanes(lane: Lane | Lanes): void {1303  workInProgressRootSkippedLanes = mergeLanes(1304    lane,1305    workInProgressRootSkippedLanes,1306  );1307}1308export function renderDidSuspend(): void {1309  if (workInProgressRootExitStatus === RootIncomplete) {1310    workInProgressRootExitStatus = RootSuspended;1311  }1312}1313export function renderDidSuspendDelayIfPossible(): void {1314  if (1315    workInProgressRootExitStatus === RootIncomplete ||1316    workInProgressRootExitStatus === RootSuspended ||1317    workInProgressRootExitStatus === RootErrored1318  ) {1319    workInProgressRootExitStatus = RootSuspendedWithDelay;1320  }1321  // Check if there are updates that we skipped tree that might have unblocked1322  // this render.1323  if (1324    workInProgressRoot !== null &&1325    (includesNonIdleWork(workInProgressRootSkippedLanes) ||1326      includesNonIdleWork(workInProgressRootUpdatedLanes))1327  ) {1328    // Mark the current render as suspended so that we switch to working on1329    // the updates that were skipped. Usually we only suspend at the end of1330    // the render phase.1331    // TODO: We should probably always mark the root as suspended immediately1332    // (inside this function), since by suspending at the end of the render1333    // phase introduces a potential mistake where we suspend lanes that were1334    // pinged or updated while we were rendering.1335    markRootSuspended(workInProgressRoot, workInProgressRootRenderLanes);1336  }1337}1338export function renderDidError() {1339  if (workInProgressRootExitStatus !== RootSuspendedWithDelay) {1340    workInProgressRootExitStatus = RootErrored;1341  }1342}1343// Called during render to determine if anything has suspended.1344// Returns false if we're not sure.1345export function renderHasNotSuspendedYet(): boolean {1346  // If something errored or completed, we can't really be sure,1347  // so those are false.1348  return workInProgressRootExitStatus === RootIncomplete;1349}...

ReactFiberWorkLoop.js

Source:ReactFiberWorkLoop.js

...730        lane731      );732    }733    if (workInProgressRootExitStatus === RootSuspendedWithDelay) {734      markRootSuspended(root, workInProgressRootRenderLanes);735    }736  }737  if (lane === SyncLane) {738    if (739      (executionContext & LegacyUnbatchedContext) !== NoContext &&740      (executionContext & (RenderContext | CommitContext)) === NoContext741    ) {742      performSyncWorkOnRoot(root);743    } else {744      ensureRootIsScheduled(root, eventTime);745      if (executionContext === NoContext) {746        resetRenderTimer();747        flushSyncCallbackQueue();748      }...

ReactFiberLane.js

Source:ReactFiberLane.js

1import {2  ImmediatePriority as ImmediateSchedulerPriority,3  UserBlockingPriority as UserBlockingSchedulerPriority,4  NormalPriority as NormalSchedulerPriority,5  LowPriority as LowSchedulerPriority,6  IdlePriority as IdleSchedulerPriority,7  NoPriority as NoSchedulerPriority,8} from './SchedulerWithReactIntegration';9const SyncLanePriority = 15;10const SyncBatchedLanePriority = 14;11const InputDiscreteHydrationLanePriority = 13;12const InputDiscreteLanePriority = 12;13const InputContinuousHydrationLanePriority = 11;14const InputContinuousLanePriority = 10;15const DefaultHydrationLanePriority = 9;16const DefaultLanePriority = 8;17const TransitionHydrationPriority = 7;18const TransitionPriority = 6;19const RetryLanePriority = 5;20const SelectiveHydrationLanePriority = 4;21const IdleHydrationLanePriority = 3;22const IdleLanePriority = 2;23const OffscreenLanePriority = 1;24const NoLanePriority = 0;25const createLaneMap = (initial) =>26  Array(31)27    .fill(0)28    .map(() => initial);29const NoLanes = 0b0000000000000000000000000000000;30const NoLane = 0b0000000000000000000000000000000;31const SyncLane = 0b0000000000000000000000000000001;32const SyncBatchedLane = 0b0000000000000000000000000000010;33const InputDiscreteHydrationLane = 0b0000000000000000000000000000100;34const InputDiscreteLanes = 0b0000000000000000000000000011000;35const InputContinuousHydrationLane = 0b0000000000000000000000000100000;36const InputContinuousLanes = 0b0000000000000000000000011000000;37const DefaultHydrationLane = 0b0000000000000000000000100000000;38const DefaultLanes = 0b0000000000000000000111000000000;39const TransitionHydrationLane = 0b0000000000000000001000000000000;40const TransitionLanes = 0b0000000001111111110000000000000;41const IdleHydrationLane = 0b0001000000000000000000000000000;42const IdleLanes = 0b0110000000000000000000000000000;43const NonIdleLanes = 0b0000111111111111111111111111111;44const OffscreenLane = 0b1000000000000000000000000000000;45const NoTimestamp = -1;46const getHighestPriorityLane = (lanes) => lanes & -lanes;47const pickArbitraryLane = (lanes) => getHighestPriorityLane(lanes);48const findUpdateLane = (lanePriority, wipLanes) => {49  let lane;50  switch (lanePriority) {51    case NoLanePriority:52      break;53    case SyncLanePriority:54      return SyncLane;55    case SyncBatchedLanePriority:56      return SyncBatchedLane;57    case InputDiscreteLanePriority: {58      lane = pickArbitraryLane(InputDiscreteLanes & ~wipLanes);59      if (lane === NoLane) {60        return findUpdateLane(InputContinuousLanePriority, wipLanes);61      }62      return lane;63    }64    case InputContinuousLanePriority: {65      lane = pickArbitraryLane(InputContinuousLanes & ~wipLanes);66      if (lane === NoLane) {67        return findUpdateLane(DefaultLanePriority, wipLanes);68      }69      return lane;70    }71    case DefaultLanePriority: {72      lane = pickArbitraryLane(DefaultLanes & ~wipLanes);73      if (lane === NoLane) {74        lane = pickArbitraryLane(TransitionLanes & ~wipLanes);75        if (lane === NoLane) {76          lane = pickArbitraryLane(DefaultLanes);77        }78      }79      return lane;80    }81    case TransitionPriority:82    case RetryLanePriority:83      break;84    case IdleLanePriority:85      lane = pickArbitraryLane(IdleLanes & ~wipLanes);86      if (lane === NoLane) {87        lane = pickArbitraryLane(IdleLanes);88      }89      return lane;90    default:91      break;92  }93  throw new Error('Invalid update priority: %s. This is a bug in React.');94};95const schedulerPriorityToLanePriority = (schedulerPriorityLevel) => {96  switch (schedulerPriorityLevel) {97    case ImmediateSchedulerPriority:98      return SyncLanePriority;99    case UserBlockingSchedulerPriority:100      return InputContinuousLanePriority;101    case NormalSchedulerPriority:102    case LowSchedulerPriority:103      return DefaultLanePriority;104    case IdleSchedulerPriority:105      return IdleLanePriority;106    default:107      return NoLanePriority;108  }109};110const isSubsetOfLanes = (set, subset) => (set & subset) === subset;111const mergeLanes = (a, b) => a | b;112const pickArbitraryLaneIndex = (lane) => 31 - Math.clz32(lane);113const markRootUpdated = (root, updateLane, eventTime) => {114  root.pendingLanes |= updateLane;115  const higherPriorityLanes = updateLane - 1;116  root.suspendedLanes &= higherPriorityLanes;117  root.pingedLanes &= higherPriorityLanes;118  const eventTimes = root.eventTimes;119  const index = pickArbitraryLaneIndex(updateLane);120  eventTimes[index] = eventTime;121};122const markRootSuspended = (root, suspendedLanes) => {123  root.suspendedLanes |= suspendedLanes;124  root.pingedLanes &= ~suspendedLanes;125  const expirationTimes = root.expirationTimes;126  let lanes = suspendedLanes;127  while (lanes > 0) {128    const index = pickArbitraryLaneIndex(lanes);129    const lane = 1 << index;130    expirationTimes[index] = NoTimestamp;131    lanes &= ~lane;132  }133};134const includesSomeLane = (a, b) => (a & b) !== NoLanes;135let return_highestLanePriority = DefaultLanePriority;136const getHighestPriorityLanes = (lanes) => {137  if ((SyncLane & lanes) !== NoLanes) {138    return_highestLanePriority = SyncLanePriority;139    return SyncLane;140  }141  if ((SyncBatchedLane & lanes) !== NoLanes) {142    return_highestLanePriority = SyncBatchedLanePriority;143    return SyncBatchedLane;144  }145  if ((InputDiscreteHydrationLane & lanes) !== NoLanes) {146    return_highestLanePriority = InputDiscreteHydrationLanePriority;147    return InputDiscreteHydrationLane;148  }149  const inputDiscreteLanes = InputDiscreteLanes & lanes;150  if (inputDiscreteLanes !== NoLanes) {151    return_highestLanePriority = InputDiscreteLanePriority;152    return inputDiscreteLanes;153  }154  if ((lanes & InputContinuousHydrationLane) !== NoLanes) {155    return_highestLanePriority = InputContinuousHydrationLanePriority;156    return InputContinuousHydrationLane;157  }158  const inputContinuousLanes = InputContinuousLanes & lanes;159  if (inputContinuousLanes !== NoLanes) {160    return_highestLanePriority = InputContinuousLanePriority;161    return inputContinuousLanes;162  }163  if ((lanes & DefaultHydrationLane) !== NoLanes) {164    return_highestLanePriority = DefaultHydrationLanePriority;165    return DefaultHydrationLane;166  }167  const defaultLanes = DefaultLanes & lanes;168  if (defaultLanes !== NoLanes) {169    return_highestLanePriority = DefaultLanePriority;170    return defaultLanes;171  }172  if ((lanes & TransitionHydrationLane) !== NoLanes) {173    return_highestLanePriority = TransitionHydrationPriority;174    return TransitionHydrationLane;175  }176  const transitionLanes = TransitionLanes & lanes;177  if (transitionLanes !== NoLanes) {178    return_highestLanePriority = TransitionPriority;179    return transitionLanes;180  }181  const retryLanes = RetryLanes & lanes;182  if (retryLanes !== NoLanes) {183    return_highestLanePriority = RetryLanePriority;184    return retryLanes;185  }186  if (lanes & SelectiveHydrationLane) {187    return_highestLanePriority = SelectiveHydrationLanePriority;188    return SelectiveHydrationLane;189  }190  if ((lanes & IdleHydrationLane) !== NoLanes) {191    return_highestLanePriority = IdleHydrationLanePriority;192    return IdleHydrationLane;193  }194  const idleLanes = IdleLanes & lanes;195  if (idleLanes !== NoLanes) {196    return_highestLanePriority = IdleLanePriority;197    return idleLanes;198  }199  if ((OffscreenLane & lanes) !== NoLanes) {200    return_highestLanePriority = OffscreenLanePriority;201    return OffscreenLane;202  }203  return_highestLanePriority = DefaultLanePriority;204  return lanes;205};206const getLowestPriorityLane = (lanes) => {207  const index = 31 - Math.clz32(lanes);208  return index < 0 ? NoLanes : 1 << index;209};210const getNextLanes = (root, wipLanes) => {211  const pendingLanes = root.pendingLanes;212  if (pendingLanes === NoLanes) {213    return_highestLanePriority = NoLanePriority;214    return NoLanes;215  }216  let nextLanes = NoLanes;217  let nextLanePriority = NoLanePriority;218  const expiredLanes = root.expiredLanes;219  const suspendedLanes = root.suspendedLanes;220  const pingedLanes = root.pingedLanes;221  if (expiredLanes !== NoLanes) {222    nextLanes = expiredLanes;223    nextLanePriority = return_highestLanePriority = SyncLanePriority;224  } else {225    const nonIdlePendingLanes = pendingLanes & NonIdleLanes;226    if (nonIdlePendingLanes !== NoLanes) {227      const nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;228      if (nonIdleUnblockedLanes !== NoLanes) {229        nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);230        nextLanePriority = return_highestLanePriority;231      } else {232        const nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;233        if (nonIdlePingedLanes !== NoLanes) {234          nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);235          nextLanePriority = return_highestLanePriority;236        }237      }238    } else {239      const unblockedLanes = pendingLanes & ~suspendedLanes;240      if (unblockedLanes !== NoLanes) {241        nextLanes = getHighestPriorityLanes(unblockedLanes);242        nextLanePriority = return_highestLanePriority;243      } else {244        if (pingedLanes !== NoLanes) {245          nextLanes = getHighestPriorityLanes(pingedLanes);246          nextLanePriority = return_highestLanePriority;247        }248      }249    }250  }251  if (nextLanes === NoLanes) {252    return NoLanes;253  }254  nextLanes = pendingLanes & ((getLowestPriorityLane(nextLanes) << 1) - 1);255  if (256    wipLanes !== NoLanes &&257    wipLanes !== nextLanes &&258    (wipLanes & suspendedLanes) === NoLanes259  ) {260    getHighestPriorityLanes(wipLanes);261    const wipLanePriority = return_highestLanePriority;262    if (nextLanePriority <= wipLanePriority) {263      return wipLanes;264    } else {265      return_highestLanePriority = nextLanePriority;266    }267  }268  const entangledLanes = root.entangledLanes;269  if (entangledLanes !== NoLanes) {270    const entanglements = root.entanglements;271    let lanes = nextLanes & entangledLanes;272    while (lanes > 0) {273      const index = pickArbitraryLaneIndex(lanes);274      const lane = 1 << index;275      nextLanes |= entanglements[index];276      lanes &= ~lane;277    }278  }279  return nextLanes;280};281const markRootFinished = (root, remainingLanes) => {282  const noLongerPendingLanes = root.pendingLanes & ~remainingLanes;283  root.pendingLanes = remainingLanes;284  root.suspendedLanes = 0;285  root.pingedLanes = 0;286  root.expiredLanes &= remainingLanes;287  root.mutableReadLanes &= remainingLanes;288  root.entangledLanes &= remainingLanes;289  const entanglements = root.entanglements;290  const eventTimes = root.eventTimes;291  const expirationTimes = root.expirationTimes;292  let lanes = noLongerPendingLanes;293  while (lanes > 0) {294    const index = pickArbitraryLaneIndex(lanes);295    const lane = 1 << index;296    entanglements[index] = NoLanes;297    eventTimes[index] = NoTimestamp;298    expirationTimes[index] = NoTimestamp;299    lanes &= ~lane;300  }301};302const hasDiscreteLanes = (lanes) => (lanes & InputDiscreteLanes) !== NoLanes;303const computeExpirationTime = (lane, currentTime) => {304  getHighestPriorityLanes(lane);305  const priority = return_highestLanePriority;306  if (priority >= InputContinuousLanePriority) {307    return currentTime + 250;308  } else if (priority >= TransitionPriority) {309    return currentTime + 5000;310  } else {311    return NoTimestamp;312  }313};314const markStarvedLanesAsExpired = (root, currentTime) => {315  const pendingLanes = root.pendingLanes;316  const suspendedLanes = root.suspendedLanes;317  const pingedLanes = root.pingedLanes;318  const expirationTimes = root.expirationTimes;319  let lanes = pendingLanes;320  while (lanes > 0) {321    const index = pickArbitraryLaneIndex(lanes);322    const lane = 1 << index;323    const expirationTime = expirationTimes[index];324    if (expirationTime === NoTimestamp) {325      if (326        (lane & suspendedLanes) === NoLanes ||327        (lane & pingedLanes) !== NoLanes328      ) {329        expirationTimes[index] = computeExpirationTime(lane, currentTime);330      }331    } else if (expirationTime <= currentTime) {332      root.expiredLanes |= lane;333    }334    lanes &= ~lane;335  }336};337const returnNextLanesPriority = () => return_highestLanePriority;338const lanePriorityToSchedulerPriority = (lanePriority) => {339  switch (lanePriority) {340    case SyncLanePriority:341    case SyncBatchedLanePriority:342      return ImmediateSchedulerPriority;343    case InputDiscreteHydrationLanePriority:344    case InputDiscreteLanePriority:345    case InputContinuousHydrationLanePriority:346    case InputContinuousLanePriority:347      return UserBlockingSchedulerPriority;348    case DefaultHydrationLanePriority:349    case DefaultLanePriority:350    case TransitionHydrationPriority:351    case TransitionPriority:352    case SelectiveHydrationLanePriority:353    case RetryLanePriority:354      return NormalSchedulerPriority;355    case IdleHydrationLanePriority:356    case IdleLanePriority:357    case OffscreenLanePriority:358      return IdleSchedulerPriority;359    case NoLanePriority:360      return NoSchedulerPriority;361    default:362      invariant(363        false,364        'Invalid update priority: %s. This is a bug in React.',365        lanePriority366      );367  }368};369export {370  SyncLanePriority,371  SyncBatchedLanePriority,372  InputDiscreteLanePriority,373  InputContinuousLanePriority,374  DefaultLanePriority,375  TransitionPriority,376  NoLanePriority,377  createLaneMap,378  NoLanes,379  NoLane,380  SyncLane,381  SyncBatchedLane,382  InputDiscreteHydrationLane,383  DefaultHydrationLane,384  DefaultLanes,385  IdleHydrationLane,386  OffscreenLane,387  NoTimestamp,388  pickArbitraryLane,389  findUpdateLane,390  schedulerPriorityToLanePriority,391  isSubsetOfLanes,392  mergeLanes,393  markRootUpdated,394  markRootSuspended,395  includesSomeLane,396  getNextLanes,397  markRootFinished,398  hasDiscreteLanes,399  markStarvedLanesAsExpired,400  returnNextLanesPriority,401  lanePriorityToSchedulerPriority,...

FiberWorkLoop.js

Source:FiberWorkLoop.js

...169      break;170    }171    case RootSuspendedWithDelay:172    case RootSuspended:{  173      markRootSuspended(root, lanes);174      // work expired. Commit immediately.175      commitRoot(root);176      break;177    }178  }179}180export function pushRenderLanes(fiber, lanes){181  push(subtreeRenderLanesCursor, subtreeRenderLanes);182  subtreeRenderLanes = mergeLanes(subtreeRenderLanes, lanes);183  wipRootIncludedLanes = mergeLanes(184    wipRootIncludedLanes,185    lanes,186  );187}188export function popRenderLanes(){189  subtreeRenderLanes = subtreeRenderLanesCursor.current;190  pop(subtreeRenderLanesCursor);191}192function prepareFreshStack(root, lanes){193  if (wip !== null){194    console.error('Leftover work found:', wip);195  }196  wipRoot = root;197  wip = createWorkInProgress(root.current);198  wipRootRenderLanes = subtreeRenderLanes = wipRootIncludedLanes = lanes;199  wipRootExitStatus = RootIncomplete;200  wipRootSkippedLanes = wipRootUpdatedLanes = wipRootPingedLanes = NoLanes;201}202function handleError(root, thrownValue){203  let erroredWork = wip;204  try {205    throwException(206      root,207      erroredWork.return,208      erroredWork,209      thrownValue,210      wipRootRenderLanes211    );212    completeUnitOfWork(erroredWork);213  } catch (yetAnotherThrownValue){214    console.error(yetAnotherThrownValue);215  }216}217export function markSkippedUpdateLanes(lane){218  wipRootSkippedLanes = mergeLanes(219    lane, 220    wipRootSkippedLanes,221  )222}223export function renderDidSuspend(){224  if(wipRootExitStatus === RootIncomplete){225    wipRootExitStatus = RootSuspended;226  }227}228export function renderDidSuspendDelayIfPossible(){229  if(230    wipRootExitStatus === RootIncomplete ||231    wipRootExitStatus === RootSuspended232  ){233    wipRootExitStatus = RootSuspendedWithDelay;234  }235  if(236    wipRoot !== null &&237    (includesNonIdleWork(wipRootSkippedLanes) ||238      includesNonIdleWork(wipRootUpdatedLanes))239  ){240    markRootSuspended(wipRoot, wipRootRenderLanes);241  }242}243export function renderDidError(){244  if (wipRootExitStatus !== RootCompleted){245    wipRootExitStatus = RootErrored;246  }247}248function renderRootConcurrent(root, lanes){249  const prevExecutionContext = executionContext;250  executionContext |= RenderContext;251  // If the root or lanes have changed, throw out the existing stack252  // and prepare a fresh one. Otherwise we'll continue where we left off.253  if (wipRoot !== root || wipRootRenderLanes !== lanes){254    //create a new FiberNode by cloning root.current and set it to wip....

FiberLane.js

Source:FiberLane.js

...130  const eventTimes = root.eventTimes;131  const index = laneToIndex(updateLane);132  eventTimes[index] = eventTime;133}134export function markRootSuspended(root, suspendedLanes){135  root.suspendedLanes |= suspendedLanes;136  root.pingedLanes &= ~suspendedLanes;137  // The suspended lanes are no longer CPU-bound. Clear the expiration times.138  const expirationTimes = root.expirationTimes;139  let lanes = suspendedLanes;140  while (lanes > 0){141    const index = laneToIndex(lanes);142    const lane = 1 << index;143    expirationTimes[index] = NoTimestamp;144    lanes &= ~lane;145  }146}147export function markRootPinged(root, pingedLanes, eventTime){148  root.pingedLanes |= root.suspendedLanes & pingedLanes;...

Using AI Code Generation

1const { markRootSuspended } = require('playwright/lib/server/chromium/crPage');2const { chromium } = require('playwright');3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  await markRootSuspended(page._delegate);8  await page.waitForTimeout(5000);9  await browser.close();10})();11const { resumeRoot } = require('playwright/lib/server/chromium/crPage');12const { chromium } = require('playwright');13(async () => {14  const browser = await chromium.launch();15  const context = await browser.newContext();16  const page = await context.newPage();17  await markRootSuspended(page._delegate);18  await resumeRoot(page._delegate);19  await page.waitForTimeout(5000);20  await browser.close();21})();22const { chromium } = require('playwright');23(async () => {24  const browser = await chromium.launch();25  const context = await browser.newContext();26  const page = await context.newPage();27  await page.evaluate(() => {28    window.chrome._suspend();29    window.chrome._resume();30  });31  await page.waitForTimeout(5000);32  await browser.close();33})();

Using AI Code Generation

1const { markRootSuspended } = require('playwright/lib/server/supplements/recorder/recorderSupplement');2const { chromium } = require('playwright');3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  await page.screenshot({ path: `example.png` });8  markRootSuspended(page);9  await browser.close();10})();

Using AI Code Generation

1const { markRootSuspended } = require('playwright/lib/internal/inspector');2const { chromium } = require('playwright');3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  markRootSuspended(page);8  await browser.close();9})();10const { markRootSuspended } = require('playwright').chromium;

Using AI Code Generation

1const { markRootSuspended } = require('playwright/lib/server/browserContext');2const { chromium } = require('playwright');3(async () => {4    const browser = await chromium.launch();5    const context = await browser.newContext();6    const page = await context.newPage();7    markRootSuspended(page, true);8    await page.waitForTimeout(5000);9    markRootSuspended(page, false);10    await page.waitForTimeout(5000);11    await browser.close();12})();13const { markRootSuspended } = require('playwright/lib/server/browserContext');14const { chromium } = require('playwright');15(async () => {16    const browser = await chromium.launch();17    const context = await browser.newContext();18    const page = await context.newPage();19    markRootSuspended(page, true);20    await page.waitForTimeout(5000);21    markRootSuspended(page, false);22    await page.waitForTimeout(5000);23    await browser.close();24})();25const { markRootSuspended } = require('playwright/lib/server/browserContext');26const { chromium } = require('playwright');27(async () => {28    const browser = await chromium.launch();29    const context = await browser.newContext();30    const page = await context.newPage();31    markRootSuspended(page, true);32    await page.waitForTimeout(5000);33    markRootSuspended(page, false);34    await page.waitForTimeout(5000);35    await browser.close();36})();37const { markRootSuspended } = require('playwright/lib/server/browserContext');38const { chromium } = require('playwright');39(async () => {

Using AI Code Generation

1await page.evaluate(() => window.playwright.markRootSuspended());2await page.evaluate(() => window.playwright.markRootUnsuspended());3await page.evaluate(() => window.playwright.markRootSuspended());4await page.evaluate(() => window.playwright.markRootUnsuspended());5await page.evaluate(() => window.playwright.markRootSuspended());6await page.evaluate(() => window.playwright.markRootUnsuspended());7await page.evaluate(() => window.playwright.markRootSuspended());8await page.evaluate(() => window.playwright.markRootUnsuspended());9await page.evaluate(() => window.playwright.markRootSuspended());10await page.evaluate(() => window.playwright.markRootUnsuspended());11await page.evaluate(() => window.playwright.markRootSuspended());12await page.evaluate(() => window.playwright.markRootUnsuspended());13await page.evaluate(() => window.playwright.markRootSuspended());14await page.evaluate(() => window.playwright.markRootUnsuspended());15await page.evaluate(() => window.playwright.markRootSuspended());16await page.evaluate(() => window.playwright.markRootUnsuspended());17await page.evaluate(() => window.playwright.markRootSuspended());18await page.evaluate(()

Using AI Code Generation

1const { InternalAPI } = require('playwright/lib/server/frames');2InternalAPI.markRootSuspended();3const { InternalAPI } = require('playwright/lib/server/frames');4InternalAPI.markRootSuspended();5const { InternalAPI } = require('playwright/lib/server/frames');6InternalAPI.markRootSuspended();7const { InternalAPI } = require('playwright/lib/server/frames');8InternalAPI.markRootSuspended();9const { InternalAPI } = require('playwright/lib/server/frames');10InternalAPI.markRootSuspended();11const { InternalAPI } = require('playwright/lib/server/frames');12InternalAPI.markRootSuspended();13const { InternalAPI } = require('playwright/lib/server/frames');14InternalAPI.markRootSuspended();15const { InternalAPI } = require('playwright/lib/server/frames');16InternalAPI.markRootSuspended();17const { InternalAPI } = require('playwright/lib/server/frames');18InternalAPI.markRootSuspended();19const { InternalAPI } = require('playwright/lib/server/frames');20InternalAPI.markRootSuspended();21const { InternalAPI } = require('playwright/lib/server/frames');22InternalAPI.markRootSuspended();23const { InternalAPI } = require('playwright/lib/server/frames');24InternalAPI.markRootSuspended();25const { InternalAPI } = require('playwright/lib/server/frames');26InternalAPI.markRootSuspended();27const { InternalAPI } = require('playwright/lib/server/frames');

Using AI Code Generation

1const { markRootSuspended, markRootUnsuspended } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');2markRootSuspended(page);3markRootUnsuspended(page);4const { markRootSuspended, markRootUnsuspended } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');5markRootSuspended(page);6markRootUnsuspended(page);7const { markRootSuspended, markRootUnsuspended } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');8markRootSuspended(page);9markRootUnsuspended(page);10const { markRootSuspended, markRootUnsuspended } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');11markRootSuspended(page);12markRootUnsuspended(page);13const { markRootSuspended, markRootUnsuspended } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');14markRootSuspended(page);15markRootUnsuspended(page);16const { markRootSuspended, markRootUnsuspended } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');17markRootSuspended(page);18markRootUnsuspended(page);19const { markRootSuspended, markRootUns

Using AI Code Generation

1const { Playwright } = require('playwright');2const browser = await Playwright.chromium.launch();3const context = await browser.newContext();4const page = await context.newPage();5await page.setContent('<div>hello</div>');6await page.$('div');7await page.$('div');8const playwright = require('playwright');9const { Playwright } = require('playwright');10const browser = await playwright.chromium.launch();11const context = await browser.newContext();12const page = await context.newPage();13await page.setContent('<div>hello</div>');14await page.$('div');15await page.$('div');16const playwright = require('playwright');17const browser = await playwright.chromium.launch();18const context = await browser.newContext();19const page = await context.newPage();20await page.setContent('<div>hello</div>');21await page.$('div');22await page.$('div');23const playwright = require('playwright');24const browser = await playwright.chromium.launch();25const context = await browser.newContext();26const page = await context.newPage();27await page.setContent('<div>hello</div>');28await page.$('div');29await page.$('div');30const playwright = require('playwright');31const browser = await playwright.chromium.launch();32const context = await browser.newContext();33const page = await context.newPage();34await page.setContent('<div>hello</div>');35await page.$('div');36await page.$('div');37const playwright = require('playwright');38const browser = await playwright.chromium.launch();39const context = await browser.newContext();40const page = await context.newPage();41await page.setContent('<div>hello</div>');42await page.$('div');43await page.$('div');44const playwright = require('playwright');45const browser = await playwright.chromium.launch();46const context = await browser.newContext();47const page = await context.newPage();48await page.setContent('<div>hello</div>');49await page.$('div');50await page.$('div');

Using AI Code Generation

1const { PlaywrightInternal } = require('playwright-core/lib/server/playwright');2const { markRootSuspended } = require('playwright-core/lib/server/supplements/recorderSupplement');3const playwright = new PlaywrightInternal();4const browser = await playwright.chromium.launch();5const page = await browser.newPage();6markRootSuspended(page, 'test');7const { chromium } = require('playwright-core');8const { markRootSuspended } = require('playwright-core/lib/server/supplements/recorderSupplement');9const browser = await chromium.launch();10const page = await browser.newPage();11markRootSuspended(page, 'test');12const { chromium } = require('playwright-core');13const { markRootSuspended } = require('playwright-core/lib/server/supplements/recorderSupplement');14const browser = await chromium.launch();15const page = await browser.newPage();16await page.fill('input[name="q"]', 'Playwright');17await page.click('input[type="submit"]');18await page.waitForSelector('text=Playwright');19markRootSuspended(page, 'test');20const { chromium } = require('playwright-core');21const { markRootSuspended } = require('playwright-core/lib/server/supplements/recorderSupplement');22const browser = await chromium.launch();23const page = await browser.newPage();24await page.fill('input[name="q"]', 'Playwright');25await page.click('input[type="submit"]');26await page.waitForSelector('text=Playwright');27markRootSuspended(page, 'test');28await page.resume();

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.