How to use getStateFromUpdate 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.

ReactUpdateQueue.js

Source: ReactUpdateQueue.js Github

copy
1import {NoWork} from './ReactFiberExpirationTime'
2// Assume when processing the updateQueue, process all updates together
3class UpdateQueue {
4  constructor (baseState) {
5    this.baseState = baseState
6    this.firstUpdate = null
7    this.lastUpdate = null
8  }
9}
10
11class Update {
12  constructor () {
13    this.payload = null
14    this.next = null
15  }
16}
17
18export function createUpdate () {
19  return new Update()
20}
21
22function appendUpdateToQueue (queue, update) {
23  // Append the update to the end of the list.
24  if (queue.lastUpdate === null) {
25    // Queue is empty
26    queue.firstUpdate = queue.lastUpdate = update
27  } else {
28    queue.lastUpdate.next = update
29    queue.lastUpdate = update
30  }
31}
32
33export function enqueueUpdate (fiber, update) {
34  // Update queues are created lazily.
35  let queue = fiber.updateQueue
36  if (queue === null) {
37    queue = fiber.updateQueue = new UpdateQueue(fiber.memoizedState)
38  }
39  appendUpdateToQueue(queue, update)
40}
41
42function getStateFromUpdate (update, prevState) {
43  const partialState = update.payload
44  if (partialState === null || partialState === undefined) {
45    // Null and undefined are treated as no-ops.
46    return prevState
47  }
48  // Merge the partial state and the previous state.
49  return Object.assign({}, prevState, partialState)
50}
51
52export function processUpdateQueue (workInProgress, queue) {
53  // Iterate through the list of updates to compute the result.
54  let update = queue.firstUpdate
55  let resultState = queue.baseState
56  while (update !== null) {
57    resultState = getStateFromUpdate(update, resultState)
58    update = update.next
59  }
60  queue.baseState = resultState
61  queue.firstUpdate = queue.lastUpdate = null
62  workInProgress.expirationTime = NoWork
63  workInProgress.memoizedState = resultState
64}
65
Full Screen

ReactFiberUpdateQueue.js

Source: ReactFiberUpdateQueue.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 {ExpirationTime} from './ReactFiberExpirationTime';
12import type {CapturedValue} from './ReactCapturedValue';
13
14import {
15  debugRenderPhaseSideEffects,
16  debugRenderPhaseSideEffectsForStrictMode,
17} from 'shared/ReactFeatureFlags';
18import {Callback as CallbackEffect} from 'shared/ReactTypeOfSideEffect';
19import {ClassComponent, HostRoot} from 'shared/ReactTypeOfWork';
20import invariant from 'fbjs/lib/invariant';
21import warning from 'fbjs/lib/warning';
22import {StrictMode} from './ReactTypeOfMode';
23
24import {NoWork} from './ReactFiberExpirationTime';
25
26let didWarnUpdateInsideUpdate;
27
28if (__DEV__) {
29  didWarnUpdateInsideUpdate = false;
30}
31
32type PartialState<State, Props> =
33  | $Subtype<State>
34  | ((prevState: State, props: Props) => $Subtype<State>);
35
36// Callbacks are not validated until invocation
37type Callback = mixed;
38
39export type Update<State> = {
40  expirationTime: ExpirationTime,
41  partialState: PartialState<any, any>,
42  callback: Callback | null,
43  isReplace: boolean,
44  isForced: boolean,
45  capturedValue: CapturedValue<mixed> | null,
46  next: Update<State> | null,
47};
48
49// Singly linked-list of updates. When an update is scheduled, it is added to
50// the queue of the current fiber and the work-in-progress fiber. The two queues
51// are separate but they share a persistent structure.
52//
53// During reconciliation, updates are removed from the work-in-progress fiber,
54// but they remain on the current fiber. That ensures that if a work-in-progress
55// is aborted, the aborted updates are recovered by cloning from current.
56//
57// The work-in-progress queue is always a subset of the current queue.
58//
59// When the tree is committed, the work-in-progress becomes the current.
60export type UpdateQueue<State> = {
61  // A processed update is not removed from the queue if there are any
62  // unprocessed updates that came before it. In that case, we need to keep
63  // track of the base state, which represents the base state of the first
64  // unprocessed update, which is the same as the first update in the list.
65  baseState: State,
66  // For the same reason, we keep track of the remaining expiration time.
67  expirationTime: ExpirationTime,
68  first: Update<State> | null,
69  last: Update<State> | null,
70  callbackList: Array<Update<State>> | null,
71  hasForceUpdate: boolean,
72  isInitialized: boolean,
73  capturedValues: Array<CapturedValue<mixed>> | null,
74
75  // Dev only
76  isProcessing?: boolean,
77};
78
79function createUpdateQueue<State>(baseState: State): UpdateQueue<State> {
80  const queue: UpdateQueue<State> = {
81    baseState,
82    expirationTime: NoWork,
83    first: null,
84    last: null,
85    callbackList: null,
86    hasForceUpdate: false,
87    isInitialized: false,
88    capturedValues: null,
89  };
90  if (__DEV__) {
91    queue.isProcessing = false;
92  }
93  return queue;
94}
95
96export function insertUpdateIntoQueue<State>(
97  queue: UpdateQueue<State>,
98  update: Update<State>,
99): void {
100  // Append the update to the end of the list.
101  if (queue.last === null) {
102    // Queue is empty
103    queue.first = queue.last = update;
104  } else {
105    queue.last.next = update;
106    queue.last = update;
107  }
108  if (
109    queue.expirationTime === NoWork ||
110    queue.expirationTime > update.expirationTime
111  ) {
112    queue.expirationTime = update.expirationTime;
113  }
114}
115
116let q1;
117let q2;
118export function ensureUpdateQueues(fiber: Fiber) {
119  q1 = q2 = null;
120  // We'll have at least one and at most two distinct update queues.
121  const alternateFiber = fiber.alternate;
122  let queue1 = fiber.updateQueue;
123  if (queue1 === null) {
124    // TODO: We don't know what the base state will be until we begin work.
125    // It depends on which fiber is the next current. Initialize with an empty
126    // base state, then set to the memoizedState when rendering. Not super
127    // happy with this approach.
128    queue1 = fiber.updateQueue = createUpdateQueue((null: any));
129  }
130
131  let queue2;
132  if (alternateFiber !== null) {
133    queue2 = alternateFiber.updateQueue;
134    if (queue2 === null) {
135      queue2 = alternateFiber.updateQueue = createUpdateQueue((null: any));
136    }
137  } else {
138    queue2 = null;
139  }
140  queue2 = queue2 !== queue1 ? queue2 : null;
141
142  // Use module variables instead of returning a tuple
143  q1 = queue1;
144  q2 = queue2;
145}
146
147export function insertUpdateIntoFiber<State>(
148  fiber: Fiber,
149  update: Update<State>,
150): void {
151  ensureUpdateQueues(fiber);
152  const queue1: Fiber = (q1: any);
153  const queue2: Fiber | null = (q2: any);
154
155  // Warn if an update is scheduled from inside an updater function.
156  if (__DEV__) {
157    if (
158      (queue1.isProcessing || (queue2 !== null && queue2.isProcessing)) &&
159      !didWarnUpdateInsideUpdate
160    ) {
161      warning(
162        false,
163        'An update (setState, replaceState, or forceUpdate) was scheduled ' +
164          'from inside an update function. Update functions should be pure, ' +
165          'with zero side-effects. Consider using componentDidUpdate or a ' +
166          'callback.',
167      );
168      didWarnUpdateInsideUpdate = true;
169    }
170  }
171
172  // If there's only one queue, add the update to that queue and exit.
173  if (queue2 === null) {
174    insertUpdateIntoQueue(queue1, update);
175    return;
176  }
177
178  // If either queue is empty, we need to add to both queues.
179  if (queue1.last === null || queue2.last === null) {
180    insertUpdateIntoQueue(queue1, update);
181    insertUpdateIntoQueue(queue2, update);
182    return;
183  }
184
185  // If both lists are not empty, the last update is the same for both lists
186  // because of structural sharing. So, we should only append to one of
187  // the lists.
188  insertUpdateIntoQueue(queue1, update);
189  // But we still need to update the `last` pointer of queue2.
190  queue2.last = update;
191}
192
193export function getUpdateExpirationTime(fiber: Fiber): ExpirationTime {
194  switch (fiber.tag) {
195    case HostRoot:
196    case ClassComponent:
197      const updateQueue = fiber.updateQueue;
198      if (updateQueue === null) {
199        return NoWork;
200      }
201      return updateQueue.expirationTime;
202    default:
203      return NoWork;
204  }
205}
206
207function getStateFromUpdate(update, instance, prevState, props) {
208  const partialState = update.partialState;
209  if (typeof partialState === 'function') {
210    return partialState.call(instance, prevState, props);
211  } else {
212    return partialState;
213  }
214}
215
216export function processUpdateQueue<State>(
217  current: Fiber | null,
218  workInProgress: Fiber,
219  queue: UpdateQueue<State>,
220  instance: any,
221  props: any,
222  renderExpirationTime: ExpirationTime,
223): State {
224  if (current !== null && current.updateQueue === queue) {
225    // We need to create a work-in-progress queue, by cloning the current queue.
226    const currentQueue = queue;
227    queue = workInProgress.updateQueue = {
228      baseState: currentQueue.baseState,
229      expirationTime: currentQueue.expirationTime,
230      first: currentQueue.first,
231      last: currentQueue.last,
232      isInitialized: currentQueue.isInitialized,
233      capturedValues: currentQueue.capturedValues,
234      // These fields are no longer valid because they were already committed.
235      // Reset them.
236      callbackList: null,
237      hasForceUpdate: false,
238    };
239  }
240
241  if (__DEV__) {
242    // Set this flag so we can warn if setState is called inside the update
243    // function of another setState.
244    queue.isProcessing = true;
245  }
246
247  // Reset the remaining expiration time. If we skip over any updates, we'll
248  // increase this accordingly.
249  queue.expirationTime = NoWork;
250
251  // TODO: We don't know what the base state will be until we begin work.
252  // It depends on which fiber is the next current. Initialize with an empty
253  // base state, then set to the memoizedState when rendering. Not super
254  // happy with this approach.
255  let state;
256  if (queue.isInitialized) {
257    state = queue.baseState;
258  } else {
259    state = queue.baseState = workInProgress.memoizedState;
260    queue.isInitialized = true;
261  }
262  let dontMutatePrevState = true;
263  let update = queue.first;
264  let didSkip = false;
265  while (update !== null) {
266    const updateExpirationTime = update.expirationTime;
267    if (updateExpirationTime > renderExpirationTime) {
268      // This update does not have sufficient priority. Skip it.
269      const remainingExpirationTime = queue.expirationTime;
270      if (
271        remainingExpirationTime === NoWork ||
272        remainingExpirationTime > updateExpirationTime
273      ) {
274        // Update the remaining expiration time.
275        queue.expirationTime = updateExpirationTime;
276      }
277      if (!didSkip) {
278        didSkip = true;
279        queue.baseState = state;
280      }
281      // Continue to the next update.
282      update = update.next;
283      continue;
284    }
285
286    // This update does have sufficient priority.
287
288    // If no previous updates were skipped, drop this update from the queue by
289    // advancing the head of the list.
290    if (!didSkip) {
291      queue.first = update.next;
292      if (queue.first === null) {
293        queue.last = null;
294      }
295    }
296
297    // Invoke setState callback an extra time to help detect side-effects.
298    // Ignore the return value in this case.
299    if (
300      debugRenderPhaseSideEffects ||
301      (debugRenderPhaseSideEffectsForStrictMode &&
302        workInProgress.mode & StrictMode)
303    ) {
304      getStateFromUpdate(update, instance, state, props);
305    }
306
307    // Process the update
308    let partialState;
309    if (update.isReplace) {
310      state = getStateFromUpdate(update, instance, state, props);
311      dontMutatePrevState = true;
312    } else {
313      partialState = getStateFromUpdate(update, instance, state, props);
314      if (partialState) {
315        if (dontMutatePrevState) {
316          // $FlowFixMe: Idk how to type this properly.
317          state = Object.assign({}, state, partialState);
318        } else {
319          state = Object.assign(state, partialState);
320        }
321        dontMutatePrevState = false;
322      }
323    }
324    if (update.isForced) {
325      queue.hasForceUpdate = true;
326    }
327    if (update.callback !== null) {
328      // Append to list of callbacks.
329      let callbackList = queue.callbackList;
330      if (callbackList === null) {
331        callbackList = queue.callbackList = [];
332      }
333      callbackList.push(update);
334    }
335    if (update.capturedValue !== null) {
336      let capturedValues = queue.capturedValues;
337      if (capturedValues === null) {
338        queue.capturedValues = [update.capturedValue];
339      } else {
340        capturedValues.push(update.capturedValue);
341      }
342    }
343    update = update.next;
344  }
345
346  if (queue.callbackList !== null) {
347    workInProgress.effectTag |= CallbackEffect;
348  } else if (
349    queue.first === null &&
350    !queue.hasForceUpdate &&
351    queue.capturedValues === null
352  ) {
353    // The queue is empty. We can reset it.
354    workInProgress.updateQueue = null;
355  }
356
357  if (!didSkip) {
358    didSkip = true;
359    queue.baseState = state;
360  }
361
362  if (__DEV__) {
363    // No longer processing.
364    queue.isProcessing = false;
365  }
366
367  return state;
368}
369
370export function commitCallbacks<State>(
371  queue: UpdateQueue<State>,
372  context: any,
373) {
374  const callbackList = queue.callbackList;
375  if (callbackList === null) {
376    return;
377  }
378  // Set the list to null to make sure they don't get called more than once.
379  queue.callbackList = null;
380  for (let i = 0; i < callbackList.length; i++) {
381    const update = callbackList[i];
382    const callback = update.callback;
383    // This update might be processed again. Clear the callback so it's only
384    // called once.
385    update.callback = null;
386    invariant(
387      typeof callback === 'function',
388      'Invalid argument passed as callback. Expected a function. Instead ' +
389        'received: %s',
390      callback,
391    );
392    callback.call(context);
393  }
394}
395
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)