How to use enqueueCapturedUpdate method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

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

ReactFiberUnwindWork.js

Source: ReactFiberUnwindWork.js Github

copy
1/**
2 * Copyright (c) 2013-present, Facebook, Inc.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 *
7 * @flow
8 */
9
10import type {Fiber} from './ReactFiber';
11import type {FiberRoot} from './ReactFiberRoot';
12import type {ExpirationTime} from './ReactFiberExpirationTime';
13import type {CapturedValue} from './ReactCapturedValue';
14import type {Update} from './ReactUpdateQueue';
15import type {Thenable} from './ReactFiberScheduler';
16
17import {
18  ClassComponent,
19  HostRoot,
20  HostComponent,
21  HostPortal,
22  ContextProvider,
23  TimeoutComponent,
24} from 'shared/ReactTypeOfWork';
25import {
26  DidCapture,
27  Incomplete,
28  NoEffect,
29  ShouldCapture,
30} from 'shared/ReactTypeOfSideEffect';
31import {
32  enableGetDerivedStateFromCatch,
33  enableProfilerTimer,
34  enableSuspense,
35} from 'shared/ReactFeatureFlags';
36import {ProfileMode} from './ReactTypeOfMode';
37
38import {createCapturedValue} from './ReactCapturedValue';
39import {
40  enqueueCapturedUpdate,
41  createUpdate,
42  enqueueUpdate,
43  CaptureUpdate,
44} from './ReactUpdateQueue';
45import {logError} from './ReactFiberCommitWork';
46import {Never, Sync, expirationTimeToMs} from './ReactFiberExpirationTime';
47import {popHostContainer, popHostContext} from './ReactFiberHostContext';
48import {
49  popContextProvider as popLegacyContextProvider,
50  popTopLevelContextObject as popTopLevelLegacyContextObject,
51} from './ReactFiberContext';
52import {popProvider} from './ReactFiberNewContext';
53import {
54  resumeActualRenderTimerIfPaused,
55  recordElapsedActualRenderTime,
56} from './ReactProfilerTimer';
57import {
58  markTimeout,
59  markError,
60  onUncaughtError,
61  markLegacyErrorBoundaryAsFailed,
62  isAlreadyFailedLegacyErrorBoundary,
63  requestCurrentTime,
64  computeExpirationForFiber,
65  scheduleWork,
66  retrySuspendedRoot,
67} from './ReactFiberScheduler';
68import {hasLowerPriorityWork} from './ReactFiberPendingPriority';
69
70function createRootErrorUpdate(
71  fiber: Fiber,
72  errorInfo: CapturedValue<mixed>,
73  expirationTime: ExpirationTime,
74): Update<null> {
75  const update = createUpdate(expirationTime);
76  // Unmount the root by rendering null.
77  update.tag = CaptureUpdate;
78  // Caution: React DevTools currently depends on this property
79  // being called "element".
80  update.payload = {element: null};
81  const error = errorInfo.value;
82  update.callback = () => {
83    onUncaughtError(error);
84    logError(fiber, errorInfo);
85  };
86  return update;
87}
88
89function createClassErrorUpdate(
90  fiber: Fiber,
91  errorInfo: CapturedValue<mixed>,
92  expirationTime: ExpirationTime,
93): Update<mixed> {
94  const update = createUpdate(expirationTime);
95  update.tag = CaptureUpdate;
96  const getDerivedStateFromCatch = fiber.type.getDerivedStateFromCatch;
97  if (
98    enableGetDerivedStateFromCatch &&
99    typeof getDerivedStateFromCatch === 'function'
100  ) {
101    const error = errorInfo.value;
102    update.payload = () => {
103      return getDerivedStateFromCatch(error);
104    };
105  }
106
107  const inst = fiber.stateNode;
108  if (inst !== null && typeof inst.componentDidCatch === 'function') {
109    update.callback = function callback() {
110      if (
111        !enableGetDerivedStateFromCatch ||
112        getDerivedStateFromCatch !== 'function'
113      ) {
114        // To preserve the preexisting retry behavior of error boundaries,
115        // we keep track of which ones already failed during this batch.
116        // This gets reset before we yield back to the browser.
117        // TODO: Warn in strict mode if getDerivedStateFromCatch is
118        // not defined.
119        markLegacyErrorBoundaryAsFailed(this);
120      }
121      const error = errorInfo.value;
122      const stack = errorInfo.stack;
123      logError(fiber, errorInfo);
124      this.componentDidCatch(error, {
125        componentStack: stack !== null ? stack : '',
126      });
127    };
128  }
129  return update;
130}
131
132function schedulePing(finishedWork) {
133  // Once the promise resolves, we should try rendering the non-
134  // placeholder state again.
135  const currentTime = requestCurrentTime();
136  const expirationTime = computeExpirationForFiber(currentTime, finishedWork);
137  const recoveryUpdate = createUpdate(expirationTime);
138  enqueueUpdate(finishedWork, recoveryUpdate, expirationTime);
139  scheduleWork(finishedWork, expirationTime);
140}
141
142function throwException(
143  root: FiberRoot,
144  returnFiber: Fiber,
145  sourceFiber: Fiber,
146  value: mixed,
147  renderExpirationTime: ExpirationTime,
148) {
149  // The source fiber did not complete.
150  sourceFiber.effectTag |= Incomplete;
151  // Its effect list is no longer valid.
152  sourceFiber.firstEffect = sourceFiber.lastEffect = null;
153
154  if (
155    enableSuspense &&
156    value !== null &&
157    typeof value === 'object' &&
158    typeof value.then === 'function'
159  ) {
160    // This is a thenable.
161    const thenable: Thenable = (value: any);
162
163    // TODO: Should use the earliest known expiration time
164    const currentTime = requestCurrentTime();
165    const expirationTimeMs = expirationTimeToMs(renderExpirationTime);
166    const currentTimeMs = expirationTimeToMs(currentTime);
167    const startTimeMs = expirationTimeMs - 5000;
168    let elapsedMs = currentTimeMs - startTimeMs;
169    if (elapsedMs < 0) {
170      elapsedMs = 0;
171    }
172    const remainingTimeMs = expirationTimeMs - currentTimeMs;
173
174    // Find the earliest timeout of all the timeouts in the ancestor path.
175    // TODO: Alternatively, we could store the earliest timeout on the context
176    // stack, rather than searching on every suspend.
177    let workInProgress = returnFiber;
178    let earliestTimeoutMs = -1;
179    searchForEarliestTimeout: do {
180      if (workInProgress.tag === TimeoutComponent) {
181        const current = workInProgress.alternate;
182        if (current !== null && current.memoizedState === true) {
183          // A parent Timeout already committed in a placeholder state. We
184          // need to handle this promise immediately. In other words, we
185          // should never suspend inside a tree that already expired.
186          earliestTimeoutMs = 0;
187          break searchForEarliestTimeout;
188        }
189        let timeoutPropMs = workInProgress.pendingProps.ms;
190        if (typeof timeoutPropMs === 'number') {
191          if (timeoutPropMs <= 0) {
192            earliestTimeoutMs = 0;
193            break searchForEarliestTimeout;
194          } else if (
195            earliestTimeoutMs === -1 ||
196            timeoutPropMs < earliestTimeoutMs
197          ) {
198            earliestTimeoutMs = timeoutPropMs;
199          }
200        } else if (earliestTimeoutMs === -1) {
201          earliestTimeoutMs = remainingTimeMs;
202        }
203      }
204      workInProgress = workInProgress.return;
205    } while (workInProgress !== null);
206
207    // Compute the remaining time until the timeout.
208    const msUntilTimeout = earliestTimeoutMs - elapsedMs;
209
210    if (renderExpirationTime === Never || msUntilTimeout > 0) {
211      // There's still time remaining.
212      markTimeout(root, thenable, msUntilTimeout, renderExpirationTime);
213      const onResolveOrReject = () => {
214        retrySuspendedRoot(root, renderExpirationTime);
215      };
216      thenable.then(onResolveOrReject, onResolveOrReject);
217      return;
218    } else {
219      // No time remaining. Need to fallback to placeholder.
220      // Find the nearest timeout that can be retried.
221      workInProgress = returnFiber;
222      do {
223        switch (workInProgress.tag) {
224          case HostRoot: {
225            // The root expired, but no fallback was provided. Throw a
226            // helpful error.
227            const message =
228              renderExpirationTime === Sync
229                ? 'A synchronous update was suspended, but no fallback UI ' +
230                  'was provided.'
231                : 'An update was suspended for longer than the timeout, ' +
232                  'but no fallback UI was provided.';
233            value = new Error(message);
234            break;
235          }
236          case TimeoutComponent: {
237            if ((workInProgress.effectTag & DidCapture) === NoEffect) {
238              workInProgress.effectTag |= ShouldCapture;
239              const onResolveOrReject = schedulePing.bind(null, workInProgress);
240              thenable.then(onResolveOrReject, onResolveOrReject);
241              return;
242            }
243            // Already captured during this render. Continue to the next
244            // Timeout ancestor.
245            break;
246          }
247        }
248        workInProgress = workInProgress.return;
249      } while (workInProgress !== null);
250    }
251  } else {
252    // This is an error.
253    markError(root);
254    if (
255      // Retry (at the same priority) one more time before handling the error.
256      // The retry will flush synchronously. (Unless we're already rendering
257      // synchronously, in which case move to the next check.)
258      (!root.didError && renderExpirationTime !== Sync) ||
259      // There's lower priority work. If so, it may have the effect of fixing
260      // the exception that was just thrown.
261      hasLowerPriorityWork(root, renderExpirationTime)
262    ) {
263      return;
264    }
265  }
266
267  // We didn't find a boundary that could handle this type of exception. Start
268  // over and traverse parent path again, this time treating the exception
269  // as an error.
270  value = createCapturedValue(value, sourceFiber);
271  let workInProgress = returnFiber;
272  do {
273    switch (workInProgress.tag) {
274      case HostRoot: {
275        const errorInfo = value;
276        workInProgress.effectTag |= ShouldCapture;
277        const update = createRootErrorUpdate(
278          workInProgress,
279          errorInfo,
280          renderExpirationTime,
281        );
282        enqueueCapturedUpdate(workInProgress, update, renderExpirationTime);
283        return;
284      }
285      case ClassComponent:
286        // Capture and retry
287        const errorInfo = value;
288        const ctor = workInProgress.type;
289        const instance = workInProgress.stateNode;
290        if (
291          (workInProgress.effectTag & DidCapture) === NoEffect &&
292          ((typeof ctor.getDerivedStateFromCatch === 'function' &&
293            enableGetDerivedStateFromCatch) ||
294            (instance !== null &&
295              typeof instance.componentDidCatch === 'function' &&
296              !isAlreadyFailedLegacyErrorBoundary(instance)))
297        ) {
298          workInProgress.effectTag |= ShouldCapture;
299          // Schedule the error boundary to re-render using updated state
300          const update = createClassErrorUpdate(
301            workInProgress,
302            errorInfo,
303            renderExpirationTime,
304          );
305          enqueueCapturedUpdate(workInProgress, update, renderExpirationTime);
306          return;
307        }
308        break;
309      default:
310        break;
311    }
312    workInProgress = workInProgress.return;
313  } while (workInProgress !== null);
314}
315
316function unwindWork(
317  workInProgress: Fiber,
318  renderExpirationTime: ExpirationTime,
319) {
320  if (enableProfilerTimer) {
321    if (workInProgress.mode & ProfileMode) {
322      recordElapsedActualRenderTime(workInProgress);
323    }
324  }
325
326  switch (workInProgress.tag) {
327    case ClassComponent: {
328      popLegacyContextProvider(workInProgress);
329      const effectTag = workInProgress.effectTag;
330      if (effectTag & ShouldCapture) {
331        workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;
332        return workInProgress;
333      }
334      return null;
335    }
336    case HostRoot: {
337      popHostContainer(workInProgress);
338      popTopLevelLegacyContextObject(workInProgress);
339      const effectTag = workInProgress.effectTag;
340      if (effectTag & ShouldCapture) {
341        workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;
342        return workInProgress;
343      }
344      return null;
345    }
346    case HostComponent: {
347      popHostContext(workInProgress);
348      return null;
349    }
350    case TimeoutComponent: {
351      const effectTag = workInProgress.effectTag;
352      if (effectTag & ShouldCapture) {
353        workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;
354        return workInProgress;
355      }
356      return null;
357    }
358    case HostPortal:
359      popHostContainer(workInProgress);
360      return null;
361    case ContextProvider:
362      popProvider(workInProgress);
363      return null;
364    default:
365      return null;
366  }
367}
368
369function unwindInterruptedWork(interruptedWork: Fiber) {
370  if (enableProfilerTimer) {
371    if (interruptedWork.mode & ProfileMode) {
372      // Resume in case we're picking up on work that was paused.
373      resumeActualRenderTimerIfPaused();
374      recordElapsedActualRenderTime(interruptedWork);
375    }
376  }
377
378  switch (interruptedWork.tag) {
379    case ClassComponent: {
380      popLegacyContextProvider(interruptedWork);
381      break;
382    }
383    case HostRoot: {
384      popHostContainer(interruptedWork);
385      popTopLevelLegacyContextObject(interruptedWork);
386      break;
387    }
388    case HostComponent: {
389      popHostContext(interruptedWork);
390      break;
391    }
392    case HostPortal:
393      popHostContainer(interruptedWork);
394      break;
395    case ContextProvider:
396      popProvider(interruptedWork);
397      break;
398    default:
399      break;
400  }
401}
402
403export {
404  throwException,
405  unwindWork,
406  unwindInterruptedWork,
407  createRootErrorUpdate,
408  createClassErrorUpdate,
409};
410
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

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

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

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

Test now for Free
LambdaTestX

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

Allow Cookie
Sarah

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

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

Sarah Elson (Product & Growth Lead)