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

ReactFiberSuspenseComponent.new.js

Source: ReactFiberSuspenseComponent.new.js Github

copy
1/**
2 * Copyright (c) Facebook, Inc. and its affiliates.
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 *      
8 */
9
10                                                               
11                                                
12                                                             
13                                           
14import {SuspenseComponent, SuspenseListComponent} from './ReactWorkTags';
15import {NoFlags, DidCapture} from './ReactFiberFlags';
16import {
17  isSuspenseInstancePending,
18  isSuspenseInstanceFallback,
19} from './ReactFiberHostConfig';
20
21                              
22                           
23                           
24
25                                  
26                                                     
27
28                                     
29   
30
31// A null SuspenseState represents an unsuspended normal Suspense boundary.
32// A non-null SuspenseState means that it is blocked for one reason or another.
33// - A non-null dehydrated field means it's blocked pending hydration.
34//   - A non-null dehydrated field can use isSuspenseInstancePending or
35//     isSuspenseInstanceFallback to query the reason for being dehydrated.
36// - A null dehydrated field means it's blocked by something suspending and
37//   we're currently showing a fallback instead.
38                              
39                                                                        
40                                                                       
41                                                    
42                                      
43                                                                               
44                                                            
45                                                                                
46                  
47   
48
49                                                                 
50
51                                        
52                       
53                                      
54                          
55                                                                          
56                             
57                                               
58                     
59                                            
60                     
61                             
62                                 
63   
64
65export function shouldCaptureSuspense(
66  workInProgress       ,
67  hasInvisibleParent         ,
68)          {
69  // If it was the primary children that just suspended, capture and render the
70  // fallback. Otherwise, don't capture and bubble to the next boundary.
71  const nextState                       = workInProgress.memoizedState;
72  if (nextState !== null) {
73    if (nextState.dehydrated !== null) {
74      // A dehydrated boundary always captures.
75      return true;
76    }
77    return false;
78  }
79  const props = workInProgress.memoizedProps;
80  // In order to capture, the Suspense component must have a fallback prop.
81  if (props.fallback === undefined) {
82    return false;
83  }
84  // Regular boundaries always capture.
85  if (props.unstable_avoidThisFallback !== true) {
86    return true;
87  }
88  // If it's a boundary we should avoid, then we prefer to bubble up to the
89  // parent boundary if it is currently invisible.
90  if (hasInvisibleParent) {
91    return false;
92  }
93  // If the parent is not able to handle it, we must handle it.
94  return true;
95}
96
97export function findFirstSuspended(row       )               {
98  let node = row;
99  while (node !== null) {
100    if (node.tag === SuspenseComponent) {
101      const state                       = node.memoizedState;
102      if (state !== null) {
103        const dehydrated                          = state.dehydrated;
104        if (
105          dehydrated === null ||
106          isSuspenseInstancePending(dehydrated) ||
107          isSuspenseInstanceFallback(dehydrated)
108        ) {
109          return node;
110        }
111      }
112    } else if (
113      node.tag === SuspenseListComponent &&
114      // revealOrder undefined can't be trusted because it don't
115      // keep track of whether it suspended or not.
116      node.memoizedProps.revealOrder !== undefined
117    ) {
118      const didSuspend = (node.flags & DidCapture) !== NoFlags;
119      if (didSuspend) {
120        return node;
121      }
122    } else if (node.child !== null) {
123      node.child.return = node;
124      node = node.child;
125      continue;
126    }
127    if (node === row) {
128      return null;
129    }
130    while (node.sibling === null) {
131      if (node.return === null || node.return === row) {
132        return null;
133      }
134      node = node.return;
135    }
136    node.sibling.return = node.return;
137    node = node.sibling;
138  }
139  return null;
140}
141
Full Screen

ReactFiberSuspenseComponent.old.js

Source: ReactFiberSuspenseComponent.old.js Github

copy
1/**
2 * Copyright (c) Facebook, Inc. and its affiliates.
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 *      
8 */
9
10                                                               
11                                                
12                                                             
13                                           
14import {SuspenseComponent, SuspenseListComponent} from './ReactWorkTags';
15import {NoFlags, DidCapture} from './ReactFiberFlags';
16import {
17  isSuspenseInstancePending,
18  isSuspenseInstanceFallback,
19} from './ReactFiberHostConfig';
20
21                              
22                           
23                           
24
25                                  
26                                                     
27
28                                     
29   
30
31// A null SuspenseState represents an unsuspended normal Suspense boundary.
32// A non-null SuspenseState means that it is blocked for one reason or another.
33// - A non-null dehydrated field means it's blocked pending hydration.
34//   - A non-null dehydrated field can use isSuspenseInstancePending or
35//     isSuspenseInstanceFallback to query the reason for being dehydrated.
36// - A null dehydrated field means it's blocked by something suspending and
37//   we're currently showing a fallback instead.
38                              
39                                                                        
40                                                                       
41                                                    
42                                      
43                                                                               
44                                                            
45                                                                                
46                  
47   
48
49                                                                 
50
51                                        
52                       
53                                      
54                          
55                                                                          
56                             
57                                               
58                     
59                                            
60                     
61                             
62                                 
63                                                         
64                                                           
65                           
66   
67
68export function shouldCaptureSuspense(
69  workInProgress       ,
70  hasInvisibleParent         ,
71)          {
72  // If it was the primary children that just suspended, capture and render the
73  // fallback. Otherwise, don't capture and bubble to the next boundary.
74  const nextState                       = workInProgress.memoizedState;
75  if (nextState !== null) {
76    if (nextState.dehydrated !== null) {
77      // A dehydrated boundary always captures.
78      return true;
79    }
80    return false;
81  }
82  const props = workInProgress.memoizedProps;
83  // In order to capture, the Suspense component must have a fallback prop.
84  if (props.fallback === undefined) {
85    return false;
86  }
87  // Regular boundaries always capture.
88  if (props.unstable_avoidThisFallback !== true) {
89    return true;
90  }
91  // If it's a boundary we should avoid, then we prefer to bubble up to the
92  // parent boundary if it is currently invisible.
93  if (hasInvisibleParent) {
94    return false;
95  }
96  // If the parent is not able to handle it, we must handle it.
97  return true;
98}
99
100export function findFirstSuspended(row       )               {
101  let node = row;
102  while (node !== null) {
103    if (node.tag === SuspenseComponent) {
104      const state                       = node.memoizedState;
105      if (state !== null) {
106        const dehydrated                          = state.dehydrated;
107        if (
108          dehydrated === null ||
109          isSuspenseInstancePending(dehydrated) ||
110          isSuspenseInstanceFallback(dehydrated)
111        ) {
112          return node;
113        }
114      }
115    } else if (
116      node.tag === SuspenseListComponent &&
117      // revealOrder undefined can't be trusted because it don't
118      // keep track of whether it suspended or not.
119      node.memoizedProps.revealOrder !== undefined
120    ) {
121      const didSuspend = (node.flags & DidCapture) !== NoFlags;
122      if (didSuspend) {
123        return node;
124      }
125    } else if (node.child !== null) {
126      node.child.return = node;
127      node = node.child;
128      continue;
129    }
130    if (node === row) {
131      return null;
132    }
133    while (node.sibling === null) {
134      if (node.return === null || node.return === row) {
135        return null;
136      }
137      node = node.return;
138    }
139    node.sibling.return = node.return;
140    node = node.sibling;
141  }
142  return null;
143}
144
Full Screen

ReactFiberSuspenseComponent.js

Source: ReactFiberSuspenseComponent.js Github

copy
1/**
2 * Copyright (c) Facebook, Inc. and its affiliates.
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 {SuspenseInstance} from './forks/ReactFiberHostConfig.dom';
12import type {ExpirationTime} from './ReactFiberExpirationTime';
13import {SuspenseComponent, SuspenseListComponent} from '@/shared/ReactWorkTags';
14import {NoEffect, DidCapture} from '@/shared/ReactSideEffectTags';
15import {
16  isSuspenseInstancePending,
17  isSuspenseInstanceFallback,
18} from './forks/ReactFiberHostConfig.dom';
19
20export type SuspenseHydrationCallbacks = {
21  onHydrated?: (suspenseInstance: SuspenseInstance) => void,
22  onDeleted?: (suspenseInstance: SuspenseInstance) => void,
23  ...
24};
25
26// A null SuspenseState represents an unsuspended normal Suspense boundary.
27// A non-null SuspenseState means that it is blocked for one reason or another.
28// - A non-null dehydrated field means it's blocked pending hydration.
29//   - A non-null dehydrated field can use isSuspenseInstancePending or
30//     isSuspenseInstanceFallback to query the reason for being dehydrated.
31// - A null dehydrated field means it's blocked by something suspending and
32//   we're currently showing a fallback instead.
33export type SuspenseState = {|
34  // If this boundary is still dehydrated, we store the SuspenseInstance
35  // here to indicate that it is dehydrated (flag) and for quick access
36  // to check things like isSuspenseInstancePending.
37  dehydrated: null | SuspenseInstance,
38  // Represents the earliest expiration time we should attempt to hydrate
39  // a dehydrated boundary at.
40  // Never is the default for dehydrated boundaries.
41  // NoWork is the default for normal boundaries, which turns into "normal" pri.
42  retryTime: ExpirationTime,
43|};
44
45export type SuspenseListTailMode = 'collapsed' | 'hidden' | void;
46
47export type SuspenseListRenderState = {|
48  isBackwards: boolean,
49  // The currently rendering tail row.
50  rendering: null | Fiber,
51  // The absolute time when we started rendering the tail row.
52  renderingStartTime: number,
53  // The last of the already rendered children.
54  last: null | Fiber,
55  // Remaining rows on the tail of the list.
56  tail: null | Fiber,
57  // The absolute time in ms that we'll expire the tail rendering.
58  tailExpiration: number,
59  // Tail insertions setting.
60  tailMode: SuspenseListTailMode,
61  // Last Effect before we rendered the "rendering" item.
62  // Used to remove new effects added by the rendered item.
63  lastEffect: null | Fiber,
64|};
65
66export function shouldCaptureSuspense(
67  workInProgress: Fiber,
68  hasInvisibleParent: boolean,
69): boolean {
70  // If it was the primary children that just suspended, capture and render the
71  // fallback. Otherwise, don't capture and bubble to the next boundary.
72  const nextState: SuspenseState | null = workInProgress.memoizedState;
73  if (nextState !== null) {
74    if (nextState.dehydrated !== null) {
75      // A dehydrated boundary always captures.
76      return true;
77    }
78    return false;
79  }
80  const props = workInProgress.memoizedProps;
81  // In order to capture, the Suspense component must have a fallback prop.
82  if (props.fallback === undefined) {
83    return false;
84  }
85  // Regular boundaries always capture.
86  if (props.unstable_avoidThisFallback !== true) {
87    return true;
88  }
89  // If it's a boundary we should avoid, then we prefer to bubble up to the
90  // parent boundary if it is currently invisible.
91  if (hasInvisibleParent) {
92    return false;
93  }
94  // If the parent is not able to handle it, we must handle it.
95  return true;
96}
97
98export function findFirstSuspended(row: Fiber): null | Fiber {
99  let node = row;
100  while (node !== null) {
101    if (node.tag === SuspenseComponent) {
102      const state: SuspenseState | null = node.memoizedState;
103      if (state !== null) {
104        const dehydrated: null | SuspenseInstance = state.dehydrated;
105        if (
106          dehydrated === null ||
107          isSuspenseInstancePending(dehydrated) ||
108          isSuspenseInstanceFallback(dehydrated)
109        ) {
110          return node;
111        }
112      }
113    } else if (
114      node.tag === SuspenseListComponent &&
115      // revealOrder undefined can't be trusted because it don't
116      // keep track of whether it suspended or not.
117      node.memoizedProps.revealOrder !== undefined
118    ) {
119      let didSuspend = (node.effectTag & DidCapture) !== NoEffect;
120      if (didSuspend) {
121        return node;
122      }
123    } else if (node.child !== null) {
124      node.child.return = node;
125      node = node.child;
126      continue;
127    }
128    if (node === row) {
129      return null;
130    }
131    while (node.sibling === null) {
132      if (node.return === null || node.return === row) {
133        return null;
134      }
135      node = node.return;
136    }
137    node.sibling.return = node.return;
138    node = node.sibling;
139  }
140  return null;
141}
142
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)