How to use coerceRef method in Playwright Internal

Best JavaScript code snippet using playwright-internal

reconcileChildren.js

Source:reconcileChildren.js Github

copy

Full Screen

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

Full Screen

Full Screen

ReactChildFiber.new.js

Source:ReactChildFiber.new.js Github

copy

Full Screen

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

Full Screen

Full Screen

ReactChildFiber.js

Source:ReactChildFiber.js Github

copy

Full Screen

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

Full Screen

Full Screen

react-diff.js

Source:react-diff.js Github

copy

Full Screen

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

Full Screen

Full Screen

defaults.js

Source:defaults.js Github

copy

Full Screen

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

Full Screen

Full Screen

annotation_defaults.js

Source:annotation_defaults.js Github

copy

Full Screen

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

Full Screen

Full Screen

singleNode.js

Source:singleNode.js Github

copy

Full Screen

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

Full Screen

Full Screen

reconciler.js

Source:reconciler.js Github

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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 {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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' ] }

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Playwright tutorial

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

Chapters:

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

Run Playwright Internal automation tests on LambdaTest cloud grid

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

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

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

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

Was this article helpful?

Helpful

NotHelpful