Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use createFiberFromPortal method in Playwright Internal

Best JavaScript code snippet using playwright-internal

4cb8b9d0ed5f067ca4dd9e921b4190df7c25aaReactChildFiber.js

Source:4cb8b9d0ed5f067ca4dd9e921b4190df7c25aaReactChildFiber.js

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

e63021211ff1285ea5ebde3b43f29d1ef7586aReactChildFiber.js

Source:e63021211ff1285ea5ebde3b43f29d1ef7586aReactChildFiber.js

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

ce6df42c5b933ee2ca14358e199c7078c8e06aReactChildFiber.js

Source:ce6df42c5b933ee2ca14358e199c7078c8e06aReactChildFiber.js

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

b81b7ed169eab82c9b5e9419bb967395a5c0e8ReactChildFiber.js

Source:b81b7ed169eab82c9b5e9419bb967395a5c0e8ReactChildFiber.js

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

9f467100f10b5644e8f9bbb48a9758550cd1dcReactChildFiber.js

Source:9f467100f10b5644e8f9bbb48a9758550cd1dcReactChildFiber.js

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

2777a7e15608de56c000ecbbdfa33c57bd5a43ReactChildFiber.js

Source:2777a7e15608de56c000ecbbdfa33c57bd5a43ReactChildFiber.js

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

ReactChildFiber.js

Source:ReactChildFiber.js

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

index.js

Source:index.js

1//@flow2import React from 'react'3import ReactDOM from 'react-dom'4import Reconciler from 'react-reconciler'5import emptyObject from 'fbjs/lib/emptyObject';6import * as Scheduler from 'scheduler/unstable_mock';7import CustomRenderer from './reglbase'8// import {9//   createWorkInProgress,10//   createFiberFromElement,11//   createFiberFromFragment,12//   createFiberFromText,13//   createFiberFromPortal,14// } from 'react-reconciler';15class App extends React.Component {16    constructor(){17        super()18        this.state = { count: Math.random() }19    }20    // shouldComponentUpdate(){21    //   console.log('shodul i update')22    //   return true23    // }24    render(){25        // console.log(this)26        let num = this.state.count.toFixed(2);27        console.log(num)28        return <div>29            30            <p>hello world</p>31            <button onClick={e => this.setState({ count: 1 + this.state.count })}>32                Clicked <Thing>{num}</Thing> times33            </button>34        </div>35    }36}37function Thing(props){38  React.useEffect(() => {39    debugger40    console.log('hello')41  })42  console.log('thing', props.children)43    return <div>{props.children}</div>44}45console.log(CustomRenderer)46var element = <App />47// ReactDOM.render(element, document.getElementById('root'))48// render(<App />, { stuff: [] })49// var internalRoot = document.getElementById('root')._reactRootContainer._internalRoot50// console.log(internalRoot)51// setTimeout(() => {52// const customContainer = CustomRenderer.createContainer({});53// customContainer.current = cloneFiber(internalRoot.current);54// console.log(customContainer, 'cc')55// debugger56// CustomRenderer.updateContainer(<App xyz />, customContainer, null);57let customContainer = CustomRenderer.createContainer({});58CustomRenderer.updateContainer(<App />, customContainer, null)59CustomRenderer.updateContainer(<App />, customContainer, null)60// CustomRenderer.updateContainer(<App />, customContainer, null)61// CustomRenderer.updateContainer(<App />, customContainer, null)62console.log(customContainer)63function cloneFiber(fiber, map = new Map()){64  if(!fiber) return fiber;65  if(map.has(fiber)) return map.get(fiber);66  let clone = { ...fiber }67  map.set(fiber, clone)68  if(clone.stateNode){69    clone.stateNode = {70      containerInfo: {}71    }72  }73  clone.child = cloneFiber(fiber.child, map)74  clone.sibling = cloneFiber(fiber.sibling, map)75  clone.return = cloneFiber(fiber.return, map)76  77  return clone;78}79// }, 100)80// function metaproxy(obj){81//     return new Proxy(obj, {82//         get(target, prop, receiver){83//             let value = Reflect.get(target, prop, receiver)84//             if(value && typeof value == 'object'){85//                 console.log('getting', prop, value)86//                 return metaproxy(value)87//             }88//             return value;89//             // console.log(prop, receiver, Reflect.get(...arguments))90//             // return Reflect.get(...arguments);91//         }92//     })93// }94// var p = metaproxy(internalRoot);95// // 96// CustomRenderer.updateContainer(<App two />, p, null);97// setTimeout(function(args) {98//     CustomRenderer.updateContainer(element, internalRoot, null);99// }, 1000)...

Using AI Code Generation

1const { createFiberFromPortal } = require('playwright/lib/server/frames');2const { Frame } = require('playwright/lib/server/frames');3const { Page } = require('playwright/lib/server/page');4const { FrameManager } = require('playwright/lib/server/page');5const { FrameTree } = require('playwright/lib/server/page');6const { PageProxy } = require('playwright/lib/server/browserContext');7const { BrowserContext } = require('playwright/lib/server/browserContext');8const { Browser } = require('playwright/lib/server/browser');9const { BrowserServer } = require('playwright/lib/server/browserServer');10const { BrowserType } = require('playwright/lib/server/browserType');11const { Connection } = require('playwright/lib/server/connection');12const { CRSession } = require('playwright/lib/server/chromium/crConnection');13const { CRBrowser } = require('playwright/lib/server/chromium/crBrowser');14const { CRBrowserContext } = require('playwright/lib/server/chromium/crBrowser');15const { CRPage } = require('playwright/lib/server/chromium/crPage');16const { CRPageProxy } = require('playwright/lib/server/chromium/crPage');17const { CRSessionPool } = require('playwright/lib/server/chromium/crBrowser');18const { CRSessionPoolSession } = require('playwright/lib/server/chromium/crBrowser');19const { CRSessionPoolSessionConnection } = require('playwright/lib/server/chromium/crBrowser');20const { CRSessionPoolSessionConnectionTransport } = require('playwright/lib/server/chromium/crBrowser');21const { CRSessionPoolSessionConnectionTransportWebSocket } = require('playwright/lib/server/chromium/crBrowser');22const { CRSessionPoolSessionConnectionTransportPipe } = require('playwright/lib/server/chromium/crBrowser');23const { CRSessionPoolSessionConnectionTransportStdio } = require('playwright/lib/server/chromium/crBrowser');24const { CRSessionPoolSessionConnectionTransportTCP } = require('playwright/lib/server/chromium/crBrowser');25const { CRSessionPoolSessionConnectionTransportWebSocketServer } = require('playwright/lib/server/chromium/crBrowser');26const { CRSessionPoolSessionConnectionTransportWebSocketClient } = require('playwright/lib/server/chromium/crBrowser');27const { CRSessionPoolSessionConnectionTransportWebSocketServerConnection } = require('playwright/lib/server/chromium/cr

Using AI Code Generation

1const { createFiberFromPortal } = require('playwright/lib/server/fiber');2const fiber = createFiberFromPortal(portal);3const { createFiberFromPortal } = require('playwright/lib/server/fiber');4const fiber = createFiberFromPortal(portal);5const { createFiberFromPortal } = require('playwright/lib/server/fiber');6const fiber = createFiberFromPortal(portal);7const { createFiberFromPortal } = require('playwright/lib/server/fiber');8const fiber = createFiberFromPortal(portal);9const { createFiberFromPortal } = require('playwright/lib/server/fiber');10const fiber = createFiberFromPortal(portal);11const { createFiberFromPortal } = require('playwright/lib/server/fiber');12const fiber = createFiberFromPortal(portal);13const { createFiberFromPortal } = require('playwright/lib/server/fiber');14const fiber = createFiberFromPortal(portal);15const { createFiberFromPortal } = require('playwright/lib/server/fiber');16const fiber = createFiberFromPortal(portal);17const { createFiberFromPortal } = require('playwright/lib/server/fiber');18const fiber = createFiberFromPortal(portal);19const { createFiberFromPortal } = require('playwright/lib/server/fiber');20const fiber = createFiberFromPortal(portal);21const { createFiberFromPortal } = require('playwright/lib/server/fiber');22const fiber = createFiberFromPortal(portal);23const {

Using AI Code Generation

1const { createFiberFromPortal } = require('playwright/lib/server/supplements/recorder/recorderSupplement');2const fiber = createFiberFromPortal(portal);3const { createFiberFromPortal } = require('playwright/lib/server/supplements/recorder/recorderSupplement');4const fiber = createFiberFromPortal(portal);5const { createFiberFromPortal } = require('playwright/lib/server/supplements/recorder/recorderSupplement');6const fiber = createFiberFromPortal(portal);7const { createFiberFromPortal } = require('playwright/lib/server/supplements/recorder/recorderSupplement');8const fiber = createFiberFromPortal(portal);9const { createFiberFromPortal } = require('playwright/lib/server/supplements/recorder/recorderSupplement');10const fiber = createFiberFromPortal(portal);11const { createFiberFromPortal } = require('playwright/lib/server/supplements/recorder/recorderSupplement');12const fiber = createFiberFromPortal(portal);13const { createFiberFromPortal } = require('playwright/lib/server/supplements/recorder/recorderSupplement');14const fiber = createFiberFromPortal(portal);15const { createFiberFromPortal } = require('playwright/lib/server/supplements/recorder/recorderSupplement');16const fiber = createFiberFromPortal(portal);17const { createFiberFromPortal } = require('playwright/lib/server/supplements/recorder/recorderSupplement');18const fiber = createFiberFromPortal(portal);

Using AI Code Generation

1const { createFiberFromPortal } = require('playwright/lib/server/fiber');2const fiber = createFiberFromPortal(portal);3fiber.run();4const { createFiberFromPortal } = require('playwright/lib/server/fiber');5const fiber = createFiberFromPortal(portal);6fiber.run();7const { createFiberFromPortal } = require('playwright/lib/server/fiber');8const fiber = createFiberFromPortal(portal);9fiber.run();10const { createFiberFromPortal } = require('playwright/lib/server/fiber');11const fiber = createFiberFromPortal(portal);12fiber.run();13const { createFiberFromPortal } = require('playwright/lib/server/fiber');14const fiber = createFiberFromPortal(portal);15fiber.run();16const { createFiberFromPortal } = require('playwright/lib/server/fiber');17const fiber = createFiberFromPortal(portal);18fiber.run();19const { createFiberFromPortal } = require('playwright/lib/server/fiber');20const fiber = createFiberFromPortal(portal);21fiber.run();22const { createFiberFromPortal } = require('playwright/lib/server/fiber');23const fiber = createFiberFromPortal(portal);24fiber.run();25const { createFiberFromPortal } = require('playwright/lib/server/fiber');26const fiber = createFiberFromPortal(portal);27fiber.run();28const { createFiberFromPortal } = require('playwright/lib/server/fiber

Using AI Code Generation

1const { createFiberFromPortal } = require('playwright/lib/server/fiber');2const { connect } = require('playwright/lib/server/transport');3const { BrowserServer } = require('playwright/lib/server/browserServer');4const { BrowserContext } = require('playwright/lib/server/browserContext');5const { Page } = require('playwright/lib/server/page');6const { Worker } = require('playwright/lib/server/worker');7const { Frame } = require('playwright/lib/server/frame');8const { ElementHandle } = require('playwright/lib/server/elementHandler');9const { JSHandle } = require('playwright/lib/server/jsHandle');10const transport = connect({11  logger: {12    isEnabled: (name, severity) => true,13    log: (name, severity, message, args) => console.log(message)14  }15});16const browserServer = new BrowserServer(transport, 'browser1', false);17const browserContext = new BrowserContext(transport, 'context1', browserServer, false, {});18const page = new Page(transport, 'page1', browserContext, false, {});19const frame = new Frame(transport, 'frame1', page, {}, false, {});20const elementHandle = new ElementHandle(transport, 'element1', frame, 'element1', false, {});21const jsHandle = new JSHandle(transport, 'js1', elementHandle, 'js1', false, {});22const worker = new Worker(transport, 'worker1', browserContext, false, {});23(async () => {24  const fiber = createFiberFromPortal(transport, 'fiber1', jsHandle, false, {});25  await fiber.evaluateExpression('console.log("Hello World")');26  transport.close();27})();28    at CDPSession._onMessage (/home/akshay/Projects/playwright-test/node_modules/playwright/lib/server/cjs/transport.js:179:34)29    at CDPSession.emit (events.js:315:20)30    at CDPSession.EventEmitter.emit (domain.js:483:12)31    at CDPSession._dispatch (/home/akshay/Projects/playwright-test/node_modules/playwright/lib/server/cjs/transport.js

Using AI Code Generation

1const { createFiberFromPortal } = require('playwright/lib/server/fiber');2const { createTestServer } = require('playwright/lib/server/testServer');3const { createTestState } = require('playwright/lib/server/testState');4const testServer = createTestServer();5const testState = createTestState();6const fiber = createFiberFromPortal(testState, testServer);7fiber.run(async () => {8  const browser = await testState.newBrowser();9  const context = await browser.newContext();10  const page = await context.newPage();11});12const { createFiberFromPortal } = require('playwright/lib/server/fiber');13const { createTestServer } = require('playwright/lib/server/testServer');14const { createTestState } = require('playwright/lib/server/testState');15const testServer = createTestServer();16const testState = createTestState();17const fiber = createFiberFromPortal(testState, testServer);18fiber.run(async () => {19  const browser = await testState.newBrowser();20  const context = await browser.newContext();21  const page = await context.newPage();22});23const { createFiberFromPortal } = require('playwright/lib/server/fiber');24const { createTestServer } = require('playwright/lib/server/testServer');25const { createTestState } = require('playwright/lib/server/testState');26const testServer = createTestServer();27const testState = createTestState();28const fiber = createFiberFromPortal(testState, testServer);29fiber.run(async () => {30  const browser = await testState.newBrowser();31  const context = await browser.newContext();32  const page = await context.newPage();33});34const page = fiber.page()35    at Object.<anonymous> (/Users/abhishek/Downloads/test.js:16:18)36    at Module._compile (internal/modules/cjs/loader.js:1063:30)37    at Object.Module._extensions..js (internal/modules

Using AI Code Generation

1const { createFiberFromPortal } = require('playwright/lib/server/fiber');2const fiber = createFiberFromPortal(portal);3fiber.run(async () => {4    const browser = await chromium.launch();5    const page = await browser.newPage();6    await page.screenshot({ path: 'example.png' });7    await browser.close();8});

Playwright tutorial

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

Chapters:

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