Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More
How to use deleteRemainingChildren method in Playwright Internal
Best JavaScript code snippet using playwright-internal
ce6df42c5b933ee2ca14358e199c7078c8e06aReactChildFiber.js
Source:ce6df42c5b933ee2ca14358e199c7078c8e06aReactChildFiber.js 
...108 }109 childToDelete.nextEffect = null;110 childToDelete.effectTag = Deletion;111 }112 function deleteRemainingChildren(returnFiber, currentFirstChild) {113 if (!shouldTrackSideEffects) {114 return null;115 }116 var childToDelete = currentFirstChild;117 while (childToDelete !== null) {118 deleteChild(returnFiber, childToDelete);119 childToDelete = childToDelete.sibling;120 }121 return null;122 }123 function mapRemainingChildren(returnFiber, currentFirstChild) {124 var existingChildren = new Map();125 var existingChild = currentFirstChild;126 while (existingChild !== null) {127 if (existingChild.key !== null) {128 existingChildren.set(existingChild.key, existingChild);129 } else {130 existingChildren.set(existingChild.index, existingChild);131 }132 existingChild = existingChild.sibling;133 }134 return existingChildren;135 }136 function useFiber(fiber, priority) {137 if (shouldClone) {138 var clone = cloneFiber(fiber, priority);139 clone.index = 0;140 clone.sibling = null;141 return clone;142 } else {143 fiber.pendingWorkPriority = priority;144 fiber.effectTag = NoEffect;145 fiber.index = 0;146 fiber.sibling = null;147 return fiber;148 }149 }150 function placeChild(newFiber, lastPlacedIndex, newIndex) {151 newFiber.index = newIndex;152 if (!shouldTrackSideEffects) {153 return lastPlacedIndex;154 }155 var current = newFiber.alternate;156 if (current !== null) {157 var oldIndex = current.index;158 if (oldIndex < lastPlacedIndex) {159 newFiber.effectTag = Placement;160 return lastPlacedIndex;161 } else {162 return oldIndex;163 }164 } else {165 newFiber.effectTag = Placement;166 return lastPlacedIndex;167 }168 }169 function placeSingleChild(newFiber) {170 if (shouldTrackSideEffects && newFiber.alternate === null) {171 newFiber.effectTag = Placement;172 }173 return newFiber;174 }175 function updateTextNode(returnFiber, current, textContent, priority) {176 if (current === null || current.tag !== HostText) {177 var created = createFiberFromText(textContent, priority);178 created.return = returnFiber;179 return created;180 } else {181 var existing = useFiber(current, priority);182 existing.pendingProps = textContent;183 existing.return = returnFiber;184 return existing;185 }186 }187 function updateElement(returnFiber, current, element, priority) {188 if (current === null || current.type !== element.type) {189 var created = createFiberFromElement(element, priority);190 created.ref = coerceRef(current, element);191 created.return = returnFiber;192 return created;193 } else {194 var existing = useFiber(current, priority);195 existing.ref = coerceRef(current, element);196 existing.pendingProps = element.props;197 existing.return = returnFiber;198 if (__DEV__) {199 existing._debugSource = element._source;200 existing._debugOwner = element._owner;201 }202 return existing;203 }204 }205 function updateCoroutine(returnFiber, current, coroutine, priority) {206 if (current === null || current.tag !== CoroutineComponent) {207 var created = createFiberFromCoroutine(coroutine, priority);208 created.return = returnFiber;209 return created;210 } else {211 var existing = useFiber(current, priority);212 existing.pendingProps = coroutine;213 existing.return = returnFiber;214 return existing;215 }216 }217 function updateYield(returnFiber, current, yieldNode, priority) {218 if (current === null || current.tag !== YieldComponent) {219 var created = createFiberFromYield(yieldNode, priority);220 created.type = yieldNode.value;221 created.return = returnFiber;222 return created;223 } else {224 var existing = useFiber(current, priority);225 existing.type = yieldNode.value;226 existing.return = returnFiber;227 return existing;228 }229 }230 function updatePortal(returnFiber, current, portal, priority) {231 if (current === null || current.tag !== HostPortal || current.stateNode.containerInfo !== portal.containerInfo || current.stateNode.implementation !== portal.implementation) {232 var created = createFiberFromPortal(portal, priority);233 created.return = returnFiber;234 return created;235 } else {236 var existing = useFiber(current, priority);237 existing.pendingProps = portal.children || [];238 existing.return = returnFiber;239 return existing;240 }241 }242 function updateFragment(returnFiber, current, fragment, priority) {243 if (current === null || current.tag !== Fragment) {244 var created = createFiberFromFragment(fragment, priority);245 created.return = returnFiber;246 return created;247 } else {248 var existing = useFiber(current, priority);249 existing.pendingProps = fragment;250 existing.return = returnFiber;251 return existing;252 }253 }254 function createChild(returnFiber, newChild, priority) {255 if (typeof newChild === 'string' || typeof newChild === 'number') {256 var created = createFiberFromText('' + newChild, priority);257 created.return = returnFiber;258 return created;259 }260 if (typeof newChild === 'object' && newChild !== null) {261 switch (newChild.$$typeof) {262 case REACT_ELEMENT_TYPE:263 {264 var _created = createFiberFromElement(newChild, priority);265 _created.ref = coerceRef(null, newChild);266 _created.return = returnFiber;267 return _created;268 }269 case REACT_COROUTINE_TYPE:270 {271 var _created2 = createFiberFromCoroutine(newChild, priority);272 _created2.return = returnFiber;273 return _created2;274 }275 case REACT_YIELD_TYPE:276 {277 var _created3 = createFiberFromYield(newChild, priority);278 _created3.type = newChild.value;279 _created3.return = returnFiber;280 return _created3;281 }282 case REACT_PORTAL_TYPE:283 {284 var _created4 = createFiberFromPortal(newChild, priority);285 _created4.return = returnFiber;286 return _created4;287 }288 }289 if (isArray(newChild) || getIteratorFn(newChild)) {290 var _created5 = createFiberFromFragment(newChild, priority);291 _created5.return = returnFiber;292 return _created5;293 }294 throwOnInvalidObjectType(returnFiber, newChild);295 }296 return null;297 }298 function updateSlot(returnFiber, oldFiber, newChild, priority) {299 var key = oldFiber !== null ? oldFiber.key : null;300 if (typeof newChild === 'string' || typeof newChild === 'number') {301 if (key !== null) {302 return null;303 }304 return updateTextNode(returnFiber, oldFiber, '' + newChild, priority);305 }306 if (typeof newChild === 'object' && newChild !== null) {307 switch (newChild.$$typeof) {308 case REACT_ELEMENT_TYPE:309 {310 if (newChild.key === key) {311 return updateElement(returnFiber, oldFiber, newChild, priority);312 } else {313 return null;314 }315 }316 case REACT_COROUTINE_TYPE:317 {318 if (newChild.key === key) {319 return updateCoroutine(returnFiber, oldFiber, newChild, priority);320 } else {321 return null;322 }323 }324 case REACT_YIELD_TYPE:325 {326 if (key === null) {327 return updateYield(returnFiber, oldFiber, newChild, priority);328 } else {329 return null;330 }331 }332 case REACT_PORTAL_TYPE:333 {334 if (newChild.key === key) {335 return updatePortal(returnFiber, oldFiber, newChild, priority);336 } else {337 return null;338 }339 }340 }341 if (isArray(newChild) || getIteratorFn(newChild)) {342 if (key !== null) {343 return null;344 }345 return updateFragment(returnFiber, oldFiber, newChild, priority);346 }347 throwOnInvalidObjectType(returnFiber, newChild);348 }349 return null;350 }351 function updateFromMap(existingChildren, returnFiber, newIdx, newChild, priority) {352 if (typeof newChild === 'string' || typeof newChild === 'number') {353 var matchedFiber = existingChildren.get(newIdx) || null;354 return updateTextNode(returnFiber, matchedFiber, '' + newChild, priority);355 }356 if (typeof newChild === 'object' && newChild !== null) {357 switch (newChild.$$typeof) {358 case REACT_ELEMENT_TYPE:359 {360 var _matchedFiber = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;361 return updateElement(returnFiber, _matchedFiber, newChild, priority);362 }363 case REACT_COROUTINE_TYPE:364 {365 var _matchedFiber2 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;366 return updateCoroutine(returnFiber, _matchedFiber2, newChild, priority);367 }368 case REACT_YIELD_TYPE:369 {370 var _matchedFiber3 = existingChildren.get(newIdx) || null;371 return updateYield(returnFiber, _matchedFiber3, newChild, priority);372 }373 case REACT_PORTAL_TYPE:374 {375 var _matchedFiber4 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;376 return updatePortal(returnFiber, _matchedFiber4, newChild, priority);377 }378 }379 if (isArray(newChild) || getIteratorFn(newChild)) {380 var _matchedFiber5 = existingChildren.get(newIdx) || null;381 return updateFragment(returnFiber, _matchedFiber5, newChild, priority);382 }383 throwOnInvalidObjectType(returnFiber, newChild);384 }385 return null;386 }387 function warnOnDuplicateKey(child, knownKeys) {388 if (__DEV__) {389 if (typeof child !== 'object' || child === null) {390 return knownKeys;391 }392 switch (child.$$typeof) {393 case REACT_ELEMENT_TYPE:394 case REACT_COROUTINE_TYPE:395 case REACT_PORTAL_TYPE:396 var key = child.key;397 if (typeof key !== 'string') {398 break;399 }400 if (knownKeys === null) {401 knownKeys = new Set();402 knownKeys.add(key);403 break;404 }405 if (!knownKeys.has(key)) {406 knownKeys.add(key);407 break;408 }409 warning(false, 'Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, ' + 'only the first child will be used.%s', key, getCurrentFiberStackAddendum());410 break;411 default:412 break;413 }414 }415 return knownKeys;416 }417 function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, priority) {418 if (__DEV__) {419 var knownKeys = null;420 for (var i = 0; i < newChildren.length; i++) {421 var child = newChildren[i];422 knownKeys = warnOnDuplicateKey(child, knownKeys);423 }424 }425 var resultingFirstChild = null;426 var previousNewFiber = null;427 var oldFiber = currentFirstChild;428 var lastPlacedIndex = 0;429 var newIdx = 0;430 var nextOldFiber = null;431 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {432 if (oldFiber.index > newIdx) {433 nextOldFiber = oldFiber;434 oldFiber = null;435 } else {436 nextOldFiber = oldFiber.sibling;437 }438 var newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], priority);439 if (newFiber === null) {440 if (oldFiber === null) {441 oldFiber = nextOldFiber;442 }443 break;444 }445 if (shouldTrackSideEffects) {446 if (oldFiber && newFiber.alternate === null) {447 deleteChild(returnFiber, oldFiber);448 }449 }450 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);451 if (previousNewFiber === null) {452 resultingFirstChild = newFiber;453 } else {454 previousNewFiber.sibling = newFiber;455 }456 previousNewFiber = newFiber;457 oldFiber = nextOldFiber;458 }459 if (newIdx === newChildren.length) {460 deleteRemainingChildren(returnFiber, oldFiber);461 return resultingFirstChild;462 }463 if (oldFiber === null) {464 for (; newIdx < newChildren.length; newIdx++) {465 var _newFiber = createChild(returnFiber, newChildren[newIdx], priority);466 if (!_newFiber) {467 continue;468 }469 lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx);470 if (previousNewFiber === null) {471 resultingFirstChild = _newFiber;472 } else {473 previousNewFiber.sibling = _newFiber;474 }475 previousNewFiber = _newFiber;476 }477 return resultingFirstChild;478 }479 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);480 for (; newIdx < newChildren.length; newIdx++) {481 var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], priority);482 if (_newFiber2) {483 if (shouldTrackSideEffects) {484 if (_newFiber2.alternate !== null) {485 existingChildren.delete(_newFiber2.key === null ? newIdx : _newFiber2.key);486 }487 }488 lastPlacedIndex = placeChild(_newFiber2, lastPlacedIndex, newIdx);489 if (previousNewFiber === null) {490 resultingFirstChild = _newFiber2;491 } else {492 previousNewFiber.sibling = _newFiber2;493 }494 previousNewFiber = _newFiber2;495 }496 }497 if (shouldTrackSideEffects) {498 existingChildren.forEach(function (child) {499 return deleteChild(returnFiber, child);500 });501 }502 return resultingFirstChild;503 }504 function reconcileChildrenIterator(returnFiber, currentFirstChild, newChildrenIterable, priority) {505 var iteratorFn = getIteratorFn(newChildrenIterable);506 invariant(typeof iteratorFn === 'function', 'An object is not an iterable. This error is likely caused by a bug in ' + 'React. Please file an issue.');507 if (__DEV__) {508 if (typeof newChildrenIterable.entries === 'function') {509 var possibleMap = newChildrenIterable;510 if (possibleMap.entries === iteratorFn) {511 var mapsAsChildrenAddendum = '';512 var owner = ReactCurrentOwner.owner || returnFiber._debugOwner;513 if (owner && typeof owner.tag === 'number') {514 var mapsAsChildrenOwnerName = getComponentName(owner);515 if (mapsAsChildrenOwnerName) {516 mapsAsChildrenAddendum = '\n\nCheck the render method of `' + mapsAsChildrenOwnerName + '`.';517 }518 }519 warning(didWarnAboutMaps, 'Using Maps as children is unsupported and will likely yield ' + 'unexpected results. Convert it to a sequence/iterable of keyed ' + 'ReactElements instead.%s', mapsAsChildrenAddendum);520 didWarnAboutMaps = true;521 }522 }523 var _newChildren = iteratorFn.call(newChildrenIterable);524 if (_newChildren) {525 var knownKeys = null;526 var _step = _newChildren.next();527 for (; !_step.done; _step = _newChildren.next()) {528 var child = _step.value;529 knownKeys = warnOnDuplicateKey(child, knownKeys);530 }531 }532 }533 var newChildren = iteratorFn.call(newChildrenIterable);534 invariant(newChildren != null, 'An iterable object provided no iterator.');535 var resultingFirstChild = null;536 var previousNewFiber = null;537 var oldFiber = currentFirstChild;538 var lastPlacedIndex = 0;539 var newIdx = 0;540 var nextOldFiber = null;541 var step = newChildren.next();542 for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next()) {543 if (oldFiber.index > newIdx) {544 nextOldFiber = oldFiber;545 oldFiber = null;546 } else {547 nextOldFiber = oldFiber.sibling;548 }549 var newFiber = updateSlot(returnFiber, oldFiber, step.value, priority);550 if (newFiber === null) {551 if (!oldFiber) {552 oldFiber = nextOldFiber;553 }554 break;555 }556 if (shouldTrackSideEffects) {557 if (oldFiber && newFiber.alternate === null) {558 deleteChild(returnFiber, oldFiber);559 }560 }561 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);562 if (previousNewFiber === null) {563 resultingFirstChild = newFiber;564 } else {565 previousNewFiber.sibling = newFiber;566 }567 previousNewFiber = newFiber;568 oldFiber = nextOldFiber;569 }570 if (step.done) {571 deleteRemainingChildren(returnFiber, oldFiber);572 return resultingFirstChild;573 }574 if (oldFiber === null) {575 for (; !step.done; newIdx++, step = newChildren.next()) {576 var _newFiber3 = createChild(returnFiber, step.value, priority);577 if (_newFiber3 === null) {578 continue;579 }580 lastPlacedIndex = placeChild(_newFiber3, lastPlacedIndex, newIdx);581 if (previousNewFiber === null) {582 resultingFirstChild = _newFiber3;583 } else {584 previousNewFiber.sibling = _newFiber3;585 }586 previousNewFiber = _newFiber3;587 }588 return resultingFirstChild;589 }590 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);591 for (; !step.done; newIdx++, step = newChildren.next()) {592 var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, priority);593 if (_newFiber4 !== null) {594 if (shouldTrackSideEffects) {595 if (_newFiber4.alternate !== null) {596 existingChildren.delete(_newFiber4.key === null ? newIdx : _newFiber4.key);597 }598 }599 lastPlacedIndex = placeChild(_newFiber4, lastPlacedIndex, newIdx);600 if (previousNewFiber === null) {601 resultingFirstChild = _newFiber4;602 } else {603 previousNewFiber.sibling = _newFiber4;604 }605 previousNewFiber = _newFiber4;606 }607 }608 if (shouldTrackSideEffects) {609 existingChildren.forEach(function (child) {610 return deleteChild(returnFiber, child);611 });612 }613 return resultingFirstChild;614 }615 function reconcileSingleTextNode(returnFiber, currentFirstChild, textContent, priority) {616 if (currentFirstChild !== null && currentFirstChild.tag === HostText) {617 deleteRemainingChildren(returnFiber, currentFirstChild.sibling);618 var existing = useFiber(currentFirstChild, priority);619 existing.pendingProps = textContent;620 existing.return = returnFiber;621 return existing;622 }623 deleteRemainingChildren(returnFiber, currentFirstChild);624 var created = createFiberFromText(textContent, priority);625 created.return = returnFiber;626 return created;627 }628 function reconcileSingleElement(returnFiber, currentFirstChild, element, priority) {629 var key = element.key;630 var child = currentFirstChild;631 while (child !== null) {632 if (child.key === key) {633 if (child.type === element.type) {634 deleteRemainingChildren(returnFiber, child.sibling);635 var existing = useFiber(child, priority);636 existing.ref = coerceRef(child, element);637 existing.pendingProps = element.props;638 existing.return = returnFiber;639 if (__DEV__) {640 existing._debugSource = element._source;641 existing._debugOwner = element._owner;642 }643 return existing;644 } else {645 deleteRemainingChildren(returnFiber, child);646 break;647 }648 } else {649 deleteChild(returnFiber, child);650 }651 child = child.sibling;652 }653 var created = createFiberFromElement(element, priority);654 created.ref = coerceRef(currentFirstChild, element);655 created.return = returnFiber;656 return created;657 }658 function reconcileSingleCoroutine(returnFiber, currentFirstChild, coroutine, priority) {659 var key = coroutine.key;660 var child = currentFirstChild;661 while (child !== null) {662 if (child.key === key) {663 if (child.tag === CoroutineComponent) {664 deleteRemainingChildren(returnFiber, child.sibling);665 var existing = useFiber(child, priority);666 existing.pendingProps = coroutine;667 existing.return = returnFiber;668 return existing;669 } else {670 deleteRemainingChildren(returnFiber, child);671 break;672 }673 } else {674 deleteChild(returnFiber, child);675 }676 child = child.sibling;677 }678 var created = createFiberFromCoroutine(coroutine, priority);679 created.return = returnFiber;680 return created;681 }682 function reconcileSingleYield(returnFiber, currentFirstChild, yieldNode, priority) {683 var child = currentFirstChild;684 if (child !== null) {685 if (child.tag === YieldComponent) {686 deleteRemainingChildren(returnFiber, child.sibling);687 var existing = useFiber(child, priority);688 existing.type = yieldNode.value;689 existing.return = returnFiber;690 return existing;691 } else {692 deleteRemainingChildren(returnFiber, child);693 }694 }695 var created = createFiberFromYield(yieldNode, priority);696 created.type = yieldNode.value;697 created.return = returnFiber;698 return created;699 }700 function reconcileSinglePortal(returnFiber, currentFirstChild, portal, priority) {701 var key = portal.key;702 var child = currentFirstChild;703 while (child !== null) {704 if (child.key === key) {705 if (child.tag === HostPortal && child.stateNode.containerInfo === portal.containerInfo && child.stateNode.implementation === portal.implementation) {706 deleteRemainingChildren(returnFiber, child.sibling);707 var existing = useFiber(child, priority);708 existing.pendingProps = portal.children || [];709 existing.return = returnFiber;710 return existing;711 } else {712 deleteRemainingChildren(returnFiber, child);713 break;714 }715 } else {716 deleteChild(returnFiber, child);717 }718 child = child.sibling;719 }720 var created = createFiberFromPortal(portal, priority);721 created.return = returnFiber;722 return created;723 }724 function reconcileChildFibers(returnFiber, currentFirstChild, newChild, priority) {725 var disableNewFiberFeatures = ReactFeatureFlags.disableNewFiberFeatures;726 var isObject = typeof newChild === 'object' && newChild !== null;727 if (isObject) {728 if (disableNewFiberFeatures) {729 switch (newChild.$$typeof) {730 case REACT_ELEMENT_TYPE:731 return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, priority));732 case REACT_PORTAL_TYPE:733 return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, priority));734 }735 } else {736 switch (newChild.$$typeof) {737 case REACT_ELEMENT_TYPE:738 return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, priority));739 case REACT_COROUTINE_TYPE:740 return placeSingleChild(reconcileSingleCoroutine(returnFiber, currentFirstChild, newChild, priority));741 case REACT_YIELD_TYPE:742 return placeSingleChild(reconcileSingleYield(returnFiber, currentFirstChild, newChild, priority));743 case REACT_PORTAL_TYPE:744 return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, priority));745 }746 }747 }748 if (disableNewFiberFeatures) {749 switch (returnFiber.tag) {750 case ClassComponent:751 {752 if (__DEV__) {753 var instance = returnFiber.stateNode;754 if (instance.render._isMockFunction && typeof newChild === 'undefined') {755 break;756 }757 }758 var Component = returnFiber.type;759 invariant(newChild === null || newChild === false, '%s.render(): A valid React element (or null) must be returned. ' + 'You may have returned undefined, an array or some other ' + 'invalid object.', Component.displayName || Component.name || 'Component');760 break;761 }762 case FunctionalComponent:763 {764 var _Component = returnFiber.type;765 invariant(newChild === null || newChild === false, '%s(...): A valid React element (or null) must be returned. ' + 'You may have returned undefined, an array or some other ' + 'invalid object.', _Component.displayName || _Component.name || 'Component');766 break;767 }768 }769 }770 if (typeof newChild === 'string' || typeof newChild === 'number') {771 return placeSingleChild(reconcileSingleTextNode(returnFiber, currentFirstChild, '' + newChild, priority));772 }773 if (isArray(newChild)) {774 return reconcileChildrenArray(returnFiber, currentFirstChild, newChild, priority);775 }776 if (getIteratorFn(newChild)) {777 return reconcileChildrenIterator(returnFiber, currentFirstChild, newChild, priority);778 }779 if (isObject) {780 throwOnInvalidObjectType(returnFiber, newChild);781 }782 if (!disableNewFiberFeatures && typeof newChild === 'undefined') {783 switch (returnFiber.tag) {784 case ClassComponent:785 {786 if (__DEV__) {787 var _instance = returnFiber.stateNode;788 if (_instance.render._isMockFunction) {789 break;790 }791 }792 }793 case FunctionalComponent:794 {795 var _Component2 = returnFiber.type;796 invariant(false, '%s(...): Nothing was returned from render. This usually means a ' + 'return statement is missing. Or, to render nothing, ' + 'return null.', _Component2.displayName || _Component2.name || 'Component');797 }798 }799 }800 return deleteRemainingChildren(returnFiber, currentFirstChild);801 }802 return reconcileChildFibers;803}804exports.reconcileChildFibers = ChildReconciler(true, true);805exports.reconcileChildFibersInPlace = ChildReconciler(false, true);806exports.mountChildFibersInPlace = ChildReconciler(false, false);807exports.cloneChildFibers = function (current, workInProgress) {808 if (!workInProgress.child) {809 return;810 }811 if (current !== null && workInProgress.child === current.child) {812 var currentChild = workInProgress.child;813 var newChild = cloneFiber(currentChild, currentChild.pendingWorkPriority);814 workInProgress.child = newChild;...
2777a7e15608de56c000ecbbdfa33c57bd5a43ReactChildFiber.js
Source:2777a7e15608de56c000ecbbdfa33c57bd5a43ReactChildFiber.js
...108 }109 childToDelete.nextEffect = null;110 childToDelete.effectTag = Deletion;111 }112 function deleteRemainingChildren(returnFiber, currentFirstChild) {113 if (!shouldTrackSideEffects) {114 return null;115 }116 var childToDelete = currentFirstChild;117 while (childToDelete !== null) {118 deleteChild(returnFiber, childToDelete);119 childToDelete = childToDelete.sibling;120 }121 return null;122 }123 function mapRemainingChildren(returnFiber, currentFirstChild) {124 var existingChildren = new Map();125 var existingChild = currentFirstChild;126 while (existingChild !== null) {127 if (existingChild.key !== null) {128 existingChildren.set(existingChild.key, existingChild);129 } else {130 existingChildren.set(existingChild.index, existingChild);131 }132 existingChild = existingChild.sibling;133 }134 return existingChildren;135 }136 function useFiber(fiber, priority) {137 if (shouldClone) {138 var clone = cloneFiber(fiber, priority);139 clone.index = 0;140 clone.sibling = null;141 return clone;142 } else {143 fiber.pendingWorkPriority = priority;144 fiber.effectTag = NoEffect;145 fiber.index = 0;146 fiber.sibling = null;147 return fiber;148 }149 }150 function placeChild(newFiber, lastPlacedIndex, newIndex) {151 newFiber.index = newIndex;152 if (!shouldTrackSideEffects) {153 return lastPlacedIndex;154 }155 var current = newFiber.alternate;156 if (current !== null) {157 var oldIndex = current.index;158 if (oldIndex < lastPlacedIndex) {159 newFiber.effectTag = Placement;160 return lastPlacedIndex;161 } else {162 return oldIndex;163 }164 } else {165 newFiber.effectTag = Placement;166 return lastPlacedIndex;167 }168 }169 function placeSingleChild(newFiber) {170 if (shouldTrackSideEffects && newFiber.alternate === null) {171 newFiber.effectTag = Placement;172 }173 return newFiber;174 }175 function updateTextNode(returnFiber, current, textContent, priority) {176 if (current === null || current.tag !== HostText) {177 var created = createFiberFromText(textContent, priority);178 created.return = returnFiber;179 return created;180 } else {181 var existing = useFiber(current, priority);182 existing.pendingProps = textContent;183 existing.return = returnFiber;184 return existing;185 }186 }187 function updateElement(returnFiber, current, element, priority) {188 if (current === null || current.type !== element.type) {189 var created = createFiberFromElement(element, priority);190 created.ref = coerceRef(current, element);191 created.return = returnFiber;192 return created;193 } else {194 var existing = useFiber(current, priority);195 existing.ref = coerceRef(current, element);196 existing.pendingProps = element.props;197 existing.return = returnFiber;198 if (__DEV__) {199 existing._debugSource = element._source;200 existing._debugOwner = element._owner;201 }202 return existing;203 }204 }205 function updateCoroutine(returnFiber, current, coroutine, priority) {206 if (current === null || current.tag !== CoroutineComponent) {207 var created = createFiberFromCoroutine(coroutine, priority);208 created.return = returnFiber;209 return created;210 } else {211 var existing = useFiber(current, priority);212 existing.pendingProps = coroutine;213 existing.return = returnFiber;214 return existing;215 }216 }217 function updateYield(returnFiber, current, yieldNode, priority) {218 if (current === null || current.tag !== YieldComponent) {219 var created = createFiberFromYield(yieldNode, priority);220 created.type = yieldNode.value;221 created.return = returnFiber;222 return created;223 } else {224 var existing = useFiber(current, priority);225 existing.type = yieldNode.value;226 existing.return = returnFiber;227 return existing;228 }229 }230 function updatePortal(returnFiber, current, portal, priority) {231 if (current === null || current.tag !== HostPortal || current.stateNode.containerInfo !== portal.containerInfo || current.stateNode.implementation !== portal.implementation) {232 var created = createFiberFromPortal(portal, priority);233 created.return = returnFiber;234 return created;235 } else {236 var existing = useFiber(current, priority);237 existing.pendingProps = portal.children || [];238 existing.return = returnFiber;239 return existing;240 }241 }242 function updateFragment(returnFiber, current, fragment, priority) {243 if (current === null || current.tag !== Fragment) {244 var created = createFiberFromFragment(fragment, priority);245 created.return = returnFiber;246 return created;247 } else {248 var existing = useFiber(current, priority);249 existing.pendingProps = fragment;250 existing.return = returnFiber;251 return existing;252 }253 }254 function createChild(returnFiber, newChild, priority) {255 if (typeof newChild === 'string' || typeof newChild === 'number') {256 var created = createFiberFromText('' + newChild, priority);257 created.return = returnFiber;258 return created;259 }260 if (typeof newChild === 'object' && newChild !== null) {261 switch (newChild.$$typeof) {262 case REACT_ELEMENT_TYPE:263 {264 var _created = createFiberFromElement(newChild, priority);265 _created.ref = coerceRef(null, newChild);266 _created.return = returnFiber;267 return _created;268 }269 case REACT_COROUTINE_TYPE:270 {271 var _created2 = createFiberFromCoroutine(newChild, priority);272 _created2.return = returnFiber;273 return _created2;274 }275 case REACT_YIELD_TYPE:276 {277 var _created3 = createFiberFromYield(newChild, priority);278 _created3.type = newChild.value;279 _created3.return = returnFiber;280 return _created3;281 }282 case REACT_PORTAL_TYPE:283 {284 var _created4 = createFiberFromPortal(newChild, priority);285 _created4.return = returnFiber;286 return _created4;287 }288 }289 if (isArray(newChild) || getIteratorFn(newChild)) {290 var _created5 = createFiberFromFragment(newChild, priority);291 _created5.return = returnFiber;292 return _created5;293 }294 throwOnInvalidObjectType(returnFiber, newChild);295 }296 return null;297 }298 function updateSlot(returnFiber, oldFiber, newChild, priority) {299 var key = oldFiber !== null ? oldFiber.key : null;300 if (typeof newChild === 'string' || typeof newChild === 'number') {301 if (key !== null) {302 return null;303 }304 return updateTextNode(returnFiber, oldFiber, '' + newChild, priority);305 }306 if (typeof newChild === 'object' && newChild !== null) {307 switch (newChild.$$typeof) {308 case REACT_ELEMENT_TYPE:309 {310 if (newChild.key === key) {311 return updateElement(returnFiber, oldFiber, newChild, priority);312 } else {313 return null;314 }315 }316 case REACT_COROUTINE_TYPE:317 {318 if (newChild.key === key) {319 return updateCoroutine(returnFiber, oldFiber, newChild, priority);320 } else {321 return null;322 }323 }324 case REACT_YIELD_TYPE:325 {326 if (key === null) {327 return updateYield(returnFiber, oldFiber, newChild, priority);328 } else {329 return null;330 }331 }332 case REACT_PORTAL_TYPE:333 {334 if (newChild.key === key) {335 return updatePortal(returnFiber, oldFiber, newChild, priority);336 } else {337 return null;338 }339 }340 }341 if (isArray(newChild) || getIteratorFn(newChild)) {342 if (key !== null) {343 return null;344 }345 return updateFragment(returnFiber, oldFiber, newChild, priority);346 }347 throwOnInvalidObjectType(returnFiber, newChild);348 }349 return null;350 }351 function updateFromMap(existingChildren, returnFiber, newIdx, newChild, priority) {352 if (typeof newChild === 'string' || typeof newChild === 'number') {353 var matchedFiber = existingChildren.get(newIdx) || null;354 return updateTextNode(returnFiber, matchedFiber, '' + newChild, priority);355 }356 if (typeof newChild === 'object' && newChild !== null) {357 switch (newChild.$$typeof) {358 case REACT_ELEMENT_TYPE:359 {360 var _matchedFiber = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;361 return updateElement(returnFiber, _matchedFiber, newChild, priority);362 }363 case REACT_COROUTINE_TYPE:364 {365 var _matchedFiber2 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;366 return updateCoroutine(returnFiber, _matchedFiber2, newChild, priority);367 }368 case REACT_YIELD_TYPE:369 {370 var _matchedFiber3 = existingChildren.get(newIdx) || null;371 return updateYield(returnFiber, _matchedFiber3, newChild, priority);372 }373 case REACT_PORTAL_TYPE:374 {375 var _matchedFiber4 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;376 return updatePortal(returnFiber, _matchedFiber4, newChild, priority);377 }378 }379 if (isArray(newChild) || getIteratorFn(newChild)) {380 var _matchedFiber5 = existingChildren.get(newIdx) || null;381 return updateFragment(returnFiber, _matchedFiber5, newChild, priority);382 }383 throwOnInvalidObjectType(returnFiber, newChild);384 }385 return null;386 }387 function warnOnDuplicateKey(child, knownKeys) {388 if (__DEV__) {389 if (typeof child !== 'object' || child === null) {390 return knownKeys;391 }392 switch (child.$$typeof) {393 case REACT_ELEMENT_TYPE:394 case REACT_COROUTINE_TYPE:395 case REACT_PORTAL_TYPE:396 var key = child.key;397 if (typeof key !== 'string') {398 break;399 }400 if (knownKeys === null) {401 knownKeys = new Set();402 knownKeys.add(key);403 break;404 }405 if (!knownKeys.has(key)) {406 knownKeys.add(key);407 break;408 }409 warning(false, 'Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, ' + 'only the first child will be used.%s', key, getCurrentFiberStackAddendum());410 break;411 default:412 break;413 }414 }415 return knownKeys;416 }417 function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, priority) {418 if (__DEV__) {419 var knownKeys = null;420 for (var i = 0; i < newChildren.length; i++) {421 var child = newChildren[i];422 knownKeys = warnOnDuplicateKey(child, knownKeys);423 }424 }425 var resultingFirstChild = null;426 var previousNewFiber = null;427 var oldFiber = currentFirstChild;428 var lastPlacedIndex = 0;429 var newIdx = 0;430 var nextOldFiber = null;431 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {432 if (oldFiber.index > newIdx) {433 nextOldFiber = oldFiber;434 oldFiber = null;435 } else {436 nextOldFiber = oldFiber.sibling;437 }438 var newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], priority);439 if (newFiber === null) {440 if (oldFiber === null) {441 oldFiber = nextOldFiber;442 }443 break;444 }445 if (shouldTrackSideEffects) {446 if (oldFiber && newFiber.alternate === null) {447 deleteChild(returnFiber, oldFiber);448 }449 }450 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);451 if (previousNewFiber === null) {452 resultingFirstChild = newFiber;453 } else {454 previousNewFiber.sibling = newFiber;455 }456 previousNewFiber = newFiber;457 oldFiber = nextOldFiber;458 }459 if (newIdx === newChildren.length) {460 deleteRemainingChildren(returnFiber, oldFiber);461 return resultingFirstChild;462 }463 if (oldFiber === null) {464 for (; newIdx < newChildren.length; newIdx++) {465 var _newFiber = createChild(returnFiber, newChildren[newIdx], priority);466 if (!_newFiber) {467 continue;468 }469 lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx);470 if (previousNewFiber === null) {471 resultingFirstChild = _newFiber;472 } else {473 previousNewFiber.sibling = _newFiber;474 }475 previousNewFiber = _newFiber;476 }477 return resultingFirstChild;478 }479 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);480 for (; newIdx < newChildren.length; newIdx++) {481 var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], priority);482 if (_newFiber2) {483 if (shouldTrackSideEffects) {484 if (_newFiber2.alternate !== null) {485 existingChildren.delete(_newFiber2.key === null ? newIdx : _newFiber2.key);486 }487 }488 lastPlacedIndex = placeChild(_newFiber2, lastPlacedIndex, newIdx);489 if (previousNewFiber === null) {490 resultingFirstChild = _newFiber2;491 } else {492 previousNewFiber.sibling = _newFiber2;493 }494 previousNewFiber = _newFiber2;495 }496 }497 if (shouldTrackSideEffects) {498 existingChildren.forEach(function (child) {499 return deleteChild(returnFiber, child);500 });501 }502 return resultingFirstChild;503 }504 function reconcileChildrenIterator(returnFiber, currentFirstChild, newChildrenIterable, priority) {505 var iteratorFn = getIteratorFn(newChildrenIterable);506 invariant(typeof iteratorFn === 'function', 'An object is not an iterable. This error is likely caused by a bug in ' + 'React. Please file an issue.');507 if (__DEV__) {508 if (typeof newChildrenIterable.entries === 'function') {509 var possibleMap = newChildrenIterable;510 if (possibleMap.entries === iteratorFn) {511 var mapsAsChildrenAddendum = '';512 var owner = ReactCurrentOwner.owner || returnFiber._debugOwner;513 if (owner && typeof owner.tag === 'number') {514 var mapsAsChildrenOwnerName = getComponentName(owner);515 if (mapsAsChildrenOwnerName) {516 mapsAsChildrenAddendum = '\n\nCheck the render method of `' + mapsAsChildrenOwnerName + '`.';517 }518 }519 warning(didWarnAboutMaps, 'Using Maps as children is unsupported and will likely yield ' + 'unexpected results. Convert it to a sequence/iterable of keyed ' + 'ReactElements instead.%s', mapsAsChildrenAddendum);520 didWarnAboutMaps = true;521 }522 }523 var _newChildren = iteratorFn.call(newChildrenIterable);524 if (_newChildren) {525 var knownKeys = null;526 var _step = _newChildren.next();527 for (; !_step.done; _step = _newChildren.next()) {528 var child = _step.value;529 knownKeys = warnOnDuplicateKey(child, knownKeys);530 }531 }532 }533 var newChildren = iteratorFn.call(newChildrenIterable);534 invariant(newChildren != null, 'An iterable object provided no iterator.');535 var resultingFirstChild = null;536 var previousNewFiber = null;537 var oldFiber = currentFirstChild;538 var lastPlacedIndex = 0;539 var newIdx = 0;540 var nextOldFiber = null;541 var step = newChildren.next();542 for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next()) {543 if (oldFiber.index > newIdx) {544 nextOldFiber = oldFiber;545 oldFiber = null;546 } else {547 nextOldFiber = oldFiber.sibling;548 }549 var newFiber = updateSlot(returnFiber, oldFiber, step.value, priority);550 if (newFiber === null) {551 if (!oldFiber) {552 oldFiber = nextOldFiber;553 }554 break;555 }556 if (shouldTrackSideEffects) {557 if (oldFiber && newFiber.alternate === null) {558 deleteChild(returnFiber, oldFiber);559 }560 }561 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);562 if (previousNewFiber === null) {563 resultingFirstChild = newFiber;564 } else {565 previousNewFiber.sibling = newFiber;566 }567 previousNewFiber = newFiber;568 oldFiber = nextOldFiber;569 }570 if (step.done) {571 deleteRemainingChildren(returnFiber, oldFiber);572 return resultingFirstChild;573 }574 if (oldFiber === null) {575 for (; !step.done; newIdx++, step = newChildren.next()) {576 var _newFiber3 = createChild(returnFiber, step.value, priority);577 if (_newFiber3 === null) {578 continue;579 }580 lastPlacedIndex = placeChild(_newFiber3, lastPlacedIndex, newIdx);581 if (previousNewFiber === null) {582 resultingFirstChild = _newFiber3;583 } else {584 previousNewFiber.sibling = _newFiber3;585 }586 previousNewFiber = _newFiber3;587 }588 return resultingFirstChild;589 }590 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);591 for (; !step.done; newIdx++, step = newChildren.next()) {592 var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, priority);593 if (_newFiber4 !== null) {594 if (shouldTrackSideEffects) {595 if (_newFiber4.alternate !== null) {596 existingChildren.delete(_newFiber4.key === null ? newIdx : _newFiber4.key);597 }598 }599 lastPlacedIndex = placeChild(_newFiber4, lastPlacedIndex, newIdx);600 if (previousNewFiber === null) {601 resultingFirstChild = _newFiber4;602 } else {603 previousNewFiber.sibling = _newFiber4;604 }605 previousNewFiber = _newFiber4;606 }607 }608 if (shouldTrackSideEffects) {609 existingChildren.forEach(function (child) {610 return deleteChild(returnFiber, child);611 });612 }613 return resultingFirstChild;614 }615 function reconcileSingleTextNode(returnFiber, currentFirstChild, textContent, priority) {616 if (currentFirstChild !== null && currentFirstChild.tag === HostText) {617 deleteRemainingChildren(returnFiber, currentFirstChild.sibling);618 var existing = useFiber(currentFirstChild, priority);619 existing.pendingProps = textContent;620 existing.return = returnFiber;621 return existing;622 }623 deleteRemainingChildren(returnFiber, currentFirstChild);624 var created = createFiberFromText(textContent, priority);625 created.return = returnFiber;626 return created;627 }628 function reconcileSingleElement(returnFiber, currentFirstChild, element, priority) {629 var key = element.key;630 var child = currentFirstChild;631 while (child !== null) {632 if (child.key === key) {633 if (child.type === element.type) {634 deleteRemainingChildren(returnFiber, child.sibling);635 var existing = useFiber(child, priority);636 existing.ref = coerceRef(child, element);637 existing.pendingProps = element.props;638 existing.return = returnFiber;639 if (__DEV__) {640 existing._debugSource = element._source;641 existing._debugOwner = element._owner;642 }643 return existing;644 } else {645 deleteRemainingChildren(returnFiber, child);646 break;647 }648 } else {649 deleteChild(returnFiber, child);650 }651 child = child.sibling;652 }653 var created = createFiberFromElement(element, priority);654 created.ref = coerceRef(currentFirstChild, element);655 created.return = returnFiber;656 return created;657 }658 function reconcileSingleCoroutine(returnFiber, currentFirstChild, coroutine, priority) {659 var key = coroutine.key;660 var child = currentFirstChild;661 while (child !== null) {662 if (child.key === key) {663 if (child.tag === CoroutineComponent) {664 deleteRemainingChildren(returnFiber, child.sibling);665 var existing = useFiber(child, priority);666 existing.pendingProps = coroutine;667 existing.return = returnFiber;668 return existing;669 } else {670 deleteRemainingChildren(returnFiber, child);671 break;672 }673 } else {674 deleteChild(returnFiber, child);675 }676 child = child.sibling;677 }678 var created = createFiberFromCoroutine(coroutine, priority);679 created.return = returnFiber;680 return created;681 }682 function reconcileSingleYield(returnFiber, currentFirstChild, yieldNode, priority) {683 var child = currentFirstChild;684 if (child !== null) {685 if (child.tag === YieldComponent) {686 deleteRemainingChildren(returnFiber, child.sibling);687 var existing = useFiber(child, priority);688 existing.type = yieldNode.value;689 existing.return = returnFiber;690 return existing;691 } else {692 deleteRemainingChildren(returnFiber, child);693 }694 }695 var created = createFiberFromYield(yieldNode, priority);696 created.type = yieldNode.value;697 created.return = returnFiber;698 return created;699 }700 function reconcileSinglePortal(returnFiber, currentFirstChild, portal, priority) {701 var key = portal.key;702 var child = currentFirstChild;703 while (child !== null) {704 if (child.key === key) {705 if (child.tag === HostPortal && child.stateNode.containerInfo === portal.containerInfo && child.stateNode.implementation === portal.implementation) {706 deleteRemainingChildren(returnFiber, child.sibling);707 var existing = useFiber(child, priority);708 existing.pendingProps = portal.children || [];709 existing.return = returnFiber;710 return existing;711 } else {712 deleteRemainingChildren(returnFiber, child);713 break;714 }715 } else {716 deleteChild(returnFiber, child);717 }718 child = child.sibling;719 }720 var created = createFiberFromPortal(portal, priority);721 created.return = returnFiber;722 return created;723 }724 function reconcileChildFibers(returnFiber, currentFirstChild, newChild, priority) {725 var disableNewFiberFeatures = ReactFeatureFlags.disableNewFiberFeatures;726 var isObject = typeof newChild === 'object' && newChild !== null;727 if (isObject) {728 if (disableNewFiberFeatures) {729 switch (newChild.$$typeof) {730 case REACT_ELEMENT_TYPE:731 return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, priority));732 case REACT_PORTAL_TYPE:733 return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, priority));734 }735 } else {736 switch (newChild.$$typeof) {737 case REACT_ELEMENT_TYPE:738 return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, priority));739 case REACT_COROUTINE_TYPE:740 return placeSingleChild(reconcileSingleCoroutine(returnFiber, currentFirstChild, newChild, priority));741 case REACT_YIELD_TYPE:742 return placeSingleChild(reconcileSingleYield(returnFiber, currentFirstChild, newChild, priority));743 case REACT_PORTAL_TYPE:744 return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, priority));745 }746 }747 }748 if (disableNewFiberFeatures) {749 switch (returnFiber.tag) {750 case ClassComponent:751 {752 if (__DEV__) {753 var instance = returnFiber.stateNode;754 if (instance.render._isMockFunction && typeof newChild === 'undefined') {755 break;756 }757 }758 var Component = returnFiber.type;759 invariant(newChild === null || newChild === false, '%s.render(): A valid React element (or null) must be returned. ' + 'You may have returned undefined, an array or some other ' + 'invalid object.', Component.displayName || Component.name || 'Component');760 break;761 }762 case FunctionalComponent:763 {764 var _Component = returnFiber.type;765 invariant(newChild === null || newChild === false, '%s(...): A valid React element (or null) must be returned. ' + 'You may have returned undefined, an array or some other ' + 'invalid object.', _Component.displayName || _Component.name || 'Component');766 break;767 }768 }769 }770 if (typeof newChild === 'string' || typeof newChild === 'number') {771 return placeSingleChild(reconcileSingleTextNode(returnFiber, currentFirstChild, '' + newChild, priority));772 }773 if (isArray(newChild)) {774 return reconcileChildrenArray(returnFiber, currentFirstChild, newChild, priority);775 }776 if (getIteratorFn(newChild)) {777 return reconcileChildrenIterator(returnFiber, currentFirstChild, newChild, priority);778 }779 if (isObject) {780 throwOnInvalidObjectType(returnFiber, newChild);781 }782 if (!disableNewFiberFeatures && typeof newChild === 'undefined') {783 switch (returnFiber.tag) {784 case ClassComponent:785 {786 if (__DEV__) {787 var _instance = returnFiber.stateNode;788 if (_instance.render._isMockFunction) {789 break;790 }791 }792 }793 case FunctionalComponent:794 {795 var _Component2 = returnFiber.type;796 invariant(false, '%s(...): Nothing was returned from render. This usually means a ' + 'return statement is missing. Or, to render nothing, ' + 'return null.', _Component2.displayName || _Component2.name || 'Component');797 }798 }799 }800 return deleteRemainingChildren(returnFiber, currentFirstChild);801 }802 return reconcileChildFibers;803}804exports.reconcileChildFibers = ChildReconciler(true, true);805exports.reconcileChildFibersInPlace = ChildReconciler(false, true);806exports.mountChildFibersInPlace = ChildReconciler(false, false);807exports.cloneChildFibers = function (current, workInProgress) {808 if (!workInProgress.child) {809 return;810 }811 if (current !== null && workInProgress.child === current.child) {812 var currentChild = workInProgress.child;813 var newChild = cloneFiber(currentChild, currentChild.pendingWorkPriority);814 workInProgress.child = newChild;...
e63021211ff1285ea5ebde3b43f29d1ef7586aReactChildFiber.js
Source:e63021211ff1285ea5ebde3b43f29d1ef7586aReactChildFiber.js
...108 }109 childToDelete.nextEffect = null;110 childToDelete.effectTag = Deletion;111 }112 function deleteRemainingChildren(returnFiber, currentFirstChild) {113 if (!shouldTrackSideEffects) {114 return null;115 }116 var childToDelete = currentFirstChild;117 while (childToDelete !== null) {118 deleteChild(returnFiber, childToDelete);119 childToDelete = childToDelete.sibling;120 }121 return null;122 }123 function mapRemainingChildren(returnFiber, currentFirstChild) {124 var existingChildren = new Map();125 var existingChild = currentFirstChild;126 while (existingChild !== null) {127 if (existingChild.key !== null) {128 existingChildren.set(existingChild.key, existingChild);129 } else {130 existingChildren.set(existingChild.index, existingChild);131 }132 existingChild = existingChild.sibling;133 }134 return existingChildren;135 }136 function useFiber(fiber, priority) {137 if (shouldClone) {138 var clone = cloneFiber(fiber, priority);139 clone.index = 0;140 clone.sibling = null;141 return clone;142 } else {143 fiber.pendingWorkPriority = priority;144 fiber.effectTag = NoEffect;145 fiber.index = 0;146 fiber.sibling = null;147 return fiber;148 }149 }150 function placeChild(newFiber, lastPlacedIndex, newIndex) {151 newFiber.index = newIndex;152 if (!shouldTrackSideEffects) {153 return lastPlacedIndex;154 }155 var current = newFiber.alternate;156 if (current !== null) {157 var oldIndex = current.index;158 if (oldIndex < lastPlacedIndex) {159 newFiber.effectTag = Placement;160 return lastPlacedIndex;161 } else {162 return oldIndex;163 }164 } else {165 newFiber.effectTag = Placement;166 return lastPlacedIndex;167 }168 }169 function placeSingleChild(newFiber) {170 if (shouldTrackSideEffects && newFiber.alternate === null) {171 newFiber.effectTag = Placement;172 }173 return newFiber;174 }175 function updateTextNode(returnFiber, current, textContent, priority) {176 if (current === null || current.tag !== HostText) {177 var created = createFiberFromText(textContent, priority);178 created.return = returnFiber;179 return created;180 } else {181 var existing = useFiber(current, priority);182 existing.pendingProps = textContent;183 existing.return = returnFiber;184 return existing;185 }186 }187 function updateElement(returnFiber, current, element, priority) {188 if (current === null || current.type !== element.type) {189 var created = createFiberFromElement(element, priority);190 created.ref = coerceRef(current, element);191 created.return = returnFiber;192 return created;193 } else {194 var existing = useFiber(current, priority);195 existing.ref = coerceRef(current, element);196 existing.pendingProps = element.props;197 existing.return = returnFiber;198 if (__DEV__) {199 existing._debugSource = element._source;200 existing._debugOwner = element._owner;201 }202 return existing;203 }204 }205 function updateCoroutine(returnFiber, current, coroutine, priority) {206 if (current === null || current.tag !== CoroutineComponent) {207 var created = createFiberFromCoroutine(coroutine, priority);208 created.return = returnFiber;209 return created;210 } else {211 var existing = useFiber(current, priority);212 existing.pendingProps = coroutine;213 existing.return = returnFiber;214 return existing;215 }216 }217 function updateYield(returnFiber, current, yieldNode, priority) {218 if (current === null || current.tag !== YieldComponent) {219 var created = createFiberFromYield(yieldNode, priority);220 created.type = yieldNode.value;221 created.return = returnFiber;222 return created;223 } else {224 var existing = useFiber(current, priority);225 existing.type = yieldNode.value;226 existing.return = returnFiber;227 return existing;228 }229 }230 function updatePortal(returnFiber, current, portal, priority) {231 if (current === null || current.tag !== HostPortal || current.stateNode.containerInfo !== portal.containerInfo || current.stateNode.implementation !== portal.implementation) {232 var created = createFiberFromPortal(portal, priority);233 created.return = returnFiber;234 return created;235 } else {236 var existing = useFiber(current, priority);237 existing.pendingProps = portal.children || [];238 existing.return = returnFiber;239 return existing;240 }241 }242 function updateFragment(returnFiber, current, fragment, priority) {243 if (current === null || current.tag !== Fragment) {244 var created = createFiberFromFragment(fragment, priority);245 created.return = returnFiber;246 return created;247 } else {248 var existing = useFiber(current, priority);249 existing.pendingProps = fragment;250 existing.return = returnFiber;251 return existing;252 }253 }254 function createChild(returnFiber, newChild, priority) {255 if (typeof newChild === 'string' || typeof newChild === 'number') {256 var created = createFiberFromText('' + newChild, priority);257 created.return = returnFiber;258 return created;259 }260 if (typeof newChild === 'object' && newChild !== null) {261 switch (newChild.$$typeof) {262 case REACT_ELEMENT_TYPE:263 {264 var _created = createFiberFromElement(newChild, priority);265 _created.ref = coerceRef(null, newChild);266 _created.return = returnFiber;267 return _created;268 }269 case REACT_COROUTINE_TYPE:270 {271 var _created2 = createFiberFromCoroutine(newChild, priority);272 _created2.return = returnFiber;273 return _created2;274 }275 case REACT_YIELD_TYPE:276 {277 var _created3 = createFiberFromYield(newChild, priority);278 _created3.type = newChild.value;279 _created3.return = returnFiber;280 return _created3;281 }282 case REACT_PORTAL_TYPE:283 {284 var _created4 = createFiberFromPortal(newChild, priority);285 _created4.return = returnFiber;286 return _created4;287 }288 }289 if (isArray(newChild) || getIteratorFn(newChild)) {290 var _created5 = createFiberFromFragment(newChild, priority);291 _created5.return = returnFiber;292 return _created5;293 }294 throwOnInvalidObjectType(returnFiber, newChild);295 }296 return null;297 }298 function updateSlot(returnFiber, oldFiber, newChild, priority) {299 var key = oldFiber !== null ? oldFiber.key : null;300 if (typeof newChild === 'string' || typeof newChild === 'number') {301 if (key !== null) {302 return null;303 }304 return updateTextNode(returnFiber, oldFiber, '' + newChild, priority);305 }306 if (typeof newChild === 'object' && newChild !== null) {307 switch (newChild.$$typeof) {308 case REACT_ELEMENT_TYPE:309 {310 if (newChild.key === key) {311 return updateElement(returnFiber, oldFiber, newChild, priority);312 } else {313 return null;314 }315 }316 case REACT_COROUTINE_TYPE:317 {318 if (newChild.key === key) {319 return updateCoroutine(returnFiber, oldFiber, newChild, priority);320 } else {321 return null;322 }323 }324 case REACT_YIELD_TYPE:325 {326 if (key === null) {327 return updateYield(returnFiber, oldFiber, newChild, priority);328 } else {329 return null;330 }331 }332 case REACT_PORTAL_TYPE:333 {334 if (newChild.key === key) {335 return updatePortal(returnFiber, oldFiber, newChild, priority);336 } else {337 return null;338 }339 }340 }341 if (isArray(newChild) || getIteratorFn(newChild)) {342 if (key !== null) {343 return null;344 }345 return updateFragment(returnFiber, oldFiber, newChild, priority);346 }347 throwOnInvalidObjectType(returnFiber, newChild);348 }349 return null;350 }351 function updateFromMap(existingChildren, returnFiber, newIdx, newChild, priority) {352 if (typeof newChild === 'string' || typeof newChild === 'number') {353 var matchedFiber = existingChildren.get(newIdx) || null;354 return updateTextNode(returnFiber, matchedFiber, '' + newChild, priority);355 }356 if (typeof newChild === 'object' && newChild !== null) {357 switch (newChild.$$typeof) {358 case REACT_ELEMENT_TYPE:359 {360 var _matchedFiber = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;361 return updateElement(returnFiber, _matchedFiber, newChild, priority);362 }363 case REACT_COROUTINE_TYPE:364 {365 var _matchedFiber2 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;366 return updateCoroutine(returnFiber, _matchedFiber2, newChild, priority);367 }368 case REACT_YIELD_TYPE:369 {370 var _matchedFiber3 = existingChildren.get(newIdx) || null;371 return updateYield(returnFiber, _matchedFiber3, newChild, priority);372 }373 case REACT_PORTAL_TYPE:374 {375 var _matchedFiber4 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;376 return updatePortal(returnFiber, _matchedFiber4, newChild, priority);377 }378 }379 if (isArray(newChild) || getIteratorFn(newChild)) {380 var _matchedFiber5 = existingChildren.get(newIdx) || null;381 return updateFragment(returnFiber, _matchedFiber5, newChild, priority);382 }383 throwOnInvalidObjectType(returnFiber, newChild);384 }385 return null;386 }387 function warnOnDuplicateKey(child, knownKeys) {388 if (__DEV__) {389 if (typeof child !== 'object' || child === null) {390 return knownKeys;391 }392 switch (child.$$typeof) {393 case REACT_ELEMENT_TYPE:394 case REACT_COROUTINE_TYPE:395 case REACT_PORTAL_TYPE:396 var key = child.key;397 if (typeof key !== 'string') {398 break;399 }400 if (knownKeys === null) {401 knownKeys = new Set();402 knownKeys.add(key);403 break;404 }405 if (!knownKeys.has(key)) {406 knownKeys.add(key);407 break;408 }409 warning(false, 'Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, ' + 'only the first child will be used.%s', key, getCurrentFiberStackAddendum());410 break;411 default:412 break;413 }414 }415 return knownKeys;416 }417 function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, priority) {418 if (__DEV__) {419 var knownKeys = null;420 for (var i = 0; i < newChildren.length; i++) {421 var child = newChildren[i];422 knownKeys = warnOnDuplicateKey(child, knownKeys);423 }424 }425 var resultingFirstChild = null;426 var previousNewFiber = null;427 var oldFiber = currentFirstChild;428 var lastPlacedIndex = 0;429 var newIdx = 0;430 var nextOldFiber = null;431 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {432 if (oldFiber.index > newIdx) {433 nextOldFiber = oldFiber;434 oldFiber = null;435 } else {436 nextOldFiber = oldFiber.sibling;437 }438 var newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], priority);439 if (newFiber === null) {440 if (oldFiber === null) {441 oldFiber = nextOldFiber;442 }443 break;444 }445 if (shouldTrackSideEffects) {446 if (oldFiber && newFiber.alternate === null) {447 deleteChild(returnFiber, oldFiber);448 }449 }450 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);451 if (previousNewFiber === null) {452 resultingFirstChild = newFiber;453 } else {454 previousNewFiber.sibling = newFiber;455 }456 previousNewFiber = newFiber;457 oldFiber = nextOldFiber;458 }459 if (newIdx === newChildren.length) {460 deleteRemainingChildren(returnFiber, oldFiber);461 return resultingFirstChild;462 }463 if (oldFiber === null) {464 for (; newIdx < newChildren.length; newIdx++) {465 var _newFiber = createChild(returnFiber, newChildren[newIdx], priority);466 if (!_newFiber) {467 continue;468 }469 lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx);470 if (previousNewFiber === null) {471 resultingFirstChild = _newFiber;472 } else {473 previousNewFiber.sibling = _newFiber;474 }475 previousNewFiber = _newFiber;476 }477 return resultingFirstChild;478 }479 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);480 for (; newIdx < newChildren.length; newIdx++) {481 var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], priority);482 if (_newFiber2) {483 if (shouldTrackSideEffects) {484 if (_newFiber2.alternate !== null) {485 existingChildren.delete(_newFiber2.key === null ? newIdx : _newFiber2.key);486 }487 }488 lastPlacedIndex = placeChild(_newFiber2, lastPlacedIndex, newIdx);489 if (previousNewFiber === null) {490 resultingFirstChild = _newFiber2;491 } else {492 previousNewFiber.sibling = _newFiber2;493 }494 previousNewFiber = _newFiber2;495 }496 }497 if (shouldTrackSideEffects) {498 existingChildren.forEach(function (child) {499 return deleteChild(returnFiber, child);500 });501 }502 return resultingFirstChild;503 }504 function reconcileChildrenIterator(returnFiber, currentFirstChild, newChildrenIterable, priority) {505 var iteratorFn = getIteratorFn(newChildrenIterable);506 invariant(typeof iteratorFn === 'function', 'An object is not an iterable. This error is likely caused by a bug in ' + 'React. Please file an issue.');507 if (__DEV__) {508 if (typeof newChildrenIterable.entries === 'function') {509 var possibleMap = newChildrenIterable;510 if (possibleMap.entries === iteratorFn) {511 var mapsAsChildrenAddendum = '';512 var owner = ReactCurrentOwner.owner || returnFiber._debugOwner;513 if (owner && typeof owner.tag === 'number') {514 var mapsAsChildrenOwnerName = getComponentName(owner);515 if (mapsAsChildrenOwnerName) {516 mapsAsChildrenAddendum = '\n\nCheck the render method of `' + mapsAsChildrenOwnerName + '`.';517 }518 }519 warning(didWarnAboutMaps, 'Using Maps as children is unsupported and will likely yield ' + 'unexpected results. Convert it to a sequence/iterable of keyed ' + 'ReactElements instead.%s', mapsAsChildrenAddendum);520 didWarnAboutMaps = true;521 }522 }523 var _newChildren = iteratorFn.call(newChildrenIterable);524 if (_newChildren) {525 var knownKeys = null;526 var _step = _newChildren.next();527 for (; !_step.done; _step = _newChildren.next()) {528 var child = _step.value;529 knownKeys = warnOnDuplicateKey(child, knownKeys);530 }531 }532 }533 var newChildren = iteratorFn.call(newChildrenIterable);534 invariant(newChildren != null, 'An iterable object provided no iterator.');535 var resultingFirstChild = null;536 var previousNewFiber = null;537 var oldFiber = currentFirstChild;538 var lastPlacedIndex = 0;539 var newIdx = 0;540 var nextOldFiber = null;541 var step = newChildren.next();542 for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next()) {543 if (oldFiber.index > newIdx) {544 nextOldFiber = oldFiber;545 oldFiber = null;546 } else {547 nextOldFiber = oldFiber.sibling;548 }549 var newFiber = updateSlot(returnFiber, oldFiber, step.value, priority);550 if (newFiber === null) {551 if (!oldFiber) {552 oldFiber = nextOldFiber;553 }554 break;555 }556 if (shouldTrackSideEffects) {557 if (oldFiber && newFiber.alternate === null) {558 deleteChild(returnFiber, oldFiber);559 }560 }561 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);562 if (previousNewFiber === null) {563 resultingFirstChild = newFiber;564 } else {565 previousNewFiber.sibling = newFiber;566 }567 previousNewFiber = newFiber;568 oldFiber = nextOldFiber;569 }570 if (step.done) {571 deleteRemainingChildren(returnFiber, oldFiber);572 return resultingFirstChild;573 }574 if (oldFiber === null) {575 for (; !step.done; newIdx++, step = newChildren.next()) {576 var _newFiber3 = createChild(returnFiber, step.value, priority);577 if (_newFiber3 === null) {578 continue;579 }580 lastPlacedIndex = placeChild(_newFiber3, lastPlacedIndex, newIdx);581 if (previousNewFiber === null) {582 resultingFirstChild = _newFiber3;583 } else {584 previousNewFiber.sibling = _newFiber3;585 }586 previousNewFiber = _newFiber3;587 }588 return resultingFirstChild;589 }590 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);591 for (; !step.done; newIdx++, step = newChildren.next()) {592 var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, priority);593 if (_newFiber4 !== null) {594 if (shouldTrackSideEffects) {595 if (_newFiber4.alternate !== null) {596 existingChildren.delete(_newFiber4.key === null ? newIdx : _newFiber4.key);597 }598 }599 lastPlacedIndex = placeChild(_newFiber4, lastPlacedIndex, newIdx);600 if (previousNewFiber === null) {601 resultingFirstChild = _newFiber4;602 } else {603 previousNewFiber.sibling = _newFiber4;604 }605 previousNewFiber = _newFiber4;606 }607 }608 if (shouldTrackSideEffects) {609 existingChildren.forEach(function (child) {610 return deleteChild(returnFiber, child);611 });612 }613 return resultingFirstChild;614 }615 function reconcileSingleTextNode(returnFiber, currentFirstChild, textContent, priority) {616 if (currentFirstChild !== null && currentFirstChild.tag === HostText) {617 deleteRemainingChildren(returnFiber, currentFirstChild.sibling);618 var existing = useFiber(currentFirstChild, priority);619 existing.pendingProps = textContent;620 existing.return = returnFiber;621 return existing;622 }623 deleteRemainingChildren(returnFiber, currentFirstChild);624 var created = createFiberFromText(textContent, priority);625 created.return = returnFiber;626 return created;627 }628 function reconcileSingleElement(returnFiber, currentFirstChild, element, priority) {629 var key = element.key;630 var child = currentFirstChild;631 while (child !== null) {632 if (child.key === key) {633 if (child.type === element.type) {634 deleteRemainingChildren(returnFiber, child.sibling);635 var existing = useFiber(child, priority);636 existing.ref = coerceRef(child, element);637 existing.pendingProps = element.props;638 existing.return = returnFiber;639 if (__DEV__) {640 existing._debugSource = element._source;641 existing._debugOwner = element._owner;642 }643 return existing;644 } else {645 deleteRemainingChildren(returnFiber, child);646 break;647 }648 } else {649 deleteChild(returnFiber, child);650 }651 child = child.sibling;652 }653 var created = createFiberFromElement(element, priority);654 created.ref = coerceRef(currentFirstChild, element);655 created.return = returnFiber;656 return created;657 }658 function reconcileSingleCoroutine(returnFiber, currentFirstChild, coroutine, priority) {659 var key = coroutine.key;660 var child = currentFirstChild;661 while (child !== null) {662 if (child.key === key) {663 if (child.tag === CoroutineComponent) {664 deleteRemainingChildren(returnFiber, child.sibling);665 var existing = useFiber(child, priority);666 existing.pendingProps = coroutine;667 existing.return = returnFiber;668 return existing;669 } else {670 deleteRemainingChildren(returnFiber, child);671 break;672 }673 } else {674 deleteChild(returnFiber, child);675 }676 child = child.sibling;677 }678 var created = createFiberFromCoroutine(coroutine, priority);679 created.return = returnFiber;680 return created;681 }682 function reconcileSingleYield(returnFiber, currentFirstChild, yieldNode, priority) {683 var child = currentFirstChild;684 if (child !== null) {685 if (child.tag === YieldComponent) {686 deleteRemainingChildren(returnFiber, child.sibling);687 var existing = useFiber(child, priority);688 existing.type = yieldNode.value;689 existing.return = returnFiber;690 return existing;691 } else {692 deleteRemainingChildren(returnFiber, child);693 }694 }695 var created = createFiberFromYield(yieldNode, priority);696 created.type = yieldNode.value;697 created.return = returnFiber;698 return created;699 }700 function reconcileSinglePortal(returnFiber, currentFirstChild, portal, priority) {701 var key = portal.key;702 var child = currentFirstChild;703 while (child !== null) {704 if (child.key === key) {705 if (child.tag === HostPortal && child.stateNode.containerInfo === portal.containerInfo && child.stateNode.implementation === portal.implementation) {706 deleteRemainingChildren(returnFiber, child.sibling);707 var existing = useFiber(child, priority);708 existing.pendingProps = portal.children || [];709 existing.return = returnFiber;710 return existing;711 } else {712 deleteRemainingChildren(returnFiber, child);713 break;714 }715 } else {716 deleteChild(returnFiber, child);717 }718 child = child.sibling;719 }720 var created = createFiberFromPortal(portal, priority);721 created.return = returnFiber;722 return created;723 }724 function reconcileChildFibers(returnFiber, currentFirstChild, newChild, priority) {725 var disableNewFiberFeatures = ReactFeatureFlags.disableNewFiberFeatures;726 var isObject = typeof newChild === 'object' && newChild !== null;727 if (isObject) {728 if (disableNewFiberFeatures) {729 switch (newChild.$$typeof) {730 case REACT_ELEMENT_TYPE:731 return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, priority));732 case REACT_PORTAL_TYPE:733 return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, priority));734 }735 } else {736 switch (newChild.$$typeof) {737 case REACT_ELEMENT_TYPE:738 return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, priority));739 case REACT_COROUTINE_TYPE:740 return placeSingleChild(reconcileSingleCoroutine(returnFiber, currentFirstChild, newChild, priority));741 case REACT_YIELD_TYPE:742 return placeSingleChild(reconcileSingleYield(returnFiber, currentFirstChild, newChild, priority));743 case REACT_PORTAL_TYPE:744 return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, priority));745 }746 }747 }748 if (disableNewFiberFeatures) {749 switch (returnFiber.tag) {750 case ClassComponent:751 {752 if (__DEV__) {753 var instance = returnFiber.stateNode;754 if (instance.render._isMockFunction && typeof newChild === 'undefined') {755 break;756 }757 }758 var Component = returnFiber.type;759 invariant(newChild === null || newChild === false, '%s.render(): A valid React element (or null) must be returned. ' + 'You may have returned undefined, an array or some other ' + 'invalid object.', Component.displayName || Component.name || 'Component');760 break;761 }762 case FunctionalComponent:763 {764 var _Component = returnFiber.type;765 invariant(newChild === null || newChild === false, '%s(...): A valid React element (or null) must be returned. ' + 'You may have returned undefined, an array or some other ' + 'invalid object.', _Component.displayName || _Component.name || 'Component');766 break;767 }768 }769 }770 if (typeof newChild === 'string' || typeof newChild === 'number') {771 return placeSingleChild(reconcileSingleTextNode(returnFiber, currentFirstChild, '' + newChild, priority));772 }773 if (isArray(newChild)) {774 return reconcileChildrenArray(returnFiber, currentFirstChild, newChild, priority);775 }776 if (getIteratorFn(newChild)) {777 return reconcileChildrenIterator(returnFiber, currentFirstChild, newChild, priority);778 }779 if (isObject) {780 throwOnInvalidObjectType(returnFiber, newChild);781 }782 if (!disableNewFiberFeatures && typeof newChild === 'undefined') {783 switch (returnFiber.tag) {784 case ClassComponent:785 {786 if (__DEV__) {787 var _instance = returnFiber.stateNode;788 if (_instance.render._isMockFunction) {789 break;790 }791 }792 }793 case FunctionalComponent:794 {795 var _Component2 = returnFiber.type;796 invariant(false, '%s(...): Nothing was returned from render. This usually means a ' + 'return statement is missing. Or, to render nothing, ' + 'return null.', _Component2.displayName || _Component2.name || 'Component');797 }798 }799 }800 return deleteRemainingChildren(returnFiber, currentFirstChild);801 }802 return reconcileChildFibers;803}804exports.reconcileChildFibers = ChildReconciler(true, true);805exports.reconcileChildFibersInPlace = ChildReconciler(false, true);806exports.mountChildFibersInPlace = ChildReconciler(false, false);807exports.cloneChildFibers = function (current, workInProgress) {808 if (!workInProgress.child) {809 return;810 }811 if (current !== null && workInProgress.child === current.child) {812 var currentChild = workInProgress.child;813 var newChild = cloneFiber(currentChild, currentChild.pendingWorkPriority);814 workInProgress.child = newChild;...
4cb8b9d0ed5f067ca4dd9e921b4190df7c25aaReactChildFiber.js
Source:4cb8b9d0ed5f067ca4dd9e921b4190df7c25aaReactChildFiber.js
...108 }109 childToDelete.nextEffect = null;110 childToDelete.effectTag = Deletion;111 }112 function deleteRemainingChildren(returnFiber, currentFirstChild) {113 if (!shouldTrackSideEffects) {114 return null;115 }116 var childToDelete = currentFirstChild;117 while (childToDelete !== null) {118 deleteChild(returnFiber, childToDelete);119 childToDelete = childToDelete.sibling;120 }121 return null;122 }123 function mapRemainingChildren(returnFiber, currentFirstChild) {124 var existingChildren = new Map();125 var existingChild = currentFirstChild;126 while (existingChild !== null) {127 if (existingChild.key !== null) {128 existingChildren.set(existingChild.key, existingChild);129 } else {130 existingChildren.set(existingChild.index, existingChild);131 }132 existingChild = existingChild.sibling;133 }134 return existingChildren;135 }136 function useFiber(fiber, priority) {137 if (shouldClone) {138 var clone = cloneFiber(fiber, priority);139 clone.index = 0;140 clone.sibling = null;141 return clone;142 } else {143 fiber.pendingWorkPriority = priority;144 fiber.effectTag = NoEffect;145 fiber.index = 0;146 fiber.sibling = null;147 return fiber;148 }149 }150 function placeChild(newFiber, lastPlacedIndex, newIndex) {151 newFiber.index = newIndex;152 if (!shouldTrackSideEffects) {153 return lastPlacedIndex;154 }155 var current = newFiber.alternate;156 if (current !== null) {157 var oldIndex = current.index;158 if (oldIndex < lastPlacedIndex) {159 newFiber.effectTag = Placement;160 return lastPlacedIndex;161 } else {162 return oldIndex;163 }164 } else {165 newFiber.effectTag = Placement;166 return lastPlacedIndex;167 }168 }169 function placeSingleChild(newFiber) {170 if (shouldTrackSideEffects && newFiber.alternate === null) {171 newFiber.effectTag = Placement;172 }173 return newFiber;174 }175 function updateTextNode(returnFiber, current, textContent, priority) {176 if (current === null || current.tag !== HostText) {177 var created = createFiberFromText(textContent, priority);178 created.return = returnFiber;179 return created;180 } else {181 var existing = useFiber(current, priority);182 existing.pendingProps = textContent;183 existing.return = returnFiber;184 return existing;185 }186 }187 function updateElement(returnFiber, current, element, priority) {188 if (current === null || current.type !== element.type) {189 var created = createFiberFromElement(element, priority);190 created.ref = coerceRef(current, element);191 created.return = returnFiber;192 return created;193 } else {194 var existing = useFiber(current, priority);195 existing.ref = coerceRef(current, element);196 existing.pendingProps = element.props;197 existing.return = returnFiber;198 if (__DEV__) {199 existing._debugSource = element._source;200 existing._debugOwner = element._owner;201 }202 return existing;203 }204 }205 function updateCoroutine(returnFiber, current, coroutine, priority) {206 if (current === null || current.tag !== CoroutineComponent) {207 var created = createFiberFromCoroutine(coroutine, priority);208 created.return = returnFiber;209 return created;210 } else {211 var existing = useFiber(current, priority);212 existing.pendingProps = coroutine;213 existing.return = returnFiber;214 return existing;215 }216 }217 function updateYield(returnFiber, current, yieldNode, priority) {218 if (current === null || current.tag !== YieldComponent) {219 var created = createFiberFromYield(yieldNode, priority);220 created.type = yieldNode.value;221 created.return = returnFiber;222 return created;223 } else {224 var existing = useFiber(current, priority);225 existing.type = yieldNode.value;226 existing.return = returnFiber;227 return existing;228 }229 }230 function updatePortal(returnFiber, current, portal, priority) {231 if (current === null || current.tag !== HostPortal || current.stateNode.containerInfo !== portal.containerInfo || current.stateNode.implementation !== portal.implementation) {232 var created = createFiberFromPortal(portal, priority);233 created.return = returnFiber;234 return created;235 } else {236 var existing = useFiber(current, priority);237 existing.pendingProps = portal.children || [];238 existing.return = returnFiber;239 return existing;240 }241 }242 function updateFragment(returnFiber, current, fragment, priority) {243 if (current === null || current.tag !== Fragment) {244 var created = createFiberFromFragment(fragment, priority);245 created.return = returnFiber;246 return created;247 } else {248 var existing = useFiber(current, priority);249 existing.pendingProps = fragment;250 existing.return = returnFiber;251 return existing;252 }253 }254 function createChild(returnFiber, newChild, priority) {255 if (typeof newChild === 'string' || typeof newChild === 'number') {256 var created = createFiberFromText('' + newChild, priority);257 created.return = returnFiber;258 return created;259 }260 if (typeof newChild === 'object' && newChild !== null) {261 switch (newChild.$$typeof) {262 case REACT_ELEMENT_TYPE:263 {264 var _created = createFiberFromElement(newChild, priority);265 _created.ref = coerceRef(null, newChild);266 _created.return = returnFiber;267 return _created;268 }269 case REACT_COROUTINE_TYPE:270 {271 var _created2 = createFiberFromCoroutine(newChild, priority);272 _created2.return = returnFiber;273 return _created2;274 }275 case REACT_YIELD_TYPE:276 {277 var _created3 = createFiberFromYield(newChild, priority);278 _created3.type = newChild.value;279 _created3.return = returnFiber;280 return _created3;281 }282 case REACT_PORTAL_TYPE:283 {284 var _created4 = createFiberFromPortal(newChild, priority);285 _created4.return = returnFiber;286 return _created4;287 }288 }289 if (isArray(newChild) || getIteratorFn(newChild)) {290 var _created5 = createFiberFromFragment(newChild, priority);291 _created5.return = returnFiber;292 return _created5;293 }294 throwOnInvalidObjectType(returnFiber, newChild);295 }296 return null;297 }298 function updateSlot(returnFiber, oldFiber, newChild, priority) {299 var key = oldFiber !== null ? oldFiber.key : null;300 if (typeof newChild === 'string' || typeof newChild === 'number') {301 if (key !== null) {302 return null;303 }304 return updateTextNode(returnFiber, oldFiber, '' + newChild, priority);305 }306 if (typeof newChild === 'object' && newChild !== null) {307 switch (newChild.$$typeof) {308 case REACT_ELEMENT_TYPE:309 {310 if (newChild.key === key) {311 return updateElement(returnFiber, oldFiber, newChild, priority);312 } else {313 return null;314 }315 }316 case REACT_COROUTINE_TYPE:317 {318 if (newChild.key === key) {319 return updateCoroutine(returnFiber, oldFiber, newChild, priority);320 } else {321 return null;322 }323 }324 case REACT_YIELD_TYPE:325 {326 if (key === null) {327 return updateYield(returnFiber, oldFiber, newChild, priority);328 } else {329 return null;330 }331 }332 case REACT_PORTAL_TYPE:333 {334 if (newChild.key === key) {335 return updatePortal(returnFiber, oldFiber, newChild, priority);336 } else {337 return null;338 }339 }340 }341 if (isArray(newChild) || getIteratorFn(newChild)) {342 if (key !== null) {343 return null;344 }345 return updateFragment(returnFiber, oldFiber, newChild, priority);346 }347 throwOnInvalidObjectType(returnFiber, newChild);348 }349 return null;350 }351 function updateFromMap(existingChildren, returnFiber, newIdx, newChild, priority) {352 if (typeof newChild === 'string' || typeof newChild === 'number') {353 var matchedFiber = existingChildren.get(newIdx) || null;354 return updateTextNode(returnFiber, matchedFiber, '' + newChild, priority);355 }356 if (typeof newChild === 'object' && newChild !== null) {357 switch (newChild.$$typeof) {358 case REACT_ELEMENT_TYPE:359 {360 var _matchedFiber = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;361 return updateElement(returnFiber, _matchedFiber, newChild, priority);362 }363 case REACT_COROUTINE_TYPE:364 {365 var _matchedFiber2 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;366 return updateCoroutine(returnFiber, _matchedFiber2, newChild, priority);367 }368 case REACT_YIELD_TYPE:369 {370 var _matchedFiber3 = existingChildren.get(newIdx) || null;371 return updateYield(returnFiber, _matchedFiber3, newChild, priority);372 }373 case REACT_PORTAL_TYPE:374 {375 var _matchedFiber4 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;376 return updatePortal(returnFiber, _matchedFiber4, newChild, priority);377 }378 }379 if (isArray(newChild) || getIteratorFn(newChild)) {380 var _matchedFiber5 = existingChildren.get(newIdx) || null;381 return updateFragment(returnFiber, _matchedFiber5, newChild, priority);382 }383 throwOnInvalidObjectType(returnFiber, newChild);384 }385 return null;386 }387 function warnOnDuplicateKey(child, knownKeys) {388 if (__DEV__) {389 if (typeof child !== 'object' || child === null) {390 return knownKeys;391 }392 switch (child.$$typeof) {393 case REACT_ELEMENT_TYPE:394 case REACT_COROUTINE_TYPE:395 case REACT_PORTAL_TYPE:396 var key = child.key;397 if (typeof key !== 'string') {398 break;399 }400 if (knownKeys === null) {401 knownKeys = new Set();402 knownKeys.add(key);403 break;404 }405 if (!knownKeys.has(key)) {406 knownKeys.add(key);407 break;408 }409 warning(false, 'Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, ' + 'only the first child will be used.%s', key, getCurrentFiberStackAddendum());410 break;411 default:412 break;413 }414 }415 return knownKeys;416 }417 function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, priority) {418 if (__DEV__) {419 var knownKeys = null;420 for (var i = 0; i < newChildren.length; i++) {421 var child = newChildren[i];422 knownKeys = warnOnDuplicateKey(child, knownKeys);423 }424 }425 var resultingFirstChild = null;426 var previousNewFiber = null;427 var oldFiber = currentFirstChild;428 var lastPlacedIndex = 0;429 var newIdx = 0;430 var nextOldFiber = null;431 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {432 if (oldFiber.index > newIdx) {433 nextOldFiber = oldFiber;434 oldFiber = null;435 } else {436 nextOldFiber = oldFiber.sibling;437 }438 var newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], priority);439 if (newFiber === null) {440 if (oldFiber === null) {441 oldFiber = nextOldFiber;442 }443 break;444 }445 if (shouldTrackSideEffects) {446 if (oldFiber && newFiber.alternate === null) {447 deleteChild(returnFiber, oldFiber);448 }449 }450 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);451 if (previousNewFiber === null) {452 resultingFirstChild = newFiber;453 } else {454 previousNewFiber.sibling = newFiber;455 }456 previousNewFiber = newFiber;457 oldFiber = nextOldFiber;458 }459 if (newIdx === newChildren.length) {460 deleteRemainingChildren(returnFiber, oldFiber);461 return resultingFirstChild;462 }463 if (oldFiber === null) {464 for (; newIdx < newChildren.length; newIdx++) {465 var _newFiber = createChild(returnFiber, newChildren[newIdx], priority);466 if (!_newFiber) {467 continue;468 }469 lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx);470 if (previousNewFiber === null) {471 resultingFirstChild = _newFiber;472 } else {473 previousNewFiber.sibling = _newFiber;474 }475 previousNewFiber = _newFiber;476 }477 return resultingFirstChild;478 }479 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);480 for (; newIdx < newChildren.length; newIdx++) {481 var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], priority);482 if (_newFiber2) {483 if (shouldTrackSideEffects) {484 if (_newFiber2.alternate !== null) {485 existingChildren.delete(_newFiber2.key === null ? newIdx : _newFiber2.key);486 }487 }488 lastPlacedIndex = placeChild(_newFiber2, lastPlacedIndex, newIdx);489 if (previousNewFiber === null) {490 resultingFirstChild = _newFiber2;491 } else {492 previousNewFiber.sibling = _newFiber2;493 }494 previousNewFiber = _newFiber2;495 }496 }497 if (shouldTrackSideEffects) {498 existingChildren.forEach(function (child) {499 return deleteChild(returnFiber, child);500 });501 }502 return resultingFirstChild;503 }504 function reconcileChildrenIterator(returnFiber, currentFirstChild, newChildrenIterable, priority) {505 var iteratorFn = getIteratorFn(newChildrenIterable);506 invariant(typeof iteratorFn === 'function', 'An object is not an iterable. This error is likely caused by a bug in ' + 'React. Please file an issue.');507 if (__DEV__) {508 if (typeof newChildrenIterable.entries === 'function') {509 var possibleMap = newChildrenIterable;510 if (possibleMap.entries === iteratorFn) {511 var mapsAsChildrenAddendum = '';512 var owner = ReactCurrentOwner.owner || returnFiber._debugOwner;513 if (owner && typeof owner.tag === 'number') {514 var mapsAsChildrenOwnerName = getComponentName(owner);515 if (mapsAsChildrenOwnerName) {516 mapsAsChildrenAddendum = '\n\nCheck the render method of `' + mapsAsChildrenOwnerName + '`.';517 }518 }519 warning(didWarnAboutMaps, 'Using Maps as children is unsupported and will likely yield ' + 'unexpected results. Convert it to a sequence/iterable of keyed ' + 'ReactElements instead.%s', mapsAsChildrenAddendum);520 didWarnAboutMaps = true;521 }522 }523 var _newChildren = iteratorFn.call(newChildrenIterable);524 if (_newChildren) {525 var knownKeys = null;526 var _step = _newChildren.next();527 for (; !_step.done; _step = _newChildren.next()) {528 var child = _step.value;529 knownKeys = warnOnDuplicateKey(child, knownKeys);530 }531 }532 }533 var newChildren = iteratorFn.call(newChildrenIterable);534 invariant(newChildren != null, 'An iterable object provided no iterator.');535 var resultingFirstChild = null;536 var previousNewFiber = null;537 var oldFiber = currentFirstChild;538 var lastPlacedIndex = 0;539 var newIdx = 0;540 var nextOldFiber = null;541 var step = newChildren.next();542 for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next()) {543 if (oldFiber.index > newIdx) {544 nextOldFiber = oldFiber;545 oldFiber = null;546 } else {547 nextOldFiber = oldFiber.sibling;548 }549 var newFiber = updateSlot(returnFiber, oldFiber, step.value, priority);550 if (newFiber === null) {551 if (!oldFiber) {552 oldFiber = nextOldFiber;553 }554 break;555 }556 if (shouldTrackSideEffects) {557 if (oldFiber && newFiber.alternate === null) {558 deleteChild(returnFiber, oldFiber);559 }560 }561 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);562 if (previousNewFiber === null) {563 resultingFirstChild = newFiber;564 } else {565 previousNewFiber.sibling = newFiber;566 }567 previousNewFiber = newFiber;568 oldFiber = nextOldFiber;569 }570 if (step.done) {571 deleteRemainingChildren(returnFiber, oldFiber);572 return resultingFirstChild;573 }574 if (oldFiber === null) {575 for (; !step.done; newIdx++, step = newChildren.next()) {576 var _newFiber3 = createChild(returnFiber, step.value, priority);577 if (_newFiber3 === null) {578 continue;579 }580 lastPlacedIndex = placeChild(_newFiber3, lastPlacedIndex, newIdx);581 if (previousNewFiber === null) {582 resultingFirstChild = _newFiber3;583 } else {584 previousNewFiber.sibling = _newFiber3;585 }586 previousNewFiber = _newFiber3;587 }588 return resultingFirstChild;589 }590 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);591 for (; !step.done; newIdx++, step = newChildren.next()) {592 var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, priority);593 if (_newFiber4 !== null) {594 if (shouldTrackSideEffects) {595 if (_newFiber4.alternate !== null) {596 existingChildren.delete(_newFiber4.key === null ? newIdx : _newFiber4.key);597 }598 }599 lastPlacedIndex = placeChild(_newFiber4, lastPlacedIndex, newIdx);600 if (previousNewFiber === null) {601 resultingFirstChild = _newFiber4;602 } else {603 previousNewFiber.sibling = _newFiber4;604 }605 previousNewFiber = _newFiber4;606 }607 }608 if (shouldTrackSideEffects) {609 existingChildren.forEach(function (child) {610 return deleteChild(returnFiber, child);611 });612 }613 return resultingFirstChild;614 }615 function reconcileSingleTextNode(returnFiber, currentFirstChild, textContent, priority) {616 if (currentFirstChild !== null && currentFirstChild.tag === HostText) {617 deleteRemainingChildren(returnFiber, currentFirstChild.sibling);618 var existing = useFiber(currentFirstChild, priority);619 existing.pendingProps = textContent;620 existing.return = returnFiber;621 return existing;622 }623 deleteRemainingChildren(returnFiber, currentFirstChild);624 var created = createFiberFromText(textContent, priority);625 created.return = returnFiber;626 return created;627 }628 function reconcileSingleElement(returnFiber, currentFirstChild, element, priority) {629 var key = element.key;630 var child = currentFirstChild;631 while (child !== null) {632 if (child.key === key) {633 if (child.type === element.type) {634 deleteRemainingChildren(returnFiber, child.sibling);635 var existing = useFiber(child, priority);636 existing.ref = coerceRef(child, element);637 existing.pendingProps = element.props;638 existing.return = returnFiber;639 if (__DEV__) {640 existing._debugSource = element._source;641 existing._debugOwner = element._owner;642 }643 return existing;644 } else {645 deleteRemainingChildren(returnFiber, child);646 break;647 }648 } else {649 deleteChild(returnFiber, child);650 }651 child = child.sibling;652 }653 var created = createFiberFromElement(element, priority);654 created.ref = coerceRef(currentFirstChild, element);655 created.return = returnFiber;656 return created;657 }658 function reconcileSingleCoroutine(returnFiber, currentFirstChild, coroutine, priority) {659 var key = coroutine.key;660 var child = currentFirstChild;661 while (child !== null) {662 if (child.key === key) {663 if (child.tag === CoroutineComponent) {664 deleteRemainingChildren(returnFiber, child.sibling);665 var existing = useFiber(child, priority);666 existing.pendingProps = coroutine;667 existing.return = returnFiber;668 return existing;669 } else {670 deleteRemainingChildren(returnFiber, child);671 break;672 }673 } else {674 deleteChild(returnFiber, child);675 }676 child = child.sibling;677 }678 var created = createFiberFromCoroutine(coroutine, priority);679 created.return = returnFiber;680 return created;681 }682 function reconcileSingleYield(returnFiber, currentFirstChild, yieldNode, priority) {683 var child = currentFirstChild;684 if (child !== null) {685 if (child.tag === YieldComponent) {686 deleteRemainingChildren(returnFiber, child.sibling);687 var existing = useFiber(child, priority);688 existing.type = yieldNode.value;689 existing.return = returnFiber;690 return existing;691 } else {692 deleteRemainingChildren(returnFiber, child);693 }694 }695 var created = createFiberFromYield(yieldNode, priority);696 created.type = yieldNode.value;697 created.return = returnFiber;698 return created;699 }700 function reconcileSinglePortal(returnFiber, currentFirstChild, portal, priority) {701 var key = portal.key;702 var child = currentFirstChild;703 while (child !== null) {704 if (child.key === key) {705 if (child.tag === HostPortal && child.stateNode.containerInfo === portal.containerInfo && child.stateNode.implementation === portal.implementation) {706 deleteRemainingChildren(returnFiber, child.sibling);707 var existing = useFiber(child, priority);708 existing.pendingProps = portal.children || [];709 existing.return = returnFiber;710 return existing;711 } else {712 deleteRemainingChildren(returnFiber, child);713 break;714 }715 } else {716 deleteChild(returnFiber, child);717 }718 child = child.sibling;719 }720 var created = createFiberFromPortal(portal, priority);721 created.return = returnFiber;722 return created;723 }724 function reconcileChildFibers(returnFiber, currentFirstChild, newChild, priority) {725 var disableNewFiberFeatures = ReactFeatureFlags.disableNewFiberFeatures;726 var isObject = typeof newChild === 'object' && newChild !== null;727 if (isObject) {728 if (disableNewFiberFeatures) {729 switch (newChild.$$typeof) {730 case REACT_ELEMENT_TYPE:731 return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, priority));732 case REACT_PORTAL_TYPE:733 return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, priority));734 }735 } else {736 switch (newChild.$$typeof) {737 case REACT_ELEMENT_TYPE:738 return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, priority));739 case REACT_COROUTINE_TYPE:740 return placeSingleChild(reconcileSingleCoroutine(returnFiber, currentFirstChild, newChild, priority));741 case REACT_YIELD_TYPE:742 return placeSingleChild(reconcileSingleYield(returnFiber, currentFirstChild, newChild, priority));743 case REACT_PORTAL_TYPE:744 return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, priority));745 }746 }747 }748 if (disableNewFiberFeatures) {749 switch (returnFiber.tag) {750 case ClassComponent:751 {752 if (__DEV__) {753 var instance = returnFiber.stateNode;754 if (instance.render._isMockFunction && typeof newChild === 'undefined') {755 break;756 }757 }758 var Component = returnFiber.type;759 invariant(newChild === null || newChild === false, '%s.render(): A valid React element (or null) must be returned. ' + 'You may have returned undefined, an array or some other ' + 'invalid object.', Component.displayName || Component.name || 'Component');760 break;761 }762 case FunctionalComponent:763 {764 var _Component = returnFiber.type;765 invariant(newChild === null || newChild === false, '%s(...): A valid React element (or null) must be returned. ' + 'You may have returned undefined, an array or some other ' + 'invalid object.', _Component.displayName || _Component.name || 'Component');766 break;767 }768 }769 }770 if (typeof newChild === 'string' || typeof newChild === 'number') {771 return placeSingleChild(reconcileSingleTextNode(returnFiber, currentFirstChild, '' + newChild, priority));772 }773 if (isArray(newChild)) {774 return reconcileChildrenArray(returnFiber, currentFirstChild, newChild, priority);775 }776 if (getIteratorFn(newChild)) {777 return reconcileChildrenIterator(returnFiber, currentFirstChild, newChild, priority);778 }779 if (isObject) {780 throwOnInvalidObjectType(returnFiber, newChild);781 }782 if (!disableNewFiberFeatures && typeof newChild === 'undefined') {783 switch (returnFiber.tag) {784 case ClassComponent:785 {786 if (__DEV__) {787 var _instance = returnFiber.stateNode;788 if (_instance.render._isMockFunction) {789 break;790 }791 }792 }793 case FunctionalComponent:794 {795 var _Component2 = returnFiber.type;796 invariant(false, '%s(...): Nothing was returned from render. This usually means a ' + 'return statement is missing. Or, to render nothing, ' + 'return null.', _Component2.displayName || _Component2.name || 'Component');797 }798 }799 }800 return deleteRemainingChildren(returnFiber, currentFirstChild);801 }802 return reconcileChildFibers;803}804exports.reconcileChildFibers = ChildReconciler(true, true);805exports.reconcileChildFibersInPlace = ChildReconciler(false, true);806exports.mountChildFibersInPlace = ChildReconciler(false, false);807exports.cloneChildFibers = function (current, workInProgress) {808 if (!workInProgress.child) {809 return;810 }811 if (current !== null && workInProgress.child === current.child) {812 var currentChild = workInProgress.child;813 var newChild = cloneFiber(currentChild, currentChild.pendingWorkPriority);814 workInProgress.child = newChild;...
b81b7ed169eab82c9b5e9419bb967395a5c0e8ReactChildFiber.js
Source:b81b7ed169eab82c9b5e9419bb967395a5c0e8ReactChildFiber.js
...108 }109 childToDelete.nextEffect = null;110 childToDelete.effectTag = Deletion;111 }112 function deleteRemainingChildren(returnFiber, currentFirstChild) {113 if (!shouldTrackSideEffects) {114 return null;115 }116 var childToDelete = currentFirstChild;117 while (childToDelete !== null) {118 deleteChild(returnFiber, childToDelete);119 childToDelete = childToDelete.sibling;120 }121 return null;122 }123 function mapRemainingChildren(returnFiber, currentFirstChild) {124 var existingChildren = new Map();125 var existingChild = currentFirstChild;126 while (existingChild !== null) {127 if (existingChild.key !== null) {128 existingChildren.set(existingChild.key, existingChild);129 } else {130 existingChildren.set(existingChild.index, existingChild);131 }132 existingChild = existingChild.sibling;133 }134 return existingChildren;135 }136 function useFiber(fiber, priority) {137 if (shouldClone) {138 var clone = cloneFiber(fiber, priority);139 clone.index = 0;140 clone.sibling = null;141 return clone;142 } else {143 fiber.pendingWorkPriority = priority;144 fiber.effectTag = NoEffect;145 fiber.index = 0;146 fiber.sibling = null;147 return fiber;148 }149 }150 function placeChild(newFiber, lastPlacedIndex, newIndex) {151 newFiber.index = newIndex;152 if (!shouldTrackSideEffects) {153 return lastPlacedIndex;154 }155 var current = newFiber.alternate;156 if (current !== null) {157 var oldIndex = current.index;158 if (oldIndex < lastPlacedIndex) {159 newFiber.effectTag = Placement;160 return lastPlacedIndex;161 } else {162 return oldIndex;163 }164 } else {165 newFiber.effectTag = Placement;166 return lastPlacedIndex;167 }168 }169 function placeSingleChild(newFiber) {170 if (shouldTrackSideEffects && newFiber.alternate === null) {171 newFiber.effectTag = Placement;172 }173 return newFiber;174 }175 function updateTextNode(returnFiber, current, textContent, priority) {176 if (current === null || current.tag !== HostText) {177 var created = createFiberFromText(textContent, priority);178 created.return = returnFiber;179 return created;180 } else {181 var existing = useFiber(current, priority);182 existing.pendingProps = textContent;183 existing.return = returnFiber;184 return existing;185 }186 }187 function updateElement(returnFiber, current, element, priority) {188 if (current === null || current.type !== element.type) {189 var created = createFiberFromElement(element, priority);190 created.ref = coerceRef(current, element);191 created.return = returnFiber;192 return created;193 } else {194 var existing = useFiber(current, priority);195 existing.ref = coerceRef(current, element);196 existing.pendingProps = element.props;197 existing.return = returnFiber;198 if (__DEV__) {199 existing._debugSource = element._source;200 existing._debugOwner = element._owner;201 }202 return existing;203 }204 }205 function updateCoroutine(returnFiber, current, coroutine, priority) {206 if (current === null || current.tag !== CoroutineComponent) {207 var created = createFiberFromCoroutine(coroutine, priority);208 created.return = returnFiber;209 return created;210 } else {211 var existing = useFiber(current, priority);212 existing.pendingProps = coroutine;213 existing.return = returnFiber;214 return existing;215 }216 }217 function updateYield(returnFiber, current, yieldNode, priority) {218 if (current === null || current.tag !== YieldComponent) {219 var created = createFiberFromYield(yieldNode, priority);220 created.type = yieldNode.value;221 created.return = returnFiber;222 return created;223 } else {224 var existing = useFiber(current, priority);225 existing.type = yieldNode.value;226 existing.return = returnFiber;227 return existing;228 }229 }230 function updatePortal(returnFiber, current, portal, priority) {231 if (current === null || current.tag !== HostPortal || current.stateNode.containerInfo !== portal.containerInfo || current.stateNode.implementation !== portal.implementation) {232 var created = createFiberFromPortal(portal, priority);233 created.return = returnFiber;234 return created;235 } else {236 var existing = useFiber(current, priority);237 existing.pendingProps = portal.children || [];238 existing.return = returnFiber;239 return existing;240 }241 }242 function updateFragment(returnFiber, current, fragment, priority) {243 if (current === null || current.tag !== Fragment) {244 var created = createFiberFromFragment(fragment, priority);245 created.return = returnFiber;246 return created;247 } else {248 var existing = useFiber(current, priority);249 existing.pendingProps = fragment;250 existing.return = returnFiber;251 return existing;252 }253 }254 function createChild(returnFiber, newChild, priority) {255 if (typeof newChild === 'string' || typeof newChild === 'number') {256 var created = createFiberFromText('' + newChild, priority);257 created.return = returnFiber;258 return created;259 }260 if (typeof newChild === 'object' && newChild !== null) {261 switch (newChild.$$typeof) {262 case REACT_ELEMENT_TYPE:263 {264 var _created = createFiberFromElement(newChild, priority);265 _created.ref = coerceRef(null, newChild);266 _created.return = returnFiber;267 return _created;268 }269 case REACT_COROUTINE_TYPE:270 {271 var _created2 = createFiberFromCoroutine(newChild, priority);272 _created2.return = returnFiber;273 return _created2;274 }275 case REACT_YIELD_TYPE:276 {277 var _created3 = createFiberFromYield(newChild, priority);278 _created3.type = newChild.value;279 _created3.return = returnFiber;280 return _created3;281 }282 case REACT_PORTAL_TYPE:283 {284 var _created4 = createFiberFromPortal(newChild, priority);285 _created4.return = returnFiber;286 return _created4;287 }288 }289 if (isArray(newChild) || getIteratorFn(newChild)) {290 var _created5 = createFiberFromFragment(newChild, priority);291 _created5.return = returnFiber;292 return _created5;293 }294 throwOnInvalidObjectType(returnFiber, newChild);295 }296 return null;297 }298 function updateSlot(returnFiber, oldFiber, newChild, priority) {299 var key = oldFiber !== null ? oldFiber.key : null;300 if (typeof newChild === 'string' || typeof newChild === 'number') {301 if (key !== null) {302 return null;303 }304 return updateTextNode(returnFiber, oldFiber, '' + newChild, priority);305 }306 if (typeof newChild === 'object' && newChild !== null) {307 switch (newChild.$$typeof) {308 case REACT_ELEMENT_TYPE:309 {310 if (newChild.key === key) {311 return updateElement(returnFiber, oldFiber, newChild, priority);312 } else {313 return null;314 }315 }316 case REACT_COROUTINE_TYPE:317 {318 if (newChild.key === key) {319 return updateCoroutine(returnFiber, oldFiber, newChild, priority);320 } else {321 return null;322 }323 }324 case REACT_YIELD_TYPE:325 {326 if (key === null) {327 return updateYield(returnFiber, oldFiber, newChild, priority);328 } else {329 return null;330 }331 }332 case REACT_PORTAL_TYPE:333 {334 if (newChild.key === key) {335 return updatePortal(returnFiber, oldFiber, newChild, priority);336 } else {337 return null;338 }339 }340 }341 if (isArray(newChild) || getIteratorFn(newChild)) {342 if (key !== null) {343 return null;344 }345 return updateFragment(returnFiber, oldFiber, newChild, priority);346 }347 throwOnInvalidObjectType(returnFiber, newChild);348 }349 return null;350 }351 function updateFromMap(existingChildren, returnFiber, newIdx, newChild, priority) {352 if (typeof newChild === 'string' || typeof newChild === 'number') {353 var matchedFiber = existingChildren.get(newIdx) || null;354 return updateTextNode(returnFiber, matchedFiber, '' + newChild, priority);355 }356 if (typeof newChild === 'object' && newChild !== null) {357 switch (newChild.$$typeof) {358 case REACT_ELEMENT_TYPE:359 {360 var _matchedFiber = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;361 return updateElement(returnFiber, _matchedFiber, newChild, priority);362 }363 case REACT_COROUTINE_TYPE:364 {365 var _matchedFiber2 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;366 return updateCoroutine(returnFiber, _matchedFiber2, newChild, priority);367 }368 case REACT_YIELD_TYPE:369 {370 var _matchedFiber3 = existingChildren.get(newIdx) || null;371 return updateYield(returnFiber, _matchedFiber3, newChild, priority);372 }373 case REACT_PORTAL_TYPE:374 {375 var _matchedFiber4 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;376 return updatePortal(returnFiber, _matchedFiber4, newChild, priority);377 }378 }379 if (isArray(newChild) || getIteratorFn(newChild)) {380 var _matchedFiber5 = existingChildren.get(newIdx) || null;381 return updateFragment(returnFiber, _matchedFiber5, newChild, priority);382 }383 throwOnInvalidObjectType(returnFiber, newChild);384 }385 return null;386 }387 function warnOnDuplicateKey(child, knownKeys) {388 if (__DEV__) {389 if (typeof child !== 'object' || child === null) {390 return knownKeys;391 }392 switch (child.$$typeof) {393 case REACT_ELEMENT_TYPE:394 case REACT_COROUTINE_TYPE:395 case REACT_PORTAL_TYPE:396 var key = child.key;397 if (typeof key !== 'string') {398 break;399 }400 if (knownKeys === null) {401 knownKeys = new Set();402 knownKeys.add(key);403 break;404 }405 if (!knownKeys.has(key)) {406 knownKeys.add(key);407 break;408 }409 warning(false, 'Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, ' + 'only the first child will be used.%s', key, getCurrentFiberStackAddendum());410 break;411 default:412 break;413 }414 }415 return knownKeys;416 }417 function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, priority) {418 if (__DEV__) {419 var knownKeys = null;420 for (var i = 0; i < newChildren.length; i++) {421 var child = newChildren[i];422 knownKeys = warnOnDuplicateKey(child, knownKeys);423 }424 }425 var resultingFirstChild = null;426 var previousNewFiber = null;427 var oldFiber = currentFirstChild;428 var lastPlacedIndex = 0;429 var newIdx = 0;430 var nextOldFiber = null;431 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {432 if (oldFiber.index > newIdx) {433 nextOldFiber = oldFiber;434 oldFiber = null;435 } else {436 nextOldFiber = oldFiber.sibling;437 }438 var newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], priority);439 if (newFiber === null) {440 if (oldFiber === null) {441 oldFiber = nextOldFiber;442 }443 break;444 }445 if (shouldTrackSideEffects) {446 if (oldFiber && newFiber.alternate === null) {447 deleteChild(returnFiber, oldFiber);448 }449 }450 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);451 if (previousNewFiber === null) {452 resultingFirstChild = newFiber;453 } else {454 previousNewFiber.sibling = newFiber;455 }456 previousNewFiber = newFiber;457 oldFiber = nextOldFiber;458 }459 if (newIdx === newChildren.length) {460 deleteRemainingChildren(returnFiber, oldFiber);461 return resultingFirstChild;462 }463 if (oldFiber === null) {464 for (; newIdx < newChildren.length; newIdx++) {465 var _newFiber = createChild(returnFiber, newChildren[newIdx], priority);466 if (!_newFiber) {467 continue;468 }469 lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx);470 if (previousNewFiber === null) {471 resultingFirstChild = _newFiber;472 } else {473 previousNewFiber.sibling = _newFiber;474 }475 previousNewFiber = _newFiber;476 }477 return resultingFirstChild;478 }479 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);480 for (; newIdx < newChildren.length; newIdx++) {481 var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], priority);482 if (_newFiber2) {483 if (shouldTrackSideEffects) {484 if (_newFiber2.alternate !== null) {485 existingChildren.delete(_newFiber2.key === null ? newIdx : _newFiber2.key);486 }487 }488 lastPlacedIndex = placeChild(_newFiber2, lastPlacedIndex, newIdx);489 if (previousNewFiber === null) {490 resultingFirstChild = _newFiber2;491 } else {492 previousNewFiber.sibling = _newFiber2;493 }494 previousNewFiber = _newFiber2;495 }496 }497 if (shouldTrackSideEffects) {498 existingChildren.forEach(function (child) {499 return deleteChild(returnFiber, child);500 });501 }502 return resultingFirstChild;503 }504 function reconcileChildrenIterator(returnFiber, currentFirstChild, newChildrenIterable, priority) {505 var iteratorFn = getIteratorFn(newChildrenIterable);506 invariant(typeof iteratorFn === 'function', 'An object is not an iterable. This error is likely caused by a bug in ' + 'React. Please file an issue.');507 if (__DEV__) {508 if (typeof newChildrenIterable.entries === 'function') {509 var possibleMap = newChildrenIterable;510 if (possibleMap.entries === iteratorFn) {511 var mapsAsChildrenAddendum = '';512 var owner = ReactCurrentOwner.owner || returnFiber._debugOwner;513 if (owner && typeof owner.tag === 'number') {514 var mapsAsChildrenOwnerName = getComponentName(owner);515 if (mapsAsChildrenOwnerName) {516 mapsAsChildrenAddendum = '\n\nCheck the render method of `' + mapsAsChildrenOwnerName + '`.';517 }518 }519 warning(didWarnAboutMaps, 'Using Maps as children is unsupported and will likely yield ' + 'unexpected results. Convert it to a sequence/iterable of keyed ' + 'ReactElements instead.%s', mapsAsChildrenAddendum);520 didWarnAboutMaps = true;521 }522 }523 var _newChildren = iteratorFn.call(newChildrenIterable);524 if (_newChildren) {525 var knownKeys = null;526 var _step = _newChildren.next();527 for (; !_step.done; _step = _newChildren.next()) {528 var child = _step.value;529 knownKeys = warnOnDuplicateKey(child, knownKeys);530 }531 }532 }533 var newChildren = iteratorFn.call(newChildrenIterable);534 invariant(newChildren != null, 'An iterable object provided no iterator.');535 var resultingFirstChild = null;536 var previousNewFiber = null;537 var oldFiber = currentFirstChild;538 var lastPlacedIndex = 0;539 var newIdx = 0;540 var nextOldFiber = null;541 var step = newChildren.next();542 for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next()) {543 if (oldFiber.index > newIdx) {544 nextOldFiber = oldFiber;545 oldFiber = null;546 } else {547 nextOldFiber = oldFiber.sibling;548 }549 var newFiber = updateSlot(returnFiber, oldFiber, step.value, priority);550 if (newFiber === null) {551 if (!oldFiber) {552 oldFiber = nextOldFiber;553 }554 break;555 }556 if (shouldTrackSideEffects) {557 if (oldFiber && newFiber.alternate === null) {558 deleteChild(returnFiber, oldFiber);559 }560 }561 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);562 if (previousNewFiber === null) {563 resultingFirstChild = newFiber;564 } else {565 previousNewFiber.sibling = newFiber;566 }567 previousNewFiber = newFiber;568 oldFiber = nextOldFiber;569 }570 if (step.done) {571 deleteRemainingChildren(returnFiber, oldFiber);572 return resultingFirstChild;573 }574 if (oldFiber === null) {575 for (; !step.done; newIdx++, step = newChildren.next()) {576 var _newFiber3 = createChild(returnFiber, step.value, priority);577 if (_newFiber3 === null) {578 continue;579 }580 lastPlacedIndex = placeChild(_newFiber3, lastPlacedIndex, newIdx);581 if (previousNewFiber === null) {582 resultingFirstChild = _newFiber3;583 } else {584 previousNewFiber.sibling = _newFiber3;585 }586 previousNewFiber = _newFiber3;587 }588 return resultingFirstChild;589 }590 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);591 for (; !step.done; newIdx++, step = newChildren.next()) {592 var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, priority);593 if (_newFiber4 !== null) {594 if (shouldTrackSideEffects) {595 if (_newFiber4.alternate !== null) {596 existingChildren.delete(_newFiber4.key === null ? newIdx : _newFiber4.key);597 }598 }599 lastPlacedIndex = placeChild(_newFiber4, lastPlacedIndex, newIdx);600 if (previousNewFiber === null) {601 resultingFirstChild = _newFiber4;602 } else {603 previousNewFiber.sibling = _newFiber4;604 }605 previousNewFiber = _newFiber4;606 }607 }608 if (shouldTrackSideEffects) {609 existingChildren.forEach(function (child) {610 return deleteChild(returnFiber, child);611 });612 }613 return resultingFirstChild;614 }615 function reconcileSingleTextNode(returnFiber, currentFirstChild, textContent, priority) {616 if (currentFirstChild !== null && currentFirstChild.tag === HostText) {617 deleteRemainingChildren(returnFiber, currentFirstChild.sibling);618 var existing = useFiber(currentFirstChild, priority);619 existing.pendingProps = textContent;620 existing.return = returnFiber;621 return existing;622 }623 deleteRemainingChildren(returnFiber, currentFirstChild);624 var created = createFiberFromText(textContent, priority);625 created.return = returnFiber;626 return created;627 }628 function reconcileSingleElement(returnFiber, currentFirstChild, element, priority) {629 var key = element.key;630 var child = currentFirstChild;631 while (child !== null) {632 if (child.key === key) {633 if (child.type === element.type) {634 deleteRemainingChildren(returnFiber, child.sibling);635 var existing = useFiber(child, priority);636 existing.ref = coerceRef(child, element);637 existing.pendingProps = element.props;638 existing.return = returnFiber;639 if (__DEV__) {640 existing._debugSource = element._source;641 existing._debugOwner = element._owner;642 }643 return existing;644 } else {645 deleteRemainingChildren(returnFiber, child);646 break;647 }648 } else {649 deleteChild(returnFiber, child);650 }651 child = child.sibling;652 }653 var created = createFiberFromElement(element, priority);654 created.ref = coerceRef(currentFirstChild, element);655 created.return = returnFiber;656 return created;657 }658 function reconcileSingleCoroutine(returnFiber, currentFirstChild, coroutine, priority) {659 var key = coroutine.key;660 var child = currentFirstChild;661 while (child !== null) {662 if (child.key === key) {663 if (child.tag === CoroutineComponent) {664 deleteRemainingChildren(returnFiber, child.sibling);665 var existing = useFiber(child, priority);666 existing.pendingProps = coroutine;667 existing.return = returnFiber;668 return existing;669 } else {670 deleteRemainingChildren(returnFiber, child);671 break;672 }673 } else {674 deleteChild(returnFiber, child);675 }676 child = child.sibling;677 }678 var created = createFiberFromCoroutine(coroutine, priority);679 created.return = returnFiber;680 return created;681 }682 function reconcileSingleYield(returnFiber, currentFirstChild, yieldNode, priority) {683 var child = currentFirstChild;684 if (child !== null) {685 if (child.tag === YieldComponent) {686 deleteRemainingChildren(returnFiber, child.sibling);687 var existing = useFiber(child, priority);688 existing.type = yieldNode.value;689 existing.return = returnFiber;690 return existing;691 } else {692 deleteRemainingChildren(returnFiber, child);693 }694 }695 var created = createFiberFromYield(yieldNode, priority);696 created.type = yieldNode.value;697 created.return = returnFiber;698 return created;699 }700 function reconcileSinglePortal(returnFiber, currentFirstChild, portal, priority) {701 var key = portal.key;702 var child = currentFirstChild;703 while (child !== null) {704 if (child.key === key) {705 if (child.tag === HostPortal && child.stateNode.containerInfo === portal.containerInfo && child.stateNode.implementation === portal.implementation) {706 deleteRemainingChildren(returnFiber, child.sibling);707 var existing = useFiber(child, priority);708 existing.pendingProps = portal.children || [];709 existing.return = returnFiber;710 return existing;711 } else {712 deleteRemainingChildren(returnFiber, child);713 break;714 }715 } else {716 deleteChild(returnFiber, child);717 }718 child = child.sibling;719 }720 var created = createFiberFromPortal(portal, priority);721 created.return = returnFiber;722 return created;723 }724 function reconcileChildFibers(returnFiber, currentFirstChild, newChild, priority) {725 var disableNewFiberFeatures = ReactFeatureFlags.disableNewFiberFeatures;726 var isObject = typeof newChild === 'object' && newChild !== null;727 if (isObject) {728 if (disableNewFiberFeatures) {729 switch (newChild.$$typeof) {730 case REACT_ELEMENT_TYPE:731 return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, priority));732 case REACT_PORTAL_TYPE:733 return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, priority));734 }735 } else {736 switch (newChild.$$typeof) {737 case REACT_ELEMENT_TYPE:738 return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, priority));739 case REACT_COROUTINE_TYPE:740 return placeSingleChild(reconcileSingleCoroutine(returnFiber, currentFirstChild, newChild, priority));741 case REACT_YIELD_TYPE:742 return placeSingleChild(reconcileSingleYield(returnFiber, currentFirstChild, newChild, priority));743 case REACT_PORTAL_TYPE:744 return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, priority));745 }746 }747 }748 if (disableNewFiberFeatures) {749 switch (returnFiber.tag) {750 case ClassComponent:751 {752 if (__DEV__) {753 var instance = returnFiber.stateNode;754 if (instance.render._isMockFunction && typeof newChild === 'undefined') {755 break;756 }757 }758 var Component = returnFiber.type;759 invariant(newChild === null || newChild === false, '%s.render(): A valid React element (or null) must be returned. ' + 'You may have returned undefined, an array or some other ' + 'invalid object.', Component.displayName || Component.name || 'Component');760 break;761 }762 case FunctionalComponent:763 {764 var _Component = returnFiber.type;765 invariant(newChild === null || newChild === false, '%s(...): A valid React element (or null) must be returned. ' + 'You may have returned undefined, an array or some other ' + 'invalid object.', _Component.displayName || _Component.name || 'Component');766 break;767 }768 }769 }770 if (typeof newChild === 'string' || typeof newChild === 'number') {771 return placeSingleChild(reconcileSingleTextNode(returnFiber, currentFirstChild, '' + newChild, priority));772 }773 if (isArray(newChild)) {774 return reconcileChildrenArray(returnFiber, currentFirstChild, newChild, priority);775 }776 if (getIteratorFn(newChild)) {777 return reconcileChildrenIterator(returnFiber, currentFirstChild, newChild, priority);778 }779 if (isObject) {780 throwOnInvalidObjectType(returnFiber, newChild);781 }782 if (!disableNewFiberFeatures && typeof newChild === 'undefined') {783 switch (returnFiber.tag) {784 case ClassComponent:785 {786 if (__DEV__) {787 var _instance = returnFiber.stateNode;788 if (_instance.render._isMockFunction) {789 break;790 }791 }792 }793 case FunctionalComponent:794 {795 var _Component2 = returnFiber.type;796 invariant(false, '%s(...): Nothing was returned from render. This usually means a ' + 'return statement is missing. Or, to render nothing, ' + 'return null.', _Component2.displayName || _Component2.name || 'Component');797 }798 }799 }800 return deleteRemainingChildren(returnFiber, currentFirstChild);801 }802 return reconcileChildFibers;803}804exports.reconcileChildFibers = ChildReconciler(true, true);805exports.reconcileChildFibersInPlace = ChildReconciler(false, true);806exports.mountChildFibersInPlace = ChildReconciler(false, false);807exports.cloneChildFibers = function (current, workInProgress) {808 if (!workInProgress.child) {809 return;810 }811 if (current !== null && workInProgress.child === current.child) {812 var currentChild = workInProgress.child;813 var newChild = cloneFiber(currentChild, currentChild.pendingWorkPriority);814 workInProgress.child = newChild;...
ReactChildFiber.js
Source:ReactChildFiber.js
...112 }113 childToDelete.nextEffect = null;114 childToDelete.effectTag = Deletion;115 }116 function deleteRemainingChildren(117 returnFiber : Fiber,118 currentFirstChild : ?Fiber119 ) : null {120 if (!shouldTrackSideEffects) {121 // Noop.122 return null;123 }124 // TODO: For the shouldClone case, this could be micro-optimized a bit by125 // assuming that after the first child we've already added everything.126 let childToDelete = currentFirstChild;127 while (childToDelete) {128 deleteChild(returnFiber, childToDelete);129 childToDelete = childToDelete.sibling;130 }131 return null;132 }133 function mapRemainingChildren(134 returnFiber : Fiber,135 currentFirstChild : Fiber136 ) : Map<string | number, Fiber> {137 // Add the remaining children to a temporary map so that we can find them by138 // keys quickly. Implicit (null) keys get added to this set with their index139 // instead.140 const existingChildren : Map<string | number, Fiber> = new Map();141 let existingChild = currentFirstChild;142 while (existingChild) {143 if (existingChild.key !== null) {144 existingChildren.set(existingChild.key, existingChild);145 } else {146 existingChildren.set(existingChild.index, existingChild);147 }148 existingChild = existingChild.sibling;149 }150 return existingChildren;151 }152 function useFiber(fiber : Fiber, priority : PriorityLevel) : Fiber {153 // We currently set sibling to null and index to 0 here because it is easy154 // to forget to do before returning it. E.g. for the single child case.155 if (shouldClone) {156 const clone = cloneFiber(fiber, priority);157 clone.index = 0;158 clone.sibling = null;159 return clone;160 } else {161 // We override the pending priority even if it is higher, because if162 // we're reconciling at a lower priority that means that this was163 // down-prioritized.164 fiber.pendingWorkPriority = priority;165 fiber.effectTag = NoEffect;166 fiber.index = 0;167 fiber.sibling = null;168 return fiber;169 }170 }171 function placeChild(newFiber : Fiber, lastPlacedIndex : number, newIndex : number) : number {172 newFiber.index = newIndex;173 if (!shouldTrackSideEffects) {174 // Noop.175 return lastPlacedIndex;176 }177 const current = newFiber.alternate;178 if (current) {179 const oldIndex = current.index;180 if (oldIndex < lastPlacedIndex) {181 // This is a move.182 newFiber.effectTag = Placement;183 return lastPlacedIndex;184 } else {185 // This item can stay in place.186 return oldIndex;187 }188 } else {189 // This is an insertion.190 newFiber.effectTag = Placement;191 return lastPlacedIndex;192 }193 }194 function placeSingleChild(newFiber : Fiber) : Fiber {195 // This is simpler for the single child case. We only need to do a196 // placement for inserting new children.197 if (shouldTrackSideEffects && !newFiber.alternate) {198 newFiber.effectTag = Placement;199 }200 return newFiber;201 }202 function updateTextNode(203 returnFiber : Fiber,204 current : ?Fiber,205 textContent : string,206 priority : PriorityLevel207 ) {208 if (current == null || current.tag !== HostText) {209 // Insert210 const created = createFiberFromText(textContent, priority);211 created.return = returnFiber;212 return created;213 } else {214 // Update215 const existing = useFiber(current, priority);216 existing.pendingProps = textContent;217 existing.return = returnFiber;218 return existing;219 }220 }221 function updateElement(222 returnFiber : Fiber,223 current : ?Fiber,224 element : ReactElement<any>,225 priority : PriorityLevel226 ) : Fiber {227 if (current == null || current.type !== element.type) {228 // Insert229 const created = createFiberFromElement(element, priority);230 created.ref = coerceRef(current, element);231 created.return = returnFiber;232 return created;233 } else {234 // Move based on index235 const existing = useFiber(current, priority);236 existing.ref = coerceRef(current, element);237 existing.pendingProps = element.props;238 existing.return = returnFiber;239 return existing;240 }241 }242 function updateCoroutine(243 returnFiber : Fiber,244 current : ?Fiber,245 coroutine : ReactCoroutine,246 priority : PriorityLevel247 ) : Fiber {248 // TODO: Should this also compare handler to determine whether to reuse?249 if (current == null || current.tag !== CoroutineComponent) {250 // Insert251 const created = createFiberFromCoroutine(coroutine, priority);252 created.return = returnFiber;253 return created;254 } else {255 // Move based on index256 const existing = useFiber(current, priority);257 existing.pendingProps = coroutine;258 existing.return = returnFiber;259 return existing;260 }261 }262 function updateYield(263 returnFiber : Fiber,264 current : ?Fiber,265 yieldNode : ReactYield,266 priority : PriorityLevel267 ) : Fiber {268 // TODO: Should this also compare continuation to determine whether to reuse?269 if (current == null || current.tag !== YieldComponent) {270 // Insert271 const reifiedYield = createReifiedYield(yieldNode);272 const created = createFiberFromYield(yieldNode, priority);273 created.type = reifiedYield;274 created.return = returnFiber;275 return created;276 } else {277 // Move based on index278 const existing = useFiber(current, priority);279 existing.type = createUpdatedReifiedYield(280 current.type,281 yieldNode282 );283 existing.return = returnFiber;284 return existing;285 }286 }287 function updatePortal(288 returnFiber : Fiber,289 current : ?Fiber,290 portal : ReactPortal,291 priority : PriorityLevel292 ) : Fiber {293 if (294 current == null ||295 current.tag !== Portal ||296 current.stateNode.containerInfo !== portal.containerInfo ||297 current.stateNode.implementation !== portal.implementation298 ) {299 // Insert300 const created = createFiberFromPortal(portal, priority);301 created.return = returnFiber;302 return created;303 } else {304 // Update305 const existing = useFiber(current, priority);306 existing.pendingProps = portal.children;307 existing.return = returnFiber;308 return existing;309 }310 }311 function updateFragment(312 returnFiber : Fiber,313 current : ?Fiber,314 fragment : Iterable<*>,315 priority : PriorityLevel316 ) : Fiber {317 if (current == null || current.tag !== Fragment) {318 // Insert319 const created = createFiberFromFragment(fragment, priority);320 created.return = returnFiber;321 return created;322 } else {323 // Update324 const existing = useFiber(current, priority);325 existing.pendingProps = fragment;326 existing.return = returnFiber;327 return existing;328 }329 }330 function createChild(331 returnFiber : Fiber,332 newChild : any,333 priority : PriorityLevel334 ) : ?Fiber {335 if (typeof newChild === 'string' || typeof newChild === 'number') {336 // Text nodes doesn't have keys. If the previous node is implicitly keyed337 // we can continue to replace it without aborting even if it is not a text338 // node.339 const created = createFiberFromText('' + newChild, priority);340 created.return = returnFiber;341 return created;342 }343 if (typeof newChild === 'object' && newChild !== null) {344 switch (newChild.$$typeof) {345 case REACT_ELEMENT_TYPE: {346 const created = createFiberFromElement(newChild, priority);347 created.ref = coerceRef(null, newChild);348 created.return = returnFiber;349 return created;350 }351 case REACT_COROUTINE_TYPE: {352 const created = createFiberFromCoroutine(newChild, priority);353 created.return = returnFiber;354 return created;355 }356 case REACT_YIELD_TYPE: {357 const reifiedYield = createReifiedYield(newChild);358 const created = createFiberFromYield(newChild, priority);359 created.type = reifiedYield;360 created.return = returnFiber;361 return created;362 }363 case REACT_PORTAL_TYPE: {364 const created = createFiberFromPortal(newChild, priority);365 created.return = returnFiber;366 return created;367 }368 }369 if (isArray(newChild) || getIteratorFn(newChild)) {370 const created = createFiberFromFragment(newChild, priority);371 created.return = returnFiber;372 return created;373 }374 }375 return null;376 }377 function updateSlot(378 returnFiber : Fiber,379 oldFiber : ?Fiber,380 newChild : any,381 priority : PriorityLevel382 ) : ?Fiber {383 // Update the fiber if the keys match, otherwise return null.384 const key = oldFiber ? oldFiber.key : null;385 if (typeof newChild === 'string' || typeof newChild === 'number') {386 // Text nodes doesn't have keys. If the previous node is implicitly keyed387 // we can continue to replace it without aborting even if it is not a text388 // node.389 if (key !== null) {390 return null;391 }392 return updateTextNode(returnFiber, oldFiber, '' + newChild, priority);393 }394 if (typeof newChild === 'object' && newChild !== null) {395 switch (newChild.$$typeof) {396 case REACT_ELEMENT_TYPE: {397 if (newChild.key === key) {398 return updateElement(returnFiber, oldFiber, newChild, priority);399 } else {400 return null;401 }402 }403 case REACT_COROUTINE_TYPE: {404 if (newChild.key === key) {405 return updateCoroutine(returnFiber, oldFiber, newChild, priority);406 } else {407 return null;408 }409 }410 case REACT_YIELD_TYPE: {411 if (newChild.key === key) {412 return updateYield(returnFiber, oldFiber, newChild, priority);413 } else {414 return null;415 }416 }417 }418 if (isArray(newChild) || getIteratorFn(newChild)) {419 // Fragments doesn't have keys so if the previous key is implicit we can420 // update it.421 if (key !== null) {422 return null;423 }424 return updateFragment(returnFiber, oldFiber, newChild, priority);425 }426 }427 return null;428 }429 function updateFromMap(430 existingChildren : Map<string | number, Fiber>,431 returnFiber : Fiber,432 newIdx : number,433 newChild : any,434 priority : PriorityLevel435 ) : ?Fiber {436 if (typeof newChild === 'string' || typeof newChild === 'number') {437 // Text nodes doesn't have keys, so we neither have to check the old nor438 // new node for the key. If both are text nodes, they match.439 const matchedFiber = existingChildren.get(newIdx) || null;440 return updateTextNode(returnFiber, matchedFiber, '' + newChild, priority);441 }442 if (typeof newChild === 'object' && newChild !== null) {443 switch (newChild.$$typeof) {444 case REACT_ELEMENT_TYPE: {445 const matchedFiber = existingChildren.get(446 newChild.key === null ? newIdx : newChild.key447 ) || null;448 return updateElement(returnFiber, matchedFiber, newChild, priority);449 }450 case REACT_COROUTINE_TYPE: {451 const matchedFiber = existingChildren.get(452 newChild.key === null ? newIdx : newChild.key453 ) || null;454 return updateCoroutine(returnFiber, matchedFiber, newChild, priority);455 }456 case REACT_YIELD_TYPE: {457 const matchedFiber = existingChildren.get(458 newChild.key === null ? newIdx : newChild.key459 ) || null;460 return updateYield(returnFiber, matchedFiber, newChild, priority);461 }462 case REACT_PORTAL_TYPE: {463 const matchedFiber = existingChildren.get(464 newChild.key === null ? newIdx : newChild.key465 ) || null;466 return updatePortal(returnFiber, matchedFiber, newChild, priority);467 }468 }469 if (isArray(newChild) || getIteratorFn(newChild)) {470 const matchedFiber = existingChildren.get(newIdx) || null;471 return updateFragment(returnFiber, matchedFiber, newChild, priority);472 }473 }474 return null;475 }476 function reconcileChildrenArray(477 returnFiber : Fiber,478 currentFirstChild : ?Fiber,479 newChildren : Array<*>,480 priority : PriorityLevel) : ?Fiber {481 // This algorithm can't optimize by searching from boths ends since we482 // don't have backpointers on fibers. I'm trying to see how far we can get483 // with that model. If it ends up not being worth the tradeoffs, we can484 // add it later.485 // Even with a two ended optimization, we'd want to optimize for the case486 // where there are few changes and brute force the comparison instead of487 // going for the Map. It'd like to explore hitting that path first in488 // forward-only mode and only go for the Map once we notice that we need489 // lots of look ahead. This doesn't handle reversal as well as two ended490 // search but that's unusual. Besides, for the two ended optimization to491 // work on Iterables, we'd need to copy the whole set.492 // In this first iteration, we'll just live with hitting the bad case493 // (adding everything to a Map) in for every insert/move.494 let resultingFirstChild : ?Fiber = null;495 let previousNewFiber : ?Fiber = null;496 let oldFiber = currentFirstChild;497 let lastPlacedIndex = 0;498 let newIdx = 0;499 let nextOldFiber = null;500 for (; oldFiber && newIdx < newChildren.length; newIdx++) {501 if (oldFiber) {502 if (oldFiber.index > newIdx) {503 nextOldFiber = oldFiber;504 oldFiber = null;505 } else {506 nextOldFiber = oldFiber.sibling;507 }508 }509 const newFiber = updateSlot(510 returnFiber,511 oldFiber,512 newChildren[newIdx],513 priority514 );515 if (!newFiber) {516 // TODO: This breaks on empty slots like null children. That's517 // unfortunate because it triggers the slow path all the time. We need518 // a better way to communicate whether this was a miss or null,519 // boolean, undefined, etc.520 if (!oldFiber) {521 oldFiber = nextOldFiber;522 }523 break;524 }525 if (shouldTrackSideEffects) {526 if (oldFiber && !newFiber.alternate) {527 // We matched the slot, but we didn't reuse the existing fiber, so we528 // need to delete the existing child.529 deleteChild(returnFiber, oldFiber);530 }531 }532 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);533 if (!previousNewFiber) {534 // TODO: Move out of the loop. This only happens for the first run.535 resultingFirstChild = newFiber;536 } else {537 // TODO: Defer siblings if we're not at the right index for this slot.538 // I.e. if we had null values before, then we want to defer this539 // for each null value. However, we also don't want to call updateSlot540 // with the previous one.541 previousNewFiber.sibling = newFiber;542 }543 previousNewFiber = newFiber;544 oldFiber = nextOldFiber;545 }546 if (newIdx === newChildren.length) {547 // We've reached the end of the new children. We can delete the rest.548 deleteRemainingChildren(returnFiber, oldFiber);549 return resultingFirstChild;550 }551 if (!oldFiber) {552 // If we don't have any more existing children we can choose a fast path553 // since the rest will all be insertions.554 for (; newIdx < newChildren.length; newIdx++) {555 const newFiber = createChild(556 returnFiber,557 newChildren[newIdx],558 priority559 );560 if (!newFiber) {561 continue;562 }563 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);564 if (!previousNewFiber) {565 // TODO: Move out of the loop. This only happens for the first run.566 resultingFirstChild = newFiber;567 } else {568 previousNewFiber.sibling = newFiber;569 }570 previousNewFiber = newFiber;571 }572 return resultingFirstChild;573 }574 // Add all children to a key map for quick lookups.575 const existingChildren = mapRemainingChildren(returnFiber, oldFiber);576 // Keep scanning and use the map to restore deleted items as moves.577 for (; newIdx < newChildren.length; newIdx++) {578 const newFiber = updateFromMap(579 existingChildren,580 returnFiber,581 newIdx,582 newChildren[newIdx],583 priority584 );585 if (newFiber) {586 if (shouldTrackSideEffects) {587 if (newFiber.alternate) {588 // The new fiber is a work in progress, but if there exists a589 // current, that means that we reused the fiber. We need to delete590 // it from the child list so that we don't add it to the deletion591 // list.592 existingChildren.delete(593 newFiber.key === null ? newIdx : newFiber.key594 );595 }596 }597 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);598 if (!previousNewFiber) {599 resultingFirstChild = newFiber;600 } else {601 previousNewFiber.sibling = newFiber;602 }603 previousNewFiber = newFiber;604 }605 }606 if (shouldTrackSideEffects) {607 // Any existing children that weren't consumed above were deleted. We need608 // to add them to the deletion list.609 existingChildren.forEach(child => deleteChild(returnFiber, child));610 }611 return resultingFirstChild;612 }613 function reconcileChildrenIterator(614 returnFiber : Fiber,615 currentFirstChild : ?Fiber,616 newChildren : Iterator<*>,617 priority : PriorityLevel) : null {618 // TODO: Copy everything from reconcileChildrenArray but use the iterator619 // instead.620 return null;621 }622 function reconcileSingleTextNode(623 returnFiber : Fiber,624 currentFirstChild : ?Fiber,625 textContent : string,626 priority : PriorityLevel627 ) : Fiber {628 // There's no need to check for keys on text nodes since we don't have a629 // way to define them.630 if (currentFirstChild && currentFirstChild.tag === HostText) {631 // We already have an existing node so let's just update it and delete632 // the rest.633 deleteRemainingChildren(returnFiber, currentFirstChild.sibling);634 const existing = useFiber(currentFirstChild, priority);635 existing.pendingProps = textContent;636 existing.return = returnFiber;637 return existing;638 }639 // The existing first child is not a text node so we need to create one640 // and delete the existing ones.641 deleteRemainingChildren(returnFiber, currentFirstChild);642 const created = createFiberFromText(textContent, priority);643 created.return = returnFiber;644 return created;645 }646 function reconcileSingleElement(647 returnFiber : Fiber,648 currentFirstChild : ?Fiber,649 element : ReactElement<any>,650 priority : PriorityLevel651 ) : Fiber {652 const key = element.key;653 let child = currentFirstChild;654 while (child) {655 // TODO: If key === null and child.key === null, then this only applies to656 // the first item in the list.657 if (child.key === key) {658 if (child.type === element.type) {659 deleteRemainingChildren(returnFiber, child.sibling);660 const existing = useFiber(child, priority);661 existing.ref = coerceRef(child, element);662 existing.pendingProps = element.props;663 existing.return = returnFiber;664 return existing;665 } else {666 deleteRemainingChildren(returnFiber, child);667 break;668 }669 } else {670 deleteChild(returnFiber, child);671 }672 child = child.sibling;673 }674 const created = createFiberFromElement(element, priority);675 created.ref = coerceRef(currentFirstChild, element);676 created.return = returnFiber;677 return created;678 }679 function reconcileSingleCoroutine(680 returnFiber : Fiber,681 currentFirstChild : ?Fiber,682 coroutine : ReactCoroutine,683 priority : PriorityLevel684 ) : Fiber {685 const key = coroutine.key;686 let child = currentFirstChild;687 while (child) {688 // TODO: If key === null and child.key === null, then this only applies to689 // the first item in the list.690 if (child.key === key) {691 if (child.tag === CoroutineComponent) {692 deleteRemainingChildren(returnFiber, child.sibling);693 const existing = useFiber(child, priority);694 existing.pendingProps = coroutine;695 existing.return = returnFiber;696 return existing;697 } else {698 deleteRemainingChildren(returnFiber, child);699 break;700 }701 } else {702 deleteChild(returnFiber, child);703 }704 child = child.sibling;705 }706 const created = createFiberFromCoroutine(coroutine, priority);707 created.return = returnFiber;708 return created;709 }710 function reconcileSingleYield(711 returnFiber : Fiber,712 currentFirstChild : ?Fiber,713 yieldNode : ReactYield,714 priority : PriorityLevel715 ) : Fiber {716 const key = yieldNode.key;717 let child = currentFirstChild;718 while (child) {719 // TODO: If key === null and child.key === null, then this only applies to720 // the first item in the list.721 if (child.key === key) {722 if (child.tag === YieldComponent) {723 deleteRemainingChildren(returnFiber, child.sibling);724 const existing = useFiber(child, priority);725 existing.type = createUpdatedReifiedYield(726 child.type,727 yieldNode728 );729 existing.return = returnFiber;730 return existing;731 } else {732 deleteRemainingChildren(returnFiber, child);733 break;734 }735 } else {736 deleteChild(returnFiber, child);737 }738 child = child.sibling;739 }740 const reifiedYield = createReifiedYield(yieldNode);741 const created = createFiberFromYield(yieldNode, priority);742 created.type = reifiedYield;743 created.return = returnFiber;744 return created;745 }746 function reconcileSinglePortal(747 returnFiber : Fiber,748 currentFirstChild : ?Fiber,749 portal : ReactPortal,750 priority : PriorityLevel751 ) : Fiber {752 const key = portal.key;753 let child = currentFirstChild;754 while (child) {755 // TODO: If key === null and child.key === null, then this only applies to756 // the first item in the list.757 if (child.key === key) {758 if (759 child.tag === Portal &&760 child.stateNode.containerInfo === portal.containerInfo &&761 child.stateNode.implementation === portal.implementation762 ) {763 deleteRemainingChildren(returnFiber, child.sibling);764 const existing = useFiber(child, priority);765 existing.pendingProps = portal.children;766 existing.return = returnFiber;767 return existing;768 } else {769 deleteRemainingChildren(returnFiber, child);770 break;771 }772 } else {773 deleteChild(returnFiber, child);774 }775 child = child.sibling;776 }777 const created = createFiberFromPortal(portal, priority);778 created.return = returnFiber;779 return created;780 }781 // This API will tag the children with the side-effect of the reconciliation782 // itself. They will be added to the side-effect list as we pass through the783 // children and the parent.784 function reconcileChildFibers(785 returnFiber : Fiber,786 currentFirstChild : ?Fiber,787 newChild : any,788 priority : PriorityLevel789 ) : ?Fiber {790 // This function is not recursive.791 // If the top level item is an array, we treat it as a set of children,792 // not as a fragment. Nested arrays on the other hand will be treated as793 // fragment nodes. Recursion happens at the normal flow.794 if (typeof newChild === 'string' || typeof newChild === 'number') {795 return placeSingleChild(reconcileSingleTextNode(796 returnFiber,797 currentFirstChild,798 '' + newChild,799 priority800 ));801 }802 if (typeof newChild === 'object' && newChild !== null) {803 switch (newChild.$$typeof) {804 case REACT_ELEMENT_TYPE:805 return placeSingleChild(reconcileSingleElement(806 returnFiber,807 currentFirstChild,808 newChild,809 priority810 ));811 case REACT_COROUTINE_TYPE:812 return placeSingleChild(reconcileSingleCoroutine(813 returnFiber,814 currentFirstChild,815 newChild,816 priority817 ));818 case REACT_YIELD_TYPE:819 return placeSingleChild(reconcileSingleYield(820 returnFiber,821 currentFirstChild,822 newChild,823 priority824 ));825 case REACT_PORTAL_TYPE:826 return placeSingleChild(reconcileSinglePortal(827 returnFiber,828 currentFirstChild,829 newChild,830 priority831 ));832 }833 if (isArray(newChild)) {834 return reconcileChildrenArray(835 returnFiber,836 currentFirstChild,837 newChild,838 priority839 );840 }841 const iteratorFn = getIteratorFn(newChild);842 if (iteratorFn) {843 return reconcileChildrenIterator(844 returnFiber,845 currentFirstChild,846 newChild,847 priority848 );849 }850 }851 // Remaining cases are all treated as empty.852 return deleteRemainingChildren(returnFiber, currentFirstChild);853 }854 return reconcileChildFibers;855}856exports.reconcileChildFibers = ChildReconciler(true, true);857exports.reconcileChildFibersInPlace = ChildReconciler(false, true);858exports.mountChildFibersInPlace = ChildReconciler(false, false);859exports.cloneChildFibers = function(current : ?Fiber, workInProgress : Fiber) : void {860 if (!workInProgress.child) {861 return;862 }863 if (current && workInProgress.child === current.child) {864 // We use workInProgress.child since that lets Flow know that it can't be865 // null since we validated that already. However, as the line above suggests866 // they're actually the same thing....
ReactChildFiber.new.js
Source:ReactChildFiber.new.js
...64 } else {65 deletions.push(childToDelete)66 }67 }68 function deleteRemainingChildren(69 returnFiber,70 currentFirstChild,71 ) {72 if (!shouldTrackSideEffects) {73 return null74 }75 let childToDelete = currentFirstChild76 while (childToDelete !== null) {77 deleteChild(returnFiber, childToDelete)78 childToDelete = childToDelete.sibling79 }80 return null81 }82 function mapRemainingChildren(83 returnFiber,84 currentFirstChild,85 ) {86 const existingChildren = new Map()87 88 let existingChild = currentFirstChild89 while (existingChild !== null) {90 existingChildren.set(existingChild.key === null ? existingChild.index : existingChild.key)91 existingChild = existingChild.sibling92 }93 return existingChildren94 }95 96 function useFiber(fiber, pendingProps) {97 const clone = createWorkInProgress(fiber, pendingProps)98 clone.index = 099 clone.sibling = null100 return clone101 }102 function placeChild(103 newFiber,104 lastPlacedIndex,105 newIndex,106 ) {107 newFiber.index = newIndex108 if (!shouldTrackSideEffects) {109 return lastPlacedIndex110 }111 const current = newFiber.alternate112 if (current !== null) {113 const oldIndex = current.index114 if (oldIndex < lastPlacedIndex) {115 newFiber.flags |= Placement116 return lastPlacedIndex117 } else {118 return oldIndex119 }120 } else {121 newFiber.flags |= Placement122 return lastPlacedIndex123 }124 }125 function placeSingleChild(126 newFiber,127 ) {128 if (shouldTrackSideEffects && newFiber.alternate === null) {129 newFiber.flags |= Placement130 }131 132 return newFiber133 }134 135 function updateTextNode(136 returnFiber,137 current, // oldFiber138 textContent,139 lanes,140 ) {141 if (current === null || current.tag !== HostText) {142 const created = createFiberFromText(textContent, returnFiber.mode, lanes)143 created.return = returnFiber144 return created145 } else {146 // Update147 const existing = useFiber(current, textContent)148 existing.return = returnFiber149 return existing150 }151 }152 153 function updateElement(154 returnFiber,155 current,156 element,157 lanes,158 ) {159 const elementType = element.type160 161 if (elementType === REACT_FRAGMENT_TYPE) {162 return updateFragment(163 returnFiber,164 current,165 element.props.children,166 lanes,167 element.key,168 )169 }170 171 if (current !== null) {172 if (173 current.elementType === elementType ||174 (enableLazyElements &&175 typeof elementType === 'object' &&176 elementType !== null &&177 elementType.$$typeof === REACT_LAZY_TYPE &&178 resolveLazy(elementType) === current.type)179 ) {180 const existing = useFiber(current, element.props)181 existing.ref = coerceRef(returnFiber, current, element)182 existing.return = returnFiber183 return existing184 }185 }186 187 // Insert188 const created = createFiberFromElement(element, returnFiber.mode, lanes)189 created.ref = coerceRef(returnFiber, current, element)190 created.return = returnFiber191 return created192 }193 194 function updatePortal(195 returnFiber,196 current,197 portal,198 lanes,199 ) {200 if (201 current === null ||202 current.tag !== HostPortal ||203 current.stateNode.containerInfo !== portal.containerInfo ||204 current.stateNode.implementation !== current.stateNode.implementation205 ) {206 // Insert207 const created = createFiberFromPortal(portal, returnFiber.mode, lanes)208 created.return = returnFiber209 return created210 } else {211 // Update212 const existing = useFiber(current, portal.children || [])213 existing.return = returnFiber214 return existing215 }216 }217 function updateFragment(218 returnFiber,219 current,220 fragment,221 lanes,222 key,223 ) {224 if (current === null || current.tag !== Fragment) {225 const created = createFiberFromFragment(226 fragment,227 returnFiber.mode,228 lanes,229 keys,230 )231 created.return = returnFiber232 return created233 } else {234 const existing = useFiber(current, fragment)235 existing.return = returnFiber236 return existing237 }238 }239 240 function updateSlot(241 returnFiber,242 oldFiber,243 newChild,244 lanes,245 ) {246 const key = oldFiber !== null ? oldFiber.key : null;247 248 if (typeof newChild === 'string' || typeof newChild === 'number') {249 // Text nodes don't have keys. If the previous node is implicitly keyed250 // we can continue to replace it without aborting even if it is not a text251 // node.252 253 // implicitly å«èçï¼éå¼ç254 if (key !== null) {255 return null256 }257 return updateTextNode(returnFiber, oldFiber, '' + newChild, lanes)258 }259 260 if (typeof newChild === 'object' && newChild !== null) {261 switch (newChild.$$typeof) {262 case REACT_ELEMENT_TYPE:263 if (newChild.key === key) {264 return updateElement(returnFiber, oldFiber, newChild, lanes)265 } else {266 return null267 }268 case REACT_PORTAL_TYPE:269 if (newChild.key === key) {270 return updatePortal(returnFiber, oldFiber, newChild, lanes)271 } else {272 return null273 }274 case REACT_LAZY_TYPE:275 if (enableLazyElements) {276 const payload = newChild._payload277 const init = newChild._init278 return updateSlot(returnFiber, oldFiber, init(payload), lanes)279 }280 }281 if (isArray(newChild) || getIteratorFn(newChild)) {282 if (key !== null) {283 return null;284 }285 286 return updateFragment(returnFiber, oldFiber, newChild, lanes, null)287 }288 }289 290 return null291 }292 function createChild(293 returnFiber,294 newChild,295 lanes,296 ) {297 if (typeof newChild === 'string' || typeof newChild === 'number') {298 const created = createFiberFromText(299 '' + newChild,300 returnFiber.mode,301 lanes302 )303 created.return = returnFiber304 return created305 }306 if (typeof newChild === 'object' && newChild !== null) {307 switch (newChild.$$typeof) {308 case REACT_ELEMENT_TYPE:309 const created = createFiberFromElement(310 newChild,311 returnFiber.mode,312 lanes,313 )314 created.ref = coerceRef(returnFiber, null, newChild)315 created.return = returnFiber316 return created317 case REACT_FRAGMENT_TYPE:318 const created = createFiberFromFragment(319 newChild,320 returnFiber.mode,321 lanes,322 )323 created.return = returnFiber324 return created325 case REACT_LAZY_TYPE:326 const payload = newChild._payload327 const init = newChild._init328 return createChild(returnFiber, init(payload), lanes)329 }330 }331 if (isArray(newChild) || getIterator(newChild)) {332 const created = createFiberFromFragment(333 newChild,334 returnFiber.mode,335 lanes,336 null337 )338 created.return = returnFiber339 return created340 }341 return null342 }343 function updateFromMap(344 existingChildren,345 returnFiber,346 newIdx,347 newChild,348 lanes,349 ) {350 if (typeof newChild === 'string' || typeof newChild === 'number') {351 const matchedFiber = existingChildren.get(newIdx) || null352 return updateTextNode(returnFiber, matchedFiber, '' + newChild, lanes)353 }354 if (typeof newChild === 'object' && newChild !== null) {355 const matchedFiber = existingChildren.get(356 newChild.key === null ? newIdx : newChild.key,357 ) || null358 359 switch (newChild.$$typeof) {360 case REACT_ELEMENT_TYPE:361 return updateElement(returnFiber, matchedFiber, newChild, lanes)362 case REACT_PORTAL_TYPE:363 return updatePortal(returnFiber, matchedFiber, newChild, lanes,)364 case REACT_LAZY_TYPE:365 if (enableLazyElements) {366 const payload = newChild._payload367 const init = newChild._init368 369 return updateFromMap(370 existingChildren,371 returnFiber,372 newIdx,373 init(payload),374 lanes,375 )376 }377 }378 }379 380 if (isArray(newChild) || getIterator(newChild)) {381 const matchedFiber = existingChildren.get(newIdx) || null382 return updateFragment(returnFiber, matchedFiber, newChild, lanes, null)383 }384 return null385 }386 387 function reconcileChildrenArray(388 returnFiber,389 currentFirstChild, // å¼å¤´ç oldChild 390 newChildren, // æ°ç children391 lanes, // 轨迹392 ) {393 let resultingFirstChild = null // è¿åç Child394 let previousNewFiber = null // ä¹åç newChild395 396 let oldFiber = currentFirstChild // å½åæä½ç oldChild397 let lastPlacedIndex = 0 // æåä¸æ¬¡æä½æ¿æ¢åç index398 let newIdx = 0399 let nextOldFiber = null400 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {401 if (oldFiber.index > newIdx) {402 nextOldFiber = oldFiber403 oldFiber = null404 } else {405 nextOldFiber = oldFiber.sibling406 }407 const newFiber = updateSlot(408 returnFiber,409 oldFiber,410 newChildren[newIdx],411 lanes412 )413 if (newFiber === null) {414 if (oldFiber === null) {415 oldFiber = nextOldFiber416 }417 418 break419 }420 if (shouldTrackSideEffects) {421 if (oldFiber && newFiber.alternate === null) {422 deleteChild(returnFiber, oldFiber)423 }424 }425 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx)426 if (previousNewFiber === null) {427 resultingFirstChild = newFiber428 } else {429 previousNewFiber.sibling = newFiber430 }431 previousNewFiber = newFiber432 oldFiber = nextOldFiber433 }434 435 if (newIdx === newChildren.length) {436 deleteRemainingChildren(returnFiber, oldFiber)437 return resultingFirstChild438 }439 if (oldFiber === null) {440 for (; newIdx < newChildren.length; newIdx++) {441 const newFiber = createChild(returnFiber, newChildren[newIdx], lanes)442 if (newFiber === null) {443 continue444 }445 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx)446 if (previousNewFiber === null) {447 resultingFirstChild = newFiber448 } else {449 previousNewFiber.sibling = newFiber450 }451 previousNewFiber = newFiber452 }453 return resultingFirstChild454 }455 456 const existingChildren = mapRemainingChildren(returnFiber, oldFiber)457 for (; newIdx < newChildren.length; newIdx++) {458 const newFiber = updateFromMap(459 existingChildren,460 returnFiber,461 newIdx,462 newChildren[newIdx],463 lanes,464 )465 if (newFiber === null) {466 if (shouldTrackSideEffects) {467 if (newFiber.alternate !== null) {468 existingChildren.delete(newFiber.key === null ? newIdx : newFiber.key)469 }470 }471 }472 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx)473 if (previousNewFiber === null) {474 resultingFirstChild = newFiber475 } else {476 previousNewFiber.sibling = newFiber477 }478 previousNewFiber = newFiber479 }480 481 if (shouldTrackSideEffects) {482 existingChildren.forEach(child => deleteChild(returnFiber, child))483 }484 485 return resultingFirstChild486 }487 function reconcileChildrenIterator(488 returnFiber,489 currentFirstChild,490 newChildrenIterable,491 lanes,492 ) {493 const iteratorFn = getIteratorFn(newChildrenIterable)494 const newChildren = iteratorFn.call(newChildrenIterable)495 // ...496 }497 function reconcileSingleTextNode(498 returnFiber,499 currentFirstChild,500 textContent,501 lanes,502 ) {503 if (currentFirstChild !== null && currentFirstChild.tag === HostText) {504 deleteRemainingChildren(returnFiber, currentFirstChild.sibling)505 const existing = useFiber(currentFirstChild, textContent)506 existing.return = returnFiber507 return existing508 }509 deleteRemainingChildren(returnFiber, currentFirstChild)510 const created = createFiberFromText(textContent, returnFiber.mode, lanes)511 created.return = returnFiber512 return created513 }514 function reconcileSingleElement(515 returnFiber,516 currentFirstChild,517 element,518 lanes,519 ) {520 const key = element.key521 let child = currentFirstChild522 while (child !== null) {523 const elementType = element.type;524 if (child.key === key) {525 const elementType = element.type526 if (elementType === REACT_FRAGMENT_TYPE) {527 if (child.tag === Fragment) {528 deleteRemainingChildren(returnFiber, child.sibling)529 const existing = useFiber(child, element.props.children)530 existing.return = returnFiber531 return existing532 }533 } else {534 if (535 child.elementType === elementType ||536 (537 enableLazyElements &&538 elementType !== null &&539 element.$$typeof === REACT_LAZY_TYPE &&540 resolveLazy(elementType).type === child.type541 )542 ) {543 deleteRemainingChildren(returnFiber, child.sibling)544 const existing = useFiber(child, element.props)545 existing.ref = coerceRef(returnFiber, child, element)546 existing.return = returnFiber547 return existing548 }549 }550 deleteRemainingChildren(returnFiber, child)551 break552 } else {553 deleteChild(returnFiber, child) 554 }555 }556 if (element.type === REACT_FRAGMENT_TYPE) {557 const created = createFiberFromFragment(558 element.props.children,559 returnFiber.mode,560 lanes,561 element.key,562 )563 created.return = returnFiber564 return created565 } else {566 const created = createFiberFromElement(567 element,568 returnFiber.mode,569 lanes,570 )571 created.ref = coerceRef(returnFiber, currentFirstChild, element)572 created.return = returnFiber573 return created574 }575 }576 function reconcileSinglePortal(577 returnFiber,578 currentFirstChild,579 portal,580 lanes,581 ) {582 const key = portal.key583 let child = currentFirstChild584 while (child !== null) {585 if (child.key === key) {586 if (587 child.tag === HostPortal &&588 child.statNode.containerInfo === portal.containerInfo &&589 child.stateNode.implementation === portal.implementation590 ) {591 deleteRemainingChildren(returnFiber, child.sibling)592 const existing = useFiber(child, portal.children || [])593 existing.return = returnFiber594 return existing595 } else {596 deleteRemainingChildren(returnFiber, child)597 break598 }599 }600 child = child.sibling601 }602 const created = createFiberFromPortal(603 portal,604 returnFiber.mode,605 lanes,606 )607 created.return = returnFiber608 return created609 }610 function reconcileChildFibers(611 returnFiber,612 currentFirstChild,613 newChild,614 lanes,615 ) {616 const isUnkeyedTopLevelFragment =617 typeof newChild === 'object' && 618 newChild !== null &&619 newChild.type === REACT_FRAGMENT_TYPE &&620 newChild.key === null621 if (isUnkeyedTopLevelFragment) {622 newChild = newChild.props.children623 }624 const isObject = typeof newChild === 'object' && newChild !== null625 if (isObject) {626 switch (newChild.$$typeof) {627 case REACT_ELEMENT_TYPE:628 return placeSingleChild(629 reconcileSingleElement(630 returnFiber,631 currentFirstChild,632 newChild,633 lanes,634 )635 )636 case REACT_PORTAL_TYPE:637 return placeSingleChild(638 reconcileSinglePortal(639 returnFiber,640 currentFirstChild,641 newChild,642 lanes,643 )644 )645 case REACT_LAZY_TYPE:646 if (enableLazyElements) {647 const payload = newChild._payload648 const init = newChild._init649 return reconcileChildFibers(650 returnFiber,651 currentFirstChild,652 init(payload),653 lanes,654 )655 }656 }657 }658 if (typeof newChild === 'string' || typeof newChild === 'number') {659 return placeSingleChild(660 reconcileSingleTextNode(661 returnFiber,662 currentFirstChild,663 '' + newChild,664 lanes,665 )666 )667 }668 if (isArray(newChild)) {669 return reconcileChildrenArray(670 returnFiber,671 currentFirstChild,672 newChild,673 lanes,674 )675 }676 if (getIteratorFn(newChild)) {677 return reconcileChildrenIterator(678 returnFiber,679 currentFirstChild,680 newChild,681 lanes,682 )683 }684 return deleteRemainingChildren(returnFiber, currentFirstChild);685 }686 return reconcileChildFibers;687}688export const reconcileChildFibers = ChildReconciler(true)689export const mountChildFibers = ChildReconciler(false)690export function cloneChildFibers(current, workInProgress) {691 if (workInProgress.child === null) {692 return693 }694 let currentChild = workInProgress.child695 let newChild = createWorkInProgress(currentChild, currentChild.pendingProps)696 workInProgress.child = newChild697 newChild.return = workInProgress698 while (currentChild.sibling !== null) {...
react-diff.js
Source:react-diff.js
...14 // å¤æchildånewChildæ¯å¦æ¯åä¸ä¸ªèç¹15 if (child.key === key) {16 if (child.elementType === newChild.type) {17 // å é¤å©ä½çåèç¹18 deleteRemainingChildren(returnFiber, child.sibling);19 // å¤ç¨childèç¹20 const existing = useFiber(child, newChild.props);21 // æ´æ°å¤ç¨èç¹çrefåreturn22 existing.ref = coerceRef(returnFiber, child, newChild);23 existing.return = returnFiber;24 return existing;25 } else {26 deleteRemainingChildren(returnFiber, child);27 break;28 }29 } else {30 // keyä¸åçæ
åµï¼å é¤child31 deleteChild(returnFiber, child);32 }33 child = child.sibling;34 }35 // åèç¹ä¸æ²¡æç¸åèç¹çæ
åµ36 const created = createFiberFromElement(newChild, returnFiber.mode);37 created.ref = coerceRef(returnFiber, currentFirstChild, newChild);38 created.return = returnFiber;39 return created;40}41// æ°å
ç´ ä¸ºææ¬èç¹42function reconcileSingleTextNode(returnFiber, currentFirstChild, textConent) {43 if (currentFirstChild !== null && currentFirstChild.tag === HostText) {44 deleteRemainingChildren(returnFiber, currentFirstChild.sibling);45 // å¤ç¨ç¬¬ä¸ä¸ªèç¹46 const existing = useFiber(currentFirstChild, textConent);47 existing.return = returnFiber;48 return existing;49 }50 deleteRemainingChildren(returnFiber, currentFirstChild);51 const created = createFiberFromText(textConent, returnFiber.mode);52 created.return = returnFiber;53 return created;54}55function placeChild(newFiber, lastPlacedIndex, newIdx) {56 newFiber.index = newIndex;57 if (!shouldTrackSideEffects) {58 return lastPlacedIndex;59 }60 const current = newFiber.alternate; // current== null,该èç¹ä¸ºæ°å¢èç¹61 if (current !== null) {62 // current !== null 表示æ´æ°ï¼åå¨å·²æèç¹63 const oldIndex = current.index;64 if (oldIndex < lastPlacedIndex) {65 newFiber.flags = Placement;66 return lastPlacedIndex;67 } else {68 // 该项ä¾ç¶çå¨èä½ç½®69 return oldIndex;70 }71 } else {72 newFiber.flags = Placement;73 return lastPlacedIndex;74 }75}76function updateTextNode(returnFiber, current, textContent) {77 // currentèç¹ä¸æ¯å¯å¤ç¨çææ¬èç¹78 if (current === null || current.tag !== HostText) {79 // éè¿textContentå建ææ¬èç¹Fiber80 const created = createFiberFromText(textContent, returnFiber.mode);81 created.return = returnFiber;82 return created;83 } else {84 // æ¾å°å¯å¤ç¨çææ¬èç¹äºï¼åå¤ç¨85 const existing = useFiber(current, textContent); // å¤ç¨ææ¬èç¹86 existing.return = returnFiber;87 return existing;88 }89}90function updateElement(returnFiber, current, element) {91 if (current !== null) {92 if (current.elementType === element.type) {93 const existing = useFiber(current, element.props); // å¤ç¨èç¹94 existing.ref = coerceRef(returnFiber, current, element);95 existing.return = returnFiber;96 return existing;97 }98 }99 // æ°èç¹100 const created = createFiberFromElement(element, returnFiber.mode);101 created.ref = coerceRef(returnFiber, current, element);102 created.return = returnFiber;103 return created;104}105// å°ææèèç¹æ·»å å°Map对象ä¸106function mapRemainingChildren(returnFiber, currentFirstChild) {107 const existingChildren = new Map();108 let existingChild = currentFirstChild;109 while (existingChild !== null) {110 // key ä¸ä¸ºnull å
ç´ èç¹111 if (existingChild.key !== null) {112 existingChildren.set(existingChild.key, existingChild);113 } else {114 // ä¸åå¨key å使ç¨index代æ¿115 existingChildren.set(existingChild.index, existingChild);116 }117 existingChild = existingChild.sibling;118 }119 return existingChildren;120}121function updateFromMap(existingChildren, returnFiber, newIdx, newChild) {122 // æ°èç¹æ¯ææ¬èç¹123 if (typeof newChild === 'string' || typeof newChild === 'number') {124 const matchedFiber = existingChildren.get(newIdx) || null; // æ¾indexç¸åçèç¹å¤ç¨125 return updateTextNode(returnFiber, matchedFiber, '' + newChild);126 }127 // newChildæ¯å
ç´ èç¹çæ
åµ128 if (typeof newChild === 'object' && newChild !== null) {129 if (newChild.$$typeof === REACT_ELEMENT_TYPE) {130 const matchedFiber =131 existingChildren.get(newChild.key ? newChild.key : newChild.index) ||132 null;133 // è¿åæ´æ°åçå
ç´ èç¹134 return updateElement(returnFiber, matchedFiber, newChild);135 }136 }137 return null;138}139function createChild(returnFiber, newChild) {140 // å¤çææ¬èç¹141 if (typeof newChild === 'string' || typeof newChild === 'number') {142 const created = createFiberFromText('' + newChild, returnFiber.mode);143 created.return = returnFiber;144 return created;145 }146 // å¤çå
ç´ èç¹147 if (typeof newChild === 'object' && newChild !== null) {148 if (newChild.$$typeof === REACT_ELEMENT_TYPE) {149 const created = createFiberFromElement(newChild, returnFiber.mode);150 created.ref = coerceRef(returnFiber, null, newChild);151 created.return = returnFiber;152 return created;153 }154 }155 return null;156}157function createFiberFromText(content, mode) {158 const fiber = createFiber(HostText, content, null);159 return fiber;160}161function createFiberFromElement(element, mode) {162 let owner = null;163 const type = element.type;164 const key = element.key;165 const pendingProps = element.props;166 const fiber = createFiberFromTypeAndProps(167 type,168 key,169 pendingProps,170 owner,171 mode172 );173 return fiber;174}175function coerceRef(returnFiber, current, element) {176 return element.ref;177}178// æ°èç¹æ¯å
å«å¤ä¸ªèç¹çæ°ç»179function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren) {180 let resultingFirstChild = null;181 let previousNewFiber = null;182 let oldFiber = currentFirstChild;183 let lastPlacedIndex = 0;184 let newIdx = 0;185 let nextOldFiber = null;186 // 第ä¸æ¬¡éåï¼å¯¹æ¯åä½ç½®çèç¹æ¯å¦ä¸æ ·187 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {188 if (oldFiber.index > newIdx) {189 nextOldFiber = oldFiber;190 oldFiber = null;191 } else {192 nextOldFiber = oldFiber.sibling;193 }194 // updateSlot æ¯å¯¹æ°èèç¹ï¼è¿ånull 表示æ§èç¹ä¸å¯å¤ç¨ï¼å¦åè¿åå¯å¤ç¨çèç¹ï¼å³æ§èç¹195 const newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx]);196 if (newFiber === null) {197 if (oldFiber === null) {198 oldFiber = nextOldFiber;199 }200 break;201 }202 if (shouldTrackSideEffects) {203 if (oldFiber && newFiber.alternate === null) {204 deleteChild(returnFiber, oldFiber);205 }206 }207 // ç»newFiberæ·»å flagsæ è¯208 lastPlaceIndex = placeChild(newFiber, lastPlacedIndex, newIdx);209 if (previousNewFiber === null) {210 resultingFirstChild = newFiber; // é¾è¡¨å¤´211 } else {212 previousNewFiber.sibling = newFiber;213 }214 previousNewFiber = newFiber;215 oldFiber = nextOldFiber;216 }217 // æ°èç¹å·²ç»å
¨é¨éåå®æ¯218 if (newIdx === newChildren.length) {219 // å é¤å©ä½çèç¹220 deleteRemainingChildren(returnFiber, oldFiber);221 return resultingFirstChild;222 }223 // èèç¹éåå®æ¯ï¼æ°èç¹ä¸å©ä¸çå为æ°å建ç224 if (oldFiber === null) {225 for (; newIdx < newChildren.length; newIdx++) {226 const newFiber = createChild(returnFiber, newChildren[newIdx], lanes);227 if (newFiber === null) {228 continue;229 }230 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);231 if (previousNewFiber === null) {232 resultingFirstChild = newFiber;233 } else {234 previousNewFiber.sibling = newFiber;...
Using AI Code Generation
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.click('text=Sign in');7 await page.fill('input[name="identifier"]', '
Using AI Code Generation
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.click('text=Get started');7 await page.click('text=Docs');8 await page.click('text=API');9 await page.click('text=Locator');10 const locator = page.locator('text=Locator');11 await locator.deleteRemainingChildren();12 await browser.close();13})();
Using AI Code Generation
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.click('text=Clear completed');7 await page.deleteRemainingChildren('css=button');8 await browser.close();9})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.click('text=Docs');7 await page.click('text=API');8 await page.click('text=class: Page');
Using AI Code Generation
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 const [response] = await Promise.all([7 ]);8 await context.deleteRemainingChildren();9 await browser.close();10})();11const { chromium } = require('playwright');12(async () => {13 const browser = await chromium.launch();14 const context = await browser.newContext();15 const page = await context.newPage();16 const [response] = await Promise.all([17 ]);18 await browser.close();19})();
Using AI Code Generation
1const { _electron: electron } = require('playwright');2const { BrowserContext } = require('playwright/lib/server/browserContext');3const { Page } = require('playwright/lib/server/page');4const { Frame } = require('playwright/lib/server/frame');5const { ElementHandle } = require('playwright/lib/server/elementHandler');6const { helper } = require('playwright/lib/helper');7ElementHandle.prototype.deleteRemainingChildren = async function() {8 const { page } = this._context;9 const { frame } = this._context;10 const { context } = this._context;11 const { browser } = this._context;12 await this._client.send('DOM.setInspectedNode', { nodeId: this._nodeId });13 await this._client.send('DOM.performSearch', { query: '*' });14 const searchResults = await this._client.send('DOM.getSearchResults', {15 });16 const nodeIds = searchResults.nodeIds;17 for (const nodeId of nodeIds) {18 await this._client.send('DOM.setInspectedNode', { nodeId: nodeId });19 await this._client.send('DOM.performSearch', { query: '*' });20 const searchResults = await this._client.send('DOM.getSearchResults', {21 });22 const childNodeIds = searchResults.nodeIds;23 for (const childNodeId of childNodeIds) {24 await this._client.send('DOM.setInspectedNode', { nodeId: childNodeId });25 await this._client.send('DOM.performSearch', { query: '*' });26 const searchResults = await this._client.send('DOM.getSearchResults', {27 });28 const grandChildNodeIds = searchResults.nodeIds;29 for (const grandChildNodeId of grandChildNodeIds) {30 await this._client.send('DOM.setInspectedNode', { nodeId: grandChildNodeId });31 await this._client.send('DOM.performSearch', { query: '*' });
Using AI Code Generation
1const { deleteRemainingChildren } = require('@playwright/test/lib/utils');2const { test, expect } = require('@playwright/test');3test('test', async ({ page }) => {4 const element = await page.$('text=Get Started');5 await deleteRemainingChildren(element);6 expect(await element.innerHTML()).toBe('<a href="/docs/intro">Get Started</a>');7});8const { deleteRemainingChildren } = require('@playwright/test/lib/utils');9const { test, expect } = require('@playwright/test');10test('test', async ({ page }) => {11 const element = await page.$('text=Get Started');12 await deleteRemainingChildren(element);13 expect(await element.innerHTML()).toBe('<a href="/docs/intro">Get Started</a>');14});15const { deleteRemainingSiblings } = require('@playwright/test/lib/utils');16const { test, expect } = require('@playwright/test');17test('test', async ({ page }) => {18 const element = await page.$('text=Get Started');19 await deleteRemainingSiblings(element);20 expect(await element.innerHTML()).toBe('<a href="/docs/intro">Get Started</a>');21});
Using AI Code Generation
1const {chromium} = require('playwright');2(async() => {3 const browser = await chromium.launch({headless: false});4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.deleteRemainingChildren('body');7})();
Using AI Code Generation
1const {chromium} = require('playwright');2const path = require('path');3const fs = require('fs');4const {deleteRemainingChildren} = require('playwright/lib/server/browserContext');5const {spawn} = require('child_process');6const {createWriteStream} = require('fs');7const OUTPUT_FILE = path.join(__dirname, 'output.txt');8const OUTPUT_FILE2 = path.join(__dirname, 'output2.txt');9(async () => {10 const browser = await chromium.launch();11 const context = await browser.newContext();12 const page = await context.newPage();13 const childProcess = spawn('node', ['test2.js'], {14 });15 childProcess.stdout.pipe(createWriteStream(OUTPUT_FILE));16 childProcess.stderr.pipe(createWriteStream(OUTPUT_FILE2));17 await new Promise((x) => setTimeout(x, 5000));18 await deleteRemainingChildren(context);19 await browser.close();20})();21const {chromium} = require('playwright');22const path = require('path');23const fs = require('fs');24const {deleteRemainingChildren} = require('playwright/lib/server/browserContext');25(async () => {26 const browser = await chromium.launch();27 const context = await browser.newContext();28 const page = await context.newPage();29 await new Promise((x) => setTimeout(x, 5000));30 await deleteRemainingChildren(context);31 await browser.close();32})();33I have added the above code in a zip file. [playwright-test.zip](
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:
- 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.
- 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.
- 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.
- 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.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
