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

ReactFiberHydrationContext.js

Source: ReactFiberHydrationContext.js Github

copy
1/**
2 * Copyright 2013-present, Facebook, Inc.
3 * All rights reserved.
4 *
5 * This source code is licensed under the BSD-style license found in the
6 * LICENSE file in the root directory of this source tree. An additional grant
7 * of patent rights can be found in the PATENTS file in the same directory.
8 *
9 * @providesModule ReactFiberHydrationContext
10 * @flow
11 */
12
13'use strict';
14
15import type {Fiber} from 'ReactFiber';
16import type {HostConfig} from 'ReactFiberReconciler';
17
18var invariant = require('fbjs/lib/invariant');
19
20const {HostComponent, HostText, HostRoot} = require('ReactTypeOfWork');
21const {Deletion, Placement} = require('ReactTypeOfSideEffect');
22
23const {createFiberFromHostInstanceForDeletion} = require('ReactFiber');
24
25export type HydrationContext<C> = {
26  enterHydrationState(fiber: Fiber): boolean,
27  resetHydrationState(): void,
28  tryToClaimNextHydratableInstance(fiber: Fiber): void,
29  prepareToHydrateHostInstance(fiber: Fiber, rootContainerInstance: C): boolean,
30  prepareToHydrateHostTextInstance(fiber: Fiber): boolean,
31  popHydrationState(fiber: Fiber): boolean,
32};
33
34module.exports = function<T, P, I, TI, PI, C, CX, PL>(
35  config: HostConfig<T, P, I, TI, PI, C, CX, PL>,
36): HydrationContext<C> {
37  const {
38    shouldSetTextContent,
39    canHydrateInstance,
40    canHydrateTextInstance,
41    getNextHydratableSibling,
42    getFirstHydratableChild,
43    hydrateInstance,
44    hydrateTextInstance,
45    didNotHydrateInstance,
46    didNotFindHydratableInstance,
47    didNotFindHydratableTextInstance,
48  } = config;
49
50  // If this doesn't have hydration mode.
51  if (
52    !(canHydrateInstance &&
53      canHydrateTextInstance &&
54      getNextHydratableSibling &&
55      getFirstHydratableChild &&
56      hydrateInstance &&
57      hydrateTextInstance &&
58      didNotHydrateInstance &&
59      didNotFindHydratableInstance &&
60      didNotFindHydratableTextInstance)
61  ) {
62    return {
63      enterHydrationState() {
64        return false;
65      },
66      resetHydrationState() {},
67      tryToClaimNextHydratableInstance() {},
68      prepareToHydrateHostInstance() {
69        invariant(
70          false,
71          'Expected prepareToHydrateHostInstance() to never be called. ' +
72            'This error is likely caused by a bug in React. Please file an issue.',
73        );
74      },
75      prepareToHydrateHostTextInstance() {
76        invariant(
77          false,
78          'Expected prepareToHydrateHostTextInstance() to never be called. ' +
79            'This error is likely caused by a bug in React. Please file an issue.',
80        );
81      },
82      popHydrationState(fiber: Fiber) {
83        return false;
84      },
85    };
86  }
87
88  // The deepest Fiber on the stack involved in a hydration context.
89  // This may have been an insertion or a hydration.
90  let hydrationParentFiber: null | Fiber = null;
91  let nextHydratableInstance: null | I | TI = null;
92  let isHydrating: boolean = false;
93
94  function enterHydrationState(fiber: Fiber) {
95    const parentInstance = fiber.stateNode.containerInfo;
96    nextHydratableInstance = getFirstHydratableChild(parentInstance);
97    hydrationParentFiber = fiber;
98    isHydrating = true;
99    return true;
100  }
101
102  function deleteHydratableInstance(returnFiber: Fiber, instance: I | TI) {
103    if (__DEV__) {
104      switch (returnFiber.tag) {
105        case HostRoot:
106          didNotHydrateInstance(returnFiber.stateNode.containerInfo, instance);
107          break;
108        case HostComponent:
109          didNotHydrateInstance(returnFiber.stateNode, instance);
110          break;
111      }
112    }
113
114    const childToDelete = createFiberFromHostInstanceForDeletion();
115    childToDelete.stateNode = instance;
116    childToDelete.return = returnFiber;
117    childToDelete.effectTag = Deletion;
118
119    // This might seem like it belongs on progressedFirstDeletion. However,
120    // these children are not part of the reconciliation list of children.
121    // Even if we abort and rereconcile the children, that will try to hydrate
122    // again and the nodes are still in the host tree so these will be
123    // recreated.
124    if (returnFiber.lastEffect !== null) {
125      returnFiber.lastEffect.nextEffect = childToDelete;
126      returnFiber.lastEffect = childToDelete;
127    } else {
128      returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
129    }
130  }
131
132  function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
133    fiber.effectTag |= Placement;
134    if (__DEV__) {
135      var parentInstance;
136      switch (returnFiber.tag) {
137        // TODO: Currently we don't warn for insertions into the root because
138        // we always insert into the root in the non-hydrating case. We just
139        // delete the existing content. Reenable this once we have a better
140        // strategy for determining if we're hydrating or not.
141        // case HostRoot:
142        //   parentInstance = returnFiber.stateNode.containerInfo;
143        //   break;
144        case HostComponent:
145          parentInstance = returnFiber.stateNode;
146          break;
147        default:
148          return;
149      }
150      switch (fiber.tag) {
151        case HostComponent:
152          const type = fiber.type;
153          const props = fiber.pendingProps;
154          didNotFindHydratableInstance(parentInstance, type, props);
155          break;
156        case HostText:
157          const text = fiber.pendingProps;
158          didNotFindHydratableTextInstance(parentInstance, text);
159          break;
160      }
161    }
162  }
163
164  function canHydrate(fiber, nextInstance) {
165    switch (fiber.tag) {
166      case HostComponent: {
167        const type = fiber.type;
168        const props = fiber.pendingProps;
169        return canHydrateInstance(nextInstance, type, props);
170      }
171      case HostText: {
172        const text = fiber.pendingProps;
173        return canHydrateTextInstance(nextInstance, text);
174      }
175      default:
176        return false;
177    }
178  }
179
180  function tryToClaimNextHydratableInstance(fiber: Fiber) {
181    if (!isHydrating) {
182      return;
183    }
184    let nextInstance = nextHydratableInstance;
185    if (!nextInstance) {
186      // Nothing to hydrate. Make it an insertion.
187      insertNonHydratedInstance((hydrationParentFiber: any), fiber);
188      isHydrating = false;
189      hydrationParentFiber = fiber;
190      return;
191    }
192    if (!canHydrate(fiber, nextInstance)) {
193      // If we can't hydrate this instance let's try the next one.
194      // We use this as a heuristic. It's based on intuition and not data so it
195      // might be flawed or unnecessary.
196      nextInstance = getNextHydratableSibling(nextInstance);
197      if (!nextInstance || !canHydrate(fiber, nextInstance)) {
198        // Nothing to hydrate. Make it an insertion.
199        insertNonHydratedInstance((hydrationParentFiber: any), fiber);
200        isHydrating = false;
201        hydrationParentFiber = fiber;
202        return;
203      }
204      // We matched the next one, we'll now assume that the first one was
205      // superfluous and we'll delete it. Since we can't eagerly delete it
206      // we'll have to schedule a deletion. To do that, this node needs a dummy
207      // fiber associated with it.
208      deleteHydratableInstance(
209        (hydrationParentFiber: any),
210        nextHydratableInstance,
211      );
212    }
213    fiber.stateNode = nextInstance;
214    hydrationParentFiber = fiber;
215    nextHydratableInstance = getFirstHydratableChild(nextInstance);
216  }
217
218  function prepareToHydrateHostInstance(
219    fiber: Fiber,
220    rootContainerInstance: C,
221  ): boolean {
222    const instance: I = fiber.stateNode;
223    const updatePayload = hydrateInstance(
224      instance,
225      fiber.type,
226      fiber.memoizedProps,
227      rootContainerInstance,
228      fiber,
229    );
230    // TODO: Type this specific to this type of component.
231    fiber.updateQueue = (updatePayload: any);
232    // If the update payload indicates that there is a change or if there
233    // is a new ref we mark this as an update.
234    if (updatePayload !== null) {
235      return true;
236    }
237    return false;
238  }
239
240  function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
241    const textInstance: TI = fiber.stateNode;
242    const shouldUpdate = hydrateTextInstance(
243      textInstance,
244      fiber.memoizedProps,
245      fiber,
246    );
247    return shouldUpdate;
248  }
249
250  function popToNextHostParent(fiber: Fiber): void {
251    let parent = fiber.return;
252    while (
253      parent !== null &&
254      parent.tag !== HostComponent &&
255      parent.tag !== HostRoot
256    ) {
257      parent = parent.return;
258    }
259    hydrationParentFiber = parent;
260  }
261
262  function popHydrationState(fiber: Fiber): boolean {
263    if (fiber !== hydrationParentFiber) {
264      // We're deeper than the current hydration context, inside an inserted
265      // tree.
266      return false;
267    }
268    if (!isHydrating) {
269      // If we're not currently hydrating but we're in a hydration context, then
270      // we were an insertion and now need to pop up reenter hydration of our
271      // siblings.
272      popToNextHostParent(fiber);
273      isHydrating = true;
274      return false;
275    }
276
277    const type = fiber.type;
278
279    // If we have any remaining hydratable nodes, we need to delete them now.
280    // We only do this deeper than head and body since they tend to have random
281    // other nodes in them. We also ignore components with pure text content in
282    // side of them.
283    // TODO: Better heuristic.
284    if (
285      fiber.tag !== HostComponent ||
286      (type !== 'head' &&
287        type !== 'body' &&
288        !shouldSetTextContent(type, fiber.memoizedProps))
289    ) {
290      let nextInstance = nextHydratableInstance;
291      while (nextInstance) {
292        deleteHydratableInstance(fiber, nextInstance);
293        nextInstance = getNextHydratableSibling(nextInstance);
294      }
295    }
296
297    popToNextHostParent(fiber);
298    nextHydratableInstance = hydrationParentFiber
299      ? getNextHydratableSibling(fiber.stateNode)
300      : null;
301    return true;
302  }
303
304  function resetHydrationState() {
305    hydrationParentFiber = null;
306    nextHydratableInstance = null;
307    isHydrating = false;
308  }
309
310  return {
311    enterHydrationState,
312    resetHydrationState,
313    tryToClaimNextHydratableInstance,
314    prepareToHydrateHostInstance,
315    prepareToHydrateHostTextInstance,
316    popHydrationState,
317  };
318};
319
Full Screen

HostConfigWithNoHydration.js

Source: HostConfigWithNoHydration.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 the React source tree.
6 *
7 * @flow
8 */
9
10import invariant from 'invariant';
11
12// Renderers that don't support hydration
13// can re-export everything from this module.
14
15function shim(...args: any) {
16  invariant(
17    false,
18    'The current renderer does not support hydration. ' +
19      'This error is likely caused by a bug in React. ' +
20      'Please file an issue.',
21  );
22}
23
24// Hydration (when unsupported)
25export type SuspenseInstance = mixed;
26export const supportsHydration = false;
27export const canHydrateInstance = shim;
28export const canHydrateTextInstance = shim;
29export const canHydrateSuspenseInstance = shim;
30export const isSuspenseInstancePending = shim;
31export const isSuspenseInstanceFallback = shim;
32export const registerSuspenseInstanceRetry = shim;
33export const getNextHydratableSibling = shim;
34export const getFirstHydratableChild = shim;
35export const hydrateInstance = shim;
36export const hydrateTextInstance = shim;
37export const getNextHydratableInstanceAfterSuspenseInstance = shim;
38export const clearSuspenseBoundary = shim;
39export const clearSuspenseBoundaryFromContainer = shim;
40export const didNotMatchHydratedContainerTextInstance = shim;
41export const didNotMatchHydratedTextInstance = shim;
42export const didNotHydrateContainerInstance = shim;
43export const didNotHydrateInstance = shim;
44export const didNotFindHydratableContainerInstance = shim;
45export const didNotFindHydratableContainerTextInstance = shim;
46export const didNotFindHydratableContainerSuspenseInstance = shim;
47export const didNotFindHydratableInstance = shim;
48export const didNotFindHydratableTextInstance = shim;
49export const didNotFindHydratableSuspenseInstance = shim;
50
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)