How to use createFiberFromPortal method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

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

index.js

Source: index.js Github

copy
1//@flow
2
3import React from 'react'
4import ReactDOM from 'react-dom'
5import Reconciler from 'react-reconciler'
6import emptyObject from 'fbjs/lib/emptyObject';
7import * as Scheduler from 'scheduler/unstable_mock';
8
9import CustomRenderer from './reglbase'
10
11
12
13
14// import {
15//   createWorkInProgress,
16//   createFiberFromElement,
17//   createFiberFromFragment,
18//   createFiberFromText,
19//   createFiberFromPortal,
20// } from 'react-reconciler';
21
22
23class App extends React.Component {
24    constructor(){
25        super()
26        this.state = { count: Math.random() }
27    }
28    // shouldComponentUpdate(){
29    //   console.log('shodul i update')
30    //   return true
31    // }
32    render(){
33        // console.log(this)
34        let num = this.state.count.toFixed(2);
35        console.log(num)
36        return <div>
37            
38            <p>hello world</p>
39
40            <button onClick={e => this.setState({ count: 1 + this.state.count })}>
41                Clicked <Thing>{num}</Thing> times
42            </button>
43        </div>
44    }
45}
46
47
48function Thing(props){
49  React.useEffect(() => {
50    debugger
51    console.log('hello')
52  })
53  console.log('thing', props.children)
54    return <div>{props.children}</div>
55}
56
57
58
59
60console.log(CustomRenderer)
61
62var element = <App />
63// ReactDOM.render(element, document.getElementById('root'))
64
65// render(<App />, { stuff: [] })
66
67// var internalRoot = document.getElementById('root')._reactRootContainer._internalRoot
68// console.log(internalRoot)
69
70// setTimeout(() => {
71
72
73// const customContainer = CustomRenderer.createContainer({});
74// customContainer.current = cloneFiber(internalRoot.current);
75// console.log(customContainer, 'cc')
76// debugger
77// CustomRenderer.updateContainer(<App xyz />, customContainer, null);
78
79
80let customContainer = CustomRenderer.createContainer({});
81
82
83CustomRenderer.updateContainer(<App />, customContainer, null)
84CustomRenderer.updateContainer(<App />, customContainer, null)
85// CustomRenderer.updateContainer(<App />, customContainer, null)
86// CustomRenderer.updateContainer(<App />, customContainer, null)
87
88console.log(customContainer)
89
90function cloneFiber(fiber, map = new Map()){
91  if(!fiber) return fiber;
92
93  if(map.has(fiber)) return map.get(fiber);
94
95  let clone = { ...fiber }
96  map.set(fiber, clone)
97
98  if(clone.stateNode){
99    clone.stateNode = {
100      containerInfo: {}
101    }
102  }
103
104  clone.child = cloneFiber(fiber.child, map)
105  clone.sibling = cloneFiber(fiber.sibling, map)
106  clone.return = cloneFiber(fiber.return, map)
107  
108  return clone;
109}
110
111// }, 100)
112
113
114
115
116// function metaproxy(obj){
117//     return new Proxy(obj, {
118//         get(target, prop, receiver){
119//             let value = Reflect.get(target, prop, receiver)
120
121//             if(value && typeof value == 'object'){
122//                 console.log('getting', prop, value)
123//                 return metaproxy(value)
124//             }
125//             return value;
126//             // console.log(prop, receiver, Reflect.get(...arguments))
127//             // return Reflect.get(...arguments);
128//         }
129//     })
130// }
131
132
133// var p = metaproxy(internalRoot);
134
135// // 
136// CustomRenderer.updateContainer(<App two />, p, null);
137
138
139// setTimeout(function(args) {
140//     CustomRenderer.updateContainer(element, internalRoot, null);
141// }, 1000)
142// // 
143
144
Full Screen

4cb8b9d0ed5f067ca4dd9e921b4190df7c25aaReactChildFiber.js

Source: 4cb8b9d0ed5f067ca4dd9e921b4190df7c25aaReactChildFiber.js Github

copy
1
2
3'use strict';
4
5var REACT_ELEMENT_TYPE = require('ReactElementSymbol');
6
7var _require = require('ReactCoroutine'),
8    REACT_COROUTINE_TYPE = _require.REACT_COROUTINE_TYPE,
9    REACT_YIELD_TYPE = _require.REACT_YIELD_TYPE;
10
11var _require2 = require('ReactPortal'),
12    REACT_PORTAL_TYPE = _require2.REACT_PORTAL_TYPE;
13
14var ReactFiber = require('ReactFiber');
15var ReactTypeOfSideEffect = require('ReactTypeOfSideEffect');
16var ReactTypeOfWork = require('ReactTypeOfWork');
17
18var emptyObject = require('fbjs/lib/emptyObject');
19var getIteratorFn = require('getIteratorFn');
20var invariant = require('fbjs/lib/invariant');
21var ReactFeatureFlags = require('ReactFeatureFlags');
22var ReactCurrentOwner = require('react/lib/ReactCurrentOwner');
23
24if (__DEV__) {
25  var _require3 = require('ReactDebugCurrentFiber'),
26      getCurrentFiberStackAddendum = _require3.getCurrentFiberStackAddendum;
27
28  var getComponentName = require('getComponentName');
29  var warning = require('fbjs/lib/warning');
30  var didWarnAboutMaps = false;
31}
32
33var cloneFiber = ReactFiber.cloneFiber,
34    createFiberFromElement = ReactFiber.createFiberFromElement,
35    createFiberFromFragment = ReactFiber.createFiberFromFragment,
36    createFiberFromText = ReactFiber.createFiberFromText,
37    createFiberFromCoroutine = ReactFiber.createFiberFromCoroutine,
38    createFiberFromYield = ReactFiber.createFiberFromYield,
39    createFiberFromPortal = ReactFiber.createFiberFromPortal;
40
41
42var isArray = Array.isArray;
43
44var FunctionalComponent = ReactTypeOfWork.FunctionalComponent,
45    ClassComponent = ReactTypeOfWork.ClassComponent,
46    HostText = ReactTypeOfWork.HostText,
47    HostPortal = ReactTypeOfWork.HostPortal,
48    CoroutineComponent = ReactTypeOfWork.CoroutineComponent,
49    YieldComponent = ReactTypeOfWork.YieldComponent,
50    Fragment = ReactTypeOfWork.Fragment;
51var NoEffect = ReactTypeOfSideEffect.NoEffect,
52    Placement = ReactTypeOfSideEffect.Placement,
53    Deletion = ReactTypeOfSideEffect.Deletion;
54
55
56function coerceRef(current, element) {
57  var mixedRef = element.ref;
58  if (mixedRef !== null && typeof mixedRef !== 'function') {
59    if (element._owner) {
60      var owner = element._owner;
61      var inst = void 0;
62      if (owner) {
63        if (typeof owner.tag === 'number') {
64          var ownerFiber = owner;
65          invariant(ownerFiber.tag === ClassComponent, 'Stateless function components cannot have refs.');
66          inst = ownerFiber.stateNode;
67        } else {
68          inst = owner.getPublicInstance();
69        }
70      }
71      invariant(inst, 'Missing owner for string ref %s. This error is likely caused by a ' + 'bug in React. Please file an issue.', mixedRef);
72      var stringRef = '' + mixedRef;
73
74      if (current !== null && current.ref !== null && current.ref._stringRef === stringRef) {
75        return current.ref;
76      }
77      var ref = function ref(value) {
78        var refs = inst.refs === emptyObject ? inst.refs = {} : inst.refs;
79        if (value === null) {
80          delete refs[stringRef];
81        } else {
82          refs[stringRef] = value;
83        }
84      };
85      ref._stringRef = stringRef;
86      return ref;
87    }
88  }
89  return mixedRef;
90}
91
92function throwOnInvalidObjectType(returnFiber, newChild) {
93  if (returnFiber.type !== 'textarea') {
94    var addendum = '';
95    if (__DEV__) {
96      addendum = ' If you meant to render a collection of children, use an array ' + 'instead.';
97      var owner = ReactCurrentOwner.owner || returnFiber._debugOwner;
98      if (owner && typeof owner.tag === 'number') {
99        var name = getComponentName(owner);
100        if (name) {
101          addendum += '\n\nCheck the render method of `' + name + '`.';
102        }
103      }
104    }
105    invariant(false, 'Objects are not valid as a React child (found: %s).%s', Object.prototype.toString.call(newChild) === '[object Object]' ? 'object with keys {' + Object.keys(newChild).join(', ') + '}' : newChild, addendum);
106  }
107}
108
109function ChildReconciler(shouldClone, shouldTrackSideEffects) {
110  function deleteChild(returnFiber, childToDelete) {
111    if (!shouldTrackSideEffects) {
112      return;
113    }
114    if (!shouldClone) {
115      if (childToDelete.alternate === null) {
116        return;
117      }
118      childToDelete = childToDelete.alternate;
119    }
120
121    var last = returnFiber.progressedLastDeletion;
122    if (last !== null) {
123      last.nextEffect = childToDelete;
124      returnFiber.progressedLastDeletion = childToDelete;
125    } else {
126      returnFiber.progressedFirstDeletion = returnFiber.progressedLastDeletion = childToDelete;
127    }
128    childToDelete.nextEffect = null;
129    childToDelete.effectTag = Deletion;
130  }
131
132  function deleteRemainingChildren(returnFiber, currentFirstChild) {
133    if (!shouldTrackSideEffects) {
134      return null;
135    }
136
137    var childToDelete = currentFirstChild;
138    while (childToDelete !== null) {
139      deleteChild(returnFiber, childToDelete);
140      childToDelete = childToDelete.sibling;
141    }
142    return null;
143  }
144
145  function mapRemainingChildren(returnFiber, currentFirstChild) {
146    var existingChildren = new Map();
147
148    var existingChild = currentFirstChild;
149    while (existingChild !== null) {
150      if (existingChild.key !== null) {
151        existingChildren.set(existingChild.key, existingChild);
152      } else {
153        existingChildren.set(existingChild.index, existingChild);
154      }
155      existingChild = existingChild.sibling;
156    }
157    return existingChildren;
158  }
159
160  function useFiber(fiber, priority) {
161    if (shouldClone) {
162      var clone = cloneFiber(fiber, priority);
163      clone.index = 0;
164      clone.sibling = null;
165      return clone;
166    } else {
167      fiber.pendingWorkPriority = priority;
168      fiber.effectTag = NoEffect;
169      fiber.index = 0;
170      fiber.sibling = null;
171      return fiber;
172    }
173  }
174
175  function placeChild(newFiber, lastPlacedIndex, newIndex) {
176    newFiber.index = newIndex;
177    if (!shouldTrackSideEffects) {
178      return lastPlacedIndex;
179    }
180    var current = newFiber.alternate;
181    if (current !== null) {
182      var oldIndex = current.index;
183      if (oldIndex < lastPlacedIndex) {
184        newFiber.effectTag = Placement;
185        return lastPlacedIndex;
186      } else {
187        return oldIndex;
188      }
189    } else {
190      newFiber.effectTag = Placement;
191      return lastPlacedIndex;
192    }
193  }
194
195  function placeSingleChild(newFiber) {
196    if (shouldTrackSideEffects && newFiber.alternate === null) {
197      newFiber.effectTag = Placement;
198    }
199    return newFiber;
200  }
201
202  function updateTextNode(returnFiber, current, textContent, priority) {
203    if (current === null || current.tag !== HostText) {
204      var created = createFiberFromText(textContent, priority);
205      created.return = returnFiber;
206      return created;
207    } else {
208      var existing = useFiber(current, priority);
209      existing.pendingProps = textContent;
210      existing.return = returnFiber;
211      return existing;
212    }
213  }
214
215  function updateElement(returnFiber, current, element, priority) {
216    if (current === null || current.type !== element.type) {
217      var created = createFiberFromElement(element, priority);
218      created.ref = coerceRef(current, element);
219      created.return = returnFiber;
220      return created;
221    } else {
222      var existing = useFiber(current, priority);
223      existing.ref = coerceRef(current, element);
224      existing.pendingProps = element.props;
225      existing.return = returnFiber;
226      if (__DEV__) {
227        existing._debugSource = element._source;
228        existing._debugOwner = element._owner;
229      }
230      return existing;
231    }
232  }
233
234  function updateCoroutine(returnFiber, current, coroutine, priority) {
235    if (current === null || current.tag !== CoroutineComponent) {
236      var created = createFiberFromCoroutine(coroutine, priority);
237      created.return = returnFiber;
238      return created;
239    } else {
240      var existing = useFiber(current, priority);
241      existing.pendingProps = coroutine;
242      existing.return = returnFiber;
243      return existing;
244    }
245  }
246
247  function updateYield(returnFiber, current, yieldNode, priority) {
248    if (current === null || current.tag !== YieldComponent) {
249      var created = createFiberFromYield(yieldNode, priority);
250      created.type = yieldNode.value;
251      created.return = returnFiber;
252      return created;
253    } else {
254      var existing = useFiber(current, priority);
255      existing.type = yieldNode.value;
256      existing.return = returnFiber;
257      return existing;
258    }
259  }
260
261  function updatePortal(returnFiber, current, portal, priority) {
262    if (current === null || current.tag !== HostPortal || current.stateNode.containerInfo !== portal.containerInfo || current.stateNode.implementation !== portal.implementation) {
263      var created = createFiberFromPortal(portal, priority);
264      created.return = returnFiber;
265      return created;
266    } else {
267      var existing = useFiber(current, priority);
268      existing.pendingProps = portal.children || [];
269      existing.return = returnFiber;
270      return existing;
271    }
272  }
273
274  function updateFragment(returnFiber, current, fragment, priority) {
275    if (current === null || current.tag !== Fragment) {
276      var created = createFiberFromFragment(fragment, priority);
277      created.return = returnFiber;
278      return created;
279    } else {
280      var existing = useFiber(current, priority);
281      existing.pendingProps = fragment;
282      existing.return = returnFiber;
283      return existing;
284    }
285  }
286
287  function createChild(returnFiber, newChild, priority) {
288    if (typeof newChild === 'string' || typeof newChild === 'number') {
289      var created = createFiberFromText('' + newChild, priority);
290      created.return = returnFiber;
291      return created;
292    }
293
294    if (typeof newChild === 'object' && newChild !== null) {
295      switch (newChild.$$typeof) {
296        case REACT_ELEMENT_TYPE:
297          {
298            var _created = createFiberFromElement(newChild, priority);
299            _created.ref = coerceRef(null, newChild);
300            _created.return = returnFiber;
301            return _created;
302          }
303
304        case REACT_COROUTINE_TYPE:
305          {
306            var _created2 = createFiberFromCoroutine(newChild, priority);
307            _created2.return = returnFiber;
308            return _created2;
309          }
310
311        case REACT_YIELD_TYPE:
312          {
313            var _created3 = createFiberFromYield(newChild, priority);
314            _created3.type = newChild.value;
315            _created3.return = returnFiber;
316            return _created3;
317          }
318
319        case REACT_PORTAL_TYPE:
320          {
321            var _created4 = createFiberFromPortal(newChild, priority);
322            _created4.return = returnFiber;
323            return _created4;
324          }
325      }
326
327      if (isArray(newChild) || getIteratorFn(newChild)) {
328        var _created5 = createFiberFromFragment(newChild, priority);
329        _created5.return = returnFiber;
330        return _created5;
331      }
332
333      throwOnInvalidObjectType(returnFiber, newChild);
334    }
335
336    return null;
337  }
338
339  function updateSlot(returnFiber, oldFiber, newChild, priority) {
340
341    var key = oldFiber !== null ? oldFiber.key : null;
342
343    if (typeof newChild === 'string' || typeof newChild === 'number') {
344      if (key !== null) {
345        return null;
346      }
347      return updateTextNode(returnFiber, oldFiber, '' + newChild, priority);
348    }
349
350    if (typeof newChild === 'object' && newChild !== null) {
351      switch (newChild.$$typeof) {
352        case REACT_ELEMENT_TYPE:
353          {
354            if (newChild.key === key) {
355              return updateElement(returnFiber, oldFiber, newChild, priority);
356            } else {
357              return null;
358            }
359          }
360
361        case REACT_COROUTINE_TYPE:
362          {
363            if (newChild.key === key) {
364              return updateCoroutine(returnFiber, oldFiber, newChild, priority);
365            } else {
366              return null;
367            }
368          }
369
370        case REACT_YIELD_TYPE:
371          {
372            if (key === null) {
373              return updateYield(returnFiber, oldFiber, newChild, priority);
374            } else {
375              return null;
376            }
377          }
378
379        case REACT_PORTAL_TYPE:
380          {
381            if (newChild.key === key) {
382              return updatePortal(returnFiber, oldFiber, newChild, priority);
383            } else {
384              return null;
385            }
386          }
387      }
388
389      if (isArray(newChild) || getIteratorFn(newChild)) {
390        if (key !== null) {
391          return null;
392        }
393        return updateFragment(returnFiber, oldFiber, newChild, priority);
394      }
395
396      throwOnInvalidObjectType(returnFiber, newChild);
397    }
398
399    return null;
400  }
401
402  function updateFromMap(existingChildren, returnFiber, newIdx, newChild, priority) {
403    if (typeof newChild === 'string' || typeof newChild === 'number') {
404      var matchedFiber = existingChildren.get(newIdx) || null;
405      return updateTextNode(returnFiber, matchedFiber, '' + newChild, priority);
406    }
407
408    if (typeof newChild === 'object' && newChild !== null) {
409      switch (newChild.$$typeof) {
410        case REACT_ELEMENT_TYPE:
411          {
412            var _matchedFiber = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;
413            return updateElement(returnFiber, _matchedFiber, newChild, priority);
414          }
415
416        case REACT_COROUTINE_TYPE:
417          {
418            var _matchedFiber2 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;
419            return updateCoroutine(returnFiber, _matchedFiber2, newChild, priority);
420          }
421
422        case REACT_YIELD_TYPE:
423          {
424            var _matchedFiber3 = existingChildren.get(newIdx) || null;
425            return updateYield(returnFiber, _matchedFiber3, newChild, priority);
426          }
427
428        case REACT_PORTAL_TYPE:
429          {
430            var _matchedFiber4 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;
431            return updatePortal(returnFiber, _matchedFiber4, newChild, priority);
432          }
433      }
434
435      if (isArray(newChild) || getIteratorFn(newChild)) {
436        var _matchedFiber5 = existingChildren.get(newIdx) || null;
437        return updateFragment(returnFiber, _matchedFiber5, newChild, priority);
438      }
439
440      throwOnInvalidObjectType(returnFiber, newChild);
441    }
442
443    return null;
444  }
445
446  function warnOnDuplicateKey(child, knownKeys) {
447    if (__DEV__) {
448      if (typeof child !== 'object' || child === null) {
449        return knownKeys;
450      }
451      switch (child.$$typeof) {
452        case REACT_ELEMENT_TYPE:
453        case REACT_COROUTINE_TYPE:
454        case REACT_PORTAL_TYPE:
455          var key = child.key;
456          if (typeof key !== 'string') {
457            break;
458          }
459          if (knownKeys === null) {
460            knownKeys = new Set();
461            knownKeys.add(key);
462            break;
463          }
464          if (!knownKeys.has(key)) {
465            knownKeys.add(key);
466            break;
467          }
468          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());
469          break;
470        default:
471          break;
472      }
473    }
474    return knownKeys;
475  }
476
477  function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, priority) {
478
479    if (__DEV__) {
480      var knownKeys = null;
481      for (var i = 0; i < newChildren.length; i++) {
482        var child = newChildren[i];
483        knownKeys = warnOnDuplicateKey(child, knownKeys);
484      }
485    }
486
487    var resultingFirstChild = null;
488    var previousNewFiber = null;
489
490    var oldFiber = currentFirstChild;
491    var lastPlacedIndex = 0;
492    var newIdx = 0;
493    var nextOldFiber = null;
494    for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
495      if (oldFiber.index > newIdx) {
496        nextOldFiber = oldFiber;
497        oldFiber = null;
498      } else {
499        nextOldFiber = oldFiber.sibling;
500      }
501      var newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], priority);
502      if (newFiber === null) {
503        if (oldFiber === null) {
504          oldFiber = nextOldFiber;
505        }
506        break;
507      }
508      if (shouldTrackSideEffects) {
509        if (oldFiber && newFiber.alternate === null) {
510          deleteChild(returnFiber, oldFiber);
511        }
512      }
513      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
514      if (previousNewFiber === null) {
515        resultingFirstChild = newFiber;
516      } else {
517        previousNewFiber.sibling = newFiber;
518      }
519      previousNewFiber = newFiber;
520      oldFiber = nextOldFiber;
521    }
522
523    if (newIdx === newChildren.length) {
524      deleteRemainingChildren(returnFiber, oldFiber);
525      return resultingFirstChild;
526    }
527
528    if (oldFiber === null) {
529      for (; newIdx < newChildren.length; newIdx++) {
530        var _newFiber = createChild(returnFiber, newChildren[newIdx], priority);
531        if (!_newFiber) {
532          continue;
533        }
534        lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx);
535        if (previousNewFiber === null) {
536          resultingFirstChild = _newFiber;
537        } else {
538          previousNewFiber.sibling = _newFiber;
539        }
540        previousNewFiber = _newFiber;
541      }
542      return resultingFirstChild;
543    }
544
545    var existingChildren = mapRemainingChildren(returnFiber, oldFiber);
546
547    for (; newIdx < newChildren.length; newIdx++) {
548      var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], priority);
549      if (_newFiber2) {
550        if (shouldTrackSideEffects) {
551          if (_newFiber2.alternate !== null) {
552            existingChildren.delete(_newFiber2.key === null ? newIdx : _newFiber2.key);
553          }
554        }
555        lastPlacedIndex = placeChild(_newFiber2, lastPlacedIndex, newIdx);
556        if (previousNewFiber === null) {
557          resultingFirstChild = _newFiber2;
558        } else {
559          previousNewFiber.sibling = _newFiber2;
560        }
561        previousNewFiber = _newFiber2;
562      }
563    }
564
565    if (shouldTrackSideEffects) {
566      existingChildren.forEach(function (child) {
567        return deleteChild(returnFiber, child);
568      });
569    }
570
571    return resultingFirstChild;
572  }
573
574  function reconcileChildrenIterator(returnFiber, currentFirstChild, newChildrenIterable, priority) {
575
576    var iteratorFn = getIteratorFn(newChildrenIterable);
577    invariant(typeof iteratorFn === 'function', 'An object is not an iterable. This error is likely caused by a bug in ' + 'React. Please file an issue.');
578
579    if (__DEV__) {
580      if (typeof newChildrenIterable.entries === 'function') {
581        var possibleMap = newChildrenIterable;
582        if (possibleMap.entries === iteratorFn) {
583          var mapsAsChildrenAddendum = '';
584          var owner = ReactCurrentOwner.owner || returnFiber._debugOwner;
585          if (owner && typeof owner.tag === 'number') {
586            var mapsAsChildrenOwnerName = getComponentName(owner);
587            if (mapsAsChildrenOwnerName) {
588              mapsAsChildrenAddendum = '\n\nCheck the render method of `' + mapsAsChildrenOwnerName + '`.';
589            }
590          }
591          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);
592          didWarnAboutMaps = true;
593        }
594      }
595
596      var _newChildren = iteratorFn.call(newChildrenIterable);
597      if (_newChildren) {
598        var knownKeys = null;
599        var _step = _newChildren.next();
600        for (; !_step.done; _step = _newChildren.next()) {
601          var child = _step.value;
602          knownKeys = warnOnDuplicateKey(child, knownKeys);
603        }
604      }
605    }
606
607    var newChildren = iteratorFn.call(newChildrenIterable);
608    invariant(newChildren != null, 'An iterable object provided no iterator.');
609
610    var resultingFirstChild = null;
611    var previousNewFiber = null;
612
613    var oldFiber = currentFirstChild;
614    var lastPlacedIndex = 0;
615    var newIdx = 0;
616    var nextOldFiber = null;
617
618    var step = newChildren.next();
619    for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next()) {
620      if (oldFiber.index > newIdx) {
621        nextOldFiber = oldFiber;
622        oldFiber = null;
623      } else {
624        nextOldFiber = oldFiber.sibling;
625      }
626      var newFiber = updateSlot(returnFiber, oldFiber, step.value, priority);
627      if (newFiber === null) {
628        if (!oldFiber) {
629          oldFiber = nextOldFiber;
630        }
631        break;
632      }
633      if (shouldTrackSideEffects) {
634        if (oldFiber && newFiber.alternate === null) {
635          deleteChild(returnFiber, oldFiber);
636        }
637      }
638      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
639      if (previousNewFiber === null) {
640        resultingFirstChild = newFiber;
641      } else {
642        previousNewFiber.sibling = newFiber;
643      }
644      previousNewFiber = newFiber;
645      oldFiber = nextOldFiber;
646    }
647
648    if (step.done) {
649      deleteRemainingChildren(returnFiber, oldFiber);
650      return resultingFirstChild;
651    }
652
653    if (oldFiber === null) {
654      for (; !step.done; newIdx++, step = newChildren.next()) {
655        var _newFiber3 = createChild(returnFiber, step.value, priority);
656        if (_newFiber3 === null) {
657          continue;
658        }
659        lastPlacedIndex = placeChild(_newFiber3, lastPlacedIndex, newIdx);
660        if (previousNewFiber === null) {
661          resultingFirstChild = _newFiber3;
662        } else {
663          previousNewFiber.sibling = _newFiber3;
664        }
665        previousNewFiber = _newFiber3;
666      }
667      return resultingFirstChild;
668    }
669
670    var existingChildren = mapRemainingChildren(returnFiber, oldFiber);
671
672    for (; !step.done; newIdx++, step = newChildren.next()) {
673      var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, priority);
674      if (_newFiber4 !== null) {
675        if (shouldTrackSideEffects) {
676          if (_newFiber4.alternate !== null) {
677            existingChildren.delete(_newFiber4.key === null ? newIdx : _newFiber4.key);
678          }
679        }
680        lastPlacedIndex = placeChild(_newFiber4, lastPlacedIndex, newIdx);
681        if (previousNewFiber === null) {
682          resultingFirstChild = _newFiber4;
683        } else {
684          previousNewFiber.sibling = _newFiber4;
685        }
686        previousNewFiber = _newFiber4;
687      }
688    }
689
690    if (shouldTrackSideEffects) {
691      existingChildren.forEach(function (child) {
692        return deleteChild(returnFiber, child);
693      });
694    }
695
696    return resultingFirstChild;
697  }
698
699  function reconcileSingleTextNode(returnFiber, currentFirstChild, textContent, priority) {
700    if (currentFirstChild !== null && currentFirstChild.tag === HostText) {
701      deleteRemainingChildren(returnFiber, currentFirstChild.sibling);
702      var existing = useFiber(currentFirstChild, priority);
703      existing.pendingProps = textContent;
704      existing.return = returnFiber;
705      return existing;
706    }
707
708    deleteRemainingChildren(returnFiber, currentFirstChild);
709    var created = createFiberFromText(textContent, priority);
710    created.return = returnFiber;
711    return created;
712  }
713
714  function reconcileSingleElement(returnFiber, currentFirstChild, element, priority) {
715    var key = element.key;
716    var child = currentFirstChild;
717    while (child !== null) {
718      if (child.key === key) {
719        if (child.type === element.type) {
720          deleteRemainingChildren(returnFiber, child.sibling);
721          var existing = useFiber(child, priority);
722          existing.ref = coerceRef(child, element);
723          existing.pendingProps = element.props;
724          existing.return = returnFiber;
725          if (__DEV__) {
726            existing._debugSource = element._source;
727            existing._debugOwner = element._owner;
728          }
729          return existing;
730        } else {
731          deleteRemainingChildren(returnFiber, child);
732          break;
733        }
734      } else {
735        deleteChild(returnFiber, child);
736      }
737      child = child.sibling;
738    }
739
740    var created = createFiberFromElement(element, priority);
741    created.ref = coerceRef(currentFirstChild, element);
742    created.return = returnFiber;
743    return created;
744  }
745
746  function reconcileSingleCoroutine(returnFiber, currentFirstChild, coroutine, priority) {
747    var key = coroutine.key;
748    var child = currentFirstChild;
749    while (child !== null) {
750      if (child.key === key) {
751        if (child.tag === CoroutineComponent) {
752          deleteRemainingChildren(returnFiber, child.sibling);
753          var existing = useFiber(child, priority);
754          existing.pendingProps = coroutine;
755          existing.return = returnFiber;
756          return existing;
757        } else {
758          deleteRemainingChildren(returnFiber, child);
759          break;
760        }
761      } else {
762        deleteChild(returnFiber, child);
763      }
764      child = child.sibling;
765    }
766
767    var created = createFiberFromCoroutine(coroutine, priority);
768    created.return = returnFiber;
769    return created;
770  }
771
772  function reconcileSingleYield(returnFiber, currentFirstChild, yieldNode, priority) {
773    var child = currentFirstChild;
774    if (child !== null) {
775      if (child.tag === YieldComponent) {
776        deleteRemainingChildren(returnFiber, child.sibling);
777        var existing = useFiber(child, priority);
778        existing.type = yieldNode.value;
779        existing.return = returnFiber;
780        return existing;
781      } else {
782        deleteRemainingChildren(returnFiber, child);
783      }
784    }
785
786    var created = createFiberFromYield(yieldNode, priority);
787    created.type = yieldNode.value;
788    created.return = returnFiber;
789    return created;
790  }
791
792  function reconcileSinglePortal(returnFiber, currentFirstChild, portal, priority) {
793    var key = portal.key;
794    var child = currentFirstChild;
795    while (child !== null) {
796      if (child.key === key) {
797        if (child.tag === HostPortal && child.stateNode.containerInfo === portal.containerInfo && child.stateNode.implementation === portal.implementation) {
798          deleteRemainingChildren(returnFiber, child.sibling);
799          var existing = useFiber(child, priority);
800          existing.pendingProps = portal.children || [];
801          existing.return = returnFiber;
802          return existing;
803        } else {
804          deleteRemainingChildren(returnFiber, child);
805          break;
806        }
807      } else {
808        deleteChild(returnFiber, child);
809      }
810      child = child.sibling;
811    }
812
813    var created = createFiberFromPortal(portal, priority);
814    created.return = returnFiber;
815    return created;
816  }
817
818  function reconcileChildFibers(returnFiber, currentFirstChild, newChild, priority) {
819
820    var disableNewFiberFeatures = ReactFeatureFlags.disableNewFiberFeatures;
821
822    var isObject = typeof newChild === 'object' && newChild !== null;
823    if (isObject) {
824      if (disableNewFiberFeatures) {
825        switch (newChild.$$typeof) {
826          case REACT_ELEMENT_TYPE:
827            return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, priority));
828
829          case REACT_PORTAL_TYPE:
830            return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, priority));
831        }
832      } else {
833        switch (newChild.$$typeof) {
834          case REACT_ELEMENT_TYPE:
835            return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, priority));
836
837          case REACT_COROUTINE_TYPE:
838            return placeSingleChild(reconcileSingleCoroutine(returnFiber, currentFirstChild, newChild, priority));
839
840          case REACT_YIELD_TYPE:
841            return placeSingleChild(reconcileSingleYield(returnFiber, currentFirstChild, newChild, priority));
842
843          case REACT_PORTAL_TYPE:
844            return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, priority));
845        }
846      }
847    }
848
849    if (disableNewFiberFeatures) {
850      switch (returnFiber.tag) {
851        case ClassComponent:
852          {
853            if (__DEV__) {
854              var instance = returnFiber.stateNode;
855              if (instance.render._isMockFunction && typeof newChild === 'undefined') {
856                break;
857              }
858            }
859            var Component = returnFiber.type;
860            invariant(newChild === null || newChild === false, '%s.render(): A valid React element (or null) must be returned. ' + 'You may have returned undefined, an array or some other ' + 'invalid object.', Component.displayName || Component.name || 'Component');
861            break;
862          }
863        case FunctionalComponent:
864          {
865            var _Component = returnFiber.type;
866            invariant(newChild === null || newChild === false, '%s(...): A valid React element (or null) must be returned. ' + 'You may have returned undefined, an array or some other ' + 'invalid object.', _Component.displayName || _Component.name || 'Component');
867            break;
868          }
869      }
870    }
871
872    if (typeof newChild === 'string' || typeof newChild === 'number') {
873      return placeSingleChild(reconcileSingleTextNode(returnFiber, currentFirstChild, '' + newChild, priority));
874    }
875
876    if (isArray(newChild)) {
877      return reconcileChildrenArray(returnFiber, currentFirstChild, newChild, priority);
878    }
879
880    if (getIteratorFn(newChild)) {
881      return reconcileChildrenIterator(returnFiber, currentFirstChild, newChild, priority);
882    }
883
884    if (isObject) {
885      throwOnInvalidObjectType(returnFiber, newChild);
886    }
887
888    if (!disableNewFiberFeatures && typeof newChild === 'undefined') {
889      switch (returnFiber.tag) {
890        case ClassComponent:
891          {
892            if (__DEV__) {
893              var _instance = returnFiber.stateNode;
894              if (_instance.render._isMockFunction) {
895                break;
896              }
897            }
898          }
899
900        case FunctionalComponent:
901          {
902            var _Component2 = returnFiber.type;
903            invariant(false, '%s(...): Nothing was returned from render. This usually means a ' + 'return statement is missing. Or, to render nothing, ' + 'return null.', _Component2.displayName || _Component2.name || 'Component');
904          }
905      }
906    }
907
908    return deleteRemainingChildren(returnFiber, currentFirstChild);
909  }
910
911  return reconcileChildFibers;
912}
913
914exports.reconcileChildFibers = ChildReconciler(true, true);
915
916exports.reconcileChildFibersInPlace = ChildReconciler(false, true);
917
918exports.mountChildFibersInPlace = ChildReconciler(false, false);
919
920exports.cloneChildFibers = function (current, workInProgress) {
921  if (!workInProgress.child) {
922    return;
923  }
924  if (current !== null && workInProgress.child === current.child) {
925    var currentChild = workInProgress.child;
926
927    var newChild = cloneFiber(currentChild, currentChild.pendingWorkPriority);
928    workInProgress.child = newChild;
929
930    newChild.return = workInProgress;
931    while (currentChild.sibling !== null) {
932      currentChild = currentChild.sibling;
933      newChild = newChild.sibling = cloneFiber(currentChild, currentChild.pendingWorkPriority);
934      newChild.return = workInProgress;
935    }
936    newChild.sibling = null;
937  } else {
938    var child = workInProgress.child;
939    while (child !== null) {
940      child.return = workInProgress;
941      child = child.sibling;
942    }
943  }
944};
Full Screen

e63021211ff1285ea5ebde3b43f29d1ef7586aReactChildFiber.js

Source: e63021211ff1285ea5ebde3b43f29d1ef7586aReactChildFiber.js Github

copy
1
2
3'use strict';
4
5var REACT_ELEMENT_TYPE = require('ReactElementSymbol');
6
7var _require = require('ReactCoroutine'),
8    REACT_COROUTINE_TYPE = _require.REACT_COROUTINE_TYPE,
9    REACT_YIELD_TYPE = _require.REACT_YIELD_TYPE;
10
11var _require2 = require('ReactPortal'),
12    REACT_PORTAL_TYPE = _require2.REACT_PORTAL_TYPE;
13
14var ReactFiber = require('ReactFiber');
15var ReactTypeOfSideEffect = require('ReactTypeOfSideEffect');
16var ReactTypeOfWork = require('ReactTypeOfWork');
17
18var emptyObject = require('fbjs/lib/emptyObject');
19var getIteratorFn = require('getIteratorFn');
20var invariant = require('fbjs/lib/invariant');
21var ReactFeatureFlags = require('ReactFeatureFlags');
22var ReactCurrentOwner = require('react/lib/ReactCurrentOwner');
23
24if (__DEV__) {
25  var _require3 = require('ReactDebugCurrentFiber'),
26      getCurrentFiberStackAddendum = _require3.getCurrentFiberStackAddendum;
27
28  var getComponentName = require('getComponentName');
29  var warning = require('fbjs/lib/warning');
30  var didWarnAboutMaps = false;
31}
32
33var cloneFiber = ReactFiber.cloneFiber,
34    createFiberFromElement = ReactFiber.createFiberFromElement,
35    createFiberFromFragment = ReactFiber.createFiberFromFragment,
36    createFiberFromText = ReactFiber.createFiberFromText,
37    createFiberFromCoroutine = ReactFiber.createFiberFromCoroutine,
38    createFiberFromYield = ReactFiber.createFiberFromYield,
39    createFiberFromPortal = ReactFiber.createFiberFromPortal;
40
41
42var isArray = Array.isArray;
43
44var FunctionalComponent = ReactTypeOfWork.FunctionalComponent,
45    ClassComponent = ReactTypeOfWork.ClassComponent,
46    HostText = ReactTypeOfWork.HostText,
47    HostPortal = ReactTypeOfWork.HostPortal,
48    CoroutineComponent = ReactTypeOfWork.CoroutineComponent,
49    YieldComponent = ReactTypeOfWork.YieldComponent,
50    Fragment = ReactTypeOfWork.Fragment;
51var NoEffect = ReactTypeOfSideEffect.NoEffect,
52    Placement = ReactTypeOfSideEffect.Placement,
53    Deletion = ReactTypeOfSideEffect.Deletion;
54
55
56function coerceRef(current, element) {
57  var mixedRef = element.ref;
58  if (mixedRef !== null && typeof mixedRef !== 'function') {
59    if (element._owner) {
60      var owner = element._owner;
61      var inst = void 0;
62      if (owner) {
63        if (typeof owner.tag === 'number') {
64          var ownerFiber = owner;
65          invariant(ownerFiber.tag === ClassComponent, 'Stateless function components cannot have refs.');
66          inst = ownerFiber.stateNode;
67        } else {
68          inst = owner.getPublicInstance();
69        }
70      }
71      invariant(inst, 'Missing owner for string ref %s. This error is likely caused by a ' + 'bug in React. Please file an issue.', mixedRef);
72      var stringRef = '' + mixedRef;
73
74      if (current !== null && current.ref !== null && current.ref._stringRef === stringRef) {
75        return current.ref;
76      }
77      var ref = function ref(value) {
78        var refs = inst.refs === emptyObject ? inst.refs = {} : inst.refs;
79        if (value === null) {
80          delete refs[stringRef];
81        } else {
82          refs[stringRef] = value;
83        }
84      };
85      ref._stringRef = stringRef;
86      return ref;
87    }
88  }
89  return mixedRef;
90}
91
92function throwOnInvalidObjectType(returnFiber, newChild) {
93  if (returnFiber.type !== 'textarea') {
94    var addendum = '';
95    if (__DEV__) {
96      addendum = ' If you meant to render a collection of children, use an array ' + 'instead.';
97      var owner = ReactCurrentOwner.owner || returnFiber._debugOwner;
98      if (owner && typeof owner.tag === 'number') {
99        var name = getComponentName(owner);
100        if (name) {
101          addendum += '\n\nCheck the render method of `' + name + '`.';
102        }
103      }
104    }
105    invariant(false, 'Objects are not valid as a React child (found: %s).%s', Object.prototype.toString.call(newChild) === '[object Object]' ? 'object with keys {' + Object.keys(newChild).join(', ') + '}' : newChild, addendum);
106  }
107}
108
109function ChildReconciler(shouldClone, shouldTrackSideEffects) {
110  function deleteChild(returnFiber, childToDelete) {
111    if (!shouldTrackSideEffects) {
112      return;
113    }
114    if (!shouldClone) {
115      if (childToDelete.alternate === null) {
116        return;
117      }
118      childToDelete = childToDelete.alternate;
119    }
120
121    var last = returnFiber.progressedLastDeletion;
122    if (last !== null) {
123      last.nextEffect = childToDelete;
124      returnFiber.progressedLastDeletion = childToDelete;
125    } else {
126      returnFiber.progressedFirstDeletion = returnFiber.progressedLastDeletion = childToDelete;
127    }
128    childToDelete.nextEffect = null;
129    childToDelete.effectTag = Deletion;
130  }
131
132  function deleteRemainingChildren(returnFiber, currentFirstChild) {
133    if (!shouldTrackSideEffects) {
134      return null;
135    }
136
137    var childToDelete = currentFirstChild;
138    while (childToDelete !== null) {
139      deleteChild(returnFiber, childToDelete);
140      childToDelete = childToDelete.sibling;
141    }
142    return null;
143  }
144
145  function mapRemainingChildren(returnFiber, currentFirstChild) {
146    var existingChildren = new Map();
147
148    var existingChild = currentFirstChild;
149    while (existingChild !== null) {
150      if (existingChild.key !== null) {
151        existingChildren.set(existingChild.key, existingChild);
152      } else {
153        existingChildren.set(existingChild.index, existingChild);
154      }
155      existingChild = existingChild.sibling;
156    }
157    return existingChildren;
158  }
159
160  function useFiber(fiber, priority) {
161    if (shouldClone) {
162      var clone = cloneFiber(fiber, priority);
163      clone.index = 0;
164      clone.sibling = null;
165      return clone;
166    } else {
167      fiber.pendingWorkPriority = priority;
168      fiber.effectTag = NoEffect;
169      fiber.index = 0;
170      fiber.sibling = null;
171      return fiber;
172    }
173  }
174
175  function placeChild(newFiber, lastPlacedIndex, newIndex) {
176    newFiber.index = newIndex;
177    if (!shouldTrackSideEffects) {
178      return lastPlacedIndex;
179    }
180    var current = newFiber.alternate;
181    if (current !== null) {
182      var oldIndex = current.index;
183      if (oldIndex < lastPlacedIndex) {
184        newFiber.effectTag = Placement;
185        return lastPlacedIndex;
186      } else {
187        return oldIndex;
188      }
189    } else {
190      newFiber.effectTag = Placement;
191      return lastPlacedIndex;
192    }
193  }
194
195  function placeSingleChild(newFiber) {
196    if (shouldTrackSideEffects && newFiber.alternate === null) {
197      newFiber.effectTag = Placement;
198    }
199    return newFiber;
200  }
201
202  function updateTextNode(returnFiber, current, textContent, priority) {
203    if (current === null || current.tag !== HostText) {
204      var created = createFiberFromText(textContent, priority);
205      created.return = returnFiber;
206      return created;
207    } else {
208      var existing = useFiber(current, priority);
209      existing.pendingProps = textContent;
210      existing.return = returnFiber;
211      return existing;
212    }
213  }
214
215  function updateElement(returnFiber, current, element, priority) {
216    if (current === null || current.type !== element.type) {
217      var created = createFiberFromElement(element, priority);
218      created.ref = coerceRef(current, element);
219      created.return = returnFiber;
220      return created;
221    } else {
222      var existing = useFiber(current, priority);
223      existing.ref = coerceRef(current, element);
224      existing.pendingProps = element.props;
225      existing.return = returnFiber;
226      if (__DEV__) {
227        existing._debugSource = element._source;
228        existing._debugOwner = element._owner;
229      }
230      return existing;
231    }
232  }
233
234  function updateCoroutine(returnFiber, current, coroutine, priority) {
235    if (current === null || current.tag !== CoroutineComponent) {
236      var created = createFiberFromCoroutine(coroutine, priority);
237      created.return = returnFiber;
238      return created;
239    } else {
240      var existing = useFiber(current, priority);
241      existing.pendingProps = coroutine;
242      existing.return = returnFiber;
243      return existing;
244    }
245  }
246
247  function updateYield(returnFiber, current, yieldNode, priority) {
248    if (current === null || current.tag !== YieldComponent) {
249      var created = createFiberFromYield(yieldNode, priority);
250      created.type = yieldNode.value;
251      created.return = returnFiber;
252      return created;
253    } else {
254      var existing = useFiber(current, priority);
255      existing.type = yieldNode.value;
256      existing.return = returnFiber;
257      return existing;
258    }
259  }
260
261  function updatePortal(returnFiber, current, portal, priority) {
262    if (current === null || current.tag !== HostPortal || current.stateNode.containerInfo !== portal.containerInfo || current.stateNode.implementation !== portal.implementation) {
263      var created = createFiberFromPortal(portal, priority);
264      created.return = returnFiber;
265      return created;
266    } else {
267      var existing = useFiber(current, priority);
268      existing.pendingProps = portal.children || [];
269      existing.return = returnFiber;
270      return existing;
271    }
272  }
273
274  function updateFragment(returnFiber, current, fragment, priority) {
275    if (current === null || current.tag !== Fragment) {
276      var created = createFiberFromFragment(fragment, priority);
277      created.return = returnFiber;
278      return created;
279    } else {
280      var existing = useFiber(current, priority);
281      existing.pendingProps = fragment;
282      existing.return = returnFiber;
283      return existing;
284    }
285  }
286
287  function createChild(returnFiber, newChild, priority) {
288    if (typeof newChild === 'string' || typeof newChild === 'number') {
289      var created = createFiberFromText('' + newChild, priority);
290      created.return = returnFiber;
291      return created;
292    }
293
294    if (typeof newChild === 'object' && newChild !== null) {
295      switch (newChild.$$typeof) {
296        case REACT_ELEMENT_TYPE:
297          {
298            var _created = createFiberFromElement(newChild, priority);
299            _created.ref = coerceRef(null, newChild);
300            _created.return = returnFiber;
301            return _created;
302          }
303
304        case REACT_COROUTINE_TYPE:
305          {
306            var _created2 = createFiberFromCoroutine(newChild, priority);
307            _created2.return = returnFiber;
308            return _created2;
309          }
310
311        case REACT_YIELD_TYPE:
312          {
313            var _created3 = createFiberFromYield(newChild, priority);
314            _created3.type = newChild.value;
315            _created3.return = returnFiber;
316            return _created3;
317          }
318
319        case REACT_PORTAL_TYPE:
320          {
321            var _created4 = createFiberFromPortal(newChild, priority);
322            _created4.return = returnFiber;
323            return _created4;
324          }
325      }
326
327      if (isArray(newChild) || getIteratorFn(newChild)) {
328        var _created5 = createFiberFromFragment(newChild, priority);
329        _created5.return = returnFiber;
330        return _created5;
331      }
332
333      throwOnInvalidObjectType(returnFiber, newChild);
334    }
335
336    return null;
337  }
338
339  function updateSlot(returnFiber, oldFiber, newChild, priority) {
340
341    var key = oldFiber !== null ? oldFiber.key : null;
342
343    if (typeof newChild === 'string' || typeof newChild === 'number') {
344      if (key !== null) {
345        return null;
346      }
347      return updateTextNode(returnFiber, oldFiber, '' + newChild, priority);
348    }
349
350    if (typeof newChild === 'object' && newChild !== null) {
351      switch (newChild.$$typeof) {
352        case REACT_ELEMENT_TYPE:
353          {
354            if (newChild.key === key) {
355              return updateElement(returnFiber, oldFiber, newChild, priority);
356            } else {
357              return null;
358            }
359          }
360
361        case REACT_COROUTINE_TYPE:
362          {
363            if (newChild.key === key) {
364              return updateCoroutine(returnFiber, oldFiber, newChild, priority);
365            } else {
366              return null;
367            }
368          }
369
370        case REACT_YIELD_TYPE:
371          {
372            if (key === null) {
373              return updateYield(returnFiber, oldFiber, newChild, priority);
374            } else {
375              return null;
376            }
377          }
378
379        case REACT_PORTAL_TYPE:
380          {
381            if (newChild.key === key) {
382              return updatePortal(returnFiber, oldFiber, newChild, priority);
383            } else {
384              return null;
385            }
386          }
387      }
388
389      if (isArray(newChild) || getIteratorFn(newChild)) {
390        if (key !== null) {
391          return null;
392        }
393        return updateFragment(returnFiber, oldFiber, newChild, priority);
394      }
395
396      throwOnInvalidObjectType(returnFiber, newChild);
397    }
398
399    return null;
400  }
401
402  function updateFromMap(existingChildren, returnFiber, newIdx, newChild, priority) {
403    if (typeof newChild === 'string' || typeof newChild === 'number') {
404      var matchedFiber = existingChildren.get(newIdx) || null;
405      return updateTextNode(returnFiber, matchedFiber, '' + newChild, priority);
406    }
407
408    if (typeof newChild === 'object' && newChild !== null) {
409      switch (newChild.$$typeof) {
410        case REACT_ELEMENT_TYPE:
411          {
412            var _matchedFiber = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;
413            return updateElement(returnFiber, _matchedFiber, newChild, priority);
414          }
415
416        case REACT_COROUTINE_TYPE:
417          {
418            var _matchedFiber2 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;
419            return updateCoroutine(returnFiber, _matchedFiber2, newChild, priority);
420          }
421
422        case REACT_YIELD_TYPE:
423          {
424            var _matchedFiber3 = existingChildren.get(newIdx) || null;
425            return updateYield(returnFiber, _matchedFiber3, newChild, priority);
426          }
427
428        case REACT_PORTAL_TYPE:
429          {
430            var _matchedFiber4 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;
431            return updatePortal(returnFiber, _matchedFiber4, newChild, priority);
432          }
433      }
434
435      if (isArray(newChild) || getIteratorFn(newChild)) {
436        var _matchedFiber5 = existingChildren.get(newIdx) || null;
437        return updateFragment(returnFiber, _matchedFiber5, newChild, priority);
438      }
439
440      throwOnInvalidObjectType(returnFiber, newChild);
441    }
442
443    return null;
444  }
445
446  function warnOnDuplicateKey(child, knownKeys) {
447    if (__DEV__) {
448      if (typeof child !== 'object' || child === null) {
449        return knownKeys;
450      }
451      switch (child.$$typeof) {
452        case REACT_ELEMENT_TYPE:
453        case REACT_COROUTINE_TYPE:
454        case REACT_PORTAL_TYPE:
455          var key = child.key;
456          if (typeof key !== 'string') {
457            break;
458          }
459          if (knownKeys === null) {
460            knownKeys = new Set();
461            knownKeys.add(key);
462            break;
463          }
464          if (!knownKeys.has(key)) {
465            knownKeys.add(key);
466            break;
467          }
468          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());
469          break;
470        default:
471          break;
472      }
473    }
474    return knownKeys;
475  }
476
477  function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, priority) {
478
479    if (__DEV__) {
480      var knownKeys = null;
481      for (var i = 0; i < newChildren.length; i++) {
482        var child = newChildren[i];
483        knownKeys = warnOnDuplicateKey(child, knownKeys);
484      }
485    }
486
487    var resultingFirstChild = null;
488    var previousNewFiber = null;
489
490    var oldFiber = currentFirstChild;
491    var lastPlacedIndex = 0;
492    var newIdx = 0;
493    var nextOldFiber = null;
494    for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
495      if (oldFiber.index > newIdx) {
496        nextOldFiber = oldFiber;
497        oldFiber = null;
498      } else {
499        nextOldFiber = oldFiber.sibling;
500      }
501      var newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], priority);
502      if (newFiber === null) {
503        if (oldFiber === null) {
504          oldFiber = nextOldFiber;
505        }
506        break;
507      }
508      if (shouldTrackSideEffects) {
509        if (oldFiber && newFiber.alternate === null) {
510          deleteChild(returnFiber, oldFiber);
511        }
512      }
513      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
514      if (previousNewFiber === null) {
515        resultingFirstChild = newFiber;
516      } else {
517        previousNewFiber.sibling = newFiber;
518      }
519      previousNewFiber = newFiber;
520      oldFiber = nextOldFiber;
521    }
522
523    if (newIdx === newChildren.length) {
524      deleteRemainingChildren(returnFiber, oldFiber);
525      return resultingFirstChild;
526    }
527
528    if (oldFiber === null) {
529      for (; newIdx < newChildren.length; newIdx++) {
530        var _newFiber = createChild(returnFiber, newChildren[newIdx], priority);
531        if (!_newFiber) {
532          continue;
533        }
534        lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx);
535        if (previousNewFiber === null) {
536          resultingFirstChild = _newFiber;
537        } else {
538          previousNewFiber.sibling = _newFiber;
539        }
540        previousNewFiber = _newFiber;
541      }
542      return resultingFirstChild;
543    }
544
545    var existingChildren = mapRemainingChildren(returnFiber, oldFiber);
546
547    for (; newIdx < newChildren.length; newIdx++) {
548      var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], priority);
549      if (_newFiber2) {
550        if (shouldTrackSideEffects) {
551          if (_newFiber2.alternate !== null) {
552            existingChildren.delete(_newFiber2.key === null ? newIdx : _newFiber2.key);
553          }
554        }
555        lastPlacedIndex = placeChild(_newFiber2, lastPlacedIndex, newIdx);
556        if (previousNewFiber === null) {
557          resultingFirstChild = _newFiber2;
558        } else {
559          previousNewFiber.sibling = _newFiber2;
560        }
561        previousNewFiber = _newFiber2;
562      }
563    }
564
565    if (shouldTrackSideEffects) {
566      existingChildren.forEach(function (child) {
567        return deleteChild(returnFiber, child);
568      });
569    }
570
571    return resultingFirstChild;
572  }
573
574  function reconcileChildrenIterator(returnFiber, currentFirstChild, newChildrenIterable, priority) {
575
576    var iteratorFn = getIteratorFn(newChildrenIterable);
577    invariant(typeof iteratorFn === 'function', 'An object is not an iterable. This error is likely caused by a bug in ' + 'React. Please file an issue.');
578
579    if (__DEV__) {
580      if (typeof newChildrenIterable.entries === 'function') {
581        var possibleMap = newChildrenIterable;
582        if (possibleMap.entries === iteratorFn) {
583          var mapsAsChildrenAddendum = '';
584          var owner = ReactCurrentOwner.owner || returnFiber._debugOwner;
585          if (owner && typeof owner.tag === 'number') {
586            var mapsAsChildrenOwnerName = getComponentName(owner);
587            if (mapsAsChildrenOwnerName) {
588              mapsAsChildrenAddendum = '\n\nCheck the render method of `' + mapsAsChildrenOwnerName + '`.';
589            }
590          }
591          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);
592          didWarnAboutMaps = true;
593        }
594      }
595
596      var _newChildren = iteratorFn.call(newChildrenIterable);
597      if (_newChildren) {
598        var knownKeys = null;
599        var _step = _newChildren.next();
600        for (; !_step.done; _step = _newChildren.next()) {
601          var child = _step.value;
602          knownKeys = warnOnDuplicateKey(child, knownKeys);
603        }
604      }
605    }
606
607    var newChildren = iteratorFn.call(newChildrenIterable);
608    invariant(newChildren != null, 'An iterable object provided no iterator.');
609
610    var resultingFirstChild = null;
611    var previousNewFiber = null;
612
613    var oldFiber = currentFirstChild;
614    var lastPlacedIndex = 0;
615    var newIdx = 0;
616    var nextOldFiber = null;
617
618    var step = newChildren.next();
619    for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next()) {
620      if (oldFiber.index > newIdx) {
621        nextOldFiber = oldFiber;
622        oldFiber = null;
623      } else {
624        nextOldFiber = oldFiber.sibling;
625      }
626      var newFiber = updateSlot(returnFiber, oldFiber, step.value, priority);
627      if (newFiber === null) {
628        if (!oldFiber) {
629          oldFiber = nextOldFiber;
630        }
631        break;
632      }
633      if (shouldTrackSideEffects) {
634        if (oldFiber && newFiber.alternate === null) {
635          deleteChild(returnFiber, oldFiber);
636        }
637      }
638      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
639      if (previousNewFiber === null) {
640        resultingFirstChild = newFiber;
641      } else {
642        previousNewFiber.sibling = newFiber;
643      }
644      previousNewFiber = newFiber;
645      oldFiber = nextOldFiber;
646    }
647
648    if (step.done) {
649      deleteRemainingChildren(returnFiber, oldFiber);
650      return resultingFirstChild;
651    }
652
653    if (oldFiber === null) {
654      for (; !step.done; newIdx++, step = newChildren.next()) {
655        var _newFiber3 = createChild(returnFiber, step.value, priority);
656        if (_newFiber3 === null) {
657          continue;
658        }
659        lastPlacedIndex = placeChild(_newFiber3, lastPlacedIndex, newIdx);
660        if (previousNewFiber === null) {
661          resultingFirstChild = _newFiber3;
662        } else {
663          previousNewFiber.sibling = _newFiber3;
664        }
665        previousNewFiber = _newFiber3;
666      }
667      return resultingFirstChild;
668    }
669
670    var existingChildren = mapRemainingChildren(returnFiber, oldFiber);
671
672    for (; !step.done; newIdx++, step = newChildren.next()) {
673      var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, priority);
674      if (_newFiber4 !== null) {
675        if (shouldTrackSideEffects) {
676          if (_newFiber4.alternate !== null) {
677            existingChildren.delete(_newFiber4.key === null ? newIdx : _newFiber4.key);
678          }
679        }
680        lastPlacedIndex = placeChild(_newFiber4, lastPlacedIndex, newIdx);
681        if (previousNewFiber === null) {
682          resultingFirstChild = _newFiber4;
683        } else {
684          previousNewFiber.sibling = _newFiber4;
685        }
686        previousNewFiber = _newFiber4;
687      }
688    }
689
690    if (shouldTrackSideEffects) {
691      existingChildren.forEach(function (child) {
692        return deleteChild(returnFiber, child);
693      });
694    }
695
696    return resultingFirstChild;
697  }
698
699  function reconcileSingleTextNode(returnFiber, currentFirstChild, textContent, priority) {
700    if (currentFirstChild !== null && currentFirstChild.tag === HostText) {
701      deleteRemainingChildren(returnFiber, currentFirstChild.sibling);
702      var existing = useFiber(currentFirstChild, priority);
703      existing.pendingProps = textContent;
704      existing.return = returnFiber;
705      return existing;
706    }
707
708    deleteRemainingChildren(returnFiber, currentFirstChild);
709    var created = createFiberFromText(textContent, priority);
710    created.return = returnFiber;
711    return created;
712  }
713
714  function reconcileSingleElement(returnFiber, currentFirstChild, element, priority) {
715    var key = element.key;
716    var child = currentFirstChild;
717    while (child !== null) {
718      if (child.key === key) {
719        if (child.type === element.type) {
720          deleteRemainingChildren(returnFiber, child.sibling);
721          var existing = useFiber(child, priority);
722          existing.ref = coerceRef(child, element);
723          existing.pendingProps = element.props;
724          existing.return = returnFiber;
725          if (__DEV__) {
726            existing._debugSource = element._source;
727            existing._debugOwner = element._owner;
728          }
729          return existing;
730        } else {
731          deleteRemainingChildren(returnFiber, child);
732          break;
733        }
734      } else {
735        deleteChild(returnFiber, child);
736      }
737      child = child.sibling;
738    }
739
740    var created = createFiberFromElement(element, priority);
741    created.ref = coerceRef(currentFirstChild, element);
742    created.return = returnFiber;
743    return created;
744  }
745
746  function reconcileSingleCoroutine(returnFiber, currentFirstChild, coroutine, priority) {
747    var key = coroutine.key;
748    var child = currentFirstChild;
749    while (child !== null) {
750      if (child.key === key) {
751        if (child.tag === CoroutineComponent) {
752          deleteRemainingChildren(returnFiber, child.sibling);
753          var existing = useFiber(child, priority);
754          existing.pendingProps = coroutine;
755          existing.return = returnFiber;
756          return existing;
757        } else {
758          deleteRemainingChildren(returnFiber, child);
759          break;
760        }
761      } else {
762        deleteChild(returnFiber, child);
763      }
764      child = child.sibling;
765    }
766
767    var created = createFiberFromCoroutine(coroutine, priority);
768    created.return = returnFiber;
769    return created;
770  }
771
772  function reconcileSingleYield(returnFiber, currentFirstChild, yieldNode, priority) {
773    var child = currentFirstChild;
774    if (child !== null) {
775      if (child.tag === YieldComponent) {
776        deleteRemainingChildren(returnFiber, child.sibling);
777        var existing = useFiber(child, priority);
778        existing.type = yieldNode.value;
779        existing.return = returnFiber;
780        return existing;
781      } else {
782        deleteRemainingChildren(returnFiber, child);
783      }
784    }
785
786    var created = createFiberFromYield(yieldNode, priority);
787    created.type = yieldNode.value;
788    created.return = returnFiber;
789    return created;
790  }
791
792  function reconcileSinglePortal(returnFiber, currentFirstChild, portal, priority) {
793    var key = portal.key;
794    var child = currentFirstChild;
795    while (child !== null) {
796      if (child.key === key) {
797        if (child.tag === HostPortal && child.stateNode.containerInfo === portal.containerInfo && child.stateNode.implementation === portal.implementation) {
798          deleteRemainingChildren(returnFiber, child.sibling);
799          var existing = useFiber(child, priority);
800          existing.pendingProps = portal.children || [];
801          existing.return = returnFiber;
802          return existing;
803        } else {
804          deleteRemainingChildren(returnFiber, child);
805          break;
806        }
807      } else {
808        deleteChild(returnFiber, child);
809      }
810      child = child.sibling;
811    }
812
813    var created = createFiberFromPortal(portal, priority);
814    created.return = returnFiber;
815    return created;
816  }
817
818  function reconcileChildFibers(returnFiber, currentFirstChild, newChild, priority) {
819
820    var disableNewFiberFeatures = ReactFeatureFlags.disableNewFiberFeatures;
821
822    var isObject = typeof newChild === 'object' && newChild !== null;
823    if (isObject) {
824      if (disableNewFiberFeatures) {
825        switch (newChild.$$typeof) {
826          case REACT_ELEMENT_TYPE:
827            return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, priority));
828
829          case REACT_PORTAL_TYPE:
830            return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, priority));
831        }
832      } else {
833        switch (newChild.$$typeof) {
834          case REACT_ELEMENT_TYPE:
835            return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, priority));
836
837          case REACT_COROUTINE_TYPE:
838            return placeSingleChild(reconcileSingleCoroutine(returnFiber, currentFirstChild, newChild, priority));
839
840          case REACT_YIELD_TYPE:
841            return placeSingleChild(reconcileSingleYield(returnFiber, currentFirstChild, newChild, priority));
842
843          case REACT_PORTAL_TYPE:
844            return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, priority));
845        }
846      }
847    }
848
849    if (disableNewFiberFeatures) {
850      switch (returnFiber.tag) {
851        case ClassComponent:
852          {
853            if (__DEV__) {
854              var instance = returnFiber.stateNode;
855              if (instance.render._isMockFunction && typeof newChild === 'undefined') {
856                break;
857              }
858            }
859            var Component = returnFiber.type;
860            invariant(newChild === null || newChild === false, '%s.render(): A valid React element (or null) must be returned. ' + 'You may have returned undefined, an array or some other ' + 'invalid object.', Component.displayName || Component.name || 'Component');
861            break;
862          }
863        case FunctionalComponent:
864          {
865            var _Component = returnFiber.type;
866            invariant(newChild === null || newChild === false, '%s(...): A valid React element (or null) must be returned. ' + 'You may have returned undefined, an array or some other ' + 'invalid object.', _Component.displayName || _Component.name || 'Component');
867            break;
868          }
869      }
870    }
871
872    if (typeof newChild === 'string' || typeof newChild === 'number') {
873      return placeSingleChild(reconcileSingleTextNode(returnFiber, currentFirstChild, '' + newChild, priority));
874    }
875
876    if (isArray(newChild)) {
877      return reconcileChildrenArray(returnFiber, currentFirstChild, newChild, priority);
878    }
879
880    if (getIteratorFn(newChild)) {
881      return reconcileChildrenIterator(returnFiber, currentFirstChild, newChild, priority);
882    }
883
884    if (isObject) {
885      throwOnInvalidObjectType(returnFiber, newChild);
886    }
887
888    if (!disableNewFiberFeatures && typeof newChild === 'undefined') {
889      switch (returnFiber.tag) {
890        case ClassComponent:
891          {
892            if (__DEV__) {
893              var _instance = returnFiber.stateNode;
894              if (_instance.render._isMockFunction) {
895                break;
896              }
897            }
898          }
899
900        case FunctionalComponent:
901          {
902            var _Component2 = returnFiber.type;
903            invariant(false, '%s(...): Nothing was returned from render. This usually means a ' + 'return statement is missing. Or, to render nothing, ' + 'return null.', _Component2.displayName || _Component2.name || 'Component');
904          }
905      }
906    }
907
908    return deleteRemainingChildren(returnFiber, currentFirstChild);
909  }
910
911  return reconcileChildFibers;
912}
913
914exports.reconcileChildFibers = ChildReconciler(true, true);
915
916exports.reconcileChildFibersInPlace = ChildReconciler(false, true);
917
918exports.mountChildFibersInPlace = ChildReconciler(false, false);
919
920exports.cloneChildFibers = function (current, workInProgress) {
921  if (!workInProgress.child) {
922    return;
923  }
924  if (current !== null && workInProgress.child === current.child) {
925    var currentChild = workInProgress.child;
926
927    var newChild = cloneFiber(currentChild, currentChild.pendingWorkPriority);
928    workInProgress.child = newChild;
929
930    newChild.return = workInProgress;
931    while (currentChild.sibling !== null) {
932      currentChild = currentChild.sibling;
933      newChild = newChild.sibling = cloneFiber(currentChild, currentChild.pendingWorkPriority);
934      newChild.return = workInProgress;
935    }
936    newChild.sibling = null;
937  } else {
938    var child = workInProgress.child;
939    while (child !== null) {
940      child.return = workInProgress;
941      child = child.sibling;
942    }
943  }
944};
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)