How to use deleteRemainingChildren method in Playwright Internal

Best JavaScript code snippet using playwright-internal

ce6df42c5b933ee2ca14358e199c7078c8e06aReactChildFiber.js

Source:ce6df42c5b933ee2ca14358e199c7078c8e06aReactChildFiber.js Github

copy

Full Screen

...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;...

Full Screen

Full Screen

2777a7e15608de56c000ecbbdfa33c57bd5a43ReactChildFiber.js

Source:2777a7e15608de56c000ecbbdfa33c57bd5a43ReactChildFiber.js Github

copy

Full Screen

...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;...

Full Screen

Full Screen

e63021211ff1285ea5ebde3b43f29d1ef7586aReactChildFiber.js

Source:e63021211ff1285ea5ebde3b43f29d1ef7586aReactChildFiber.js Github

copy

Full Screen

...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;...

Full Screen

Full Screen

4cb8b9d0ed5f067ca4dd9e921b4190df7c25aaReactChildFiber.js

Source:4cb8b9d0ed5f067ca4dd9e921b4190df7c25aaReactChildFiber.js Github

copy

Full Screen

...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;...

Full Screen

Full Screen

b81b7ed169eab82c9b5e9419bb967395a5c0e8ReactChildFiber.js

Source:b81b7ed169eab82c9b5e9419bb967395a5c0e8ReactChildFiber.js Github

copy

Full Screen

...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;...

Full Screen

Full Screen

ReactChildFiber.js

Source:ReactChildFiber.js Github

copy

Full Screen

...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....

Full Screen

Full Screen

ReactChildFiber.new.js

Source:ReactChildFiber.new.js Github

copy

Full Screen

...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) {...

Full Screen

Full Screen

react-diff.js

Source:react-diff.js Github

copy

Full Screen

...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;...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.click('text=Sign in');7 await page.fill('input[name="identifier"]', '

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.click('text=Clear completed');7 await page.deleteRemainingChildren('css=button');8 await browser.close();9})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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: '*' });

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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](

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

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

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

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

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

Was this article helpful?

Helpful

NotHelpful