Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use pingSuspendedRoot method in Playwright Internal

Best JavaScript code snippet using playwright-internal

ReactFiberThrow.old.js

Source:ReactFiberThrow.old.js

1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @flow8 */9import type {Fiber} from './ReactInternalTypes';10import type {FiberRoot} from './ReactInternalTypes';11import type {Lane, Lanes} from './ReactFiberLane';12import type {CapturedValue} from './ReactCapturedValue';13import type {Update} from './ReactUpdateQueue.old';14import type {Wakeable} from 'shared/ReactTypes';15import type {SuspenseContext} from './ReactFiberSuspenseContext.old';16import getComponentName from 'shared/getComponentName';17import {18  ClassComponent,19  HostRoot,20  SuspenseComponent,21  IncompleteClassComponent,22} from './ReactWorkTags';23import {24  DidCapture,25  Incomplete,26  NoFlags,27  ShouldCapture,28  LifecycleEffectMask,29  ForceUpdateForLegacySuspense,30} from './ReactFiberFlags';31import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.old';32import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';33import {34  enableDebugTracing,35  enableSchedulingProfiler,36} from 'shared/ReactFeatureFlags';37import {createCapturedValue} from './ReactCapturedValue';38import {39  enqueueCapturedUpdate,40  createUpdate,41  CaptureUpdate,42  ForceUpdate,43  enqueueUpdate,44} from './ReactUpdateQueue.old';45import {markFailedErrorBoundaryForHotReloading} from './ReactFiberHotReloading.old';46import {47  suspenseStackCursor,48  InvisibleParentSuspenseContext,49  hasSuspenseContext,50} from './ReactFiberSuspenseContext.old';51import {52  renderDidError,53  onUncaughtError,54  markLegacyErrorBoundaryAsFailed,55  isAlreadyFailedLegacyErrorBoundary,56  pingSuspendedRoot,57} from './ReactFiberWorkLoop.old';58import {logCapturedError} from './ReactFiberErrorLogger';59import {logComponentSuspended} from './DebugTracing';60import {markComponentSuspended} from './SchedulingProfiler';61import {62  SyncLane,63  NoTimestamp,64  includesSomeLane,65  mergeLanes,66  pickArbitraryLane,67} from './ReactFiberLane';68const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;69function createRootErrorUpdate(70  fiber: Fiber,71  errorInfo: CapturedValue<mixed>,72  lane: Lane,73): Update<mixed> {74  const update = createUpdate(NoTimestamp, lane);75  // Unmount the root by rendering null.76  update.tag = CaptureUpdate;77  // Caution: React DevTools currently depends on this property78  // being called "element".79  update.payload = {element: null};80  const error = errorInfo.value;81  update.callback = () => {82    onUncaughtError(error);83    logCapturedError(fiber, errorInfo);84  };85  return update;86}87function createClassErrorUpdate(88  fiber: Fiber,89  errorInfo: CapturedValue<mixed>,90  lane: Lane,91): Update<mixed> {92  const update = createUpdate(NoTimestamp, lane);93  update.tag = CaptureUpdate;94  const getDerivedStateFromError = fiber.type.getDerivedStateFromError;95  if (typeof getDerivedStateFromError === 'function') {96    const error = errorInfo.value;97    update.payload = () => {98      logCapturedError(fiber, errorInfo);99      return getDerivedStateFromError(error);100    };101  }102  const inst = fiber.stateNode;103  if (inst !== null && typeof inst.componentDidCatch === 'function') {104    update.callback = function callback() {105      if (__DEV__) {106        markFailedErrorBoundaryForHotReloading(fiber);107      }108      if (typeof getDerivedStateFromError !== 'function') {109        // To preserve the preexisting retry behavior of error boundaries,110        // we keep track of which ones already failed during this batch.111        // This gets reset before we yield back to the browser.112        // TODO: Warn in strict mode if getDerivedStateFromError is113        // not defined.114        markLegacyErrorBoundaryAsFailed(this);115        // Only log here if componentDidCatch is the only error boundary method defined116        logCapturedError(fiber, errorInfo);117      }118      const error = errorInfo.value;119      const stack = errorInfo.stack;120      this.componentDidCatch(error, {121        componentStack: stack !== null ? stack : '',122      });123      if (__DEV__) {124        if (typeof getDerivedStateFromError !== 'function') {125          // If componentDidCatch is the only error boundary method defined,126          // then it needs to call setState to recover from errors.127          // If no state update is scheduled then the boundary will swallow the error.128          if (!includesSomeLane(fiber.lanes, (SyncLane: Lane))) {129            console.error(130              '%s: Error boundaries should implement getDerivedStateFromError(). ' +131                'In that method, return a state update to display an error message or fallback UI.',132              getComponentName(fiber.type) || 'Unknown',133            );134          }135        }136      }137    };138  } else if (__DEV__) {139    update.callback = () => {140      markFailedErrorBoundaryForHotReloading(fiber);141    };142  }143  return update;144}145function attachPingListener(root: FiberRoot, wakeable: Wakeable, lanes: Lanes) {146  // Attach a listener to the promise to "ping" the root and retry. But only if147  // one does not already exist for the lanes we're currently rendering (which148  // acts like a "thread ID" here).149  let pingCache = root.pingCache;150  let threadIDs;151  if (pingCache === null) {152    pingCache = root.pingCache = new PossiblyWeakMap();153    threadIDs = new Set();154    pingCache.set(wakeable, threadIDs);155  } else {156    threadIDs = pingCache.get(wakeable);157    if (threadIDs === undefined) {158      threadIDs = new Set();159      pingCache.set(wakeable, threadIDs);160    }161  }162  if (!threadIDs.has(lanes)) {163    // Memoize using the thread ID to prevent redundant listeners.164    threadIDs.add(lanes);165    const ping = pingSuspendedRoot.bind(null, root, wakeable, lanes);166    wakeable.then(ping, ping);167  }168}169function throwException(170  root: FiberRoot,171  returnFiber: Fiber,172  sourceFiber: Fiber,173  value: mixed,174  rootRenderLanes: Lanes,175) {176  // The source fiber did not complete.177  sourceFiber.flags |= Incomplete;178  // Its effect list is no longer valid.179  sourceFiber.firstEffect = sourceFiber.lastEffect = null;180  if (181    value !== null &&182    typeof value === 'object' &&183    typeof value.then === 'function'184  ) {185    // This is a wakeable.186    const wakeable: Wakeable = (value: any);187    if (__DEV__) {188      if (enableDebugTracing) {189        if (sourceFiber.mode & DebugTracingMode) {190          const name = getComponentName(sourceFiber.type) || 'Unknown';191          logComponentSuspended(name, wakeable);192        }193      }194    }195    if (enableSchedulingProfiler) {196      markComponentSuspended(sourceFiber, wakeable);197    }198    if ((sourceFiber.mode & BlockingMode) === NoMode) {199      // Reset the memoizedState to what it was before we attempted200      // to render it.201      const currentSource = sourceFiber.alternate;202      if (currentSource) {203        sourceFiber.updateQueue = currentSource.updateQueue;204        sourceFiber.memoizedState = currentSource.memoizedState;205        sourceFiber.lanes = currentSource.lanes;206      } else {207        sourceFiber.updateQueue = null;208        sourceFiber.memoizedState = null;209      }210    }211    const hasInvisibleParentBoundary = hasSuspenseContext(212      suspenseStackCursor.current,213      (InvisibleParentSuspenseContext: SuspenseContext),214    );215    // Schedule the nearest Suspense to re-render the timed out view.216    let workInProgress = returnFiber;217    do {218      if (219        workInProgress.tag === SuspenseComponent &&220        shouldCaptureSuspense(workInProgress, hasInvisibleParentBoundary)221      ) {222        // Found the nearest boundary.223        // Stash the promise on the boundary fiber. If the boundary times out, we'll224        // attach another listener to flip the boundary back to its normal state.225        const wakeables: Set<Wakeable> = (workInProgress.updateQueue: any);226        if (wakeables === null) {227          const updateQueue = (new Set(): any);228          updateQueue.add(wakeable);229          workInProgress.updateQueue = updateQueue;230        } else {231          wakeables.add(wakeable);232        }233        // If the boundary is outside of blocking mode, we should *not*234        // suspend the commit. Pretend as if the suspended component rendered235        // null and keep rendering. In the commit phase, we'll schedule a236        // subsequent synchronous update to re-render the Suspense.237        //238        // Note: It doesn't matter whether the component that suspended was239        // inside a blocking mode tree. If the Suspense is outside of it, we240        // should *not* suspend the commit.241        if ((workInProgress.mode & BlockingMode) === NoMode) {242          workInProgress.flags |= DidCapture;243          sourceFiber.flags |= ForceUpdateForLegacySuspense;244          // We're going to commit this fiber even though it didn't complete.245          // But we shouldn't call any lifecycle methods or callbacks. Remove246          // all lifecycle effect tags.247          sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);248          if (sourceFiber.tag === ClassComponent) {249            const currentSourceFiber = sourceFiber.alternate;250            if (currentSourceFiber === null) {251              // This is a new mount. Change the tag so it's not mistaken for a252              // completed class component. For example, we should not call253              // componentWillUnmount if it is deleted.254              sourceFiber.tag = IncompleteClassComponent;255            } else {256              // When we try rendering again, we should not reuse the current fiber,257              // since it's known to be in an inconsistent state. Use a force update to258              // prevent a bail out.259              const update = createUpdate(NoTimestamp, SyncLane);260              update.tag = ForceUpdate;261              enqueueUpdate(sourceFiber, update);262            }263          }264          // The source fiber did not complete. Mark it with Sync priority to265          // indicate that it still has pending work.266          sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);267          // Exit without suspending.268          return;269        }270        // Confirmed that the boundary is in a concurrent mode tree. Continue271        // with the normal suspend path.272        //273        // After this we'll use a set of heuristics to determine whether this274        // render pass will run to completion or restart or "suspend" the commit.275        // The actual logic for this is spread out in different places.276        //277        // This first principle is that if we're going to suspend when we complete278        // a root, then we should also restart if we get an update or ping that279        // might unsuspend it, and vice versa. The only reason to suspend is280        // because you think you might want to restart before committing. However,281        // it doesn't make sense to restart only while in the period we're suspended.282        //283        // Restarting too aggressively is also not good because it starves out any284        // intermediate loading state. So we use heuristics to determine when.285        // Suspense Heuristics286        //287        // If nothing threw a Promise or all the same fallbacks are already showing,288        // then don't suspend/restart.289        //290        // If this is an initial render of a new tree of Suspense boundaries and291        // those trigger a fallback, then don't suspend/restart. We want to ensure292        // that we can show the initial loading state as quickly as possible.293        //294        // If we hit a "Delayed" case, such as when we'd switch from content back into295        // a fallback, then we should always suspend/restart. Transitions apply296        // to this case. If none is defined, JND is used instead.297        //298        // If we're already showing a fallback and it gets "retried", allowing us to show299        // another level, but there's still an inner boundary that would show a fallback,300        // then we suspend/restart for 500ms since the last time we showed a fallback301        // anywhere in the tree. This effectively throttles progressive loading into a302        // consistent train of commits. This also gives us an opportunity to restart to303        // get to the completed state slightly earlier.304        //305        // If there's ambiguity due to batching it's resolved in preference of:306        // 1) "delayed", 2) "initial render", 3) "retry".307        //308        // We want to ensure that a "busy" state doesn't get force committed. We want to309        // ensure that new initial loading states can commit as soon as possible.310        attachPingListener(root, wakeable, rootRenderLanes);311        workInProgress.flags |= ShouldCapture;312        workInProgress.lanes = rootRenderLanes;313        return;314      }315      // This boundary already captured during this render. Continue to the next316      // boundary.317      workInProgress = workInProgress.return;318    } while (workInProgress !== null);319    // No boundary was found. Fallthrough to error mode.320    // TODO: Use invariant so the message is stripped in prod?321    value = new Error(322      (getComponentName(sourceFiber.type) || 'A React component') +323        ' suspended while rendering, but no fallback UI was specified.\n' +324        '\n' +325        'Add a <Suspense fallback=...> component higher in the tree to ' +326        'provide a loading indicator or placeholder to display.',327    );328  }329  // We didn't find a boundary that could handle this type of exception. Start330  // over and traverse parent path again, this time treating the exception331  // as an error.332  renderDidError();333  value = createCapturedValue(value, sourceFiber);334  let workInProgress = returnFiber;335  do {336    switch (workInProgress.tag) {337      case HostRoot: {338        const errorInfo = value;339        workInProgress.flags |= ShouldCapture;340        const lane = pickArbitraryLane(rootRenderLanes);341        workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);342        const update = createRootErrorUpdate(workInProgress, errorInfo, lane);343        enqueueCapturedUpdate(workInProgress, update);344        return;345      }346      case ClassComponent:347        // Capture and retry348        const errorInfo = value;349        const ctor = workInProgress.type;350        const instance = workInProgress.stateNode;351        if (352          (workInProgress.flags & DidCapture) === NoFlags &&353          (typeof ctor.getDerivedStateFromError === 'function' ||354            (instance !== null &&355              typeof instance.componentDidCatch === 'function' &&356              !isAlreadyFailedLegacyErrorBoundary(instance)))357        ) {358          workInProgress.flags |= ShouldCapture;359          const lane = pickArbitraryLane(rootRenderLanes);360          workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);361          // Schedule the error boundary to re-render using updated state362          const update = createClassErrorUpdate(363            workInProgress,364            errorInfo,365            lane,366          );367          enqueueCapturedUpdate(workInProgress, update);368          return;369        }370        break;371      default:372        break;373    }374    workInProgress = workInProgress.return;375  } while (workInProgress !== null);376}...

ReactFiberThrow.new.js

Source:ReactFiberThrow.new.js

1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @flow8 */9import type {Fiber} from './ReactInternalTypes';10import type {FiberRoot} from './ReactInternalTypes';11import type {Lane, Lanes} from './ReactFiberLane';12import type {CapturedValue} from './ReactCapturedValue';13import type {Update} from './ReactUpdateQueue.new';14import type {Wakeable} from 'shared/ReactTypes';15import type {SuspenseContext} from './ReactFiberSuspenseContext.new';16import getComponentName from 'shared/getComponentName';17import {18  ClassComponent,19  HostRoot,20  SuspenseComponent,21  IncompleteClassComponent,22} from './ReactWorkTags';23import {24  DidCapture,25  Incomplete,26  NoFlags,27  ShouldCapture,28  LifecycleEffectMask,29  ForceUpdateForLegacySuspense,30} from './ReactFiberFlags';31import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.new';32import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';33import {34  enableDebugTracing,35  enableSchedulingProfiler,36} from 'shared/ReactFeatureFlags';37import {createCapturedValue} from './ReactCapturedValue';38import {39  enqueueCapturedUpdate,40  createUpdate,41  CaptureUpdate,42  ForceUpdate,43  enqueueUpdate,44} from './ReactUpdateQueue.new';45import {markFailedErrorBoundaryForHotReloading} from './ReactFiberHotReloading.new';46import {47  suspenseStackCursor,48  InvisibleParentSuspenseContext,49  hasSuspenseContext,50} from './ReactFiberSuspenseContext.new';51import {52  renderDidError,53  onUncaughtError,54  markLegacyErrorBoundaryAsFailed,55  isAlreadyFailedLegacyErrorBoundary,56  pingSuspendedRoot,57} from './ReactFiberWorkLoop.new';58import {logCapturedError} from './ReactFiberErrorLogger';59import {logComponentSuspended} from './DebugTracing';60import {markComponentSuspended} from './SchedulingProfiler';61import {62  SyncLane,63  NoTimestamp,64  includesSomeLane,65  mergeLanes,66  pickArbitraryLane,67} from './ReactFiberLane';68const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;69function createRootErrorUpdate(70  fiber: Fiber,71  errorInfo: CapturedValue<mixed>,72  lane: Lane,73): Update<mixed> {74  const update = createUpdate(NoTimestamp, lane);75  // Unmount the root by rendering null.76  update.tag = CaptureUpdate;77  // Caution: React DevTools currently depends on this property78  // being called "element".79  update.payload = {element: null};80  const error = errorInfo.value;81  update.callback = () => {82    onUncaughtError(error);83    logCapturedError(fiber, errorInfo);84  };85  return update;86}87function createClassErrorUpdate(88  fiber: Fiber,89  errorInfo: CapturedValue<mixed>,90  lane: Lane,91): Update<mixed> {92  const update = createUpdate(NoTimestamp, lane);93  update.tag = CaptureUpdate;94  const getDerivedStateFromError = fiber.type.getDerivedStateFromError;95  if (typeof getDerivedStateFromError === 'function') {96    const error = errorInfo.value;97    update.payload = () => {98      logCapturedError(fiber, errorInfo);99      return getDerivedStateFromError(error);100    };101  }102  const inst = fiber.stateNode;103  if (inst !== null && typeof inst.componentDidCatch === 'function') {104    update.callback = function callback() {105      if (__DEV__) {106        markFailedErrorBoundaryForHotReloading(fiber);107      }108      if (typeof getDerivedStateFromError !== 'function') {109        // To preserve the preexisting retry behavior of error boundaries,110        // we keep track of which ones already failed during this batch.111        // This gets reset before we yield back to the browser.112        // TODO: Warn in strict mode if getDerivedStateFromError is113        // not defined.114        markLegacyErrorBoundaryAsFailed(this);115        // Only log here if componentDidCatch is the only error boundary method defined116        logCapturedError(fiber, errorInfo);117      }118      const error = errorInfo.value;119      const stack = errorInfo.stack;120      this.componentDidCatch(error, {121        componentStack: stack !== null ? stack : '',122      });123      if (__DEV__) {124        if (typeof getDerivedStateFromError !== 'function') {125          // If componentDidCatch is the only error boundary method defined,126          // then it needs to call setState to recover from errors.127          // If no state update is scheduled then the boundary will swallow the error.128          if (!includesSomeLane(fiber.lanes, (SyncLane: Lane))) {129            console.error(130              '%s: Error boundaries should implement getDerivedStateFromError(). ' +131                'In that method, return a state update to display an error message or fallback UI.',132              getComponentName(fiber.type) || 'Unknown',133            );134          }135        }136      }137    };138  } else if (__DEV__) {139    update.callback = () => {140      markFailedErrorBoundaryForHotReloading(fiber);141    };142  }143  return update;144}145function attachPingListener(root: FiberRoot, wakeable: Wakeable, lanes: Lanes) {146  // Attach a listener to the promise to "ping" the root and retry. But only if147  // one does not already exist for the lanes we're currently rendering (which148  // acts like a "thread ID" here).149  let pingCache = root.pingCache;150  let threadIDs;151  if (pingCache === null) {152    pingCache = root.pingCache = new PossiblyWeakMap();153    threadIDs = new Set();154    pingCache.set(wakeable, threadIDs);155  } else {156    threadIDs = pingCache.get(wakeable);157    if (threadIDs === undefined) {158      threadIDs = new Set();159      pingCache.set(wakeable, threadIDs);160    }161  }162  if (!threadIDs.has(lanes)) {163    // Memoize using the thread ID to prevent redundant listeners.164    threadIDs.add(lanes);165    const ping = pingSuspendedRoot.bind(null, root, wakeable, lanes);166    wakeable.then(ping, ping);167  }168}169function throwException(170  root: FiberRoot,171  returnFiber: Fiber,172  sourceFiber: Fiber,173  value: mixed,174  rootRenderLanes: Lanes,175) {176  // The source fiber did not complete.177  sourceFiber.flags |= Incomplete;178  if (179    value !== null &&180    typeof value === 'object' &&181    typeof value.then === 'function'182  ) {183    // This is a wakeable.184    const wakeable: Wakeable = (value: any);185    if (__DEV__) {186      if (enableDebugTracing) {187        if (sourceFiber.mode & DebugTracingMode) {188          const name = getComponentName(sourceFiber.type) || 'Unknown';189          logComponentSuspended(name, wakeable);190        }191      }192    }193    if (enableSchedulingProfiler) {194      markComponentSuspended(sourceFiber, wakeable);195    }196    if ((sourceFiber.mode & BlockingMode) === NoMode) {197      // Reset the memoizedState to what it was before we attempted198      // to render it.199      const currentSource = sourceFiber.alternate;200      if (currentSource) {201        sourceFiber.updateQueue = currentSource.updateQueue;202        sourceFiber.memoizedState = currentSource.memoizedState;203        sourceFiber.lanes = currentSource.lanes;204      } else {205        sourceFiber.updateQueue = null;206        sourceFiber.memoizedState = null;207      }208    }209    const hasInvisibleParentBoundary = hasSuspenseContext(210      suspenseStackCursor.current,211      (InvisibleParentSuspenseContext: SuspenseContext),212    );213    // Schedule the nearest Suspense to re-render the timed out view.214    let workInProgress = returnFiber;215    do {216      if (217        workInProgress.tag === SuspenseComponent &&218        shouldCaptureSuspense(workInProgress, hasInvisibleParentBoundary)219      ) {220        // Found the nearest boundary.221        // Stash the promise on the boundary fiber. If the boundary times out, we'll222        // attach another listener to flip the boundary back to its normal state.223        const wakeables: Set<Wakeable> = (workInProgress.updateQueue: any);224        if (wakeables === null) {225          const updateQueue = (new Set(): any);226          updateQueue.add(wakeable);227          workInProgress.updateQueue = updateQueue;228        } else {229          wakeables.add(wakeable);230        }231        // If the boundary is outside of blocking mode, we should *not*232        // suspend the commit. Pretend as if the suspended component rendered233        // null and keep rendering. In the commit phase, we'll schedule a234        // subsequent synchronous update to re-render the Suspense.235        //236        // Note: It doesn't matter whether the component that suspended was237        // inside a blocking mode tree. If the Suspense is outside of it, we238        // should *not* suspend the commit.239        if ((workInProgress.mode & BlockingMode) === NoMode) {240          workInProgress.flags |= DidCapture;241          sourceFiber.flags |= ForceUpdateForLegacySuspense;242          // We're going to commit this fiber even though it didn't complete.243          // But we shouldn't call any lifecycle methods or callbacks. Remove244          // all lifecycle effect tags.245          sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);246          if (sourceFiber.tag === ClassComponent) {247            const currentSourceFiber = sourceFiber.alternate;248            if (currentSourceFiber === null) {249              // This is a new mount. Change the tag so it's not mistaken for a250              // completed class component. For example, we should not call251              // componentWillUnmount if it is deleted.252              sourceFiber.tag = IncompleteClassComponent;253            } else {254              // When we try rendering again, we should not reuse the current fiber,255              // since it's known to be in an inconsistent state. Use a force update to256              // prevent a bail out.257              const update = createUpdate(NoTimestamp, SyncLane);258              update.tag = ForceUpdate;259              enqueueUpdate(sourceFiber, update);260            }261          }262          // The source fiber did not complete. Mark it with Sync priority to263          // indicate that it still has pending work.264          sourceFiber.lanes = mergeLanes(sourceFiber.lanes, SyncLane);265          // Exit without suspending.266          return;267        }268        // Confirmed that the boundary is in a concurrent mode tree. Continue269        // with the normal suspend path.270        //271        // After this we'll use a set of heuristics to determine whether this272        // render pass will run to completion or restart or "suspend" the commit.273        // The actual logic for this is spread out in different places.274        //275        // This first principle is that if we're going to suspend when we complete276        // a root, then we should also restart if we get an update or ping that277        // might unsuspend it, and vice versa. The only reason to suspend is278        // because you think you might want to restart before committing. However,279        // it doesn't make sense to restart only while in the period we're suspended.280        //281        // Restarting too aggressively is also not good because it starves out any282        // intermediate loading state. So we use heuristics to determine when.283        // Suspense Heuristics284        //285        // If nothing threw a Promise or all the same fallbacks are already showing,286        // then don't suspend/restart.287        //288        // If this is an initial render of a new tree of Suspense boundaries and289        // those trigger a fallback, then don't suspend/restart. We want to ensure290        // that we can show the initial loading state as quickly as possible.291        //292        // If we hit a "Delayed" case, such as when we'd switch from content back into293        // a fallback, then we should always suspend/restart. Transitions apply294        // to this case. If none is defined, JND is used instead.295        //296        // If we're already showing a fallback and it gets "retried", allowing us to show297        // another level, but there's still an inner boundary that would show a fallback,298        // then we suspend/restart for 500ms since the last time we showed a fallback299        // anywhere in the tree. This effectively throttles progressive loading into a300        // consistent train of commits. This also gives us an opportunity to restart to301        // get to the completed state slightly earlier.302        //303        // If there's ambiguity due to batching it's resolved in preference of:304        // 1) "delayed", 2) "initial render", 3) "retry".305        //306        // We want to ensure that a "busy" state doesn't get force committed. We want to307        // ensure that new initial loading states can commit as soon as possible.308        attachPingListener(root, wakeable, rootRenderLanes);309        workInProgress.flags |= ShouldCapture;310        workInProgress.lanes = rootRenderLanes;311        return;312      }313      // This boundary already captured during this render. Continue to the next314      // boundary.315      workInProgress = workInProgress.return;316    } while (workInProgress !== null);317    // No boundary was found. Fallthrough to error mode.318    // TODO: Use invariant so the message is stripped in prod?319    value = new Error(320      (getComponentName(sourceFiber.type) || 'A React component') +321        ' suspended while rendering, but no fallback UI was specified.\n' +322        '\n' +323        'Add a <Suspense fallback=...> component higher in the tree to ' +324        'provide a loading indicator or placeholder to display.',325    );326  }327  // We didn't find a boundary that could handle this type of exception. Start328  // over and traverse parent path again, this time treating the exception329  // as an error.330  renderDidError();331  value = createCapturedValue(value, sourceFiber);332  let workInProgress = returnFiber;333  do {334    switch (workInProgress.tag) {335      case HostRoot: {336        const errorInfo = value;337        workInProgress.flags |= ShouldCapture;338        const lane = pickArbitraryLane(rootRenderLanes);339        workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);340        const update = createRootErrorUpdate(workInProgress, errorInfo, lane);341        enqueueCapturedUpdate(workInProgress, update);342        return;343      }344      case ClassComponent:345        // Capture and retry346        const errorInfo = value;347        const ctor = workInProgress.type;348        const instance = workInProgress.stateNode;349        if (350          (workInProgress.flags & DidCapture) === NoFlags &&351          (typeof ctor.getDerivedStateFromError === 'function' ||352            (instance !== null &&353              typeof instance.componentDidCatch === 'function' &&354              !isAlreadyFailedLegacyErrorBoundary(instance)))355        ) {356          workInProgress.flags |= ShouldCapture;357          const lane = pickArbitraryLane(rootRenderLanes);358          workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);359          // Schedule the error boundary to re-render using updated state360          const update = createClassErrorUpdate(361            workInProgress,362            errorInfo,363            lane,364          );365          enqueueCapturedUpdate(workInProgress, update);366          return;367        }368        break;369      default:370        break;371    }372    workInProgress = workInProgress.return;373  } while (workInProgress !== null);374}...

ReactFiberThrow.js

Source:ReactFiberThrow.js

1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @flow8 */9import type {Fiber} from './ReactFiber';10import type {FiberRoot} from './ReactFiberRoot';11import type {ExpirationTime} from './ReactFiberExpirationTime';12import type {CapturedValue} from './ReactCapturedValue';13import type {Update} from './ReactUpdateQueue';14import type {Thenable} from './ReactFiberWorkLoop';15import type {SuspenseContext} from './ReactFiberSuspenseContext';16import getComponentName from 'shared/getComponentName';17import {18  ClassComponent,19  HostRoot,20  SuspenseComponent,21  IncompleteClassComponent,22} from 'shared/ReactWorkTags';23import {24  DidCapture,25  Incomplete,26  NoEffect,27  ShouldCapture,28  LifecycleEffectMask,29} from 'shared/ReactSideEffectTags';30import {NoMode, BlockingMode} from './ReactTypeOfMode';31import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent';32import {createCapturedValue} from './ReactCapturedValue';33import {34  enqueueCapturedUpdate,35  createUpdate,36  CaptureUpdate,37  ForceUpdate,38  enqueueUpdate,39} from './ReactUpdateQueue';40import {logError} from './ReactFiberCommitWork';41import {getStackByFiberInDevAndProd} from './ReactCurrentFiber';42import {markFailedErrorBoundaryForHotReloading} from './ReactFiberHotReloading';43import {44  suspenseStackCursor,45  InvisibleParentSuspenseContext,46  hasSuspenseContext,47} from './ReactFiberSuspenseContext';48import {49  renderDidError,50  onUncaughtError,51  markLegacyErrorBoundaryAsFailed,52  isAlreadyFailedLegacyErrorBoundary,53  pingSuspendedRoot,54  checkForWrongSuspensePriorityInDEV,55} from './ReactFiberWorkLoop';56import {Sync} from './ReactFiberExpirationTime';57const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;58function createRootErrorUpdate(59  fiber: Fiber,60  errorInfo: CapturedValue<mixed>,61  expirationTime: ExpirationTime,62): Update<mixed> {63  const update = createUpdate(expirationTime, null);64  // Unmount the root by rendering null.65  update.tag = CaptureUpdate;66  // Caution: React DevTools currently depends on this property67  // being called "element".68  update.payload = {element: null};69  const error = errorInfo.value;70  update.callback = () => {71    onUncaughtError(error);72    logError(fiber, errorInfo);73  };74  return update;75}76function createClassErrorUpdate(77  fiber: Fiber,78  errorInfo: CapturedValue<mixed>,79  expirationTime: ExpirationTime,80): Update<mixed> {81  const update = createUpdate(expirationTime, null);82  update.tag = CaptureUpdate;83  const getDerivedStateFromError = fiber.type.getDerivedStateFromError;84  if (typeof getDerivedStateFromError === 'function') {85    const error = errorInfo.value;86    update.payload = () => {87      logError(fiber, errorInfo);88      return getDerivedStateFromError(error);89    };90  }91  const inst = fiber.stateNode;92  if (inst !== null && typeof inst.componentDidCatch === 'function') {93    update.callback = function callback() {94      if (__DEV__) {95        markFailedErrorBoundaryForHotReloading(fiber);96      }97      if (typeof getDerivedStateFromError !== 'function') {98        // To preserve the preexisting retry behavior of error boundaries,99        // we keep track of which ones already failed during this batch.100        // This gets reset before we yield back to the browser.101        // TODO: Warn in strict mode if getDerivedStateFromError is102        // not defined.103        markLegacyErrorBoundaryAsFailed(this);104        // Only log here if componentDidCatch is the only error boundary method defined105        logError(fiber, errorInfo);106      }107      const error = errorInfo.value;108      const stack = errorInfo.stack;109      this.componentDidCatch(error, {110        componentStack: stack !== null ? stack : '',111      });112      if (__DEV__) {113        if (typeof getDerivedStateFromError !== 'function') {114          // If componentDidCatch is the only error boundary method defined,115          // then it needs to call setState to recover from errors.116          // If no state update is scheduled then the boundary will swallow the error.117          if (fiber.expirationTime !== Sync) {118            console.error(119              '%s: Error boundaries should implement getDerivedStateFromError(). ' +120                'In that method, return a state update to display an error message or fallback UI.',121              getComponentName(fiber.type) || 'Unknown',122            );123          }124        }125      }126    };127  } else if (__DEV__) {128    update.callback = () => {129      markFailedErrorBoundaryForHotReloading(fiber);130    };131  }132  return update;133}134function attachPingListener(135  root: FiberRoot,136  renderExpirationTime: ExpirationTime,137  thenable: Thenable,138) {139  // Attach a listener to the promise to "ping" the root and retry. But140  // only if one does not already exist for the current render expiration141  // time (which acts like a "thread ID" here).142  let pingCache = root.pingCache;143  let threadIDs;144  if (pingCache === null) {145    pingCache = root.pingCache = new PossiblyWeakMap();146    threadIDs = new Set();147    pingCache.set(thenable, threadIDs);148  } else {149    threadIDs = pingCache.get(thenable);150    if (threadIDs === undefined) {151      threadIDs = new Set();152      pingCache.set(thenable, threadIDs);153    }154  }155  if (!threadIDs.has(renderExpirationTime)) {156    // Memoize using the thread ID to prevent redundant listeners.157    threadIDs.add(renderExpirationTime);158    let ping = pingSuspendedRoot.bind(159      null,160      root,161      thenable,162      renderExpirationTime,163    );164    thenable.then(ping, ping);165  }166}167function throwException(168  root: FiberRoot,169  returnFiber: Fiber,170  sourceFiber: Fiber,171  value: mixed,172  renderExpirationTime: ExpirationTime,173) {174  // The source fiber did not complete.175  sourceFiber.effectTag |= Incomplete;176  // Its effect list is no longer valid.177  sourceFiber.firstEffect = sourceFiber.lastEffect = null;178  if (179    value !== null &&180    typeof value === 'object' &&181    typeof value.then === 'function'182  ) {183    // This is a thenable.184    const thenable: Thenable = (value: any);185    if ((sourceFiber.mode & BlockingMode) === NoMode) {186      // Reset the memoizedState to what it was before we attempted187      // to render it.188      let currentSource = sourceFiber.alternate;189      if (currentSource) {190        sourceFiber.memoizedState = currentSource.memoizedState;191        sourceFiber.expirationTime = currentSource.expirationTime;192      } else {193        sourceFiber.memoizedState = null;194      }195    }196    checkForWrongSuspensePriorityInDEV(sourceFiber);197    let hasInvisibleParentBoundary = hasSuspenseContext(198      suspenseStackCursor.current,199      (InvisibleParentSuspenseContext: SuspenseContext),200    );201    // Schedule the nearest Suspense to re-render the timed out view.202    let workInProgress = returnFiber;203    do {204      if (205        workInProgress.tag === SuspenseComponent &&206        shouldCaptureSuspense(workInProgress, hasInvisibleParentBoundary)207      ) {208        // Found the nearest boundary.209        // Stash the promise on the boundary fiber. If the boundary times out, we'll210        // attach another listener to flip the boundary back to its normal state.211        const thenables: Set<Thenable> = (workInProgress.updateQueue: any);212        if (thenables === null) {213          const updateQueue = (new Set(): any);214          updateQueue.add(thenable);215          workInProgress.updateQueue = updateQueue;216        } else {217          thenables.add(thenable);218        }219        // If the boundary is outside of blocking mode, we should *not*220        // suspend the commit. Pretend as if the suspended component rendered221        // null and keep rendering. In the commit phase, we'll schedule a222        // subsequent synchronous update to re-render the Suspense.223        //224        // Note: It doesn't matter whether the component that suspended was225        // inside a blocking mode tree. If the Suspense is outside of it, we226        // should *not* suspend the commit.227        if ((workInProgress.mode & BlockingMode) === NoMode) {228          workInProgress.effectTag |= DidCapture;229          // We're going to commit this fiber even though it didn't complete.230          // But we shouldn't call any lifecycle methods or callbacks. Remove231          // all lifecycle effect tags.232          sourceFiber.effectTag &= ~(LifecycleEffectMask | Incomplete);233          if (sourceFiber.tag === ClassComponent) {234            const currentSourceFiber = sourceFiber.alternate;235            if (currentSourceFiber === null) {236              // This is a new mount. Change the tag so it's not mistaken for a237              // completed class component. For example, we should not call238              // componentWillUnmount if it is deleted.239              sourceFiber.tag = IncompleteClassComponent;240            } else {241              // When we try rendering again, we should not reuse the current fiber,242              // since it's known to be in an inconsistent state. Use a force update to243              // prevent a bail out.244              const update = createUpdate(Sync, null);245              update.tag = ForceUpdate;246              enqueueUpdate(sourceFiber, update);247            }248          }249          // The source fiber did not complete. Mark it with Sync priority to250          // indicate that it still has pending work.251          sourceFiber.expirationTime = Sync;252          // Exit without suspending.253          return;254        }255        // Confirmed that the boundary is in a concurrent mode tree. Continue256        // with the normal suspend path.257        //258        // After this we'll use a set of heuristics to determine whether this259        // render pass will run to completion or restart or "suspend" the commit.260        // The actual logic for this is spread out in different places.261        //262        // This first principle is that if we're going to suspend when we complete263        // a root, then we should also restart if we get an update or ping that264        // might unsuspend it, and vice versa. The only reason to suspend is265        // because you think you might want to restart before committing. However,266        // it doesn't make sense to restart only while in the period we're suspended.267        //268        // Restarting too aggressively is also not good because it starves out any269        // intermediate loading state. So we use heuristics to determine when.270        // Suspense Heuristics271        //272        // If nothing threw a Promise or all the same fallbacks are already showing,273        // then don't suspend/restart.274        //275        // If this is an initial render of a new tree of Suspense boundaries and276        // those trigger a fallback, then don't suspend/restart. We want to ensure277        // that we can show the initial loading state as quickly as possible.278        //279        // If we hit a "Delayed" case, such as when we'd switch from content back into280        // a fallback, then we should always suspend/restart. SuspenseConfig applies to281        // this case. If none is defined, JND is used instead.282        //283        // If we're already showing a fallback and it gets "retried", allowing us to show284        // another level, but there's still an inner boundary that would show a fallback,285        // then we suspend/restart for 500ms since the last time we showed a fallback286        // anywhere in the tree. This effectively throttles progressive loading into a287        // consistent train of commits. This also gives us an opportunity to restart to288        // get to the completed state slightly earlier.289        //290        // If there's ambiguity due to batching it's resolved in preference of:291        // 1) "delayed", 2) "initial render", 3) "retry".292        //293        // We want to ensure that a "busy" state doesn't get force committed. We want to294        // ensure that new initial loading states can commit as soon as possible.295        attachPingListener(root, renderExpirationTime, thenable);296        workInProgress.effectTag |= ShouldCapture;297        workInProgress.expirationTime = renderExpirationTime;298        return;299      }300      // This boundary already captured during this render. Continue to the next301      // boundary.302      workInProgress = workInProgress.return;303    } while (workInProgress !== null);304    // No boundary was found. Fallthrough to error mode.305    // TODO: Use invariant so the message is stripped in prod?306    value = new Error(307      (getComponentName(sourceFiber.type) || 'A React component') +308        ' suspended while rendering, but no fallback UI was specified.\n' +309        '\n' +310        'Add a <Suspense fallback=...> component higher in the tree to ' +311        'provide a loading indicator or placeholder to display.' +312        getStackByFiberInDevAndProd(sourceFiber),313    );314  }315  // We didn't find a boundary that could handle this type of exception. Start316  // over and traverse parent path again, this time treating the exception317  // as an error.318  renderDidError();319  value = createCapturedValue(value, sourceFiber);320  let workInProgress = returnFiber;321  do {322    switch (workInProgress.tag) {323      case HostRoot: {324        const errorInfo = value;325        workInProgress.effectTag |= ShouldCapture;326        workInProgress.expirationTime = renderExpirationTime;327        const update = createRootErrorUpdate(328          workInProgress,329          errorInfo,330          renderExpirationTime,331        );332        enqueueCapturedUpdate(workInProgress, update);333        return;334      }335      case ClassComponent:336        // Capture and retry337        const errorInfo = value;338        const ctor = workInProgress.type;339        const instance = workInProgress.stateNode;340        if (341          (workInProgress.effectTag & DidCapture) === NoEffect &&342          (typeof ctor.getDerivedStateFromError === 'function' ||343            (instance !== null &&344              typeof instance.componentDidCatch === 'function' &&345              !isAlreadyFailedLegacyErrorBoundary(instance)))346        ) {347          workInProgress.effectTag |= ShouldCapture;348          workInProgress.expirationTime = renderExpirationTime;349          // Schedule the error boundary to re-render using updated state350          const update = createClassErrorUpdate(351            workInProgress,352            errorInfo,353            renderExpirationTime,354          );355          enqueueCapturedUpdate(workInProgress, update);356          return;357        }358        break;359      default:360        break;361    }362    workInProgress = workInProgress.return;363  } while (workInProgress !== null);364}...

ReactFiberScheduler.js

Source:ReactFiberScheduler.js

1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @flow8 */9import {enableNewScheduler} from 'shared/ReactFeatureFlags';10import {11  requestCurrentTime as requestCurrentTime_old,12  computeExpirationForFiber as computeExpirationForFiber_old,13  captureCommitPhaseError as captureCommitPhaseError_old,14  onUncaughtError as onUncaughtError_old,15  renderDidSuspend as renderDidSuspend_old,16  renderDidError as renderDidError_old,17  pingSuspendedRoot as pingSuspendedRoot_old,18  retryTimedOutBoundary as retryTimedOutBoundary_old,19  resolveRetryThenable as resolveRetryThenable_old,20  markLegacyErrorBoundaryAsFailed as markLegacyErrorBoundaryAsFailed_old,21  isAlreadyFailedLegacyErrorBoundary as isAlreadyFailedLegacyErrorBoundary_old,22  scheduleWork as scheduleWork_old,23  flushRoot as flushRoot_old,24  batchedUpdates as batchedUpdates_old,25  unbatchedUpdates as unbatchedUpdates_old,26  flushSync as flushSync_old,27  flushControlled as flushControlled_old,28  deferredUpdates as deferredUpdates_old,29  syncUpdates as syncUpdates_old,30  interactiveUpdates as interactiveUpdates_old,31  flushInteractiveUpdates as flushInteractiveUpdates_old,32  computeUniqueAsyncExpiration as computeUniqueAsyncExpiration_old,33  flushPassiveEffects as flushPassiveEffects_old,34  warnIfNotCurrentlyActingUpdatesInDev as warnIfNotCurrentlyActingUpdatesInDev_old,35  inferStartTimeFromExpirationTime as inferStartTimeFromExpirationTime_old,36} from './ReactFiberScheduler.old';37import {38  requestCurrentTime as requestCurrentTime_new,39  computeExpirationForFiber as computeExpirationForFiber_new,40  captureCommitPhaseError as captureCommitPhaseError_new,41  onUncaughtError as onUncaughtError_new,42  renderDidSuspend as renderDidSuspend_new,43  renderDidError as renderDidError_new,44  pingSuspendedRoot as pingSuspendedRoot_new,45  retryTimedOutBoundary as retryTimedOutBoundary_new,46  resolveRetryThenable as resolveRetryThenable_new,47  markLegacyErrorBoundaryAsFailed as markLegacyErrorBoundaryAsFailed_new,48  isAlreadyFailedLegacyErrorBoundary as isAlreadyFailedLegacyErrorBoundary_new,49  scheduleWork as scheduleWork_new,50  flushRoot as flushRoot_new,51  batchedUpdates as batchedUpdates_new,52  unbatchedUpdates as unbatchedUpdates_new,53  flushSync as flushSync_new,54  flushControlled as flushControlled_new,55  deferredUpdates as deferredUpdates_new,56  syncUpdates as syncUpdates_new,57  interactiveUpdates as interactiveUpdates_new,58  flushInteractiveUpdates as flushInteractiveUpdates_new,59  computeUniqueAsyncExpiration as computeUniqueAsyncExpiration_new,60  flushPassiveEffects as flushPassiveEffects_new,61  warnIfNotCurrentlyActingUpdatesInDev as warnIfNotCurrentlyActingUpdatesInDev_new,62  inferStartTimeFromExpirationTime as inferStartTimeFromExpirationTime_new,63} from './ReactFiberScheduler.new';64// enableNewScheduler é½ä¸º falseï¼æä»¥æä»¬åªç old çä»£ç 65export const requestCurrentTime = enableNewScheduler66  ? requestCurrentTime_new67  : requestCurrentTime_old;68export const computeExpirationForFiber = enableNewScheduler69  ? computeExpirationForFiber_new70  : computeExpirationForFiber_old;71export const captureCommitPhaseError = enableNewScheduler72  ? captureCommitPhaseError_new73  : captureCommitPhaseError_old;74export const onUncaughtError = enableNewScheduler75  ? onUncaughtError_new76  : onUncaughtError_old;77export const renderDidSuspend = enableNewScheduler78  ? renderDidSuspend_new79  : renderDidSuspend_old;80export const renderDidError = enableNewScheduler81  ? renderDidError_new82  : renderDidError_old;83export const pingSuspendedRoot = enableNewScheduler84  ? pingSuspendedRoot_new85  : pingSuspendedRoot_old;86export const retryTimedOutBoundary = enableNewScheduler87  ? retryTimedOutBoundary_new88  : retryTimedOutBoundary_old;89export const resolveRetryThenable = enableNewScheduler90  ? resolveRetryThenable_new91  : resolveRetryThenable_old;92export const markLegacyErrorBoundaryAsFailed = enableNewScheduler93  ? markLegacyErrorBoundaryAsFailed_new94  : markLegacyErrorBoundaryAsFailed_old;95export const isAlreadyFailedLegacyErrorBoundary = enableNewScheduler96  ? isAlreadyFailedLegacyErrorBoundary_new97  : isAlreadyFailedLegacyErrorBoundary_old;98export const scheduleWork = enableNewScheduler99  ? scheduleWork_new100  : scheduleWork_old;101export const flushRoot = enableNewScheduler ? flushRoot_new : flushRoot_old;102export const batchedUpdates = enableNewScheduler103  ? batchedUpdates_new104  : batchedUpdates_old;105export const unbatchedUpdates = enableNewScheduler106  ? unbatchedUpdates_new107  : unbatchedUpdates_old;108export const flushSync = enableNewScheduler ? flushSync_new : flushSync_old;109export const flushControlled = enableNewScheduler110  ? flushControlled_new111  : flushControlled_old;112export const deferredUpdates = enableNewScheduler113  ? deferredUpdates_new114  : deferredUpdates_old;115export const syncUpdates = enableNewScheduler116  ? syncUpdates_new117  : syncUpdates_old;118export const interactiveUpdates = enableNewScheduler119  ? interactiveUpdates_new120  : interactiveUpdates_old;121export const flushInteractiveUpdates = enableNewScheduler122  ? flushInteractiveUpdates_new123  : flushInteractiveUpdates_old;124export const computeUniqueAsyncExpiration = enableNewScheduler125  ? computeUniqueAsyncExpiration_new126  : computeUniqueAsyncExpiration_old;127export const flushPassiveEffects = enableNewScheduler128  ? flushPassiveEffects_new129  : flushPassiveEffects_old;130export const warnIfNotCurrentlyActingUpdatesInDev = enableNewScheduler131  ? warnIfNotCurrentlyActingUpdatesInDev_new132  : warnIfNotCurrentlyActingUpdatesInDev_old;133export const inferStartTimeFromExpirationTime = enableNewScheduler134  ? inferStartTimeFromExpirationTime_new135  : inferStartTimeFromExpirationTime_old;136export type Thenable = {137  then(resolve: () => mixed, reject?: () => mixed): void | Thenable,...

FiberThrow.js

Source:FiberThrow.js

1import {2    Incomplete,3    FunctionComponent,4    SuspenseComponent,5    ShouldCapture,6} from '@Jeact/shared/Constants';7import {8    suspenseStackCursor, 9    InvisibleParentSuspenseContext,10    shouldCaptureSuspense,11} from '@Jeact/vDOM/FiberSuspenseContext';12import {13    renderDidError,14    pingSuspendedRoot,15} from '@Jeact/vDOM/FiberWorkLoop';16function attachPingListener(root, wakeable, lanes){17  let pingCache = root.pingCache;18  let threadIDs;19  if (pingCache === null){20    pingCache = root.pingCache = new WeakMap();21    threadIDs = new Set();22    pingCache.set(wakeable, threadIDs);23  } else {24    threadIDs = pingCache.get(wakeable);25    if(threadIDs === undefined){26      threadIDs = new Set();27      pingCache.set(wakeable, threadIDs);28    }29  }30  if (!threadIDs.has(lanes)){31    threadIDs.add(lanes);32    const ping = pingSuspendedRoot.bind(null, root, wakeable, lanes);33    wakeable.then(ping, ping);34  }35}36export function throwException(37  root, 38  returnFiber, 39  sourceFiber,40  value,41  rootRenderLanes42){43  sourceFiber.flags |= Incomplete;44    if(45        value !==null &&46        typeof value === 'object' &&47        typeof value.then === 'function'48    ){49        const wakeable = value;50        // hasSuspenseContext()51        const hasInvisibleParent = 52                (suspenseStackCursor.current & 53                InvisibleParentSuspenseContext) !== 0;54        // Schedule the nearest Suspense to re-render the timed out view.55        let wip = returnFiber;56        do {57            if(58                wip.tag === SuspenseComponent &&59                shouldCaptureSuspense(60                    wip, 61                    hasInvisibleParent62                )63            ){64                // Found the nearest boundary.65                //66                // Stash the promise.67                const wakeables = wip.updateQueue;68                if (wakeables === null){ 69                    const updateQueue = new Set();70                    updateQueue.add(wakeable);71                    wip.updateQueue = updateQueue;72                } else {73                    wakeables.add(wakeable);74                }75                attachPingListener(root, wakeable, rootRenderLanes);76                wip.flags |= ShouldCapture;77                wip.lanes = rootRenderLanes;78                return;79            }80            wip = wip.return;81        } while (wip !== null);82    }83    renderDidError();//update exit status...

Using AI Code Generation

1const { pingSuspendedRoot } = 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 pingSuspendedRoot(page);8  await page.screenshot({ path: 'example.png' });9  await browser.close();10})();11const { chromium } = require('playwright');12(async () => {13  const browser = await chromium.launch();14  const context = await browser.newContext();15  const page = await context.newPage();16  await page.screenshot({ path: 'example.png' });17  await browser.close();18})();

Using AI Code Generation

1const playwright = require('playwright');2(async () => {3  for (const browserType of BROWSER) {4    const browser = await playwright[browserType].launch({5    });6    const context = await browser.newContext();7    const page = await context.newPage();8    await page.evaluate(() => {9      window['playwright'].pingSuspendedRoot(document.body, 1000);10    });11    await browser.close();12  }13})();

Using AI Code Generation

1const { chromium } = require('playwright');2const { pingSuspendedRoot } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');3(async () => {4  const browser = await chromium.launch();5  const page = await browser.newPage();6  await browser.close();7})();8const { chromium } = require('playwright');9const { pingSuspendedRoot } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');10describe('Ping Suspended Root', () => {11  it('should ping suspended root', async () => {12    const browser = await chromium.launch();13    const page = await browser.newPage();14    await browser.close();15  });16});

Using AI Code Generation

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

Using AI Code Generation

1const { chromium } = require('playwright');2const { pingSuspendedRoot } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');3(async () => {4  const browser = await chromium.launch();5  const page = await browser.newPage();6  await pingSuspendedRoot(page);7  await browser.close();8})();9const { chromium } = require('playwright');10const { pingSuspendedRoot } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');11(async () => {12  const browser = await chromium.launch();13  const context = await browser.newContext();14  const page = await context.newPage();15  await pingSuspendedRoot(page);16  await browser.close();17})();18const { chromium } = require('playwright');19const { pingSuspendedRoot } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');20(async () => {21  const browser = await chromium.launch();22  const context = await browser.newContext();23  const page = await context.newPage();24  await pingSuspendedRoot(page);25  await browser.close();26})();27const { chromium } = require('playwright');28const { pingSuspendedRoot } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');29(async () => {30  const browser = await chromium.launch();31  const context = await browser.newContext();32  const page = await context.newPage();33  const elementHandle = await page.$('body');34  await pingSuspendedRoot(elementHandle);35  await browser.close();36})();37const { chromium } = require('playwright');38const { pingSuspendedRoot } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');39(async () => {40  const browser = await chromium.launch();41  const context = await browser.newContext();

Using AI Code Generation

1const playwright = require('playwright');2const fs = require('fs');3(async () => {4  const browser = await playwright.chromium.launch();5  const page = await browser.newPage();6  await page.setContent('<div>Hello world</div>');7  const root = await page.mainFrame().executionContext().evaluateHandle(() => document.body);8  const result = await page._delegate.pingSuspendedRoot(root._remoteObject.objectId);9  fs.writeFileSync('result.txt', result);10  await browser.close();11})();12const playwright = require('playwright');13const fs = require('fs');14(async () => {15  const browser = await playwright.chromium.launch();16  const page = await browser.newPage();17  await page.setContent('<div>Hello world</div>');18  const root = await page.mainFrame().executionContext().evaluateHandle(() => document.body);19  const result = await page._delegate.pingSuspendedRoot(root._remoteObject.objectId);20  fs.writeFileSync('result.txt', result);21  await browser.close();22})();

Using AI Code Generation

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

Using AI Code Generation

1const { pingSuspendedRoot } = require('playwright/lib/server/supplements/recorder/supplements/recorderSupplement.js');2const { chromium } = require('playwright');3const { chromium } = require('playwright');4(async () => {5  const browser = await chromium.launch();6  const context = await browser.newContext();7  const page = await context.newPage();8  await page.fill('input[name="q"]', 'Hello World!');9  await page.click('input[type="submit"]');10  await page.click('text=Playwright');11  await page.waitForTimeout(1000);12  await page.click('text=GitHub');13  await page.waitForTimeout(1000);

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.