How to use bailoutOnAlreadyFinishedWork method in Playwright Internal

Best JavaScript code snippet using playwright-internal

ReactFiberBeginWork.js

Source:ReactFiberBeginWork.js Github

copy

Full Screen

...152 // we don't do the bailout and we have to reuse existing props instead.153 } else if (workInProgress.memoizedProps === nextProps) {154 const currentRef = current !== null ? current.ref : null;155 if (ref === currentRef) {156 return bailoutOnAlreadyFinishedWork(current, workInProgress);157 }158 }159 let nextChildren;160 if (__DEV__) {161 ReactCurrentOwner.current = workInProgress;162 ReactCurrentFiber.setCurrentPhase('render');163 nextChildren = render(nextProps, ref);164 ReactCurrentFiber.setCurrentPhase(null);165 } else {166 nextChildren = render(nextProps, ref);167 }168 reconcileChildren(current, workInProgress, nextChildren);169 memoizeProps(workInProgress, nextProps);170 return workInProgress.child;171}172function updateFragment(current, workInProgress) {173 const nextChildren = workInProgress.pendingProps;174 if (hasLegacyContextChanged()) {175 // Normally we can bail out on props equality but if context has changed176 // we don't do the bailout and we have to reuse existing props instead.177 } else if (workInProgress.memoizedProps === nextChildren) {178 return bailoutOnAlreadyFinishedWork(current, workInProgress);179 }180 reconcileChildren(current, workInProgress, nextChildren);181 memoizeProps(workInProgress, nextChildren);182 return workInProgress.child;183}184function updateMode(current, workInProgress) {185 const nextChildren = workInProgress.pendingProps.children;186 if (hasLegacyContextChanged()) {187 // Normally we can bail out on props equality but if context has changed188 // we don't do the bailout and we have to reuse existing props instead.189 } else if (190 nextChildren === null ||191 workInProgress.memoizedProps === nextChildren192 ) {193 return bailoutOnAlreadyFinishedWork(current, workInProgress);194 }195 reconcileChildren(current, workInProgress, nextChildren);196 memoizeProps(workInProgress, nextChildren);197 return workInProgress.child;198}199function updateProfiler(current, workInProgress) {200 const nextProps = workInProgress.pendingProps;201 if (enableProfilerTimer) {202 workInProgress.effectTag |= Update;203 }204 if (workInProgress.memoizedProps === nextProps) {205 return bailoutOnAlreadyFinishedWork(current, workInProgress);206 }207 const nextChildren = nextProps.children;208 reconcileChildren(current, workInProgress, nextChildren);209 memoizeProps(workInProgress, nextProps);210 return workInProgress.child;211}212function markRef(current: Fiber | null, workInProgress: Fiber) {213 const ref = workInProgress.ref;214 if (215 (current === null && ref !== null) ||216 (current !== null && current.ref !== ref)217 ) {218 // Schedule a Ref effect219 workInProgress.effectTag |= Ref;220 }221}222function updateFunctionalComponent(current, workInProgress) {223 const fn = workInProgress.type;224 const nextProps = workInProgress.pendingProps;225 if (hasLegacyContextChanged()) {226 // Normally we can bail out on props equality but if context has changed227 // we don't do the bailout and we have to reuse existing props instead.228 } else {229 if (workInProgress.memoizedProps === nextProps) {230 return bailoutOnAlreadyFinishedWork(current, workInProgress);231 }232 // TODO: consider bringing fn.shouldComponentUpdate() back.233 // It used to be here.234 }235 const unmaskedContext = getUnmaskedContext(workInProgress);236 const context = getMaskedContext(workInProgress, unmaskedContext);237 let nextChildren;238 if (__DEV__) {239 ReactCurrentOwner.current = workInProgress;240 ReactCurrentFiber.setCurrentPhase('render');241 nextChildren = fn(nextProps, context);242 ReactCurrentFiber.setCurrentPhase(null);243 } else {244 nextChildren = fn(nextProps, context);245 }246 // React DevTools reads this flag.247 workInProgress.effectTag |= PerformedWork;248 reconcileChildren(current, workInProgress, nextChildren);249 memoizeProps(workInProgress, nextProps);250 return workInProgress.child;251}252function updateClassComponent(253 current: Fiber | null,254 workInProgress: Fiber,255 renderExpirationTime: ExpirationTime,256) {257 // Push context providers early to prevent context stack mismatches.258 // During mounting we don't know the child context yet as the instance doesn't exist.259 // We will invalidate the child context in finishClassComponent() right after rendering.260 const hasContext = pushLegacyContextProvider(workInProgress);261 let shouldUpdate;262 if (current === null) {263 if (workInProgress.stateNode === null) {264 // In the initial pass we might need to construct the instance.265 constructClassInstance(266 workInProgress,267 workInProgress.pendingProps,268 renderExpirationTime,269 );270 mountClassInstance(workInProgress, renderExpirationTime);271 shouldUpdate = true;272 } else {273 // In a resume, we'll already have an instance we can reuse.274 shouldUpdate = resumeMountClassInstance(275 workInProgress,276 renderExpirationTime,277 );278 }279 } else {280 shouldUpdate = updateClassInstance(281 current,282 workInProgress,283 renderExpirationTime,284 );285 }286 return finishClassComponent(287 current,288 workInProgress,289 shouldUpdate,290 hasContext,291 renderExpirationTime,292 );293}294function finishClassComponent(295 current: Fiber | null,296 workInProgress: Fiber,297 shouldUpdate: boolean,298 hasContext: boolean,299 renderExpirationTime: ExpirationTime,300) {301 // Refs should update even if shouldComponentUpdate returns false302 markRef(current, workInProgress);303 const didCaptureError = (workInProgress.effectTag & DidCapture) !== NoEffect;304 if (!shouldUpdate && !didCaptureError) {305 // Context providers should defer to sCU for rendering306 if (hasContext) {307 invalidateContextProvider(workInProgress, false);308 }309 return bailoutOnAlreadyFinishedWork(current, workInProgress);310 }311 const ctor = workInProgress.type;312 const instance = workInProgress.stateNode;313 // Rerender314 ReactCurrentOwner.current = workInProgress;315 let nextChildren;316 if (317 didCaptureError &&318 (!enableGetDerivedStateFromCatch ||319 typeof ctor.getDerivedStateFromCatch !== 'function')320 ) {321 // If we captured an error, but getDerivedStateFrom catch is not defined,322 // unmount all the children. componentDidCatch will schedule an update to323 // re-render a fallback. This is temporary until we migrate everyone to324 // the new API.325 // TODO: Warn in a future release.326 nextChildren = null;327 if (enableProfilerTimer) {328 stopBaseRenderTimerIfRunning();329 }330 } else {331 if (__DEV__) {332 ReactCurrentFiber.setCurrentPhase('render');333 nextChildren = instance.render();334 if (335 debugRenderPhaseSideEffects ||336 (debugRenderPhaseSideEffectsForStrictMode &&337 workInProgress.mode & StrictMode)338 ) {339 instance.render();340 }341 ReactCurrentFiber.setCurrentPhase(null);342 } else {343 nextChildren = instance.render();344 }345 }346 // React DevTools reads this flag.347 workInProgress.effectTag |= PerformedWork;348 if (current !== null && didCaptureError) {349 // If we're recovering from an error, reconcile twice: first to delete350 // all the existing children.351 reconcileChildrenAtExpirationTime(352 current,353 workInProgress,354 null,355 renderExpirationTime,356 );357 workInProgress.child = null;358 // Now we can continue reconciling like normal. This has the effect of359 // remounting all children regardless of whether their their360 // identity matches.361 }362 reconcileChildrenAtExpirationTime(363 current,364 workInProgress,365 nextChildren,366 renderExpirationTime,367 );368 // Memoize props and state using the values we just used to render.369 // TODO: Restructure so we never read values from the instance.370 memoizeState(workInProgress, instance.state);371 memoizeProps(workInProgress, instance.props);372 // The context might have changed so we need to recalculate it.373 if (hasContext) {374 invalidateContextProvider(workInProgress, true);375 }376 return workInProgress.child;377}378function pushHostRootContext(workInProgress) {379 const root = (workInProgress.stateNode: FiberRoot);380 if (root.pendingContext) {381 pushTopLevelContextObject(382 workInProgress,383 root.pendingContext,384 root.pendingContext !== root.context,385 );386 } else if (root.context) {387 // Should always be set388 pushTopLevelContextObject(workInProgress, root.context, false);389 }390 pushHostContainer(workInProgress, root.containerInfo);391}392function updateHostRoot(current, workInProgress, renderExpirationTime) {393 pushHostRootContext(workInProgress);394 let updateQueue = workInProgress.updateQueue;395 if (updateQueue !== null) {396 const nextProps = workInProgress.pendingProps;397 const prevState = workInProgress.memoizedState;398 const prevChildren = prevState !== null ? prevState.element : null;399 processUpdateQueue(400 workInProgress,401 updateQueue,402 nextProps,403 null,404 renderExpirationTime,405 );406 const nextState = workInProgress.memoizedState;407 // Caution: React DevTools currently depends on this property408 // being called "element".409 const nextChildren = nextState.element;410 if (nextChildren === prevChildren) {411 // If the state is the same as before, that's a bailout because we had412 // no work that expires at this time.413 resetHydrationState();414 return bailoutOnAlreadyFinishedWork(current, workInProgress);415 }416 const root: FiberRoot = workInProgress.stateNode;417 if (418 (current === null || current.child === null) &&419 root.hydrate &&420 enterHydrationState(workInProgress)421 ) {422 // If we don't have any current children this might be the first pass.423 // We always try to hydrate. If this isn't a hydration pass there won't424 // be any children to hydrate which is effectively the same thing as425 // not hydrating.426 // This is a bit of a hack. We track the host root as a placement to427 // know that we're currently in a mounting state. That way isMounted428 // works as expected. We must reset this before committing.429 // TODO: Delete this when we delete isMounted and findDOMNode.430 workInProgress.effectTag |= Placement;431 // Ensure that children mount into this root without tracking432 // side-effects. This ensures that we don't store Placement effects on433 // nodes that will be hydrated.434 workInProgress.child = mountChildFibers(435 workInProgress,436 null,437 nextChildren,438 renderExpirationTime,439 );440 } else {441 // Otherwise reset hydration state in case we aborted and resumed another442 // root.443 resetHydrationState();444 reconcileChildren(current, workInProgress, nextChildren);445 }446 return workInProgress.child;447 }448 resetHydrationState();449 // If there is no update queue, that's a bailout because the root has no props.450 return bailoutOnAlreadyFinishedWork(current, workInProgress);451}452function updateHostComponent(current, workInProgress, renderExpirationTime) {453 pushHostContext(workInProgress);454 if (current === null) {455 tryToClaimNextHydratableInstance(workInProgress);456 }457 const type = workInProgress.type;458 const memoizedProps = workInProgress.memoizedProps;459 const nextProps = workInProgress.pendingProps;460 const prevProps = current !== null ? current.memoizedProps : null;461 if (hasLegacyContextChanged()) {462 // Normally we can bail out on props equality but if context has changed463 // we don't do the bailout and we have to reuse existing props instead.464 } else if (memoizedProps === nextProps) {465 const isHidden =466 workInProgress.mode & AsyncMode &&467 shouldDeprioritizeSubtree(type, nextProps);468 if (isHidden) {469 // Before bailing out, make sure we've deprioritized a hidden component.470 workInProgress.expirationTime = Never;471 }472 if (!isHidden || renderExpirationTime !== Never) {473 return bailoutOnAlreadyFinishedWork(current, workInProgress);474 }475 // If we're rendering a hidden node at hidden priority, don't bailout. The476 // parent is complete, but the children may not be.477 }478 let nextChildren = nextProps.children;479 const isDirectTextChild = shouldSetTextContent(type, nextProps);480 if (isDirectTextChild) {481 // We special case a direct text child of a host node. This is a common482 // case. We won't handle it as a reified child. We will instead handle483 // this in the host environment that also have access to this prop. That484 // avoids allocating another HostText fiber and traversing it.485 nextChildren = null;486 } else if (prevProps && shouldSetTextContent(type, prevProps)) {487 // If we're switching from a direct text child to a normal child, or to488 // empty, we need to schedule the text content to be reset.489 workInProgress.effectTag |= ContentReset;490 }491 markRef(current, workInProgress);492 // Check the host config to see if the children are offscreen/hidden.493 if (494 renderExpirationTime !== Never &&495 workInProgress.mode & AsyncMode &&496 shouldDeprioritizeSubtree(type, nextProps)497 ) {498 // Down-prioritize the children.499 workInProgress.expirationTime = Never;500 // Bailout and come back to this fiber later.501 workInProgress.memoizedProps = nextProps;502 return null;503 }504 reconcileChildren(current, workInProgress, nextChildren);505 memoizeProps(workInProgress, nextProps);506 return workInProgress.child;507}508function updateHostText(current, workInProgress) {509 if (current === null) {510 tryToClaimNextHydratableInstance(workInProgress);511 }512 const nextProps = workInProgress.pendingProps;513 memoizeProps(workInProgress, nextProps);514 // Nothing to do here. This is terminal. We'll do the completion step515 // immediately after.516 return null;517}518function mountIndeterminateComponent(519 current,520 workInProgress,521 renderExpirationTime,522) {523 invariant(524 current === null,525 'An indeterminate component should never have mounted. This error is ' +526 'likely caused by a bug in React. Please file an issue.',527 );528 const fn = workInProgress.type;529 const props = workInProgress.pendingProps;530 const unmaskedContext = getUnmaskedContext(workInProgress);531 const context = getMaskedContext(workInProgress, unmaskedContext);532 let value;533 if (__DEV__) {534 if (fn.prototype && typeof fn.prototype.render === 'function') {535 const componentName = getComponentName(fn) || 'Unknown';536 if (!didWarnAboutBadClass[componentName]) {537 warning(538 false,539 "The <%s /> component appears to have a render method, but doesn't extend React.Component. " +540 'This is likely to cause errors. Change %s to extend React.Component instead.',541 componentName,542 componentName,543 );544 didWarnAboutBadClass[componentName] = true;545 }546 }547 if (workInProgress.mode & StrictMode) {548 ReactStrictModeWarnings.recordLegacyContextWarning(workInProgress, null);549 }550 ReactCurrentOwner.current = workInProgress;551 value = fn(props, context);552 } else {553 value = fn(props, context);554 }555 // React DevTools reads this flag.556 workInProgress.effectTag |= PerformedWork;557 if (558 typeof value === 'object' &&559 value !== null &&560 typeof value.render === 'function' &&561 value.$$typeof === undefined562 ) {563 const Component = workInProgress.type;564 // Proceed under the assumption that this is a class instance565 workInProgress.tag = ClassComponent;566 workInProgress.memoizedState =567 value.state !== null && value.state !== undefined ? value.state : null;568 const getDerivedStateFromProps = Component.getDerivedStateFromProps;569 if (typeof getDerivedStateFromProps === 'function') {570 applyDerivedStateFromProps(571 workInProgress,572 getDerivedStateFromProps,573 props,574 );575 }576 // Push context providers early to prevent context stack mismatches.577 // During mounting we don't know the child context yet as the instance doesn't exist.578 // We will invalidate the child context in finishClassComponent() right after rendering.579 const hasContext = pushLegacyContextProvider(workInProgress);580 adoptClassInstance(workInProgress, value);581 mountClassInstance(workInProgress, renderExpirationTime);582 return finishClassComponent(583 current,584 workInProgress,585 true,586 hasContext,587 renderExpirationTime,588 );589 } else {590 // Proceed under the assumption that this is a functional component591 workInProgress.tag = FunctionalComponent;592 if (__DEV__) {593 const Component = workInProgress.type;594 if (Component) {595 warning(596 !Component.childContextTypes,597 '%s(...): childContextTypes cannot be defined on a functional component.',598 Component.displayName || Component.name || 'Component',599 );600 }601 if (workInProgress.ref !== null) {602 let info = '';603 const ownerName = ReactCurrentFiber.getCurrentFiberOwnerNameInDevOrNull();604 if (ownerName) {605 info += '\n\nCheck the render method of `' + ownerName + '`.';606 }607 let warningKey = ownerName || workInProgress._debugID || '';608 const debugSource = workInProgress._debugSource;609 if (debugSource) {610 warningKey = debugSource.fileName + ':' + debugSource.lineNumber;611 }612 if (!didWarnAboutStatelessRefs[warningKey]) {613 didWarnAboutStatelessRefs[warningKey] = true;614 warning(615 false,616 'Stateless function components cannot be given refs. ' +617 'Attempts to access this ref will fail.%s%s',618 info,619 ReactCurrentFiber.getCurrentFiberStackInDev(),620 );621 }622 }623 if (typeof fn.getDerivedStateFromProps === 'function') {624 const componentName = getComponentName(fn) || 'Unknown';625 if (!didWarnAboutGetDerivedStateOnFunctionalComponent[componentName]) {626 warning(627 false,628 '%s: Stateless functional components do not support getDerivedStateFromProps.',629 componentName,630 );631 didWarnAboutGetDerivedStateOnFunctionalComponent[632 componentName633 ] = true;634 }635 }636 }637 reconcileChildren(current, workInProgress, value);638 memoizeProps(workInProgress, props);639 return workInProgress.child;640 }641}642function updatePlaceholderComponent(643 current,644 workInProgress,645 renderExpirationTime,646) {647 if (enableSuspense) {648 const nextProps = workInProgress.pendingProps;649 const prevProps = workInProgress.memoizedProps;650 const prevDidTimeout = workInProgress.memoizedState === true;651 // Check if we already attempted to render the normal state. If we did,652 // and we timed out, render the placeholder state.653 const alreadyCaptured =654 (workInProgress.effectTag & DidCapture) === NoEffect;655 let nextDidTimeout;656 if (current !== null && workInProgress.updateQueue !== null) {657 // We're outside strict mode. Something inside this Placeholder boundary658 // suspended during the last commit. Switch to the placholder.659 workInProgress.updateQueue = null;660 nextDidTimeout = true;661 // If we're recovering from an error, reconcile twice: first to delete662 // all the existing children.663 reconcileChildrenAtExpirationTime(664 current,665 workInProgress,666 null,667 renderExpirationTime,668 );669 current.child = null;670 // Now we can continue reconciling like normal. This has the effect of671 // remounting all children regardless of whether their their672 // identity matches.673 } else {674 nextDidTimeout = !alreadyCaptured;675 }676 if (hasLegacyContextChanged()) {677 // Normally we can bail out on props equality but if context has changed678 // we don't do the bailout and we have to reuse existing props instead.679 } else if (nextProps === prevProps && nextDidTimeout === prevDidTimeout) {680 return bailoutOnAlreadyFinishedWork(current, workInProgress);681 }682 if ((workInProgress.mode & StrictMode) !== NoEffect) {683 if (nextDidTimeout) {684 // If the timed-out view commits, schedule an update effect to record685 // the committed time.686 workInProgress.effectTag |= Update;687 } else {688 // The state node points to the time at which placeholder timed out.689 // We can clear it once we switch back to the normal children.690 workInProgress.stateNode = null;691 }692 }693 // If the `children` prop is a function, treat it like a render prop.694 // TODO: This is temporary until we finalize a lower level API.695 const children = nextProps.children;696 let nextChildren;697 if (typeof children === 'function') {698 nextChildren = children(nextDidTimeout);699 } else {700 nextChildren = nextDidTimeout ? nextProps.fallback : children;701 }702 workInProgress.memoizedProps = nextProps;703 workInProgress.memoizedState = nextDidTimeout;704 reconcileChildren(current, workInProgress, nextChildren);705 return workInProgress.child;706 } else {707 return null;708 }709}710function updatePortalComponent(current, workInProgress, renderExpirationTime) {711 pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);712 const nextChildren = workInProgress.pendingProps;713 if (hasLegacyContextChanged()) {714 // Normally we can bail out on props equality but if context has changed715 // we don't do the bailout and we have to reuse existing props instead.716 } else if (workInProgress.memoizedProps === nextChildren) {717 return bailoutOnAlreadyFinishedWork(current, workInProgress);718 }719 if (current === null) {720 // Portals are special because we don't append the children during mount721 // but at commit. Therefore we need to track insertions which the normal722 // flow doesn't do during mount. This doesn't happen at the root because723 // the root always starts with a "current" with a null child.724 // TODO: Consider unifying this with how the root works.725 workInProgress.child = reconcileChildFibers(726 workInProgress,727 null,728 nextChildren,729 renderExpirationTime,730 );731 memoizeProps(workInProgress, nextChildren);732 } else {733 reconcileChildren(current, workInProgress, nextChildren);734 memoizeProps(workInProgress, nextChildren);735 }736 return workInProgress.child;737}738function propagateContextChange<V>(739 workInProgress: Fiber,740 context: ReactContext<V>,741 changedBits: number,742 renderExpirationTime: ExpirationTime,743): void {744 let fiber = workInProgress.child;745 if (fiber !== null) {746 // Set the return pointer of the child to the work-in-progress fiber.747 fiber.return = workInProgress;748 }749 while (fiber !== null) {750 let nextFiber;751 // Visit this fiber.752 switch (fiber.tag) {753 case ContextConsumer:754 // Check if the context matches.755 const observedBits: number = fiber.stateNode | 0;756 if (fiber.type === context && (observedBits & changedBits) !== 0) {757 // Update the expiration time of all the ancestors, including758 // the alternates.759 let node = fiber;760 do {761 const alternate = node.alternate;762 if (763 node.expirationTime === NoWork ||764 node.expirationTime > renderExpirationTime765 ) {766 node.expirationTime = renderExpirationTime;767 if (768 alternate !== null &&769 (alternate.expirationTime === NoWork ||770 alternate.expirationTime > renderExpirationTime)771 ) {772 alternate.expirationTime = renderExpirationTime;773 }774 } else if (775 alternate !== null &&776 (alternate.expirationTime === NoWork ||777 alternate.expirationTime > renderExpirationTime)778 ) {779 alternate.expirationTime = renderExpirationTime;780 } else {781 // Neither alternate was updated, which means the rest of the782 // ancestor path already has sufficient priority.783 break;784 }785 node = node.return;786 } while (node !== null);787 // Don't scan deeper than a matching consumer. When we render the788 // consumer, we'll continue scanning from that point. This way the789 // scanning work is time-sliced.790 nextFiber = null;791 } else {792 // Traverse down.793 nextFiber = fiber.child;794 }795 break;796 case ContextProvider:797 // Don't scan deeper if this is a matching provider798 nextFiber = fiber.type === workInProgress.type ? null : fiber.child;799 break;800 default:801 // Traverse down.802 nextFiber = fiber.child;803 break;804 }805 if (nextFiber !== null) {806 // Set the return pointer of the child to the work-in-progress fiber.807 nextFiber.return = fiber;808 } else {809 // No child. Traverse to next sibling.810 nextFiber = fiber;811 while (nextFiber !== null) {812 if (nextFiber === workInProgress) {813 // We're back to the root of this subtree. Exit.814 nextFiber = null;815 break;816 }817 let sibling = nextFiber.sibling;818 if (sibling !== null) {819 // Set the return pointer of the sibling to the work-in-progress fiber.820 sibling.return = nextFiber.return;821 nextFiber = sibling;822 break;823 }824 // No more siblings. Traverse up.825 nextFiber = nextFiber.return;826 }827 }828 fiber = nextFiber;829 }830}831function updateContextProvider(current, workInProgress, renderExpirationTime) {832 const providerType: ReactProviderType<any> = workInProgress.type;833 const context: ReactContext<any> = providerType._context;834 const newProps = workInProgress.pendingProps;835 const oldProps = workInProgress.memoizedProps;836 let canBailOnProps = true;837 if (hasLegacyContextChanged()) {838 canBailOnProps = false;839 // Normally we can bail out on props equality but if context has changed840 // we don't do the bailout and we have to reuse existing props instead.841 } else if (oldProps === newProps) {842 workInProgress.stateNode = 0;843 pushProvider(workInProgress);844 return bailoutOnAlreadyFinishedWork(current, workInProgress);845 }846 const newValue = newProps.value;847 workInProgress.memoizedProps = newProps;848 if (__DEV__) {849 const providerPropTypes = workInProgress.type.propTypes;850 if (providerPropTypes) {851 checkPropTypes(852 providerPropTypes,853 newProps,854 'prop',855 'Context.Provider',856 ReactCurrentFiber.getCurrentFiberStackInDev,857 );858 }859 }860 let changedBits: number;861 if (oldProps === null) {862 // Initial render863 changedBits = MAX_SIGNED_31_BIT_INT;864 } else {865 if (oldProps.value === newProps.value) {866 // No change. Bailout early if children are the same.867 if (oldProps.children === newProps.children && canBailOnProps) {868 workInProgress.stateNode = 0;869 pushProvider(workInProgress);870 return bailoutOnAlreadyFinishedWork(current, workInProgress);871 }872 changedBits = 0;873 } else {874 const oldValue = oldProps.value;875 // Use Object.is to compare the new context value to the old value.876 // Inlined Object.is polyfill.877 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is878 if (879 (oldValue === newValue &&880 (oldValue !== 0 || 1 / oldValue === 1 / newValue)) ||881 (oldValue !== oldValue && newValue !== newValue) // eslint-disable-line no-self-compare882 ) {883 // No change. Bailout early if children are the same.884 if (oldProps.children === newProps.children && canBailOnProps) {885 workInProgress.stateNode = 0;886 pushProvider(workInProgress);887 return bailoutOnAlreadyFinishedWork(current, workInProgress);888 }889 changedBits = 0;890 } else {891 changedBits =892 typeof context._calculateChangedBits === 'function'893 ? context._calculateChangedBits(oldValue, newValue)894 : MAX_SIGNED_31_BIT_INT;895 if (__DEV__) {896 warning(897 (changedBits & MAX_SIGNED_31_BIT_INT) === changedBits,898 'calculateChangedBits: Expected the return value to be a ' +899 '31-bit integer. Instead received: %s',900 changedBits,901 );902 }903 changedBits |= 0;904 if (changedBits === 0) {905 // No change. Bailout early if children are the same.906 if (oldProps.children === newProps.children && canBailOnProps) {907 workInProgress.stateNode = 0;908 pushProvider(workInProgress);909 return bailoutOnAlreadyFinishedWork(current, workInProgress);910 }911 } else {912 propagateContextChange(913 workInProgress,914 context,915 changedBits,916 renderExpirationTime,917 );918 }919 }920 }921 }922 workInProgress.stateNode = changedBits;923 pushProvider(workInProgress);924 const newChildren = newProps.children;925 reconcileChildren(current, workInProgress, newChildren);926 return workInProgress.child;927}928function updateContextConsumer(current, workInProgress, renderExpirationTime) {929 const context: ReactContext<any> = workInProgress.type;930 const newProps = workInProgress.pendingProps;931 const oldProps = workInProgress.memoizedProps;932 const newValue = getContextCurrentValue(context);933 const changedBits = getContextChangedBits(context);934 if (hasLegacyContextChanged()) {935 // Normally we can bail out on props equality but if context has changed936 // we don't do the bailout and we have to reuse existing props instead.937 } else if (changedBits === 0 && oldProps === newProps) {938 return bailoutOnAlreadyFinishedWork(current, workInProgress);939 }940 workInProgress.memoizedProps = newProps;941 let observedBits = newProps.unstable_observedBits;942 if (observedBits === undefined || observedBits === null) {943 // Subscribe to all changes by default944 observedBits = MAX_SIGNED_31_BIT_INT;945 }946 // Store the observedBits on the fiber's stateNode for quick access.947 workInProgress.stateNode = observedBits;948 if ((changedBits & observedBits) !== 0) {949 // Context change propagation stops at matching consumers, for time-950 // slicing. Continue the propagation here.951 propagateContextChange(952 workInProgress,953 context,954 changedBits,955 renderExpirationTime,956 );957 } else if (oldProps === newProps) {958 // Skip over a memoized parent with a bitmask bailout even959 // if we began working on it because of a deeper matching child.960 return bailoutOnAlreadyFinishedWork(current, workInProgress);961 }962 // There is no bailout on `children` equality because we expect people963 // to often pass a bound method as a child, but it may reference964 // `this.state` or `this.props` (and thus needs to re-render on `setState`).965 const render = newProps.children;966 if (__DEV__) {967 warning(968 typeof render === 'function',969 'A context consumer was rendered with multiple children, or a child ' +970 "that isn't a function. A context consumer expects a single child " +971 'that is a function. If you did pass a function, make sure there ' +972 'is no trailing or leading whitespace around it.',973 );974 }975 let newChildren;976 if (__DEV__) {977 ReactCurrentOwner.current = workInProgress;978 ReactCurrentFiber.setCurrentPhase('render');979 newChildren = render(newValue);980 ReactCurrentFiber.setCurrentPhase(null);981 } else {982 newChildren = render(newValue);983 }984 // React DevTools reads this flag.985 workInProgress.effectTag |= PerformedWork;986 reconcileChildren(current, workInProgress, newChildren);987 return workInProgress.child;988}989/*990 function reuseChildrenEffects(returnFiber : Fiber, firstChild : Fiber) {991 let child = firstChild;992 do {993 // Ensure that the first and last effect of the parent corresponds994 // to the children's first and last effect.995 if (!returnFiber.firstEffect) {996 returnFiber.firstEffect = child.firstEffect;997 }998 if (child.lastEffect) {999 if (returnFiber.lastEffect) {1000 returnFiber.lastEffect.nextEffect = child.firstEffect;1001 }1002 returnFiber.lastEffect = child.lastEffect;1003 }1004 } while (child = child.sibling);1005 }1006 */1007function bailoutOnAlreadyFinishedWork(1008 current,1009 workInProgress: Fiber,1010): Fiber | null {1011 cancelWorkTimer(workInProgress);1012 if (enableProfilerTimer) {1013 // Don't update "base" render times for bailouts.1014 stopBaseRenderTimerIfRunning();1015 }1016 // TODO: We should ideally be able to bail out early if the children have no1017 // more work to do. However, since we don't have a separation of this1018 // Fiber's priority and its children yet - we don't know without doing lots1019 // of the same work we do anyway. Once we have that separation we can just1020 // bail out here if the children has no more work at this priority level.1021 // if (workInProgress.priorityOfChildren <= priorityLevel) {...

Full Screen

Full Screen

b0ea876b301f63c96d702a493f5ebd456144bcReactFiberBeginWork.js

Source:b0ea876b301f63c96d702a493f5ebd456144bcReactFiberBeginWork.js Github

copy

Full Screen

...94 if (nextChildren === null) {95 nextChildren = workInProgress.memoizedProps;96 }97 } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {98 return bailoutOnAlreadyFinishedWork(current, workInProgress);99 }100 reconcileChildren(current, workInProgress, nextChildren);101 memoizeProps(workInProgress, nextChildren);102 return workInProgress.child;103 }104 function markRef(current, workInProgress) {105 var ref = workInProgress.ref;106 if (ref !== null && (!current || current.ref !== ref)) {107 workInProgress.effectTag |= Ref;108 }109 }110 function updateFunctionalComponent(current, workInProgress) {111 var fn = workInProgress.type;112 var nextProps = workInProgress.pendingProps;113 var memoizedProps = workInProgress.memoizedProps;114 if (hasContextChanged()) {115 if (nextProps === null) {116 nextProps = memoizedProps;117 }118 } else {119 if (nextProps === null || memoizedProps === nextProps) {120 return bailoutOnAlreadyFinishedWork(current, workInProgress);121 }122 if (typeof fn.shouldComponentUpdate === 'function' && !fn.shouldComponentUpdate(memoizedProps, nextProps)) {123 memoizeProps(workInProgress, nextProps);124 return bailoutOnAlreadyFinishedWork(current, workInProgress);125 }126 }127 var unmaskedContext = getUnmaskedContext(workInProgress);128 var context = getMaskedContext(workInProgress, unmaskedContext);129 var nextChildren;130 if (__DEV__) {131 ReactCurrentOwner.current = workInProgress;132 ReactDebugCurrentFiber.phase = 'render';133 nextChildren = fn(nextProps, context);134 ReactDebugCurrentFiber.phase = null;135 } else {136 nextChildren = fn(nextProps, context);137 }138 reconcileChildren(current, workInProgress, nextChildren);139 memoizeProps(workInProgress, nextProps);140 return workInProgress.child;141 }142 function updateClassComponent(current, workInProgress, priorityLevel) {143 var hasContext = pushContextProvider(workInProgress);144 var shouldUpdate = void 0;145 if (current === null) {146 if (!workInProgress.stateNode) {147 constructClassInstance(workInProgress);148 mountClassInstance(workInProgress, priorityLevel);149 shouldUpdate = true;150 } else {151 shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);152 }153 } else {154 shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);155 }156 return finishClassComponent(current, workInProgress, shouldUpdate, hasContext);157 }158 function finishClassComponent(current, workInProgress, shouldUpdate, hasContext) {159 markRef(current, workInProgress);160 if (!shouldUpdate) {161 return bailoutOnAlreadyFinishedWork(current, workInProgress);162 }163 var instance = workInProgress.stateNode;164 ReactCurrentOwner.current = workInProgress;165 var nextChildren = void 0;166 if (__DEV__) {167 ReactDebugCurrentFiber.phase = 'render';168 nextChildren = instance.render();169 ReactDebugCurrentFiber.phase = null;170 } else {171 nextChildren = instance.render();172 }173 reconcileChildren(current, workInProgress, nextChildren);174 memoizeState(workInProgress, instance.state);175 memoizeProps(workInProgress, instance.props);176 if (hasContext) {177 invalidateContextProvider(workInProgress);178 }179 return workInProgress.child;180 }181 function updateHostRoot(current, workInProgress, priorityLevel) {182 var root = workInProgress.stateNode;183 if (root.pendingContext) {184 pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);185 } else if (root.context) {186 pushTopLevelContextObject(workInProgress, root.context, false);187 }188 pushHostContainer(workInProgress, root.containerInfo);189 var updateQueue = workInProgress.updateQueue;190 if (updateQueue !== null) {191 var prevState = workInProgress.memoizedState;192 var state = beginUpdateQueue(workInProgress, updateQueue, null, prevState, null, priorityLevel);193 if (prevState === state) {194 return bailoutOnAlreadyFinishedWork(current, workInProgress);195 }196 var element = state.element;197 reconcileChildren(current, workInProgress, element);198 memoizeState(workInProgress, state);199 return workInProgress.child;200 }201 return bailoutOnAlreadyFinishedWork(current, workInProgress);202 }203 function updateHostComponent(current, workInProgress) {204 pushHostContext(workInProgress);205 var nextProps = workInProgress.pendingProps;206 var prevProps = current !== null ? current.memoizedProps : null;207 var memoizedProps = workInProgress.memoizedProps;208 if (hasContextChanged()) {209 if (nextProps === null) {210 nextProps = memoizedProps;211 invariant(nextProps !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');212 }213 } else if (nextProps === null || memoizedProps === nextProps) {214 if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, memoizedProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {215 var child = workInProgress.progressedChild;216 while (child !== null) {217 child.pendingWorkPriority = OffscreenPriority;218 child = child.sibling;219 }220 return null;221 }222 return bailoutOnAlreadyFinishedWork(current, workInProgress);223 }224 var nextChildren = nextProps.children;225 var isDirectTextChild = shouldSetTextContent(nextProps);226 if (isDirectTextChild) {227 nextChildren = null;228 } else if (prevProps && shouldSetTextContent(prevProps)) {229 workInProgress.effectTag |= ContentReset;230 }231 markRef(current, workInProgress);232 if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, nextProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {233 if (workInProgress.progressedPriority === OffscreenPriority) {234 workInProgress.child = workInProgress.progressedChild;235 }236 reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);237 memoizeProps(workInProgress, nextProps);238 workInProgress.child = current !== null ? current.child : null;239 if (current === null) {240 var _child = workInProgress.progressedChild;241 while (_child !== null) {242 _child.effectTag = Placement;243 _child = _child.sibling;244 }245 }246 return null;247 } else {248 reconcileChildren(current, workInProgress, nextChildren);249 memoizeProps(workInProgress, nextProps);250 return workInProgress.child;251 }252 }253 function updateHostText(current, workInProgress) {254 var nextProps = workInProgress.pendingProps;255 if (nextProps === null) {256 nextProps = workInProgress.memoizedProps;257 }258 memoizeProps(workInProgress, nextProps);259 return null;260 }261 function mountIndeterminateComponent(current, workInProgress, priorityLevel) {262 invariant(current === null, 'An indeterminate component should never have mounted. This error is ' + 'likely caused by a bug in React. Please file an issue.');263 var fn = workInProgress.type;264 var props = workInProgress.pendingProps;265 var unmaskedContext = getUnmaskedContext(workInProgress);266 var context = getMaskedContext(workInProgress, unmaskedContext);267 var value;268 if (__DEV__) {269 ReactCurrentOwner.current = workInProgress;270 value = fn(props, context);271 } else {272 value = fn(props, context);273 }274 if (typeof value === 'object' && value !== null && typeof value.render === 'function') {275 workInProgress.tag = ClassComponent;276 var hasContext = pushContextProvider(workInProgress);277 adoptClassInstance(workInProgress, value);278 mountClassInstance(workInProgress, priorityLevel);279 return finishClassComponent(current, workInProgress, true, hasContext);280 } else {281 workInProgress.tag = FunctionalComponent;282 if (__DEV__) {283 var Component = workInProgress.type;284 if (Component) {285 warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');286 }287 if (workInProgress.ref !== null) {288 var info = '';289 var ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();290 if (ownerName) {291 info += '\n\nCheck the render method of `' + ownerName + '`.';292 }293 var warningKey = ownerName || workInProgress._debugID || '';294 var debugSource = workInProgress._debugSource;295 if (debugSource) {296 warningKey = debugSource.fileName + ':' + debugSource.lineNumber;297 }298 if (!warnedAboutStatelessRefs[warningKey]) {299 warnedAboutStatelessRefs[warningKey] = true;300 warning(false, 'Stateless function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s%s', info, ReactDebugCurrentFiber.getCurrentFiberStackAddendum());301 }302 }303 }304 reconcileChildren(current, workInProgress, value);305 memoizeProps(workInProgress, props);306 return workInProgress.child;307 }308 }309 function updateCoroutineComponent(current, workInProgress) {310 var nextCoroutine = workInProgress.pendingProps;311 if (hasContextChanged()) {312 if (nextCoroutine === null) {313 nextCoroutine = current && current.memoizedProps;314 invariant(nextCoroutine !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');315 }316 } else if (nextCoroutine === null || workInProgress.memoizedProps === nextCoroutine) {317 nextCoroutine = workInProgress.memoizedProps;318 }319 var nextChildren = nextCoroutine.children;320 var priorityLevel = workInProgress.pendingWorkPriority;321 workInProgress.memoizedProps = null;322 if (current === null) {323 workInProgress.stateNode = mountChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);324 } else if (current.child === workInProgress.child) {325 clearDeletions(workInProgress);326 workInProgress.stateNode = reconcileChildFibers(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);327 transferDeletions(workInProgress);328 } else {329 workInProgress.stateNode = reconcileChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);330 transferDeletions(workInProgress);331 }332 memoizeProps(workInProgress, nextCoroutine);333 return workInProgress.stateNode;334 }335 function updatePortalComponent(current, workInProgress) {336 pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);337 var priorityLevel = workInProgress.pendingWorkPriority;338 var nextChildren = workInProgress.pendingProps;339 if (hasContextChanged()) {340 if (nextChildren === null) {341 nextChildren = current && current.memoizedProps;342 invariant(nextChildren != null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');343 }344 } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {345 return bailoutOnAlreadyFinishedWork(current, workInProgress);346 }347 if (current === null) {348 workInProgress.child = reconcileChildFibersInPlace(workInProgress, workInProgress.child, nextChildren, priorityLevel);349 memoizeProps(workInProgress, nextChildren);350 markChildAsProgressed(current, workInProgress, priorityLevel);351 } else {352 reconcileChildren(current, workInProgress, nextChildren);353 memoizeProps(workInProgress, nextChildren);354 }355 return workInProgress.child;356 }357 function bailoutOnAlreadyFinishedWork(current, workInProgress) {358 if (__DEV__) {359 cancelWorkTimer(workInProgress);360 }361 var priorityLevel = workInProgress.pendingWorkPriority;362 if (current && workInProgress.child === current.child) {363 clearDeletions(workInProgress);364 }365 cloneChildFibers(current, workInProgress);366 markChildAsProgressed(current, workInProgress, priorityLevel);367 return workInProgress.child;368 }369 function bailoutOnLowPriority(current, workInProgress) {370 if (__DEV__) {371 cancelWorkTimer(workInProgress);...

Full Screen

Full Screen

8a2b1d695be0826d1657ee10d51695117eb487ReactFiberBeginWork.js

Source:8a2b1d695be0826d1657ee10d51695117eb487ReactFiberBeginWork.js Github

copy

Full Screen

...94 if (nextChildren === null) {95 nextChildren = workInProgress.memoizedProps;96 }97 } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {98 return bailoutOnAlreadyFinishedWork(current, workInProgress);99 }100 reconcileChildren(current, workInProgress, nextChildren);101 memoizeProps(workInProgress, nextChildren);102 return workInProgress.child;103 }104 function markRef(current, workInProgress) {105 var ref = workInProgress.ref;106 if (ref !== null && (!current || current.ref !== ref)) {107 workInProgress.effectTag |= Ref;108 }109 }110 function updateFunctionalComponent(current, workInProgress) {111 var fn = workInProgress.type;112 var nextProps = workInProgress.pendingProps;113 var memoizedProps = workInProgress.memoizedProps;114 if (hasContextChanged()) {115 if (nextProps === null) {116 nextProps = memoizedProps;117 }118 } else {119 if (nextProps === null || memoizedProps === nextProps) {120 return bailoutOnAlreadyFinishedWork(current, workInProgress);121 }122 if (typeof fn.shouldComponentUpdate === 'function' && !fn.shouldComponentUpdate(memoizedProps, nextProps)) {123 memoizeProps(workInProgress, nextProps);124 return bailoutOnAlreadyFinishedWork(current, workInProgress);125 }126 }127 var unmaskedContext = getUnmaskedContext(workInProgress);128 var context = getMaskedContext(workInProgress, unmaskedContext);129 var nextChildren;130 if (__DEV__) {131 ReactCurrentOwner.current = workInProgress;132 ReactDebugCurrentFiber.phase = 'render';133 nextChildren = fn(nextProps, context);134 ReactDebugCurrentFiber.phase = null;135 } else {136 nextChildren = fn(nextProps, context);137 }138 reconcileChildren(current, workInProgress, nextChildren);139 memoizeProps(workInProgress, nextProps);140 return workInProgress.child;141 }142 function updateClassComponent(current, workInProgress, priorityLevel) {143 var hasContext = pushContextProvider(workInProgress);144 var shouldUpdate = void 0;145 if (current === null) {146 if (!workInProgress.stateNode) {147 constructClassInstance(workInProgress);148 mountClassInstance(workInProgress, priorityLevel);149 shouldUpdate = true;150 } else {151 shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);152 }153 } else {154 shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);155 }156 return finishClassComponent(current, workInProgress, shouldUpdate, hasContext);157 }158 function finishClassComponent(current, workInProgress, shouldUpdate, hasContext) {159 markRef(current, workInProgress);160 if (!shouldUpdate) {161 return bailoutOnAlreadyFinishedWork(current, workInProgress);162 }163 var instance = workInProgress.stateNode;164 ReactCurrentOwner.current = workInProgress;165 var nextChildren = void 0;166 if (__DEV__) {167 ReactDebugCurrentFiber.phase = 'render';168 nextChildren = instance.render();169 ReactDebugCurrentFiber.phase = null;170 } else {171 nextChildren = instance.render();172 }173 reconcileChildren(current, workInProgress, nextChildren);174 memoizeState(workInProgress, instance.state);175 memoizeProps(workInProgress, instance.props);176 if (hasContext) {177 invalidateContextProvider(workInProgress);178 }179 return workInProgress.child;180 }181 function updateHostRoot(current, workInProgress, priorityLevel) {182 var root = workInProgress.stateNode;183 if (root.pendingContext) {184 pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);185 } else if (root.context) {186 pushTopLevelContextObject(workInProgress, root.context, false);187 }188 pushHostContainer(workInProgress, root.containerInfo);189 var updateQueue = workInProgress.updateQueue;190 if (updateQueue !== null) {191 var prevState = workInProgress.memoizedState;192 var state = beginUpdateQueue(workInProgress, updateQueue, null, prevState, null, priorityLevel);193 if (prevState === state) {194 return bailoutOnAlreadyFinishedWork(current, workInProgress);195 }196 var element = state.element;197 reconcileChildren(current, workInProgress, element);198 memoizeState(workInProgress, state);199 return workInProgress.child;200 }201 return bailoutOnAlreadyFinishedWork(current, workInProgress);202 }203 function updateHostComponent(current, workInProgress) {204 pushHostContext(workInProgress);205 var nextProps = workInProgress.pendingProps;206 var prevProps = current !== null ? current.memoizedProps : null;207 var memoizedProps = workInProgress.memoizedProps;208 if (hasContextChanged()) {209 if (nextProps === null) {210 nextProps = memoizedProps;211 invariant(nextProps !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');212 }213 } else if (nextProps === null || memoizedProps === nextProps) {214 if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, memoizedProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {215 var child = workInProgress.progressedChild;216 while (child !== null) {217 child.pendingWorkPriority = OffscreenPriority;218 child = child.sibling;219 }220 return null;221 }222 return bailoutOnAlreadyFinishedWork(current, workInProgress);223 }224 var nextChildren = nextProps.children;225 var isDirectTextChild = shouldSetTextContent(nextProps);226 if (isDirectTextChild) {227 nextChildren = null;228 } else if (prevProps && shouldSetTextContent(prevProps)) {229 workInProgress.effectTag |= ContentReset;230 }231 markRef(current, workInProgress);232 if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, nextProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {233 if (workInProgress.progressedPriority === OffscreenPriority) {234 workInProgress.child = workInProgress.progressedChild;235 }236 reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);237 memoizeProps(workInProgress, nextProps);238 workInProgress.child = current !== null ? current.child : null;239 if (current === null) {240 var _child = workInProgress.progressedChild;241 while (_child !== null) {242 _child.effectTag = Placement;243 _child = _child.sibling;244 }245 }246 return null;247 } else {248 reconcileChildren(current, workInProgress, nextChildren);249 memoizeProps(workInProgress, nextProps);250 return workInProgress.child;251 }252 }253 function updateHostText(current, workInProgress) {254 var nextProps = workInProgress.pendingProps;255 if (nextProps === null) {256 nextProps = workInProgress.memoizedProps;257 }258 memoizeProps(workInProgress, nextProps);259 return null;260 }261 function mountIndeterminateComponent(current, workInProgress, priorityLevel) {262 invariant(current === null, 'An indeterminate component should never have mounted. This error is ' + 'likely caused by a bug in React. Please file an issue.');263 var fn = workInProgress.type;264 var props = workInProgress.pendingProps;265 var unmaskedContext = getUnmaskedContext(workInProgress);266 var context = getMaskedContext(workInProgress, unmaskedContext);267 var value;268 if (__DEV__) {269 ReactCurrentOwner.current = workInProgress;270 value = fn(props, context);271 } else {272 value = fn(props, context);273 }274 if (typeof value === 'object' && value !== null && typeof value.render === 'function') {275 workInProgress.tag = ClassComponent;276 var hasContext = pushContextProvider(workInProgress);277 adoptClassInstance(workInProgress, value);278 mountClassInstance(workInProgress, priorityLevel);279 return finishClassComponent(current, workInProgress, true, hasContext);280 } else {281 workInProgress.tag = FunctionalComponent;282 if (__DEV__) {283 var Component = workInProgress.type;284 if (Component) {285 warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');286 }287 if (workInProgress.ref !== null) {288 var info = '';289 var ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();290 if (ownerName) {291 info += '\n\nCheck the render method of `' + ownerName + '`.';292 }293 var warningKey = ownerName || workInProgress._debugID || '';294 var debugSource = workInProgress._debugSource;295 if (debugSource) {296 warningKey = debugSource.fileName + ':' + debugSource.lineNumber;297 }298 if (!warnedAboutStatelessRefs[warningKey]) {299 warnedAboutStatelessRefs[warningKey] = true;300 warning(false, 'Stateless function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s%s', info, ReactDebugCurrentFiber.getCurrentFiberStackAddendum());301 }302 }303 }304 reconcileChildren(current, workInProgress, value);305 memoizeProps(workInProgress, props);306 return workInProgress.child;307 }308 }309 function updateCoroutineComponent(current, workInProgress) {310 var nextCoroutine = workInProgress.pendingProps;311 if (hasContextChanged()) {312 if (nextCoroutine === null) {313 nextCoroutine = current && current.memoizedProps;314 invariant(nextCoroutine !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');315 }316 } else if (nextCoroutine === null || workInProgress.memoizedProps === nextCoroutine) {317 nextCoroutine = workInProgress.memoizedProps;318 }319 var nextChildren = nextCoroutine.children;320 var priorityLevel = workInProgress.pendingWorkPriority;321 workInProgress.memoizedProps = null;322 if (current === null) {323 workInProgress.stateNode = mountChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);324 } else if (current.child === workInProgress.child) {325 clearDeletions(workInProgress);326 workInProgress.stateNode = reconcileChildFibers(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);327 transferDeletions(workInProgress);328 } else {329 workInProgress.stateNode = reconcileChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);330 transferDeletions(workInProgress);331 }332 memoizeProps(workInProgress, nextCoroutine);333 return workInProgress.stateNode;334 }335 function updatePortalComponent(current, workInProgress) {336 pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);337 var priorityLevel = workInProgress.pendingWorkPriority;338 var nextChildren = workInProgress.pendingProps;339 if (hasContextChanged()) {340 if (nextChildren === null) {341 nextChildren = current && current.memoizedProps;342 invariant(nextChildren != null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');343 }344 } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {345 return bailoutOnAlreadyFinishedWork(current, workInProgress);346 }347 if (current === null) {348 workInProgress.child = reconcileChildFibersInPlace(workInProgress, workInProgress.child, nextChildren, priorityLevel);349 memoizeProps(workInProgress, nextChildren);350 markChildAsProgressed(current, workInProgress, priorityLevel);351 } else {352 reconcileChildren(current, workInProgress, nextChildren);353 memoizeProps(workInProgress, nextChildren);354 }355 return workInProgress.child;356 }357 function bailoutOnAlreadyFinishedWork(current, workInProgress) {358 if (__DEV__) {359 cancelWorkTimer(workInProgress);360 }361 var priorityLevel = workInProgress.pendingWorkPriority;362 if (current && workInProgress.child === current.child) {363 clearDeletions(workInProgress);364 }365 cloneChildFibers(current, workInProgress);366 markChildAsProgressed(current, workInProgress, priorityLevel);367 return workInProgress.child;368 }369 function bailoutOnLowPriority(current, workInProgress) {370 if (__DEV__) {371 cancelWorkTimer(workInProgress);...

Full Screen

Full Screen

f53fd5eb0f6d83330f45713d7ad4a8e61020b9ReactFiberBeginWork.js

Source:f53fd5eb0f6d83330f45713d7ad4a8e61020b9ReactFiberBeginWork.js Github

copy

Full Screen

...94 if (nextChildren === null) {95 nextChildren = workInProgress.memoizedProps;96 }97 } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {98 return bailoutOnAlreadyFinishedWork(current, workInProgress);99 }100 reconcileChildren(current, workInProgress, nextChildren);101 memoizeProps(workInProgress, nextChildren);102 return workInProgress.child;103 }104 function markRef(current, workInProgress) {105 var ref = workInProgress.ref;106 if (ref !== null && (!current || current.ref !== ref)) {107 workInProgress.effectTag |= Ref;108 }109 }110 function updateFunctionalComponent(current, workInProgress) {111 var fn = workInProgress.type;112 var nextProps = workInProgress.pendingProps;113 var memoizedProps = workInProgress.memoizedProps;114 if (hasContextChanged()) {115 if (nextProps === null) {116 nextProps = memoizedProps;117 }118 } else {119 if (nextProps === null || memoizedProps === nextProps) {120 return bailoutOnAlreadyFinishedWork(current, workInProgress);121 }122 if (typeof fn.shouldComponentUpdate === 'function' && !fn.shouldComponentUpdate(memoizedProps, nextProps)) {123 memoizeProps(workInProgress, nextProps);124 return bailoutOnAlreadyFinishedWork(current, workInProgress);125 }126 }127 var unmaskedContext = getUnmaskedContext(workInProgress);128 var context = getMaskedContext(workInProgress, unmaskedContext);129 var nextChildren;130 if (__DEV__) {131 ReactCurrentOwner.current = workInProgress;132 ReactDebugCurrentFiber.phase = 'render';133 nextChildren = fn(nextProps, context);134 ReactDebugCurrentFiber.phase = null;135 } else {136 nextChildren = fn(nextProps, context);137 }138 reconcileChildren(current, workInProgress, nextChildren);139 memoizeProps(workInProgress, nextProps);140 return workInProgress.child;141 }142 function updateClassComponent(current, workInProgress, priorityLevel) {143 var hasContext = pushContextProvider(workInProgress);144 var shouldUpdate = void 0;145 if (current === null) {146 if (!workInProgress.stateNode) {147 constructClassInstance(workInProgress);148 mountClassInstance(workInProgress, priorityLevel);149 shouldUpdate = true;150 } else {151 shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);152 }153 } else {154 shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);155 }156 return finishClassComponent(current, workInProgress, shouldUpdate, hasContext);157 }158 function finishClassComponent(current, workInProgress, shouldUpdate, hasContext) {159 markRef(current, workInProgress);160 if (!shouldUpdate) {161 return bailoutOnAlreadyFinishedWork(current, workInProgress);162 }163 var instance = workInProgress.stateNode;164 ReactCurrentOwner.current = workInProgress;165 var nextChildren = void 0;166 if (__DEV__) {167 ReactDebugCurrentFiber.phase = 'render';168 nextChildren = instance.render();169 ReactDebugCurrentFiber.phase = null;170 } else {171 nextChildren = instance.render();172 }173 reconcileChildren(current, workInProgress, nextChildren);174 memoizeState(workInProgress, instance.state);175 memoizeProps(workInProgress, instance.props);176 if (hasContext) {177 invalidateContextProvider(workInProgress);178 }179 return workInProgress.child;180 }181 function updateHostRoot(current, workInProgress, priorityLevel) {182 var root = workInProgress.stateNode;183 if (root.pendingContext) {184 pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);185 } else if (root.context) {186 pushTopLevelContextObject(workInProgress, root.context, false);187 }188 pushHostContainer(workInProgress, root.containerInfo);189 var updateQueue = workInProgress.updateQueue;190 if (updateQueue !== null) {191 var prevState = workInProgress.memoizedState;192 var state = beginUpdateQueue(workInProgress, updateQueue, null, prevState, null, priorityLevel);193 if (prevState === state) {194 return bailoutOnAlreadyFinishedWork(current, workInProgress);195 }196 var element = state.element;197 reconcileChildren(current, workInProgress, element);198 memoizeState(workInProgress, state);199 return workInProgress.child;200 }201 return bailoutOnAlreadyFinishedWork(current, workInProgress);202 }203 function updateHostComponent(current, workInProgress) {204 pushHostContext(workInProgress);205 var nextProps = workInProgress.pendingProps;206 var prevProps = current !== null ? current.memoizedProps : null;207 var memoizedProps = workInProgress.memoizedProps;208 if (hasContextChanged()) {209 if (nextProps === null) {210 nextProps = memoizedProps;211 invariant(nextProps !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');212 }213 } else if (nextProps === null || memoizedProps === nextProps) {214 if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, memoizedProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {215 var child = workInProgress.progressedChild;216 while (child !== null) {217 child.pendingWorkPriority = OffscreenPriority;218 child = child.sibling;219 }220 return null;221 }222 return bailoutOnAlreadyFinishedWork(current, workInProgress);223 }224 var nextChildren = nextProps.children;225 var isDirectTextChild = shouldSetTextContent(nextProps);226 if (isDirectTextChild) {227 nextChildren = null;228 } else if (prevProps && shouldSetTextContent(prevProps)) {229 workInProgress.effectTag |= ContentReset;230 }231 markRef(current, workInProgress);232 if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, nextProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {233 if (workInProgress.progressedPriority === OffscreenPriority) {234 workInProgress.child = workInProgress.progressedChild;235 }236 reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);237 memoizeProps(workInProgress, nextProps);238 workInProgress.child = current !== null ? current.child : null;239 if (current === null) {240 var _child = workInProgress.progressedChild;241 while (_child !== null) {242 _child.effectTag = Placement;243 _child = _child.sibling;244 }245 }246 return null;247 } else {248 reconcileChildren(current, workInProgress, nextChildren);249 memoizeProps(workInProgress, nextProps);250 return workInProgress.child;251 }252 }253 function updateHostText(current, workInProgress) {254 var nextProps = workInProgress.pendingProps;255 if (nextProps === null) {256 nextProps = workInProgress.memoizedProps;257 }258 memoizeProps(workInProgress, nextProps);259 return null;260 }261 function mountIndeterminateComponent(current, workInProgress, priorityLevel) {262 invariant(current === null, 'An indeterminate component should never have mounted. This error is ' + 'likely caused by a bug in React. Please file an issue.');263 var fn = workInProgress.type;264 var props = workInProgress.pendingProps;265 var unmaskedContext = getUnmaskedContext(workInProgress);266 var context = getMaskedContext(workInProgress, unmaskedContext);267 var value;268 if (__DEV__) {269 ReactCurrentOwner.current = workInProgress;270 value = fn(props, context);271 } else {272 value = fn(props, context);273 }274 if (typeof value === 'object' && value !== null && typeof value.render === 'function') {275 workInProgress.tag = ClassComponent;276 var hasContext = pushContextProvider(workInProgress);277 adoptClassInstance(workInProgress, value);278 mountClassInstance(workInProgress, priorityLevel);279 return finishClassComponent(current, workInProgress, true, hasContext);280 } else {281 workInProgress.tag = FunctionalComponent;282 if (__DEV__) {283 var Component = workInProgress.type;284 if (Component) {285 warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');286 }287 if (workInProgress.ref !== null) {288 var info = '';289 var ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();290 if (ownerName) {291 info += '\n\nCheck the render method of `' + ownerName + '`.';292 }293 var warningKey = ownerName || workInProgress._debugID || '';294 var debugSource = workInProgress._debugSource;295 if (debugSource) {296 warningKey = debugSource.fileName + ':' + debugSource.lineNumber;297 }298 if (!warnedAboutStatelessRefs[warningKey]) {299 warnedAboutStatelessRefs[warningKey] = true;300 warning(false, 'Stateless function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s%s', info, ReactDebugCurrentFiber.getCurrentFiberStackAddendum());301 }302 }303 }304 reconcileChildren(current, workInProgress, value);305 memoizeProps(workInProgress, props);306 return workInProgress.child;307 }308 }309 function updateCoroutineComponent(current, workInProgress) {310 var nextCoroutine = workInProgress.pendingProps;311 if (hasContextChanged()) {312 if (nextCoroutine === null) {313 nextCoroutine = current && current.memoizedProps;314 invariant(nextCoroutine !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');315 }316 } else if (nextCoroutine === null || workInProgress.memoizedProps === nextCoroutine) {317 nextCoroutine = workInProgress.memoizedProps;318 }319 var nextChildren = nextCoroutine.children;320 var priorityLevel = workInProgress.pendingWorkPriority;321 workInProgress.memoizedProps = null;322 if (current === null) {323 workInProgress.stateNode = mountChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);324 } else if (current.child === workInProgress.child) {325 clearDeletions(workInProgress);326 workInProgress.stateNode = reconcileChildFibers(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);327 transferDeletions(workInProgress);328 } else {329 workInProgress.stateNode = reconcileChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);330 transferDeletions(workInProgress);331 }332 memoizeProps(workInProgress, nextCoroutine);333 return workInProgress.stateNode;334 }335 function updatePortalComponent(current, workInProgress) {336 pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);337 var priorityLevel = workInProgress.pendingWorkPriority;338 var nextChildren = workInProgress.pendingProps;339 if (hasContextChanged()) {340 if (nextChildren === null) {341 nextChildren = current && current.memoizedProps;342 invariant(nextChildren != null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');343 }344 } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {345 return bailoutOnAlreadyFinishedWork(current, workInProgress);346 }347 if (current === null) {348 workInProgress.child = reconcileChildFibersInPlace(workInProgress, workInProgress.child, nextChildren, priorityLevel);349 memoizeProps(workInProgress, nextChildren);350 markChildAsProgressed(current, workInProgress, priorityLevel);351 } else {352 reconcileChildren(current, workInProgress, nextChildren);353 memoizeProps(workInProgress, nextChildren);354 }355 return workInProgress.child;356 }357 function bailoutOnAlreadyFinishedWork(current, workInProgress) {358 if (__DEV__) {359 cancelWorkTimer(workInProgress);360 }361 var priorityLevel = workInProgress.pendingWorkPriority;362 if (current && workInProgress.child === current.child) {363 clearDeletions(workInProgress);364 }365 cloneChildFibers(current, workInProgress);366 markChildAsProgressed(current, workInProgress, priorityLevel);367 return workInProgress.child;368 }369 function bailoutOnLowPriority(current, workInProgress) {370 if (__DEV__) {371 cancelWorkTimer(workInProgress);...

Full Screen

Full Screen

0c0973fc7971824d7f8a174e5eae9c482a6244ReactFiberBeginWork.js

Source:0c0973fc7971824d7f8a174e5eae9c482a6244ReactFiberBeginWork.js Github

copy

Full Screen

...94 if (nextChildren === null) {95 nextChildren = workInProgress.memoizedProps;96 }97 } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {98 return bailoutOnAlreadyFinishedWork(current, workInProgress);99 }100 reconcileChildren(current, workInProgress, nextChildren);101 memoizeProps(workInProgress, nextChildren);102 return workInProgress.child;103 }104 function markRef(current, workInProgress) {105 var ref = workInProgress.ref;106 if (ref !== null && (!current || current.ref !== ref)) {107 workInProgress.effectTag |= Ref;108 }109 }110 function updateFunctionalComponent(current, workInProgress) {111 var fn = workInProgress.type;112 var nextProps = workInProgress.pendingProps;113 var memoizedProps = workInProgress.memoizedProps;114 if (hasContextChanged()) {115 if (nextProps === null) {116 nextProps = memoizedProps;117 }118 } else {119 if (nextProps === null || memoizedProps === nextProps) {120 return bailoutOnAlreadyFinishedWork(current, workInProgress);121 }122 if (typeof fn.shouldComponentUpdate === 'function' && !fn.shouldComponentUpdate(memoizedProps, nextProps)) {123 memoizeProps(workInProgress, nextProps);124 return bailoutOnAlreadyFinishedWork(current, workInProgress);125 }126 }127 var unmaskedContext = getUnmaskedContext(workInProgress);128 var context = getMaskedContext(workInProgress, unmaskedContext);129 var nextChildren;130 if (__DEV__) {131 ReactCurrentOwner.current = workInProgress;132 ReactDebugCurrentFiber.phase = 'render';133 nextChildren = fn(nextProps, context);134 ReactDebugCurrentFiber.phase = null;135 } else {136 nextChildren = fn(nextProps, context);137 }138 reconcileChildren(current, workInProgress, nextChildren);139 memoizeProps(workInProgress, nextProps);140 return workInProgress.child;141 }142 function updateClassComponent(current, workInProgress, priorityLevel) {143 var hasContext = pushContextProvider(workInProgress);144 var shouldUpdate = void 0;145 if (current === null) {146 if (!workInProgress.stateNode) {147 constructClassInstance(workInProgress);148 mountClassInstance(workInProgress, priorityLevel);149 shouldUpdate = true;150 } else {151 shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);152 }153 } else {154 shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);155 }156 return finishClassComponent(current, workInProgress, shouldUpdate, hasContext);157 }158 function finishClassComponent(current, workInProgress, shouldUpdate, hasContext) {159 markRef(current, workInProgress);160 if (!shouldUpdate) {161 return bailoutOnAlreadyFinishedWork(current, workInProgress);162 }163 var instance = workInProgress.stateNode;164 ReactCurrentOwner.current = workInProgress;165 var nextChildren = void 0;166 if (__DEV__) {167 ReactDebugCurrentFiber.phase = 'render';168 nextChildren = instance.render();169 ReactDebugCurrentFiber.phase = null;170 } else {171 nextChildren = instance.render();172 }173 reconcileChildren(current, workInProgress, nextChildren);174 memoizeState(workInProgress, instance.state);175 memoizeProps(workInProgress, instance.props);176 if (hasContext) {177 invalidateContextProvider(workInProgress);178 }179 return workInProgress.child;180 }181 function updateHostRoot(current, workInProgress, priorityLevel) {182 var root = workInProgress.stateNode;183 if (root.pendingContext) {184 pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);185 } else if (root.context) {186 pushTopLevelContextObject(workInProgress, root.context, false);187 }188 pushHostContainer(workInProgress, root.containerInfo);189 var updateQueue = workInProgress.updateQueue;190 if (updateQueue !== null) {191 var prevState = workInProgress.memoizedState;192 var state = beginUpdateQueue(workInProgress, updateQueue, null, prevState, null, priorityLevel);193 if (prevState === state) {194 return bailoutOnAlreadyFinishedWork(current, workInProgress);195 }196 var element = state.element;197 reconcileChildren(current, workInProgress, element);198 memoizeState(workInProgress, state);199 return workInProgress.child;200 }201 return bailoutOnAlreadyFinishedWork(current, workInProgress);202 }203 function updateHostComponent(current, workInProgress) {204 pushHostContext(workInProgress);205 var nextProps = workInProgress.pendingProps;206 var prevProps = current !== null ? current.memoizedProps : null;207 var memoizedProps = workInProgress.memoizedProps;208 if (hasContextChanged()) {209 if (nextProps === null) {210 nextProps = memoizedProps;211 invariant(nextProps !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');212 }213 } else if (nextProps === null || memoizedProps === nextProps) {214 if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, memoizedProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {215 var child = workInProgress.progressedChild;216 while (child !== null) {217 child.pendingWorkPriority = OffscreenPriority;218 child = child.sibling;219 }220 return null;221 }222 return bailoutOnAlreadyFinishedWork(current, workInProgress);223 }224 var nextChildren = nextProps.children;225 var isDirectTextChild = shouldSetTextContent(nextProps);226 if (isDirectTextChild) {227 nextChildren = null;228 } else if (prevProps && shouldSetTextContent(prevProps)) {229 workInProgress.effectTag |= ContentReset;230 }231 markRef(current, workInProgress);232 if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, nextProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {233 if (workInProgress.progressedPriority === OffscreenPriority) {234 workInProgress.child = workInProgress.progressedChild;235 }236 reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);237 memoizeProps(workInProgress, nextProps);238 workInProgress.child = current !== null ? current.child : null;239 if (current === null) {240 var _child = workInProgress.progressedChild;241 while (_child !== null) {242 _child.effectTag = Placement;243 _child = _child.sibling;244 }245 }246 return null;247 } else {248 reconcileChildren(current, workInProgress, nextChildren);249 memoizeProps(workInProgress, nextProps);250 return workInProgress.child;251 }252 }253 function updateHostText(current, workInProgress) {254 var nextProps = workInProgress.pendingProps;255 if (nextProps === null) {256 nextProps = workInProgress.memoizedProps;257 }258 memoizeProps(workInProgress, nextProps);259 return null;260 }261 function mountIndeterminateComponent(current, workInProgress, priorityLevel) {262 invariant(current === null, 'An indeterminate component should never have mounted. This error is ' + 'likely caused by a bug in React. Please file an issue.');263 var fn = workInProgress.type;264 var props = workInProgress.pendingProps;265 var unmaskedContext = getUnmaskedContext(workInProgress);266 var context = getMaskedContext(workInProgress, unmaskedContext);267 var value;268 if (__DEV__) {269 ReactCurrentOwner.current = workInProgress;270 value = fn(props, context);271 } else {272 value = fn(props, context);273 }274 if (typeof value === 'object' && value !== null && typeof value.render === 'function') {275 workInProgress.tag = ClassComponent;276 var hasContext = pushContextProvider(workInProgress);277 adoptClassInstance(workInProgress, value);278 mountClassInstance(workInProgress, priorityLevel);279 return finishClassComponent(current, workInProgress, true, hasContext);280 } else {281 workInProgress.tag = FunctionalComponent;282 if (__DEV__) {283 var Component = workInProgress.type;284 if (Component) {285 warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');286 }287 if (workInProgress.ref !== null) {288 var info = '';289 var ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();290 if (ownerName) {291 info += '\n\nCheck the render method of `' + ownerName + '`.';292 }293 var warningKey = ownerName || workInProgress._debugID || '';294 var debugSource = workInProgress._debugSource;295 if (debugSource) {296 warningKey = debugSource.fileName + ':' + debugSource.lineNumber;297 }298 if (!warnedAboutStatelessRefs[warningKey]) {299 warnedAboutStatelessRefs[warningKey] = true;300 warning(false, 'Stateless function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s%s', info, ReactDebugCurrentFiber.getCurrentFiberStackAddendum());301 }302 }303 }304 reconcileChildren(current, workInProgress, value);305 memoizeProps(workInProgress, props);306 return workInProgress.child;307 }308 }309 function updateCoroutineComponent(current, workInProgress) {310 var nextCoroutine = workInProgress.pendingProps;311 if (hasContextChanged()) {312 if (nextCoroutine === null) {313 nextCoroutine = current && current.memoizedProps;314 invariant(nextCoroutine !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');315 }316 } else if (nextCoroutine === null || workInProgress.memoizedProps === nextCoroutine) {317 nextCoroutine = workInProgress.memoizedProps;318 }319 var nextChildren = nextCoroutine.children;320 var priorityLevel = workInProgress.pendingWorkPriority;321 workInProgress.memoizedProps = null;322 if (current === null) {323 workInProgress.stateNode = mountChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);324 } else if (current.child === workInProgress.child) {325 clearDeletions(workInProgress);326 workInProgress.stateNode = reconcileChildFibers(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);327 transferDeletions(workInProgress);328 } else {329 workInProgress.stateNode = reconcileChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);330 transferDeletions(workInProgress);331 }332 memoizeProps(workInProgress, nextCoroutine);333 return workInProgress.stateNode;334 }335 function updatePortalComponent(current, workInProgress) {336 pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);337 var priorityLevel = workInProgress.pendingWorkPriority;338 var nextChildren = workInProgress.pendingProps;339 if (hasContextChanged()) {340 if (nextChildren === null) {341 nextChildren = current && current.memoizedProps;342 invariant(nextChildren != null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');343 }344 } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {345 return bailoutOnAlreadyFinishedWork(current, workInProgress);346 }347 if (current === null) {348 workInProgress.child = reconcileChildFibersInPlace(workInProgress, workInProgress.child, nextChildren, priorityLevel);349 memoizeProps(workInProgress, nextChildren);350 markChildAsProgressed(current, workInProgress, priorityLevel);351 } else {352 reconcileChildren(current, workInProgress, nextChildren);353 memoizeProps(workInProgress, nextChildren);354 }355 return workInProgress.child;356 }357 function bailoutOnAlreadyFinishedWork(current, workInProgress) {358 if (__DEV__) {359 cancelWorkTimer(workInProgress);360 }361 var priorityLevel = workInProgress.pendingWorkPriority;362 if (current && workInProgress.child === current.child) {363 clearDeletions(workInProgress);364 }365 cloneChildFibers(current, workInProgress);366 markChildAsProgressed(current, workInProgress, priorityLevel);367 return workInProgress.child;368 }369 function bailoutOnLowPriority(current, workInProgress) {370 if (__DEV__) {371 cancelWorkTimer(workInProgress);...

Full Screen

Full Screen

a9c9772a1f3ee8b9618c4d3bc7e33597822442ReactFiberBeginWork.js

Source:a9c9772a1f3ee8b9618c4d3bc7e33597822442ReactFiberBeginWork.js Github

copy

Full Screen

...94 if (nextChildren === null) {95 nextChildren = workInProgress.memoizedProps;96 }97 } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {98 return bailoutOnAlreadyFinishedWork(current, workInProgress);99 }100 reconcileChildren(current, workInProgress, nextChildren);101 memoizeProps(workInProgress, nextChildren);102 return workInProgress.child;103 }104 function markRef(current, workInProgress) {105 var ref = workInProgress.ref;106 if (ref !== null && (!current || current.ref !== ref)) {107 workInProgress.effectTag |= Ref;108 }109 }110 function updateFunctionalComponent(current, workInProgress) {111 var fn = workInProgress.type;112 var nextProps = workInProgress.pendingProps;113 var memoizedProps = workInProgress.memoizedProps;114 if (hasContextChanged()) {115 if (nextProps === null) {116 nextProps = memoizedProps;117 }118 } else {119 if (nextProps === null || memoizedProps === nextProps) {120 return bailoutOnAlreadyFinishedWork(current, workInProgress);121 }122 if (typeof fn.shouldComponentUpdate === 'function' && !fn.shouldComponentUpdate(memoizedProps, nextProps)) {123 memoizeProps(workInProgress, nextProps);124 return bailoutOnAlreadyFinishedWork(current, workInProgress);125 }126 }127 var unmaskedContext = getUnmaskedContext(workInProgress);128 var context = getMaskedContext(workInProgress, unmaskedContext);129 var nextChildren;130 if (__DEV__) {131 ReactCurrentOwner.current = workInProgress;132 ReactDebugCurrentFiber.phase = 'render';133 nextChildren = fn(nextProps, context);134 ReactDebugCurrentFiber.phase = null;135 } else {136 nextChildren = fn(nextProps, context);137 }138 reconcileChildren(current, workInProgress, nextChildren);139 memoizeProps(workInProgress, nextProps);140 return workInProgress.child;141 }142 function updateClassComponent(current, workInProgress, priorityLevel) {143 var hasContext = pushContextProvider(workInProgress);144 var shouldUpdate = void 0;145 if (current === null) {146 if (!workInProgress.stateNode) {147 constructClassInstance(workInProgress);148 mountClassInstance(workInProgress, priorityLevel);149 shouldUpdate = true;150 } else {151 shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);152 }153 } else {154 shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);155 }156 return finishClassComponent(current, workInProgress, shouldUpdate, hasContext);157 }158 function finishClassComponent(current, workInProgress, shouldUpdate, hasContext) {159 markRef(current, workInProgress);160 if (!shouldUpdate) {161 return bailoutOnAlreadyFinishedWork(current, workInProgress);162 }163 var instance = workInProgress.stateNode;164 ReactCurrentOwner.current = workInProgress;165 var nextChildren = void 0;166 if (__DEV__) {167 ReactDebugCurrentFiber.phase = 'render';168 nextChildren = instance.render();169 ReactDebugCurrentFiber.phase = null;170 } else {171 nextChildren = instance.render();172 }173 reconcileChildren(current, workInProgress, nextChildren);174 memoizeState(workInProgress, instance.state);175 memoizeProps(workInProgress, instance.props);176 if (hasContext) {177 invalidateContextProvider(workInProgress);178 }179 return workInProgress.child;180 }181 function updateHostRoot(current, workInProgress, priorityLevel) {182 var root = workInProgress.stateNode;183 if (root.pendingContext) {184 pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);185 } else if (root.context) {186 pushTopLevelContextObject(workInProgress, root.context, false);187 }188 pushHostContainer(workInProgress, root.containerInfo);189 var updateQueue = workInProgress.updateQueue;190 if (updateQueue !== null) {191 var prevState = workInProgress.memoizedState;192 var state = beginUpdateQueue(workInProgress, updateQueue, null, prevState, null, priorityLevel);193 if (prevState === state) {194 return bailoutOnAlreadyFinishedWork(current, workInProgress);195 }196 var element = state.element;197 reconcileChildren(current, workInProgress, element);198 memoizeState(workInProgress, state);199 return workInProgress.child;200 }201 return bailoutOnAlreadyFinishedWork(current, workInProgress);202 }203 function updateHostComponent(current, workInProgress) {204 pushHostContext(workInProgress);205 var nextProps = workInProgress.pendingProps;206 var prevProps = current !== null ? current.memoizedProps : null;207 var memoizedProps = workInProgress.memoizedProps;208 if (hasContextChanged()) {209 if (nextProps === null) {210 nextProps = memoizedProps;211 invariant(nextProps !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');212 }213 } else if (nextProps === null || memoizedProps === nextProps) {214 if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, memoizedProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {215 var child = workInProgress.progressedChild;216 while (child !== null) {217 child.pendingWorkPriority = OffscreenPriority;218 child = child.sibling;219 }220 return null;221 }222 return bailoutOnAlreadyFinishedWork(current, workInProgress);223 }224 var nextChildren = nextProps.children;225 var isDirectTextChild = shouldSetTextContent(nextProps);226 if (isDirectTextChild) {227 nextChildren = null;228 } else if (prevProps && shouldSetTextContent(prevProps)) {229 workInProgress.effectTag |= ContentReset;230 }231 markRef(current, workInProgress);232 if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, nextProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {233 if (workInProgress.progressedPriority === OffscreenPriority) {234 workInProgress.child = workInProgress.progressedChild;235 }236 reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);237 memoizeProps(workInProgress, nextProps);238 workInProgress.child = current !== null ? current.child : null;239 if (current === null) {240 var _child = workInProgress.progressedChild;241 while (_child !== null) {242 _child.effectTag = Placement;243 _child = _child.sibling;244 }245 }246 return null;247 } else {248 reconcileChildren(current, workInProgress, nextChildren);249 memoizeProps(workInProgress, nextProps);250 return workInProgress.child;251 }252 }253 function updateHostText(current, workInProgress) {254 var nextProps = workInProgress.pendingProps;255 if (nextProps === null) {256 nextProps = workInProgress.memoizedProps;257 }258 memoizeProps(workInProgress, nextProps);259 return null;260 }261 function mountIndeterminateComponent(current, workInProgress, priorityLevel) {262 invariant(current === null, 'An indeterminate component should never have mounted. This error is ' + 'likely caused by a bug in React. Please file an issue.');263 var fn = workInProgress.type;264 var props = workInProgress.pendingProps;265 var unmaskedContext = getUnmaskedContext(workInProgress);266 var context = getMaskedContext(workInProgress, unmaskedContext);267 var value;268 if (__DEV__) {269 ReactCurrentOwner.current = workInProgress;270 value = fn(props, context);271 } else {272 value = fn(props, context);273 }274 if (typeof value === 'object' && value !== null && typeof value.render === 'function') {275 workInProgress.tag = ClassComponent;276 var hasContext = pushContextProvider(workInProgress);277 adoptClassInstance(workInProgress, value);278 mountClassInstance(workInProgress, priorityLevel);279 return finishClassComponent(current, workInProgress, true, hasContext);280 } else {281 workInProgress.tag = FunctionalComponent;282 if (__DEV__) {283 var Component = workInProgress.type;284 if (Component) {285 warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');286 }287 if (workInProgress.ref !== null) {288 var info = '';289 var ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();290 if (ownerName) {291 info += '\n\nCheck the render method of `' + ownerName + '`.';292 }293 var warningKey = ownerName || workInProgress._debugID || '';294 var debugSource = workInProgress._debugSource;295 if (debugSource) {296 warningKey = debugSource.fileName + ':' + debugSource.lineNumber;297 }298 if (!warnedAboutStatelessRefs[warningKey]) {299 warnedAboutStatelessRefs[warningKey] = true;300 warning(false, 'Stateless function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s%s', info, ReactDebugCurrentFiber.getCurrentFiberStackAddendum());301 }302 }303 }304 reconcileChildren(current, workInProgress, value);305 memoizeProps(workInProgress, props);306 return workInProgress.child;307 }308 }309 function updateCoroutineComponent(current, workInProgress) {310 var nextCoroutine = workInProgress.pendingProps;311 if (hasContextChanged()) {312 if (nextCoroutine === null) {313 nextCoroutine = current && current.memoizedProps;314 invariant(nextCoroutine !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');315 }316 } else if (nextCoroutine === null || workInProgress.memoizedProps === nextCoroutine) {317 nextCoroutine = workInProgress.memoizedProps;318 }319 var nextChildren = nextCoroutine.children;320 var priorityLevel = workInProgress.pendingWorkPriority;321 workInProgress.memoizedProps = null;322 if (current === null) {323 workInProgress.stateNode = mountChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);324 } else if (current.child === workInProgress.child) {325 clearDeletions(workInProgress);326 workInProgress.stateNode = reconcileChildFibers(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);327 transferDeletions(workInProgress);328 } else {329 workInProgress.stateNode = reconcileChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);330 transferDeletions(workInProgress);331 }332 memoizeProps(workInProgress, nextCoroutine);333 return workInProgress.stateNode;334 }335 function updatePortalComponent(current, workInProgress) {336 pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);337 var priorityLevel = workInProgress.pendingWorkPriority;338 var nextChildren = workInProgress.pendingProps;339 if (hasContextChanged()) {340 if (nextChildren === null) {341 nextChildren = current && current.memoizedProps;342 invariant(nextChildren != null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');343 }344 } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {345 return bailoutOnAlreadyFinishedWork(current, workInProgress);346 }347 if (current === null) {348 workInProgress.child = reconcileChildFibersInPlace(workInProgress, workInProgress.child, nextChildren, priorityLevel);349 memoizeProps(workInProgress, nextChildren);350 markChildAsProgressed(current, workInProgress, priorityLevel);351 } else {352 reconcileChildren(current, workInProgress, nextChildren);353 memoizeProps(workInProgress, nextChildren);354 }355 return workInProgress.child;356 }357 function bailoutOnAlreadyFinishedWork(current, workInProgress) {358 if (__DEV__) {359 cancelWorkTimer(workInProgress);360 }361 var priorityLevel = workInProgress.pendingWorkPriority;362 if (current && workInProgress.child === current.child) {363 clearDeletions(workInProgress);364 }365 cloneChildFibers(current, workInProgress);366 markChildAsProgressed(current, workInProgress, priorityLevel);367 return workInProgress.child;368 }369 function bailoutOnLowPriority(current, workInProgress) {370 if (__DEV__) {371 cancelWorkTimer(workInProgress);...

Full Screen

Full Screen

38fd25b340d9a8718c2ff51416edd6daa1ddf9ReactFiberBeginWork.js

Source:38fd25b340d9a8718c2ff51416edd6daa1ddf9ReactFiberBeginWork.js Github

copy

Full Screen

...94 if (nextChildren === null) {95 nextChildren = workInProgress.memoizedProps;96 }97 } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {98 return bailoutOnAlreadyFinishedWork(current, workInProgress);99 }100 reconcileChildren(current, workInProgress, nextChildren);101 memoizeProps(workInProgress, nextChildren);102 return workInProgress.child;103 }104 function markRef(current, workInProgress) {105 var ref = workInProgress.ref;106 if (ref !== null && (!current || current.ref !== ref)) {107 workInProgress.effectTag |= Ref;108 }109 }110 function updateFunctionalComponent(current, workInProgress) {111 var fn = workInProgress.type;112 var nextProps = workInProgress.pendingProps;113 var memoizedProps = workInProgress.memoizedProps;114 if (hasContextChanged()) {115 if (nextProps === null) {116 nextProps = memoizedProps;117 }118 } else {119 if (nextProps === null || memoizedProps === nextProps) {120 return bailoutOnAlreadyFinishedWork(current, workInProgress);121 }122 if (typeof fn.shouldComponentUpdate === 'function' && !fn.shouldComponentUpdate(memoizedProps, nextProps)) {123 memoizeProps(workInProgress, nextProps);124 return bailoutOnAlreadyFinishedWork(current, workInProgress);125 }126 }127 var unmaskedContext = getUnmaskedContext(workInProgress);128 var context = getMaskedContext(workInProgress, unmaskedContext);129 var nextChildren;130 if (__DEV__) {131 ReactCurrentOwner.current = workInProgress;132 ReactDebugCurrentFiber.phase = 'render';133 nextChildren = fn(nextProps, context);134 ReactDebugCurrentFiber.phase = null;135 } else {136 nextChildren = fn(nextProps, context);137 }138 reconcileChildren(current, workInProgress, nextChildren);139 memoizeProps(workInProgress, nextProps);140 return workInProgress.child;141 }142 function updateClassComponent(current, workInProgress, priorityLevel) {143 var hasContext = pushContextProvider(workInProgress);144 var shouldUpdate = void 0;145 if (current === null) {146 if (!workInProgress.stateNode) {147 constructClassInstance(workInProgress);148 mountClassInstance(workInProgress, priorityLevel);149 shouldUpdate = true;150 } else {151 shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);152 }153 } else {154 shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);155 }156 return finishClassComponent(current, workInProgress, shouldUpdate, hasContext);157 }158 function finishClassComponent(current, workInProgress, shouldUpdate, hasContext) {159 markRef(current, workInProgress);160 if (!shouldUpdate) {161 return bailoutOnAlreadyFinishedWork(current, workInProgress);162 }163 var instance = workInProgress.stateNode;164 ReactCurrentOwner.current = workInProgress;165 var nextChildren = void 0;166 if (__DEV__) {167 ReactDebugCurrentFiber.phase = 'render';168 nextChildren = instance.render();169 ReactDebugCurrentFiber.phase = null;170 } else {171 nextChildren = instance.render();172 }173 reconcileChildren(current, workInProgress, nextChildren);174 memoizeState(workInProgress, instance.state);175 memoizeProps(workInProgress, instance.props);176 if (hasContext) {177 invalidateContextProvider(workInProgress);178 }179 return workInProgress.child;180 }181 function updateHostRoot(current, workInProgress, priorityLevel) {182 var root = workInProgress.stateNode;183 if (root.pendingContext) {184 pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);185 } else if (root.context) {186 pushTopLevelContextObject(workInProgress, root.context, false);187 }188 pushHostContainer(workInProgress, root.containerInfo);189 var updateQueue = workInProgress.updateQueue;190 if (updateQueue !== null) {191 var prevState = workInProgress.memoizedState;192 var state = beginUpdateQueue(workInProgress, updateQueue, null, prevState, null, priorityLevel);193 if (prevState === state) {194 return bailoutOnAlreadyFinishedWork(current, workInProgress);195 }196 var element = state.element;197 reconcileChildren(current, workInProgress, element);198 memoizeState(workInProgress, state);199 return workInProgress.child;200 }201 return bailoutOnAlreadyFinishedWork(current, workInProgress);202 }203 function updateHostComponent(current, workInProgress) {204 pushHostContext(workInProgress);205 var nextProps = workInProgress.pendingProps;206 var prevProps = current !== null ? current.memoizedProps : null;207 var memoizedProps = workInProgress.memoizedProps;208 if (hasContextChanged()) {209 if (nextProps === null) {210 nextProps = memoizedProps;211 invariant(nextProps !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');212 }213 } else if (nextProps === null || memoizedProps === nextProps) {214 if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, memoizedProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {215 var child = workInProgress.progressedChild;216 while (child !== null) {217 child.pendingWorkPriority = OffscreenPriority;218 child = child.sibling;219 }220 return null;221 }222 return bailoutOnAlreadyFinishedWork(current, workInProgress);223 }224 var nextChildren = nextProps.children;225 var isDirectTextChild = shouldSetTextContent(nextProps);226 if (isDirectTextChild) {227 nextChildren = null;228 } else if (prevProps && shouldSetTextContent(prevProps)) {229 workInProgress.effectTag |= ContentReset;230 }231 markRef(current, workInProgress);232 if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, nextProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {233 if (workInProgress.progressedPriority === OffscreenPriority) {234 workInProgress.child = workInProgress.progressedChild;235 }236 reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);237 memoizeProps(workInProgress, nextProps);238 workInProgress.child = current !== null ? current.child : null;239 if (current === null) {240 var _child = workInProgress.progressedChild;241 while (_child !== null) {242 _child.effectTag = Placement;243 _child = _child.sibling;244 }245 }246 return null;247 } else {248 reconcileChildren(current, workInProgress, nextChildren);249 memoizeProps(workInProgress, nextProps);250 return workInProgress.child;251 }252 }253 function updateHostText(current, workInProgress) {254 var nextProps = workInProgress.pendingProps;255 if (nextProps === null) {256 nextProps = workInProgress.memoizedProps;257 }258 memoizeProps(workInProgress, nextProps);259 return null;260 }261 function mountIndeterminateComponent(current, workInProgress, priorityLevel) {262 invariant(current === null, 'An indeterminate component should never have mounted. This error is ' + 'likely caused by a bug in React. Please file an issue.');263 var fn = workInProgress.type;264 var props = workInProgress.pendingProps;265 var unmaskedContext = getUnmaskedContext(workInProgress);266 var context = getMaskedContext(workInProgress, unmaskedContext);267 var value;268 if (__DEV__) {269 ReactCurrentOwner.current = workInProgress;270 value = fn(props, context);271 } else {272 value = fn(props, context);273 }274 if (typeof value === 'object' && value !== null && typeof value.render === 'function') {275 workInProgress.tag = ClassComponent;276 var hasContext = pushContextProvider(workInProgress);277 adoptClassInstance(workInProgress, value);278 mountClassInstance(workInProgress, priorityLevel);279 return finishClassComponent(current, workInProgress, true, hasContext);280 } else {281 workInProgress.tag = FunctionalComponent;282 if (__DEV__) {283 var Component = workInProgress.type;284 if (Component) {285 warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');286 }287 if (workInProgress.ref !== null) {288 var info = '';289 var ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();290 if (ownerName) {291 info += '\n\nCheck the render method of `' + ownerName + '`.';292 }293 var warningKey = ownerName || workInProgress._debugID || '';294 var debugSource = workInProgress._debugSource;295 if (debugSource) {296 warningKey = debugSource.fileName + ':' + debugSource.lineNumber;297 }298 if (!warnedAboutStatelessRefs[warningKey]) {299 warnedAboutStatelessRefs[warningKey] = true;300 warning(false, 'Stateless function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s%s', info, ReactDebugCurrentFiber.getCurrentFiberStackAddendum());301 }302 }303 }304 reconcileChildren(current, workInProgress, value);305 memoizeProps(workInProgress, props);306 return workInProgress.child;307 }308 }309 function updateCoroutineComponent(current, workInProgress) {310 var nextCoroutine = workInProgress.pendingProps;311 if (hasContextChanged()) {312 if (nextCoroutine === null) {313 nextCoroutine = current && current.memoizedProps;314 invariant(nextCoroutine !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');315 }316 } else if (nextCoroutine === null || workInProgress.memoizedProps === nextCoroutine) {317 nextCoroutine = workInProgress.memoizedProps;318 }319 var nextChildren = nextCoroutine.children;320 var priorityLevel = workInProgress.pendingWorkPriority;321 workInProgress.memoizedProps = null;322 if (current === null) {323 workInProgress.stateNode = mountChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);324 } else if (current.child === workInProgress.child) {325 clearDeletions(workInProgress);326 workInProgress.stateNode = reconcileChildFibers(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);327 transferDeletions(workInProgress);328 } else {329 workInProgress.stateNode = reconcileChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);330 transferDeletions(workInProgress);331 }332 memoizeProps(workInProgress, nextCoroutine);333 return workInProgress.stateNode;334 }335 function updatePortalComponent(current, workInProgress) {336 pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);337 var priorityLevel = workInProgress.pendingWorkPriority;338 var nextChildren = workInProgress.pendingProps;339 if (hasContextChanged()) {340 if (nextChildren === null) {341 nextChildren = current && current.memoizedProps;342 invariant(nextChildren != null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');343 }344 } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {345 return bailoutOnAlreadyFinishedWork(current, workInProgress);346 }347 if (current === null) {348 workInProgress.child = reconcileChildFibersInPlace(workInProgress, workInProgress.child, nextChildren, priorityLevel);349 memoizeProps(workInProgress, nextChildren);350 markChildAsProgressed(current, workInProgress, priorityLevel);351 } else {352 reconcileChildren(current, workInProgress, nextChildren);353 memoizeProps(workInProgress, nextChildren);354 }355 return workInProgress.child;356 }357 function bailoutOnAlreadyFinishedWork(current, workInProgress) {358 if (__DEV__) {359 cancelWorkTimer(workInProgress);360 }361 var priorityLevel = workInProgress.pendingWorkPriority;362 if (current && workInProgress.child === current.child) {363 clearDeletions(workInProgress);364 }365 cloneChildFibers(current, workInProgress);366 markChildAsProgressed(current, workInProgress, priorityLevel);367 return workInProgress.child;368 }369 function bailoutOnLowPriority(current, workInProgress) {370 if (__DEV__) {371 cancelWorkTimer(workInProgress);...

Full Screen

Full Screen

a4162600ecfb784e7fbd5e1407416c646910f4ReactFiberBeginWork.js

Source:a4162600ecfb784e7fbd5e1407416c646910f4ReactFiberBeginWork.js Github

copy

Full Screen

...94 if (nextChildren === null) {95 nextChildren = workInProgress.memoizedProps;96 }97 } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {98 return bailoutOnAlreadyFinishedWork(current, workInProgress);99 }100 reconcileChildren(current, workInProgress, nextChildren);101 memoizeProps(workInProgress, nextChildren);102 return workInProgress.child;103 }104 function markRef(current, workInProgress) {105 var ref = workInProgress.ref;106 if (ref !== null && (!current || current.ref !== ref)) {107 workInProgress.effectTag |= Ref;108 }109 }110 function updateFunctionalComponent(current, workInProgress) {111 var fn = workInProgress.type;112 var nextProps = workInProgress.pendingProps;113 var memoizedProps = workInProgress.memoizedProps;114 if (hasContextChanged()) {115 if (nextProps === null) {116 nextProps = memoizedProps;117 }118 } else {119 if (nextProps === null || memoizedProps === nextProps) {120 return bailoutOnAlreadyFinishedWork(current, workInProgress);121 }122 if (typeof fn.shouldComponentUpdate === 'function' && !fn.shouldComponentUpdate(memoizedProps, nextProps)) {123 memoizeProps(workInProgress, nextProps);124 return bailoutOnAlreadyFinishedWork(current, workInProgress);125 }126 }127 var unmaskedContext = getUnmaskedContext(workInProgress);128 var context = getMaskedContext(workInProgress, unmaskedContext);129 var nextChildren;130 if (__DEV__) {131 ReactCurrentOwner.current = workInProgress;132 ReactDebugCurrentFiber.phase = 'render';133 nextChildren = fn(nextProps, context);134 ReactDebugCurrentFiber.phase = null;135 } else {136 nextChildren = fn(nextProps, context);137 }138 reconcileChildren(current, workInProgress, nextChildren);139 memoizeProps(workInProgress, nextProps);140 return workInProgress.child;141 }142 function updateClassComponent(current, workInProgress, priorityLevel) {143 var hasContext = pushContextProvider(workInProgress);144 var shouldUpdate = void 0;145 if (current === null) {146 if (!workInProgress.stateNode) {147 constructClassInstance(workInProgress);148 mountClassInstance(workInProgress, priorityLevel);149 shouldUpdate = true;150 } else {151 shouldUpdate = resumeMountClassInstance(workInProgress, priorityLevel);152 }153 } else {154 shouldUpdate = updateClassInstance(current, workInProgress, priorityLevel);155 }156 return finishClassComponent(current, workInProgress, shouldUpdate, hasContext);157 }158 function finishClassComponent(current, workInProgress, shouldUpdate, hasContext) {159 markRef(current, workInProgress);160 if (!shouldUpdate) {161 return bailoutOnAlreadyFinishedWork(current, workInProgress);162 }163 var instance = workInProgress.stateNode;164 ReactCurrentOwner.current = workInProgress;165 var nextChildren = void 0;166 if (__DEV__) {167 ReactDebugCurrentFiber.phase = 'render';168 nextChildren = instance.render();169 ReactDebugCurrentFiber.phase = null;170 } else {171 nextChildren = instance.render();172 }173 reconcileChildren(current, workInProgress, nextChildren);174 memoizeState(workInProgress, instance.state);175 memoizeProps(workInProgress, instance.props);176 if (hasContext) {177 invalidateContextProvider(workInProgress);178 }179 return workInProgress.child;180 }181 function updateHostRoot(current, workInProgress, priorityLevel) {182 var root = workInProgress.stateNode;183 if (root.pendingContext) {184 pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);185 } else if (root.context) {186 pushTopLevelContextObject(workInProgress, root.context, false);187 }188 pushHostContainer(workInProgress, root.containerInfo);189 var updateQueue = workInProgress.updateQueue;190 if (updateQueue !== null) {191 var prevState = workInProgress.memoizedState;192 var state = beginUpdateQueue(workInProgress, updateQueue, null, prevState, null, priorityLevel);193 if (prevState === state) {194 return bailoutOnAlreadyFinishedWork(current, workInProgress);195 }196 var element = state.element;197 reconcileChildren(current, workInProgress, element);198 memoizeState(workInProgress, state);199 return workInProgress.child;200 }201 return bailoutOnAlreadyFinishedWork(current, workInProgress);202 }203 function updateHostComponent(current, workInProgress) {204 pushHostContext(workInProgress);205 var nextProps = workInProgress.pendingProps;206 var prevProps = current !== null ? current.memoizedProps : null;207 var memoizedProps = workInProgress.memoizedProps;208 if (hasContextChanged()) {209 if (nextProps === null) {210 nextProps = memoizedProps;211 invariant(nextProps !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');212 }213 } else if (nextProps === null || memoizedProps === nextProps) {214 if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, memoizedProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {215 var child = workInProgress.progressedChild;216 while (child !== null) {217 child.pendingWorkPriority = OffscreenPriority;218 child = child.sibling;219 }220 return null;221 }222 return bailoutOnAlreadyFinishedWork(current, workInProgress);223 }224 var nextChildren = nextProps.children;225 var isDirectTextChild = shouldSetTextContent(nextProps);226 if (isDirectTextChild) {227 nextChildren = null;228 } else if (prevProps && shouldSetTextContent(prevProps)) {229 workInProgress.effectTag |= ContentReset;230 }231 markRef(current, workInProgress);232 if (!useSyncScheduling && shouldDeprioritizeSubtree(workInProgress.type, nextProps) && workInProgress.pendingWorkPriority !== OffscreenPriority) {233 if (workInProgress.progressedPriority === OffscreenPriority) {234 workInProgress.child = workInProgress.progressedChild;235 }236 reconcileChildrenAtPriority(current, workInProgress, nextChildren, OffscreenPriority);237 memoizeProps(workInProgress, nextProps);238 workInProgress.child = current !== null ? current.child : null;239 if (current === null) {240 var _child = workInProgress.progressedChild;241 while (_child !== null) {242 _child.effectTag = Placement;243 _child = _child.sibling;244 }245 }246 return null;247 } else {248 reconcileChildren(current, workInProgress, nextChildren);249 memoizeProps(workInProgress, nextProps);250 return workInProgress.child;251 }252 }253 function updateHostText(current, workInProgress) {254 var nextProps = workInProgress.pendingProps;255 if (nextProps === null) {256 nextProps = workInProgress.memoizedProps;257 }258 memoizeProps(workInProgress, nextProps);259 return null;260 }261 function mountIndeterminateComponent(current, workInProgress, priorityLevel) {262 invariant(current === null, 'An indeterminate component should never have mounted. This error is ' + 'likely caused by a bug in React. Please file an issue.');263 var fn = workInProgress.type;264 var props = workInProgress.pendingProps;265 var unmaskedContext = getUnmaskedContext(workInProgress);266 var context = getMaskedContext(workInProgress, unmaskedContext);267 var value;268 if (__DEV__) {269 ReactCurrentOwner.current = workInProgress;270 value = fn(props, context);271 } else {272 value = fn(props, context);273 }274 if (typeof value === 'object' && value !== null && typeof value.render === 'function') {275 workInProgress.tag = ClassComponent;276 var hasContext = pushContextProvider(workInProgress);277 adoptClassInstance(workInProgress, value);278 mountClassInstance(workInProgress, priorityLevel);279 return finishClassComponent(current, workInProgress, true, hasContext);280 } else {281 workInProgress.tag = FunctionalComponent;282 if (__DEV__) {283 var Component = workInProgress.type;284 if (Component) {285 warning(!Component.childContextTypes, '%s(...): childContextTypes cannot be defined on a functional component.', Component.displayName || Component.name || 'Component');286 }287 if (workInProgress.ref !== null) {288 var info = '';289 var ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();290 if (ownerName) {291 info += '\n\nCheck the render method of `' + ownerName + '`.';292 }293 var warningKey = ownerName || workInProgress._debugID || '';294 var debugSource = workInProgress._debugSource;295 if (debugSource) {296 warningKey = debugSource.fileName + ':' + debugSource.lineNumber;297 }298 if (!warnedAboutStatelessRefs[warningKey]) {299 warnedAboutStatelessRefs[warningKey] = true;300 warning(false, 'Stateless function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s%s', info, ReactDebugCurrentFiber.getCurrentFiberStackAddendum());301 }302 }303 }304 reconcileChildren(current, workInProgress, value);305 memoizeProps(workInProgress, props);306 return workInProgress.child;307 }308 }309 function updateCoroutineComponent(current, workInProgress) {310 var nextCoroutine = workInProgress.pendingProps;311 if (hasContextChanged()) {312 if (nextCoroutine === null) {313 nextCoroutine = current && current.memoizedProps;314 invariant(nextCoroutine !== null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');315 }316 } else if (nextCoroutine === null || workInProgress.memoizedProps === nextCoroutine) {317 nextCoroutine = workInProgress.memoizedProps;318 }319 var nextChildren = nextCoroutine.children;320 var priorityLevel = workInProgress.pendingWorkPriority;321 workInProgress.memoizedProps = null;322 if (current === null) {323 workInProgress.stateNode = mountChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);324 } else if (current.child === workInProgress.child) {325 clearDeletions(workInProgress);326 workInProgress.stateNode = reconcileChildFibers(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);327 transferDeletions(workInProgress);328 } else {329 workInProgress.stateNode = reconcileChildFibersInPlace(workInProgress, workInProgress.stateNode, nextChildren, priorityLevel);330 transferDeletions(workInProgress);331 }332 memoizeProps(workInProgress, nextCoroutine);333 return workInProgress.stateNode;334 }335 function updatePortalComponent(current, workInProgress) {336 pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);337 var priorityLevel = workInProgress.pendingWorkPriority;338 var nextChildren = workInProgress.pendingProps;339 if (hasContextChanged()) {340 if (nextChildren === null) {341 nextChildren = current && current.memoizedProps;342 invariant(nextChildren != null, 'We should always have pending or current props. This error is ' + 'likely caused by a bug in React. Please file an issue.');343 }344 } else if (nextChildren === null || workInProgress.memoizedProps === nextChildren) {345 return bailoutOnAlreadyFinishedWork(current, workInProgress);346 }347 if (current === null) {348 workInProgress.child = reconcileChildFibersInPlace(workInProgress, workInProgress.child, nextChildren, priorityLevel);349 memoizeProps(workInProgress, nextChildren);350 markChildAsProgressed(current, workInProgress, priorityLevel);351 } else {352 reconcileChildren(current, workInProgress, nextChildren);353 memoizeProps(workInProgress, nextChildren);354 }355 return workInProgress.child;356 }357 function bailoutOnAlreadyFinishedWork(current, workInProgress) {358 if (__DEV__) {359 cancelWorkTimer(workInProgress);360 }361 var priorityLevel = workInProgress.pendingWorkPriority;362 if (current && workInProgress.child === current.child) {363 clearDeletions(workInProgress);364 }365 cloneChildFibers(current, workInProgress);366 markChildAsProgressed(current, workInProgress, priorityLevel);367 return workInProgress.child;368 }369 function bailoutOnLowPriority(current, workInProgress) {370 if (__DEV__) {371 cancelWorkTimer(workInProgress);...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const playwright = require('playwright');2(async () => {3 const browser = await playwright.chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.bailoutOnAlreadyFinishedWork();7 await page.screenshot({ path: 'example.png' });8 await browser.close();9})();10Example 2: Using the page.bailoutOnAlreadyFinishedWork() method to wait for a selector to appear11const playwright = require('playwright');12(async () => {13 const browser = await playwright.chromium.launch();14 const context = await browser.newContext();15 const page = await context.newPage();16 await page.bailoutOnAlreadyFinishedWork();17 await page.waitForSelector('text=Get Started');18 await page.screenshot({ path: 'example.png' });19 await browser.close();20})();21Example 3: Using the page.bailoutOnAlreadyFinishedWork() method to wait for a selector to appear and then click on it22const playwright = require('playwright');23(async () => {24 const browser = await playwright.chromium.launch();25 const context = await browser.newContext();26 const page = await context.newPage();27 await page.bailoutOnAlreadyFinishedWork();28 await page.waitForSelector('text=Get Started');29 await page.click('text=Get Started');30 await page.screenshot({ path: 'example.png' });31 await browser.close();32})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.bailoutOnAlreadyFinishedWork();7 await browser.close();8})();9 at processTicksAndRejections (internal/process/task_queues.js:93:5)10 at async Page.bailoutOnAlreadyFinishedWork (/Users/akshay/Downloads/bailout/node_modules/playwright/lib/server/cjs/dispatchers/pageDispatcher.js:192:5)11 at async Object.<anonymous> (/Users/akshay/Downloads/bailout/test.js:10:5)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.screenshot({ path: `example.png` });7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch();12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.screenshot({ path: `example.png` });15 await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19 const browser = await chromium.launch();20 const context = await browser.newContext();21 const page = await context.newPage();22 await page.screenshot({ path: `example.png` });23 await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27 const browser = await chromium.launch();28 const context = await browser.newContext();29 const page = await context.newPage();30 await page.screenshot({ path: `example.png` });31 await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35 const browser = await chromium.launch();36 const context = await browser.newContext();37 const page = await context.newPage();38 await page.screenshot({ path: `example.png` });39 await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43 const browser = await chromium.launch();44 const context = await browser.newContext();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.bailoutOnAlreadyFinishedWork();6 await page.waitForTimeout(5000);7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch();12 const page = await browser.newPage();13 const currentPage = await page._delegate._pageProxy._pageOrError();14 console.log(currentPage);15 await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19 const browser = await chromium.launch();20 const page = await browser.newPage();21 const currentPage = await page._delegate._pageProxy._pageOrError();22 console.log(currentPage);23 await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27 const browser = await chromium.launch();28 const page = await browser.newPage();29 const currentPage = await page._delegate._pageProxy._pageOrError();30 console.log(currentPage);31 await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35 const browser = await chromium.launch();36 const page = await browser.newPage();37 const currentPage = await page._delegate._pageProxy._pageOrError();38 console.log(currentPage);39 await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43 const browser = await chromium.launch();44 const page = await browser.newPage();45 const currentPage = await page._delegate._pageProxy._pageOrError();46 console.log(currentPage);47 await browser.close();48})();49const { chromium } = require('

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { Playwright } = require('playwright');2const playwright = new Playwright();3const browser = await playwright.chromium.launch();4const context = await browser.newContext();5const page = await context.newPage();6await page.bailoutOnAlreadyFinishedWork();7const { Playwright } = require('playwright');8const playwright = new Playwright();9const browser = await playwright.chromium.launch();10const context = await browser.newContext();11const page = await context.newPage();12await page.setDefaultTimeout(10000);13const { Playwright } = require('playwright');14const playwright = new Playwright();15const browser = await playwright.chromium.launch();16const context = await browser.newContext();17const page = await context.newPage();18await page.setDefaultNavigationTimeout(10000);19const { Playwright } = require('playwright');20const playwright = new Playwright();21const browser = await playwright.chromium.launch();22const context = await browser.newContext();23const page = await context.newPage();24await page.setDefaultTimeout(10000);25const { Playwright } = require('playwright');26const playwright = new Playwright();27const browser = await playwright.chromium.launch();28const context = await browser.newContext();29const page = await context.newPage();30await page.setDefaultNavigationTimeout(10000);31const { Playwright } = require('playwright');32const playwright = new Playwright();33const browser = await playwright.chromium.launch();34const context = await browser.newContext();35const page = await context.newPage();36await page.setDefaultTimeout(10000);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { Playwright } = require('playwright');2const playwright = new Playwright();3const browser = await playwright.chromium.launch();4const context = await browser.newContext();5const page = await context.newPage();6await page.fill('input[type=text]', 'Hello World');7await page.click('input[type=submit]');8await page.screenshot({ path: 'google.png' });9await page.bailoutOnAlreadyFinishedWork();10await browser.close();11module.exports = {12 use: {13 viewport: { width: 1280, height: 720 },14 launchOptions: {15 env: {16 },17 },18 },19};20{21 "scripts": {22 },23 "dependencies": {24 }25}26const { test, expect } = require('@playwright/test');27test('My first test', async ({ page }) => {28 await page.fill('input[type=text]', 'Hello World');29 await page.click('input[type=submit]');30 await page.screenshot({ path: 'google.png' });31 await page.bailoutOnAlreadyFinishedWork();32});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const playwright = require('playwright');2const internalAPI = require('playwright/lib/internal/api');3(async () => {4 const browser = await playwright.chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.waitForSelector('input[name=q]');8 await page.fill('input[name=q]', 'hello world');9 await page.keyboard.press('Enter');10 await page.waitForSelector('h3');11 await browser.close();12})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { Playwright } = require('playwright');2const { Internal } = require('playwright/lib/internal');3const { Page } = require('playwright/lib/page');4const { Frame } = require('playwright/lib/frame');5const playwright = Playwright.create();6const browser = await playwright.chromium.launch();7const page = await browser.newPage();8const frame = await page.mainFrame();9await frame.bailoutOnAlreadyFinishedWork();10await page.bailoutOnAlreadyFinishedWork();11await Internal.bailoutOnAlreadyFinishedWork();12await playwright.bailoutOnAlreadyFinishedWork();13await browser.bailoutOnAlreadyFinishedWork();14await browserContext.bailoutOnAlreadyFinishedWork();15await browserServer.bailoutOnAlreadyFinishedWork();16await browserType.bailoutOnAlreadyFinishedWork();17await browser.bailoutOnAlreadyFinishedWork();18await browserContext.bailoutOnAlreadyFinishedWork();19await browserServer.bailoutOnAlreadyFinishedWork();20await browserType.bailoutOnAlreadyFinishedWork();21await browser.bailoutOnAlreadyFinishedWork();22await browserContext.bailoutOnAlreadyFinishedWork();23await browserServer.bailoutOnAlreadyFinishedWork();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { Playwright } = require('playwright-core');2const playwright = new Playwright(require('playwright-core/lib/server/playwright.js'));3const { chromium } = playwright;4(async () => {5 const browser = await chromium.launch();6 const context = await browser.newContext();7 const page = await context.newPage();8 const testRunner = await page.evaluateHandle( () => window.testRunner);9 await testRunner.evaluate( testRunner => {10 testRunner.bailoutOnAlreadyFinishedWork();11 });12 await page.screenshot({ path: 'google.png' });13 await browser.close();14})();15[Apache 2.0](LICENSE)

Full Screen

Full Screen

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

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

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful