Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! 
How to use coerceRef method in Playwright Internal
Best JavaScript code snippet using playwright-internal
reconcileChildren.js
Source:reconcileChildren.js 
...125 deleteRemainingChildren(returnFiber, child.sibling);126127 // å建ä¸ä¸ªå½åchildçworkInProgress128 var existing = useFiber(child, element.type === REACT_FRAGMENT_TYPE ? element.props.children : element.props, expirationTime);129 existing.ref = coerceRef(returnFiber, child, element);130 existing['return'] = returnFiber;131 {132 existing._debugSource = element._source;133 existing._debugOwner = element._owner;134 }135 return existing;136 } else {137 // keyç¸åï¼typeä¸åï¼æ¸
é¤ææåèç¹138 deleteRemainingChildren(returnFiber, child);139 break;140 }141 } else {142 // å¦ækeyä¸ç¸åï¼ç´æ¥ä»å½åçworkInProgressæ¸
é¤å½åfiberåèç¹ï¼ç»§ç»å¤çä¸ä¸ä¸ªåèç¹143 deleteChild(returnFiber, child);144 }145 child = child.sibling;146 }147148 if (element.type === REACT_FRAGMENT_TYPE) {149 // fragment150 var created = createFiberFromFragment(element.props.children, returnFiber.mode, expirationTime, element.key);151 created['return'] = returnFiber;152 return created;153 } else {154155 // å建å级 fiber ../Fiber.js156 // æ ¹æ®åç»ä»¶ç±»åå建fiber157 var _created4 = createFiberFromElement(element, returnFiber.mode, expirationTime);158 // refç¸å
³ææ¶å¿½ç¥159 _created4.ref = coerceRef(returnFiber, currentFirstChild, element);160 // å
³èç¶çº§ fiberï¼æ¨¡æå½æ°æ è°ç¨ï¼å级å½æ°æ§è¡å®æï¼è°ç¨æ è¿åç¶çº§161 _created4['return'] = returnFiber;162 return _created4;163 }164}165166167168// è°åå¤ä¸ªå级fiberçæ´æ°,çç头æè涨æçæç½çç®æ³169// é¦æ¬¡æå
¥çæ¶åï¼ç´æ¥çæåèç¹ï¼æ·»å fiber.index ä¸è§£é170// æ´æ°çæ¶å171// ä»ç¬¬ä¸ä¸ªåèç¹å¼å§å¤çï¼è·æ°çchildListå表ä¸ç第ä¸ä¸ªå
ç´ æ¯è¾ï¼å¦ækeyå¹é
ï¼æ´æ°ï¼å¼å§å¤ç第äºä¸ªèç¹ï¼ä¾æ¬¡ç±»æ¨ï¼ä¸æ¦ä¸å¹é
ï¼è·³åºå¾ªç¯ï¼ä»å½åèç¹å¼å§ååï¼å
¨é¨æ·»å å°Mapå½ä¸ï¼éåmapåå©ä½çchildListï¼åå¨æ¢æ´æ°ï¼ä¸åå¨æ¢æ°å»ºï¼childListéåå®æä¹åï¼å¦æmapå½ä¸è¿åå¨åèç¹ï¼æ·»å å°å é¤å表172function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, expirationTime) {173 // This algorithm can't optimize by searching from boths ends since we174 // don't have backpointers on fibers. I'm trying to see how far we can get175 // with that model. If it ends up not being worth the tradeoffs, we can176 // add it later.177178 // Even with a two ended optimization, we'd want to optimize for the case179 // where there are few changes and brute force the comparison instead of180 // going for the Map. It'd like to explore hitting that path first in181 // forward-only mode and only go for the Map once we notice that we need182 // lots of look ahead. This doesn't handle reversal as well as two ended183 // search but that's unusual. Besides, for the two ended optimization to184 // work on Iterables, we'd need to copy the whole set.185186 // In this first iteration, we'll just live with hitting the bad case187 // (adding everything to a Map) in for every insert/move.188189 // If you change this code, also update reconcileChildrenIterator() which190 // uses the same algorithm.191192 {193 // First, validate keys.194 var knownKeys = null;195 for (var i = 0; i < newChildren.length; i++) {196 var child = newChildren[i];197 knownKeys = warnOnInvalidKey(child, knownKeys);198 }199 }200 201 var resultingFirstChild = null;202 var previousNewFiber = null;203204 var oldFiber = currentFirstChild;205 var lastPlacedIndex = 0;206 var newIdx = 0;207 var nextOldFiber = null;208209 // é¦æ¬¡æ¸²æçæ¶å oldFiber为nullï¼å¦å为 returnFiberç第ä¸ä¸ªåèç¹210 // ææfiberæ°å»ºçæ¶å index é½æ¯ 0,åªæå¨ reconcileChildrenArray æ reconcileChildrenIteratorä¹åï¼indexææå¯è½æ´æ¹211 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {212 // å¦æoldFiberånewFiber index ç¸åæè¾å°ï¼è¯´ææ¯åä¸ä¸ªä½ç½®ï¼ç¸äºæ¯è¾ï¼å¦åè·³åºå¾ªç¯213 if (oldFiber.index > newIdx) {214 nextOldFiber = oldFiber;215 oldFiber = null;216 } else {217 nextOldFiber = oldFiber.sibling;218 }219 // 220 var newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], expirationTime);221 if (newFiber === null) {222 // TODO: This breaks on empty slots like null children. That's223 // unfortunate because it triggers the slow path all the time. We need224 // a better way to communicate whether this was a miss or null,225 // boolean, undefined, etc.226 if (oldFiber === null) {227 oldFiber = nextOldFiber;228 }229 break;230 }231 // 232 if (shouldTrackSideEffects) {233 if (oldFiber && newFiber.alternate === null) {234 // We matched the slot, but we didn't reuse the existing fiber, so we235 // need to delete the existing child.236 deleteChild(returnFiber, oldFiber);237 }238 }239 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);240 if (previousNewFiber === null) {241 // TODO: Move out of the loop. This only happens for the first run.242 resultingFirstChild = newFiber;243 } else {244 // TODO: Defer siblings if we're not at the right index for this slot.245 // I.e. if we had null values before, then we want to defer this246 // for each null value. However, we also don't want to call updateSlot247 // with the previous one.248 previousNewFiber.sibling = newFiber;249 }250 previousNewFiber = newFiber;251 oldFiber = nextOldFiber;252 }253254 if (newIdx === newChildren.length) {255 // We've reached the end of the new children. We can delete the rest.256 // å·²ç»å¤çå°æ°çåèç¹æ«å°¾ï¼å°oldFiberååé¢çå
å¼èç¹æ¸
é¤257 deleteRemainingChildren(returnFiber, oldFiber);258 return resultingFirstChild;259 }260261 // 没æåèç¹ï¼æè
oldFiberåå
çå
å¼åèç¹å
¨é¨æ´æ°å®æï¼ä»å½åçnewIndxå¼å§ï¼å°å©ä½çnewChildå
¨é¨æå
¥ï¼å¹¶æç
§å½åçæå
¥é¡ºåºèµå¼ fiber.index262 if (oldFiber === null) {263 // If we don't have any more existing children we can choose a fast path264 // since the rest will all be insertions.265266 // 267 for (; newIdx < newChildren.length; newIdx++) {268 var _newFiber = createChild(returnFiber, newChildren[newIdx], expirationTime);269 if (!_newFiber) {270 continue;271 }272 lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx);273 if (previousNewFiber === null) {274 // TODO: Move out of the loop. This only happens for the first run.275 resultingFirstChild = _newFiber;276 } else {277 previousNewFiber.sibling = _newFiber;278 }279 previousNewFiber = _newFiber;280 }281 return resultingFirstChild;282 }283284 // Add all children to a key map for quick lookups.285 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);286287 // Keep scanning and use the map to restore deleted items as moves.288 for (; newIdx < newChildren.length; newIdx++) {289 var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], expirationTime);290 if (_newFiber2) {291 if (shouldTrackSideEffects) {292 if (_newFiber2.alternate !== null) {293 // The new fiber is a work in progress, but if there exists a294 // current, that means that we reused the fiber. We need to delete295 // it from the child list so that we don't add it to the deletion296 // list.297 existingChildren['delete'](_newFiber2.key === null ? newIdx : _newFiber2.key);298 }299 }300 lastPlacedIndex = placeChild(_newFiber2, lastPlacedIndex, newIdx);301 if (previousNewFiber === null) {302 resultingFirstChild = _newFiber2;303 } else {304 previousNewFiber.sibling = _newFiber2;305 }306 previousNewFiber = _newFiber2;307 }308 }309310 if (shouldTrackSideEffects) {311 // Any existing children that weren't consumed above were deleted. We need312 // to add them to the deletion list.313 existingChildren.forEach(function (child) {314 return deleteChild(returnFiber, child);315 });316 }317318 return resultingFirstChild;319}320321// ä»mapä¸æ´æ°newChild322function updateFromMap(existingChildren, returnFiber, newIdx, newChild, expirationTime) {323 if (typeof newChild === 'string' || typeof newChild === 'number') {324 // Text nodes don't have keys, so we neither have to check the old nor325 // new node for the key. If both are text nodes, they match.326 var matchedFiber = existingChildren.get(newIdx) || null;327 return updateTextNode(returnFiber, matchedFiber, '' + newChild, expirationTime);328 }329330 if (typeof newChild === 'object' && newChild !== null) {331 switch (newChild.$$typeof) {332 case REACT_ELEMENT_TYPE:333 {334 var _matchedFiber = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;335 if (newChild.type === REACT_FRAGMENT_TYPE) {336 return updateFragment(returnFiber, _matchedFiber, newChild.props.children, expirationTime, newChild.key);337 }338 return updateElement(returnFiber, _matchedFiber, newChild, expirationTime);339 }340 case REACT_PORTAL_TYPE:341 {342 var _matchedFiber2 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;343 return updatePortal(returnFiber, _matchedFiber2, newChild, expirationTime);344 }345 }346347 if (isArray$1(newChild) || getIteratorFn(newChild)) {348 var _matchedFiber3 = existingChildren.get(newIdx) || null;349 return updateFragment(returnFiber, _matchedFiber3, newChild, expirationTime, null);350 }351352 throwOnInvalidObjectType(returnFiber, newChild);353 }354355 {356 if (typeof newChild === 'function') {357 warnOnFunctionType();358 }359 }360361 return null;362 }363364365 // å é¤fiberè°å366 function deleteChild(returnFiber, childToDelete) {367 if (!shouldTrackSideEffects) {368 // Noop.369 return;370 }371 // Deletions are added in reversed order so we add it to the front.372 // At this point, the return fiber's effect list is empty except for373 // deletions, so we can just append the deletion to the list. The remaining374 // effects aren't added until the complete phase. Once we implement375 // resuming, this may not be true.376377 // æå½åçfiberæ·»å å°returnFiberçå¯ä½ç¨é¾æ«å°¾ï¼ç±äºå¨å½åè°åº¦å¨å·¥ä½æ¶é´èç¹ï¼returnFiberçå¯ä½ç¨é¾å°¾ç©ºï¼å¨è°åç»æé¶æ®µï¼å³æ交çåä¸æ¥ï¼æä¼æå©ä½çå¯ä½ç¨æ·»å ï¼å æ¤ï¼å é¤æä½æç»ä¼å¨returnFiberçå¯ä½ç¨é¾é¦é¨378 var last = returnFiber.lastEffect;379 if (last !== null) {380 last.nextEffect = childToDelete;381 returnFiber.lastEffect = childToDelete;382 } else {383 returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;384 }385 childToDelete.nextEffect = null;386 childToDelete.effectTag = Deletion;387 }388389//å建fiberåèç¹390function createChild(returnFiber, newChild, expirationTime) {391 if (typeof newChild === 'string' || typeof newChild === 'number') {392 // Text nodes don't have keys. If the previous node is implicitly keyed393 // we can continue to replace it without aborting even if it is not a text394 // node.395 var created = createFiberFromText('' + newChild, returnFiber.mode, expirationTime);396 created['return'] = returnFiber;397 return created;398 }399400 if (typeof newChild === 'object' && newChild !== null) {401 switch (newChild.$$typeof) {402 case REACT_ELEMENT_TYPE:403 {404 var _created = createFiberFromElement(newChild, returnFiber.mode, expirationTime);405 _created.ref = coerceRef(returnFiber, null, newChild);406 _created['return'] = returnFiber;407 return _created;408 }409 case REACT_PORTAL_TYPE:410 {411 var _created2 = createFiberFromPortal(newChild, returnFiber.mode, expirationTime);412 _created2['return'] = returnFiber;413 return _created2;414 }415 }416417 if (isArray$1(newChild) || getIteratorFn(newChild)) {418 var _created3 = createFiberFromFragment(newChild, returnFiber.mode, expirationTime, null);419 _created3['return'] = returnFiber;420 return _created3;421 }422423 throwOnInvalidObjectType(returnFiber, newChild);424 }425426 {427 if (typeof newChild === 'function') {428 warnOnFunctionType();429 }430 }431432 return null;433}434435// å¤çåfiberçindexï¼æ£ç¡®ä½ç½®ï¼436function placeChild(newFiber, lastPlacedIndex, newIndex) {437 // èµå¼ fiber.index438 newFiber.index = newIndex;439 if (!shouldTrackSideEffects) {440 // ç´æ¥æå
¥ï¼ä¸éè¦ä»»ä½å¤ä½çæä½441 // Noop.442 return lastPlacedIndex;443 }444445 // å¨placeChildæ¹æ³å
ï¼fiberçå建æè
æ´æ°å±æ§é½å·²ç»å®æï¼æ以446 var current = newFiber.alternate;447448 if (current !== null) {449 // æ´æ° currentæ¯ç¨³å®çfiber450451 var oldIndex = current.index;452 if (oldIndex < lastPlacedIndex) {453 // This is a move.454 // éè¦åå移å¨,æ·»å å ä½å¯ä½ç¨455 newFiber.effectTag = Placement;456 return lastPlacedIndex;457 } else {458 // åæ¥ä½ç½®é åï¼ä¸ç¨å¤ç459 // This item can stay in place.460 return oldIndex;461 }462 } else {463 // This is an insertion.464 // æå
¥ 465 newFiber.effectTag = Placement;466 return lastPlacedIndex;467 }468}469470function updateSlot(returnFiber, oldFiber, newChild, expirationTime) {471 // Update the fiber if the keys match, otherwise return null.472473 // å¦ækeyå¹é
ï¼æ´æ°ï¼å
¶ä»æ
åµä¸åå¤ç474475 var key = oldFiber !== null ? oldFiber.key : null;476477 if (typeof newChild === 'string' || typeof newChild === 'number') {478 // Text nodes don't have keys. If the previous node is implicitly keyed479 // we can continue to replace it without aborting even if it is not a text480 // node.481482 // oldFilber åå¨key ï¼å¹¶ä¸ newChild æ¯ææ¬ï¼ç´æ¥è¿åï¼ä¸åå¤ç483 if (key !== null) {484 return null;485 }486 // oldFilber 没ækey ï¼å¹¶ä¸ newChild æ¯ææ¬ï¼ æ´æ°oldFiber487 return updateTextNode(returnFiber, oldFiber, '' + newChild, expirationTime);488 }489490 if (typeof newChild === 'object' && newChild !== null) {491 switch (newChild.$$typeof) {492 // react element493 case REACT_ELEMENT_TYPE:494 {495 // key ç¸åï¼æ´æ°496 if (newChild.key === key) {497 if (newChild.type === REACT_FRAGMENT_TYPE) {498 return updateFragment(returnFiber, oldFiber, newChild.props.children, expirationTime, key);499 }500 return updateElement(returnFiber, oldFiber, newChild, expirationTime);501 } else {502 // å¦å503 return null;504 }505 }506 case REACT_PORTAL_TYPE:507 {508 if (newChild.key === key) {509 return updatePortal(returnFiber, oldFiber, newChild, expirationTime);510 } else {511 return null;512 }513 }514 }515516 // æ°ç»åèç¹517 if (isArray$1(newChild) || getIteratorFn(newChild)) {518 if (key !== null) {519 return null;520 }521522 return updateFragment(returnFiber, oldFiber, newChild, expirationTime, null);523 }524525 throwOnInvalidObjectType(returnFiber, newChild);526 }527528 {529 if (typeof newChild === 'function') {530 warnOnFunctionType();531 }532 }533534 return null;535}536537// æ´æ°fiber538function updateElement(returnFiber, current, element, expirationTime) {539 if (current !== null && current.type === element.type) {540 // Move based on index541 var existing = useFiber(current, element.props, expirationTime);542 existing.ref = coerceRef(returnFiber, current, element);543 existing['return'] = returnFiber;544 {545 existing._debugSource = element._source;546 existing._debugOwner = element._owner;547 }548 return existing;549 } else {550 // Insert551 var created = createFiberFromElement(element, returnFiber.mode, expirationTime);552 created.ref = coerceRef(returnFiber, current, element);553 created['return'] = returnFiber;554 return created;555 }556}557558559function updateTextNode(returnFiber, current, textContent, expirationTime) {560 if (current === null || current.tag !== HostText) {561 // Insert562 var created = createFiberFromText(textContent, returnFiber.mode, expirationTime);563 created['return'] = returnFiber;564 return created;565 } else {566 // Update
...
ReactChildFiber.new.js
Source:ReactChildFiber.new.js
1const isArray = Array.isArray2function coerceRef(3 returnFiber,4 current,5 element,6) {7 const mixedRef = element.ref8 if (9 mixedRef !== null &&10 typeof mixedRef !== 'function' &&11 typeof mixedRef !== 'object'12 ) {13 if (element._owner) {14 const owner = element._owner15 const inst16 if (owner) {17 const ownerFiber = owner18 inst = ownerFiber.stateNode19 }20 const stringRef = '' + mixedRef21 if (22 current !== null &&23 current.ref !== null &&24 typeof current.ref === 'function' &&25 current.ref._stringRef === stringRef26 ) {27 return current.ref28 }29 const ref = function (v) {30 const refs = inst.refs31 if (refs === emptyRefsObject) {32 refs = inst.refs = {}33 }34 if (v === null) {35 delete refs[stringRef]36 } else {37 refs[stringRef] = v38 }39 }40 ref._stringRef = stringRef41 }42 }43 44 return mixedRef45}46function resolveLazy(lazyType) {47 const payload = lazyType._payload48 const init = lazyType._init49 return init(payload)50}51function ChildReconciler(shouldTrackSideEffects) {52 function deleteChild(53 returnFiber,54 childToDelete,55 ) {56 if (!shouldTrackSideEffects) {57 return58 }59 60 const deletions = returnFiber.deletions61 if (deletions === null) {62 returnFiber.deletions = [childToDelete]63 returnFiber.flags |= ChildDeletion64 } else {65 deletions.push(childToDelete)66 }67 }68 function deleteRemainingChildren(69 returnFiber,70 currentFirstChild,71 ) {72 if (!shouldTrackSideEffects) {73 return null74 }75 let childToDelete = currentFirstChild76 while (childToDelete !== null) {77 deleteChild(returnFiber, childToDelete)78 childToDelete = childToDelete.sibling79 }80 return null81 }82 function mapRemainingChildren(83 returnFiber,84 currentFirstChild,85 ) {86 const existingChildren = new Map()87 88 let existingChild = currentFirstChild89 while (existingChild !== null) {90 existingChildren.set(existingChild.key === null ? existingChild.index : existingChild.key)91 existingChild = existingChild.sibling92 }93 return existingChildren94 }95 96 function useFiber(fiber, pendingProps) {97 const clone = createWorkInProgress(fiber, pendingProps)98 clone.index = 099 clone.sibling = null100 return clone101 }102 function placeChild(103 newFiber,104 lastPlacedIndex,105 newIndex,106 ) {107 newFiber.index = newIndex108 if (!shouldTrackSideEffects) {109 return lastPlacedIndex110 }111 const current = newFiber.alternate112 if (current !== null) {113 const oldIndex = current.index114 if (oldIndex < lastPlacedIndex) {115 newFiber.flags |= Placement116 return lastPlacedIndex117 } else {118 return oldIndex119 }120 } else {121 newFiber.flags |= Placement122 return lastPlacedIndex123 }124 }125 function placeSingleChild(126 newFiber,127 ) {128 if (shouldTrackSideEffects && newFiber.alternate === null) {129 newFiber.flags |= Placement130 }131 132 return newFiber133 }134 135 function updateTextNode(136 returnFiber,137 current, // oldFiber138 textContent,139 lanes,140 ) {141 if (current === null || current.tag !== HostText) {142 const created = createFiberFromText(textContent, returnFiber.mode, lanes)143 created.return = returnFiber144 return created145 } else {146 // Update147 const existing = useFiber(current, textContent)148 existing.return = returnFiber149 return existing150 }151 }152 153 function updateElement(154 returnFiber,155 current,156 element,157 lanes,158 ) {159 const elementType = element.type160 161 if (elementType === REACT_FRAGMENT_TYPE) {162 return updateFragment(163 returnFiber,164 current,165 element.props.children,166 lanes,167 element.key,168 )169 }170 171 if (current !== null) {172 if (173 current.elementType === elementType ||174 (enableLazyElements &&175 typeof elementType === 'object' &&176 elementType !== null &&177 elementType.$$typeof === REACT_LAZY_TYPE &&178 resolveLazy(elementType) === current.type)179 ) {180 const existing = useFiber(current, element.props)181 existing.ref = coerceRef(returnFiber, current, element)182 existing.return = returnFiber183 return existing184 }185 }186 187 // Insert188 const created = createFiberFromElement(element, returnFiber.mode, lanes)189 created.ref = coerceRef(returnFiber, current, element)190 created.return = returnFiber191 return created192 }193 194 function updatePortal(195 returnFiber,196 current,197 portal,198 lanes,199 ) {200 if (201 current === null ||202 current.tag !== HostPortal ||203 current.stateNode.containerInfo !== portal.containerInfo ||204 current.stateNode.implementation !== current.stateNode.implementation205 ) {206 // Insert207 const created = createFiberFromPortal(portal, returnFiber.mode, lanes)208 created.return = returnFiber209 return created210 } else {211 // Update212 const existing = useFiber(current, portal.children || [])213 existing.return = returnFiber214 return existing215 }216 }217 function updateFragment(218 returnFiber,219 current,220 fragment,221 lanes,222 key,223 ) {224 if (current === null || current.tag !== Fragment) {225 const created = createFiberFromFragment(226 fragment,227 returnFiber.mode,228 lanes,229 keys,230 )231 created.return = returnFiber232 return created233 } else {234 const existing = useFiber(current, fragment)235 existing.return = returnFiber236 return existing237 }238 }239 240 function updateSlot(241 returnFiber,242 oldFiber,243 newChild,244 lanes,245 ) {246 const key = oldFiber !== null ? oldFiber.key : null;247 248 if (typeof newChild === 'string' || typeof newChild === 'number') {249 // Text nodes don't have keys. If the previous node is implicitly keyed250 // we can continue to replace it without aborting even if it is not a text251 // node.252 253 // implicitly å«èçï¼éå¼ç254 if (key !== null) {255 return null256 }257 return updateTextNode(returnFiber, oldFiber, '' + newChild, lanes)258 }259 260 if (typeof newChild === 'object' && newChild !== null) {261 switch (newChild.$$typeof) {262 case REACT_ELEMENT_TYPE:263 if (newChild.key === key) {264 return updateElement(returnFiber, oldFiber, newChild, lanes)265 } else {266 return null267 }268 case REACT_PORTAL_TYPE:269 if (newChild.key === key) {270 return updatePortal(returnFiber, oldFiber, newChild, lanes)271 } else {272 return null273 }274 case REACT_LAZY_TYPE:275 if (enableLazyElements) {276 const payload = newChild._payload277 const init = newChild._init278 return updateSlot(returnFiber, oldFiber, init(payload), lanes)279 }280 }281 if (isArray(newChild) || getIteratorFn(newChild)) {282 if (key !== null) {283 return null;284 }285 286 return updateFragment(returnFiber, oldFiber, newChild, lanes, null)287 }288 }289 290 return null291 }292 function createChild(293 returnFiber,294 newChild,295 lanes,296 ) {297 if (typeof newChild === 'string' || typeof newChild === 'number') {298 const created = createFiberFromText(299 '' + newChild,300 returnFiber.mode,301 lanes302 )303 created.return = returnFiber304 return created305 }306 if (typeof newChild === 'object' && newChild !== null) {307 switch (newChild.$$typeof) {308 case REACT_ELEMENT_TYPE:309 const created = createFiberFromElement(310 newChild,311 returnFiber.mode,312 lanes,313 )314 created.ref = coerceRef(returnFiber, null, newChild)315 created.return = returnFiber316 return created317 case REACT_FRAGMENT_TYPE:318 const created = createFiberFromFragment(319 newChild,320 returnFiber.mode,321 lanes,322 )323 created.return = returnFiber324 return created325 case REACT_LAZY_TYPE:326 const payload = newChild._payload327 const init = newChild._init328 return createChild(returnFiber, init(payload), lanes)329 }330 }331 if (isArray(newChild) || getIterator(newChild)) {332 const created = createFiberFromFragment(333 newChild,334 returnFiber.mode,335 lanes,336 null337 )338 created.return = returnFiber339 return created340 }341 return null342 }343 function updateFromMap(344 existingChildren,345 returnFiber,346 newIdx,347 newChild,348 lanes,349 ) {350 if (typeof newChild === 'string' || typeof newChild === 'number') {351 const matchedFiber = existingChildren.get(newIdx) || null352 return updateTextNode(returnFiber, matchedFiber, '' + newChild, lanes)353 }354 if (typeof newChild === 'object' && newChild !== null) {355 const matchedFiber = existingChildren.get(356 newChild.key === null ? newIdx : newChild.key,357 ) || null358 359 switch (newChild.$$typeof) {360 case REACT_ELEMENT_TYPE:361 return updateElement(returnFiber, matchedFiber, newChild, lanes)362 case REACT_PORTAL_TYPE:363 return updatePortal(returnFiber, matchedFiber, newChild, lanes,)364 case REACT_LAZY_TYPE:365 if (enableLazyElements) {366 const payload = newChild._payload367 const init = newChild._init368 369 return updateFromMap(370 existingChildren,371 returnFiber,372 newIdx,373 init(payload),374 lanes,375 )376 }377 }378 }379 380 if (isArray(newChild) || getIterator(newChild)) {381 const matchedFiber = existingChildren.get(newIdx) || null382 return updateFragment(returnFiber, matchedFiber, newChild, lanes, null)383 }384 return null385 }386 387 function reconcileChildrenArray(388 returnFiber,389 currentFirstChild, // å¼å¤´ç oldChild 390 newChildren, // æ°ç children391 lanes, // 轨迹392 ) {393 let resultingFirstChild = null // è¿åç Child394 let previousNewFiber = null // ä¹åç newChild395 396 let oldFiber = currentFirstChild // å½åæä½ç oldChild397 let lastPlacedIndex = 0 // æåä¸æ¬¡æä½æ¿æ¢åç index398 let newIdx = 0399 let nextOldFiber = null400 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {401 if (oldFiber.index > newIdx) {402 nextOldFiber = oldFiber403 oldFiber = null404 } else {405 nextOldFiber = oldFiber.sibling406 }407 const newFiber = updateSlot(408 returnFiber,409 oldFiber,410 newChildren[newIdx],411 lanes412 )413 if (newFiber === null) {414 if (oldFiber === null) {415 oldFiber = nextOldFiber416 }417 418 break419 }420 if (shouldTrackSideEffects) {421 if (oldFiber && newFiber.alternate === null) {422 deleteChild(returnFiber, oldFiber)423 }424 }425 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx)426 if (previousNewFiber === null) {427 resultingFirstChild = newFiber428 } else {429 previousNewFiber.sibling = newFiber430 }431 previousNewFiber = newFiber432 oldFiber = nextOldFiber433 }434 435 if (newIdx === newChildren.length) {436 deleteRemainingChildren(returnFiber, oldFiber)437 return resultingFirstChild438 }439 if (oldFiber === null) {440 for (; newIdx < newChildren.length; newIdx++) {441 const newFiber = createChild(returnFiber, newChildren[newIdx], lanes)442 if (newFiber === null) {443 continue444 }445 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx)446 if (previousNewFiber === null) {447 resultingFirstChild = newFiber448 } else {449 previousNewFiber.sibling = newFiber450 }451 previousNewFiber = newFiber452 }453 return resultingFirstChild454 }455 456 const existingChildren = mapRemainingChildren(returnFiber, oldFiber)457 for (; newIdx < newChildren.length; newIdx++) {458 const newFiber = updateFromMap(459 existingChildren,460 returnFiber,461 newIdx,462 newChildren[newIdx],463 lanes,464 )465 if (newFiber === null) {466 if (shouldTrackSideEffects) {467 if (newFiber.alternate !== null) {468 existingChildren.delete(newFiber.key === null ? newIdx : newFiber.key)469 }470 }471 }472 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx)473 if (previousNewFiber === null) {474 resultingFirstChild = newFiber475 } else {476 previousNewFiber.sibling = newFiber477 }478 previousNewFiber = newFiber479 }480 481 if (shouldTrackSideEffects) {482 existingChildren.forEach(child => deleteChild(returnFiber, child))483 }484 485 return resultingFirstChild486 }487 function reconcileChildrenIterator(488 returnFiber,489 currentFirstChild,490 newChildrenIterable,491 lanes,492 ) {493 const iteratorFn = getIteratorFn(newChildrenIterable)494 const newChildren = iteratorFn.call(newChildrenIterable)495 // ...496 }497 function reconcileSingleTextNode(498 returnFiber,499 currentFirstChild,500 textContent,501 lanes,502 ) {503 if (currentFirstChild !== null && currentFirstChild.tag === HostText) {504 deleteRemainingChildren(returnFiber, currentFirstChild.sibling)505 const existing = useFiber(currentFirstChild, textContent)506 existing.return = returnFiber507 return existing508 }509 deleteRemainingChildren(returnFiber, currentFirstChild)510 const created = createFiberFromText(textContent, returnFiber.mode, lanes)511 created.return = returnFiber512 return created513 }514 function reconcileSingleElement(515 returnFiber,516 currentFirstChild,517 element,518 lanes,519 ) {520 const key = element.key521 let child = currentFirstChild522 while (child !== null) {523 const elementType = element.type;524 if (child.key === key) {525 const elementType = element.type526 if (elementType === REACT_FRAGMENT_TYPE) {527 if (child.tag === Fragment) {528 deleteRemainingChildren(returnFiber, child.sibling)529 const existing = useFiber(child, element.props.children)530 existing.return = returnFiber531 return existing532 }533 } else {534 if (535 child.elementType === elementType ||536 (537 enableLazyElements &&538 elementType !== null &&539 element.$$typeof === REACT_LAZY_TYPE &&540 resolveLazy(elementType).type === child.type541 )542 ) {543 deleteRemainingChildren(returnFiber, child.sibling)544 const existing = useFiber(child, element.props)545 existing.ref = coerceRef(returnFiber, child, element)546 existing.return = returnFiber547 return existing548 }549 }550 deleteRemainingChildren(returnFiber, child)551 break552 } else {553 deleteChild(returnFiber, child) 554 }555 }556 if (element.type === REACT_FRAGMENT_TYPE) {557 const created = createFiberFromFragment(558 element.props.children,559 returnFiber.mode,560 lanes,561 element.key,562 )563 created.return = returnFiber564 return created565 } else {566 const created = createFiberFromElement(567 element,568 returnFiber.mode,569 lanes,570 )571 created.ref = coerceRef(returnFiber, currentFirstChild, element)572 created.return = returnFiber573 return created574 }575 }576 function reconcileSinglePortal(577 returnFiber,578 currentFirstChild,579 portal,580 lanes,581 ) {582 const key = portal.key583 let child = currentFirstChild584 while (child !== null) {585 if (child.key === key) {...
ReactChildFiber.js
Source:ReactChildFiber.js
...158 default: {159 if (child.elementType === element.type) {160 deleteRemainingChildren(returnFiber, child.sibling);161 const existing = useFiber(child, element.props);162 existing.ref = coerceRef(returnFiber, child, element);163 existing.return = returnFiber;164 return existing;165 }166 break;167 }168 }169 deleteRemainingChildren(returnFiber, child);170 break;171 } else {172 deleteChild(returnFiber, child);173 }174 child = child.sibling;175 }176 if (element.type === REACT_FRAGMENT_TYPE) {177 const created = createFiberFromFragment(178 element.props.children,179 returnFiber.mode,180 lanes,181 element.key182 );183 created.return = returnFiber;184 return created;185 } else {186 const created = createFiberFromElement(element, returnFiber.mode, lanes);187 created.ref = coerceRef(returnFiber, currentFirstChild, element);188 created.return = returnFiber;189 return created;190 }191 };192 const reconcileSingleTextNode = (193 returnFiber,194 currentFirstChild,195 textContent,196 lanes197 ) => {198 if (currentFirstChild !== null && currentFirstChild.tag === HostText) {199 deleteRemainingChildren(returnFiber, currentFirstChild.sibling);200 const existing = useFiber(currentFirstChild, textContent);201 existing.return = returnFiber;202 return existing;203 }204 deleteRemainingChildren(returnFiber, currentFirstChild);205 const created = createFiberFromText(textContent, returnFiber.mode, lanes);206 created.return = returnFiber;207 return created;208 };209 const updateTextNode = (returnFiber, current, textContent, lanes) => {210 if (current === null || current.tag !== HostText) {211 const created = createFiberFromText(textContent, returnFiber.mode, lanes);212 created.return = returnFiber;213 return created;214 } else {215 const existing = useFiber(current, textContent);216 existing.return = returnFiber;217 return existing;218 }219 };220 const updateFragment = (returnFiber, current, fragment, lanes, key) => {221 if (current === null || current.tag !== Fragment) {222 const created = createFiberFromFragment(223 fragment,224 returnFiber.mode,225 lanes,226 key227 );228 created.return = returnFiber;229 return created;230 } else {231 const existing = useFiber(current, fragment);232 existing.return = returnFiber;233 return existing;234 }235 };236 const updateSlot = (returnFiber, oldFiber, newChild, lanes) => {237 const key = oldFiber !== null ? oldFiber.key : null;238 if (typeof newChild === 'string' || typeof newChild === 'number') {239 if (key !== null) {240 return null;241 }242 return updateTextNode(returnFiber, oldFiber, '' + newChild, lanes);243 }244 if (typeof newChild === 'object' && newChild !== null) {245 switch (newChild.$$typeof) {246 case REACT_ELEMENT_TYPE: {247 if (newChild.key === key) {248 if (newChild.type === REACT_FRAGMENT_TYPE) {249 return updateFragment(250 returnFiber,251 oldFiber,252 newChild.props.children,253 lanes,254 key255 );256 }257 return updateElement(returnFiber, oldFiber, newChild, lanes);258 } else {259 return null;260 }261 }262 case REACT_LAZY_TYPE: {263 const payload = newChild._payload;264 const init = newChild._init;265 return updateSlot(returnFiber, oldFiber, init(payload), lanes);266 }267 }268 if (Array.isArray(newChild) || getIteratorFn(newChild)) {269 if (key !== null) return null;270 return updateFragment(returnFiber, oldFiber, newChild, lanes, null);271 }272 }273 return null;274 };275 const placeChild = (newFiber, lastPlacedIndex, newIndex) => {276 newFiber.index = newIndex;277 if (!shouldTrackSideEffects) return lastPlacedIndex;278 const current = newFiber.alternate;279 if (current !== null) {280 const oldIndex = current.index;281 if (oldIndex < lastPlacedIndex) {282 newFiber.flags = Placement;283 return lastPlacedIndex;284 } else {285 return oldIndex;286 }287 } else {288 newFiber.flags = Placement;289 return lastPlacedIndex;290 }291 };292 const createChild = (returnFiber, newChild, lanes) => {293 if (typeof newChild === 'string' || typeof newChild === 'number') {294 const created = createFiberFromText(295 '' + newChild,296 returnFiber.mode,297 lanes298 );299 created.return = returnFiber;300 return created;301 }302 if (typeof newChild === 'object' && newChild !== null) {303 switch (newChild.$$typeof) {304 case REACT_ELEMENT_TYPE: {305 const created = createFiberFromElement(306 newChild,307 returnFiber.mode,308 lanes309 );310 created.ref = coerceRef(returnFiber, null, newChild);311 created.return = returnFiber;312 return created;313 }314 case REACT_LAZY_TYPE: {315 const payload = newChild._payload;316 const init = newChild._init;317 return createChild(returnFiber, init(payload), lanes);318 }319 }320 if (Array.isArray(newChild) || getIteratorFn(newChild)) {321 const created = createFiberFromFragment(322 newChild,323 returnFiber.mode,324 lanes,325 null326 );327 created.return = returnFiber;328 return created;329 }330 }331 return null;332 };333 const mapRemainingChildren = (returnFiber, currentFirstChild) => {334 const existingChildren = new Map();335 let existingChild = currentFirstChild;336 while (existingChild !== null) {337 if (existingChild.key !== null) {338 existingChildren.set(existingChild.key, existingChild);339 } else {340 existingChildren.set(existingChild.index, existingChild);341 }342 existingChild = existingChild.sibling;343 }344 return existingChildren;345 };346 const reconcileChildrenArray = (347 returnFiber,348 currentFirstChild,349 newChildren,350 lanes351 ) => {352 let resultingFirstChild = null;353 let previousNewFiber = null;354 let oldFiber = currentFirstChild;355 let lastPlacedIndex = 0;356 let newIdx = 0;357 let nextOldFiber = null;358 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {359 if (oldFiber.index > newIdx) {360 nextOldFiber = oldFiber;361 oldFiber = null;362 } else {363 nextOldFiber = oldFiber.sibling;364 }365 const newFiber = updateSlot(366 returnFiber,367 oldFiber,368 newChildren[newIdx],369 lanes370 );371 if (newFiber === null) {372 if (oldFiber === null) {373 oldFiber = nextOldFiber;374 }375 break;376 }377 if (shouldTrackSideEffects) {378 if (oldFiber && newFiber.alternate === null) {379 deleteChild(returnFiber, oldFiber);380 }381 }382 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);383 if (previousNewFiber === null) {384 resultingFirstChild = newFiber;385 } else {386 previousNewFiber.sibling = newFiber;387 }388 previousNewFiber = newFiber;389 oldFiber = nextOldFiber;390 }391 if (newIdx === newChildren.length) {392 deleteRemainingChildren(returnFiber, oldFiber);393 return resultingFirstChild;394 }395 if (oldFiber === null) {396 for (; newIdx < newChildren.length; newIdx++) {397 const newFiber = createChild(returnFiber, newChildren[newIdx], lanes);398 if (newFiber === null) {399 continue;400 }401 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);402 if (previousNewFiber === null) {403 resultingFirstChild = newFiber;404 } else {405 previousNewFiber.sibling = newFiber;406 }407 previousNewFiber = newFiber;408 }409 return resultingFirstChild;410 }411 const existingChildren = mapRemainingChildren(returnFiber, oldFiber);412 for (; newIdx < newChildren.length; newIdx++) {413 const newFiber = updateFromMap(414 existingChildren,415 returnFiber,416 newIdx,417 newChildren[newIdx],418 lanes419 );420 if (newFiber !== null) {421 if (shouldTrackSideEffects) {422 if (newFiber.alternate !== null) {423 existingChildren.delete(424 newFiber.key === null ? newIdx : newFiber.key425 );426 }427 }428 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);429 if (previousNewFiber === null) {430 resultingFirstChild = newFiber;431 } else {432 previousNewFiber.sibling = newFiber;433 }434 previousNewFiber = newFiber;435 }436 }437 if (shouldTrackSideEffects) {438 existingChildren.forEach((child) => deleteChild(returnFiber, child));439 }440 return resultingFirstChild;441 };442 const updateElement = (returnFiber, current, element, lanes) => {443 if (current !== null) {444 if (current.elementType === element.type) {445 const existing = useFiber(current, element.props);446 existing.ref = coerceRef(returnFiber, current, element);447 existing.return = returnFiber;448 return existing;449 }450 }451 const created = createFiberFromElement(element, returnFiber.mode, lanes);452 created.ref = coerceRef(returnFiber, current, element);453 created.return = returnFiber;454 return created;455 };456 const updateFromMap = (457 existingChildren,458 returnFiber,459 newIdx,460 newChild,461 lanes462 ) => {463 if (typeof newChild === 'string' || typeof newChild === 'number') {464 const matchedFiber = existingChildren.get(newIdx) || null;465 return updateTextNode(returnFiber, matchedFiber, '' + newChild, lanes);466 }...
react-diff.js
Source:react-diff.js
...18 deleteRemainingChildren(returnFiber, child.sibling);19 // å¤ç¨childèç¹20 const existing = useFiber(child, newChild.props);21 // æ´æ°å¤ç¨èç¹çrefåreturn22 existing.ref = coerceRef(returnFiber, child, newChild);23 existing.return = returnFiber;24 return existing;25 } else {26 deleteRemainingChildren(returnFiber, child);27 break;28 }29 } else {30 // keyä¸åçæ
åµï¼å é¤child31 deleteChild(returnFiber, child);32 }33 child = child.sibling;34 }35 // åèç¹ä¸æ²¡æç¸åèç¹çæ
åµ36 const created = createFiberFromElement(newChild, returnFiber.mode);37 created.ref = coerceRef(returnFiber, currentFirstChild, newChild);38 created.return = returnFiber;39 return created;40}41// æ°å
ç´ ä¸ºææ¬èç¹42function reconcileSingleTextNode(returnFiber, currentFirstChild, textConent) {43 if (currentFirstChild !== null && currentFirstChild.tag === HostText) {44 deleteRemainingChildren(returnFiber, currentFirstChild.sibling);45 // å¤ç¨ç¬¬ä¸ä¸ªèç¹46 const existing = useFiber(currentFirstChild, textConent);47 existing.return = returnFiber;48 return existing;49 }50 deleteRemainingChildren(returnFiber, currentFirstChild);51 const created = createFiberFromText(textConent, returnFiber.mode);52 created.return = returnFiber;53 return created;54}55function placeChild(newFiber, lastPlacedIndex, newIdx) {56 newFiber.index = newIndex;57 if (!shouldTrackSideEffects) {58 return lastPlacedIndex;59 }60 const current = newFiber.alternate; // current== null,该èç¹ä¸ºæ°å¢èç¹61 if (current !== null) {62 // current !== null 表示æ´æ°ï¼åå¨å·²æèç¹63 const oldIndex = current.index;64 if (oldIndex < lastPlacedIndex) {65 newFiber.flags = Placement;66 return lastPlacedIndex;67 } else {68 // 该项ä¾ç¶çå¨èä½ç½®69 return oldIndex;70 }71 } else {72 newFiber.flags = Placement;73 return lastPlacedIndex;74 }75}76function updateTextNode(returnFiber, current, textContent) {77 // currentèç¹ä¸æ¯å¯å¤ç¨çææ¬èç¹78 if (current === null || current.tag !== HostText) {79 // éè¿textContentå建ææ¬èç¹Fiber80 const created = createFiberFromText(textContent, returnFiber.mode);81 created.return = returnFiber;82 return created;83 } else {84 // æ¾å°å¯å¤ç¨çææ¬èç¹äºï¼åå¤ç¨85 const existing = useFiber(current, textContent); // å¤ç¨ææ¬èç¹86 existing.return = returnFiber;87 return existing;88 }89}90function updateElement(returnFiber, current, element) {91 if (current !== null) {92 if (current.elementType === element.type) {93 const existing = useFiber(current, element.props); // å¤ç¨èç¹94 existing.ref = coerceRef(returnFiber, current, element);95 existing.return = returnFiber;96 return existing;97 }98 }99 // æ°èç¹100 const created = createFiberFromElement(element, returnFiber.mode);101 created.ref = coerceRef(returnFiber, current, element);102 created.return = returnFiber;103 return created;104}105// å°ææèèç¹æ·»å å°Map对象ä¸106function mapRemainingChildren(returnFiber, currentFirstChild) {107 const existingChildren = new Map();108 let existingChild = currentFirstChild;109 while (existingChild !== null) {110 // key ä¸ä¸ºnull å
ç´ èç¹111 if (existingChild.key !== null) {112 existingChildren.set(existingChild.key, existingChild);113 } else {114 // ä¸åå¨key å使ç¨index代æ¿115 existingChildren.set(existingChild.index, existingChild);116 }117 existingChild = existingChild.sibling;118 }119 return existingChildren;120}121function updateFromMap(existingChildren, returnFiber, newIdx, newChild) {122 // æ°èç¹æ¯ææ¬èç¹123 if (typeof newChild === 'string' || typeof newChild === 'number') {124 const matchedFiber = existingChildren.get(newIdx) || null; // æ¾indexç¸åçèç¹å¤ç¨125 return updateTextNode(returnFiber, matchedFiber, '' + newChild);126 }127 // newChildæ¯å
ç´ èç¹çæ
åµ128 if (typeof newChild === 'object' && newChild !== null) {129 if (newChild.$$typeof === REACT_ELEMENT_TYPE) {130 const matchedFiber =131 existingChildren.get(newChild.key ? newChild.key : newChild.index) ||132 null;133 // è¿åæ´æ°åçå
ç´ èç¹134 return updateElement(returnFiber, matchedFiber, newChild);135 }136 }137 return null;138}139function createChild(returnFiber, newChild) {140 // å¤çææ¬èç¹141 if (typeof newChild === 'string' || typeof newChild === 'number') {142 const created = createFiberFromText('' + newChild, returnFiber.mode);143 created.return = returnFiber;144 return created;145 }146 // å¤çå
ç´ èç¹147 if (typeof newChild === 'object' && newChild !== null) {148 if (newChild.$$typeof === REACT_ELEMENT_TYPE) {149 const created = createFiberFromElement(newChild, returnFiber.mode);150 created.ref = coerceRef(returnFiber, null, newChild);151 created.return = returnFiber;152 return created;153 }154 }155 return null;156}157function createFiberFromText(content, mode) {158 const fiber = createFiber(HostText, content, null);159 return fiber;160}161function createFiberFromElement(element, mode) {162 let owner = null;163 const type = element.type;164 const key = element.key;165 const pendingProps = element.props;166 const fiber = createFiberFromTypeAndProps(167 type,168 key,169 pendingProps,170 owner,171 mode172 );173 return fiber;174}175function coerceRef(returnFiber, current, element) {176 return element.ref;177}178// æ°èç¹æ¯å
å«å¤ä¸ªèç¹çæ°ç»179function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren) {180 let resultingFirstChild = null;181 let previousNewFiber = null;182 let oldFiber = currentFirstChild;183 let lastPlacedIndex = 0;184 let newIdx = 0;185 let nextOldFiber = null;186 // 第ä¸æ¬¡éåï¼å¯¹æ¯åä½ç½®çèç¹æ¯å¦ä¸æ ·187 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {188 if (oldFiber.index > newIdx) {189 nextOldFiber = oldFiber;...
defaults.js
Source:defaults.js
...32 var gdMock = {_fullLayout: fullLayout};33 for(var i = 0; i < 2; i++) {34 var axLetter = axLetters[i];35 // xref, yref36 var axRef = Axes.coerceRef(annIn, annOut, gdMock, axLetter, '', 'paper');37 if(axRef !== 'paper') {38 var ax = Axes.getFromId(gdMock, axRef);39 ax._annIndices.push(annOut._index);40 }41 // x, y42 Axes.coercePosition(annOut, gdMock, coerce, axRef, axLetter, 0.5);43 if(showArrow) {44 var arrowPosAttr = 'a' + axLetter;45 // axref, ayref46 var aaxRef = Axes.coerceRef(annIn, annOut, gdMock, arrowPosAttr, 'pixel');47 // for now the arrow can only be on the same axis or specified as pixels48 // TODO: sometime it might be interesting to allow it to be on *any* axis49 // but that would require updates to drawing & autorange code and maybe more50 if(aaxRef !== 'pixel' && aaxRef !== axRef) {51 aaxRef = annOut[arrowPosAttr] = 'pixel';52 }53 // ax, ay54 var aDflt = (aaxRef === 'pixel') ? arrowPosDflt[i] : 0.4;55 Axes.coercePosition(annOut, gdMock, coerce, aaxRef, arrowPosAttr, aDflt);56 }57 // xanchor, yanchor58 coerce(axLetter + 'anchor');59 // xshift, yshift60 coerce(axLetter + 'shift');...
annotation_defaults.js
Source:annotation_defaults.js
...27 gdMock = {_fullLayout: fullLayout};28 for(var i = 0; i < 2; i++) {29 var axLetter = axLetters[i];30 // xref, yref31 var axRef = Axes.coerceRef(annIn, annOut, gdMock, axLetter, '', 'paper');32 // x, y33 Axes.coercePosition(annOut, gdMock, coerce, axRef, axLetter, 0.5);34 if(showArrow) {35 var arrowPosAttr = 'a' + axLetter,36 // axref, ayref37 aaxRef = Axes.coerceRef(annIn, annOut, gdMock, arrowPosAttr, 'pixel');38 // for now the arrow can only be on the same axis or specified as pixels39 // TODO: sometime it might be interesting to allow it to be on *any* axis40 // but that would require updates to drawing & autorange code and maybe more41 if(aaxRef !== 'pixel' && aaxRef !== axRef) {42 aaxRef = annOut[arrowPosAttr] = 'pixel';43 }44 // ax, ay45 var aDflt = (aaxRef === 'pixel') ? arrowPosDflt[i] : 0.4;46 Axes.coercePosition(annOut, gdMock, coerce, aaxRef, arrowPosAttr, aDflt);47 }48 // xanchor, yanchor49 coerce(axLetter + 'anchor');50 // xshift, yshift51 coerce(axLetter + 'shift');...
singleNode.js
Source:singleNode.js
...34 deleteRemainingChildren(returnFiber, child.sibling);35 36 //* å¤ç¨èç¹ 37 const existing = useFiber(child, element.props);38 existing.ref = coerceRef(returnFiber, child, element);39 existing.return = returnFiber;40 return existing;41 }42 // * key ç¸å typeä¸å æ 记该èç¹ä»¥åå
¶å
å¼èç¹ å é¤43 deleteRemainingChildren(returnFiber, child);44 break;45 } else {46 // * key ä¸å ç´æ¥æ è®°å æ该èç¹47 deleteChild(returnFiber, child);48 }49 // ?TODO è¿ç§åèç¹çå
å¼èç¹åºæ¯ ï¼50 child = child.sibling;51 }52 // å建æ°Fiber53 const created = createFiberFromElement(element, returnFiber.mode, lanes);54 created.ref = coerceRef(returnFiber, currentFirstChild, element);55 created.return = returnFiber;56 return created;...
reconciler.js
Source:reconciler.js
...20 21 return created;22 } else {23 const created = createFiberFromElement(element, returnFiber.mode);24 created.ref = coerceRef(returnFiber, currentFirstFiber, element);25 created.return = returnFiber;26 return created;27 }28}29function deleteChild () {...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const context = await browser.newContext();5 const page = await context.newPage();6 const element = await page.$('text=Get started');7 const elementHandle = await element.asElement();8 const internalApi = page._delegate;9 const ref = await internalApi.coerceRef(elementHandle);10 console.log(ref);11 await browser.close();12})();13{ type: 'node', objectId: '0x1' }14const { chromium } = require('playwright');15(async () => {16 const browser = await chromium.launch({ headless: false });17 const context = await browser.newContext();18 const page = await context.newPage();19 const element = await page.$('text=Get started');20 const elementHandle = await element.asElement();21 const internalApi = page._delegate;22 const ref = await internalApi.coerceRef(elementHandle);23 const boundingBox = await internalApi.getBoundingBox(ref);24 console.log(boundingBox);25 await browser.close();26})();27{28}29const { chromium } = require('playwright');30(async () => {31 const browser = await chromium.launch({ headless: false });32 const context = await browser.newContext();33 const page = await context.newPage();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const elementHandle = await page.$('text=Submit');7 const element = await elementHandle.asElement();8 const ref = await element._page._delegate.coerceRef(element._elementHandle);9 console.log(ref);10 await browser.close();11})();12const { chromium } = require('playwright');13(async () => {14 const browser = await chromium.launch();15 const context = await browser.newContext();16 const page = await context.newPage();17 const elementHandle = await page.$('text=Submit');18 const element = await elementHandle.asElement();19 const ref = await element._page._delegate.coerceRef(element._elementHandle);20 console.log(ref);21 await browser.close();22})();
Using AI Code Generation
1const { chromium } = require('playwright');2const { coerceRef } = require('playwright/lib/client/transport');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 const elementHandle = await page.$('text=Get started');7 const ref = coerceRef(elementHandle);8 console.log(ref);9 await browser.close();10})();11{12 _initializer: {13 _context: {14 },15 }16}17const { chromium } = require('playwright');18const { coerceRef } = require('playwright/lib/client/transport');19(async () => {20 const browser = await chromium.launch();21 const page = await browser.newPage();22 const elementHandle = await page.$('text=Get started');23 const ref = coerceRef(elementHandle);24 console.log(ref);25 const parentElementHandle = await ref._page.$('text=Learn more');26 console.log(parentElementHandle);27 await browser.close();28})();29{30 _initializer: {31 _context: {32 },33 }34}35ElementHandle {36 _page: Page {37 _browserContext: BrowserContext {
Using AI Code Generation
1const { chromium } = require('playwright');2const { coerceRef } = require('playwright/lib/protocol/protocol');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 await page.waitForSelector('text=Get started');7 await page.click('text=Get started');8 await page.waitForSelector('text=Quick Start');9 await page.click('text=Quick Start');10 await page.waitForSelector('text=Install Node.js');11 await page.click('text=Install Node.js');12 let element = await page.$('text=Install Node.js');13 let ref = coerceRef(element);14 console.log(ref);15 await browser.close();16})();17{ __symbolic: 'reference',18 path: [ 'playwright', 'chromium', 'browserContext', 'page', 'frame' ] }
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const elementHandle = await page.$('text=Hello World');6 const elementHandle2 = await page.$('text=Hello World');7 console.log(elementHandle.coerceRef(elementHandle2));8 await browser.close();9})();
Using AI Code Generation
1const { BrowserType } = require('playwright/lib/server/browserType');2const { Page } = require('playwright/lib/server/page');3const { ElementHandle } = require('playwright/lib/server/elementHandler');4const { Frame } = require('playwright/lib/server/frame');5const { JSHandle } = require('playwright/lib/server/jsHandle');6const { helper } = require('playwright/lib/helper');7const { createJSHandle } = require('playwright/lib/server/frames');8const { createHandle } = require('playwright/lib/server/injected/injectedScript');9const { serializeArgument } = require('playwright/lib/server/frames');10const { serializeResult } = require('playwright/lib/server/frames');11const { createHandleForElement } = require('playwright/lib/server/frames');12const { getExceptionMessage } = require('playwright/lib/server/frames');13const { getExceptionDetails } = require('playwright/lib/server/frames');14const { getExceptionValue } = require('playwright/lib/server/frames');15const { getExceptionValueAsync } = require('playwright/lib/server/frames');16const { getExceptionValueSync } = require('playwright/lib/server/frames');17const { getExceptionValueHandle } = require('playwright/lib/server/frames');18const { getExceptionValueString } = require('playwright/lib/server/frames');19const { getExceptionValueValue } = require('playwright/lib/server/frames');20const { getExceptionValuePreview } = require('playwright/lib/server/frames');21const { getExceptionValueDescription } = require('playwright/lib/server/frames');22const { getExceptionValueObjectId } = require('playwright/lib/server/frames');23const { getExceptionValueSubtype } = require('playwright/lib/server/frames');24const { getExceptionValueClassName } = require('playwright/lib/server/frames');25const { getExceptionValueUnserializableValue } = require('playwright/lib/server/frames');26const { getExceptionValueCustomPreview } = require('playwright/lib/server/frames');27const { getExceptionValueCustomPreviewHeader } = require('playwright/lib/server/frames');28const { getExceptionValueCustomPreviewBody } = require('playwright/lib/server/frames');29const { getExceptionValueCustomPreviewChildren } = require('playwright/lib/server/frames');30const { getExceptionValueCustomPreviewProperties } = require('playwright/lib/server/frames');
Using AI Code Generation
1const { chromium } = require('playwright');2const { Page, Frame } = require('playwright/lib/client/page');3const { ElementHandle } = require('playwright/lib/client/elementHandler');4async function main() {5 const browser = await chromium.launch();6 const context = await browser.newContext();7 const page = await context.newPage();8 const searchInput = await page.$('input[name="q"]');9 const searchInput2 = await page.$('input[name="q"]');10 const frame = await page.frames()[0];11 const searchInput3 = await frame.$('input[name="q"]');12 const searchInput4 = await page.evaluateHandle((el) => el, searchInput);13 const searchInput5 = await page.evaluateHandle((el) => el, searchInput2);14 const searchInput6 = await page.evaluateHandle((el) => el, searchInput3);15 await browser.close();16}17main();
Using AI Code Generation
1const { chromium } = require('playwright');2const { coerceRef } = require('playwright/lib/server/chromium/crConnection');3const { chromiumLauncher } = require('playwright/lib/server/chromium/chromiumLauncher');4(async () => {5 const browserServer = await chromiumLauncher.launchServer({6 });7 const url = browserServer.wsEndpoint();8 const browser = await chromium.connect({ wsEndpoint: url });9 const page = await browser.newPage();10 const pageId = coerceRef(page);11 console.log(pageId);12 await browser.close();13})();14const { chromium } = require('playwright');15const { coerceRef } = require('playwright/lib/server/chromium/crConnection');16const { chromiumLauncher } = require('playwright/lib/server/chromium/chromiumLauncher');17(async () => {18 const browserServer = await chromiumLauncher.launchServer({19 });20 const url = browserServer.wsEndpoint();21 const browser = await chromium.connect({ wsEndpoint: url });22 const page = await browser.newPage();
Using AI Code Generation
1const {chromium, firefox, webkit, devices, _electron, _android, _ios, _chromium, _firefox, _webkit, _devices, _electron, _android, _ios} = require('playwright');2const browser = await chromium.launch({headless: false});3const context = await browser.newContext();4const page = await context.newPage();5const element = await page.coerceRef('input[name=q]');6await element.type('Hello World');7await browser.close();8const {chromium, firefox, webkit, devices, _electron, _android, _ios, _chromium, _firefox, _webkit, _devices, _electron, _android, _ios} = require('playwright');9const browser = await chromium.launch({headless: false});10const context = await browser.newContext();11const page = await context.newPage();12const element = await page.coerceRef('input[name=q]');13await element.type('Hello World');14await browser.close();15const {chromium, firefox, webkit, devices, _electron, _android, _ios, _chromium, _firefox, _webkit, _devices, _electron, _android, _ios} = require('playwright');16const browser = await chromium.launch({headless: false});17const context = await browser.newContext();18const page = await context.newPage();19const element = await page.coerceRef('input[name=q]');20await element.type('Hello World');21await browser.close();22const {chromium, firefox, webkit, devices, _electron, _android, _ios, _chromium, _firefox, _webkit, _devices, _electron, _android, _ios} = require('playwright');23const browser = await chromium.launch({headless: false});
Using AI Code Generation
1const {coerceRef} = require('playwright-core/lib/server/supplements/recorder/recorderSupplement.js');2coerceRef('myLocator');3const {coerceRef} = require('playwright-core/lib/server/supplements/recorder/recorderSupplement.js');4coerceRef('myLocator');5const {coerceRef} = require('playwright-core/lib/server/supplements/recorder/recorderSupplement.js');6coerceRef('myLocator');7const {coerceRef} = require('playwright-core/lib/server/supplements/recorder/recorderSupplement.js');8coerceRef('myLocator');9const {coerceRef} = require('playwright-core/lib/server/supplements/recorder/recorderSupplement.js');10coerceRef('myLocator');11const {coerceRef} = require('playwright-core/lib/server/supplements/recorder/recorderSupplement.js');12coerceRef('myLocator');13const {coerceRef} = require('playwright-core/lib/server/supplements/recorder/recorderSupplement.js');14coerceRef('myLocator');15const {coerceRef} = require('playwright-core/lib/server/supplements/recorder/recorderSupplement.js');16coerceRef('myLocator');17const {coerceRef} = require('playwright-core/lib/server/supplements/recorder/recorderSupplement.js');18coerceRef('myLocator');19const {coerceRef} = require('playwright-core/lib/server/supplements/recorder/recorderSupplement.js');20coerceRef('myLocator');21const {coerceRef} = require('playwright-core/lib/server/supplements
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
