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

Copied to Clipboard!

How to use getKeepAliveChild method in Playwright Internal

Best JavaScript code snippet using playwright-internal

vue3.js

Source:vue3.js

...3336                  return emptyPlaceholder(child);3337              }3338              // in the case of <transition><keep-alive/></transition>, we need to3339              // compare the type of the kept-alive children.3340              const innerChild = getKeepAliveChild(child);3341              if (!innerChild) {3342                  return emptyPlaceholder(child);3343              }3344              const enterHooks = resolveTransitionHooks(innerChild, rawProps, state, instance);3345              setTransitionHooks(innerChild, enterHooks);3346              const oldChild = instance.subTree;3347              const oldInnerChild = oldChild && getKeepAliveChild(oldChild);3348              let transitionKeyChanged = false;3349              const { getTransitionKey } = innerChild.type;3350              if (getTransitionKey) {3351                  const key = getTransitionKey();3352                  if (prevTransitionKey === undefined) {3353                      prevTransitionKey = key;3354                  }3355                  else if (key !== prevTransitionKey) {3356                      prevTransitionKey = key;3357                      transitionKeyChanged = true;3358                  }3359              }3360              // handle mode3361              if (oldInnerChild &&3362                  oldInnerChild.type !== Comment &&3363                  (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) {3364                  const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance);3365                  // update old tree's hooks in case of dynamic transition3366                  setTransitionHooks(oldInnerChild, leavingHooks);3367                  // switching between different views3368                  if (mode === 'out-in') {3369                      state.isLeaving = true;3370                      // return placeholder node and queue update when leave finishes3371                      leavingHooks.afterLeave = () => {3372                          state.isLeaving = false;3373                          instance.update();3374                      };3375                      return emptyPlaceholder(child);3376                  }3377                  else if (mode === 'in-out') {3378                      leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {3379                          const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild);3380                          leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;3381                          // early removal callback3382                          el._leaveCb = () => {3383                              earlyRemove();3384                              el._leaveCb = undefined;3385                              delete enterHooks.delayedLeave;3386                          };3387                          enterHooks.delayedLeave = delayedLeave;3388                      };3389                  }3390              }3391              return child;3392          };3393      }3394  };3395  // export the public type for h/tsx inference3396  // also to avoid inline import() in generated d.ts files3397  const BaseTransition = BaseTransitionImpl;3398  function getLeavingNodesForType(state, vnode) {3399      const { leavingVNodes } = state;3400      let leavingVNodesCache = leavingVNodes.get(vnode.type);3401      if (!leavingVNodesCache) {3402          leavingVNodesCache = Object.create(null);3403          leavingVNodes.set(vnode.type, leavingVNodesCache);3404      }3405      return leavingVNodesCache;3406  }3407  // The transition hooks are attached to the vnode as vnode.transition3408  // and will be called at appropriate timing in the renderer.3409  function resolveTransitionHooks(vnode, props, state, instance) {3410      const { appear, mode, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, onBeforeAppear, onAppear, onAfterAppear, onAppearCancelled } = props;3411      const key = String(vnode.key);3412      const leavingVNodesCache = getLeavingNodesForType(state, vnode);3413      const callHook = (hook, args) => {3414          hook &&3415              callWithAsyncErrorHandling(hook, instance, 9 /* TRANSITION_HOOK */, args);3416      };3417      const hooks = {3418          mode,3419          persisted,3420          beforeEnter(el) {3421              let hook = onBeforeEnter;3422              if (!state.isMounted) {3423                  if (appear) {3424                      hook = onBeforeAppear || onBeforeEnter;3425                  }3426                  else {3427                      return;3428                  }3429              }3430              // for same element (v-show)3431              if (el._leaveCb) {3432                  el._leaveCb(true /* cancelled */);3433              }3434              // for toggled element with same key (v-if)3435              const leavingVNode = leavingVNodesCache[key];3436              if (leavingVNode &&3437                  isSameVNodeType(vnode, leavingVNode) &&3438                  leavingVNode.el._leaveCb) {3439                  // force early removal (not cancelled)3440                  leavingVNode.el._leaveCb();3441              }3442              callHook(hook, [el]);3443          },3444          enter(el) {3445              let hook = onEnter;3446              let afterHook = onAfterEnter;3447              let cancelHook = onEnterCancelled;3448              if (!state.isMounted) {3449                  if (appear) {3450                      hook = onAppear || onEnter;3451                      afterHook = onAfterAppear || onAfterEnter;3452                      cancelHook = onAppearCancelled || onEnterCancelled;3453                  }3454                  else {3455                      return;3456                  }3457              }3458              let called = false;3459              const done = (el._enterCb = (cancelled) => {3460                  if (called)3461                      return;3462                  called = true;3463                  if (cancelled) {3464                      callHook(cancelHook, [el]);3465                  }3466                  else {3467                      callHook(afterHook, [el]);3468                  }3469                  if (hooks.delayedLeave) {3470                      hooks.delayedLeave();3471                  }3472                  el._enterCb = undefined;3473              });3474              if (hook) {3475                  hook(el, done);3476                  if (hook.length <= 1) {3477                      done();3478                  }3479              }3480              else {3481                  done();3482              }3483          },3484          leave(el, remove) {3485              const key = String(vnode.key);3486              if (el._enterCb) {3487                  el._enterCb(true /* cancelled */);3488              }3489              if (state.isUnmounting) {3490                  return remove();3491              }3492              callHook(onBeforeLeave, [el]);3493              let called = false;3494              const done = (el._leaveCb = (cancelled) => {3495                  if (called)3496                      return;3497                  called = true;3498                  remove();3499                  if (cancelled) {3500                      callHook(onLeaveCancelled, [el]);3501                  }3502                  else {3503                      callHook(onAfterLeave, [el]);3504                  }3505                  el._leaveCb = undefined;3506                  if (leavingVNodesCache[key] === vnode) {3507                      delete leavingVNodesCache[key];3508                  }3509              });3510              leavingVNodesCache[key] = vnode;3511              if (onLeave) {3512                  onLeave(el, done);3513                  if (onLeave.length <= 1) {3514                      done();3515                  }3516              }3517              else {3518                  done();3519              }3520          },3521          clone(vnode) {3522              return resolveTransitionHooks(vnode, props, state, instance);3523          }3524      };3525      return hooks;3526  }3527  // the placeholder really only handles one special case: KeepAlive3528  // in the case of a KeepAlive in a leave phase we need to return a KeepAlive3529  // placeholder with empty content to avoid the KeepAlive instance from being3530  // unmounted.3531  function emptyPlaceholder(vnode) {3532      if (isKeepAlive(vnode)) {3533          vnode = cloneVNode(vnode);3534          vnode.children = null;3535          return vnode;3536      }3537  }3538  function getKeepAliveChild(vnode) {3539      return isKeepAlive(vnode)3540          ? vnode.children3541              ? vnode.children[0]3542              : undefined3543          : vnode;3544  }3545  function setTransitionHooks(vnode, hooks) {3546      if (vnode.shapeFlag & 6 /* COMPONENT */ && vnode.component) {3547          setTransitionHooks(vnode.component.subTree, hooks);3548      }3549      else if ( vnode.shapeFlag & 128 /* SUSPENSE */) {3550          vnode.ssContent.transition = hooks.clone(vnode.ssContent);3551          vnode.ssFallback.transition = hooks.clone(vnode.ssFallback);3552      }
...

runtime-core.cjs.prod.js

Source:runtime-core.cjs.prod.js

...2453                return emptyPlaceholder(child);2454            }2455            // in the case of <transition><keep-alive/></transition>, we need to2456            // compare the type of the kept-alive children.2457            const innerChild = getKeepAliveChild(child);2458            if (!innerChild) {2459                return emptyPlaceholder(child);2460            }2461            const enterHooks = (innerChild.transition = resolveTransitionHooks(innerChild, rawProps, state, instance));2462            const oldChild = instance.subTree;2463            const oldInnerChild = oldChild && getKeepAliveChild(oldChild);2464            // handle mode2465            if (oldInnerChild &&2466                oldInnerChild.type !== Comment &&2467                !isSameVNodeType(innerChild, oldInnerChild)) {2468                const prevHooks = oldInnerChild.transition;2469                const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance);2470                // update old tree's hooks in case of dynamic transition2471                setTransitionHooks(oldInnerChild, leavingHooks);2472                // switching between different views2473                if (mode === 'out-in') {2474                    state.isLeaving = true;2475                    // return placeholder node and queue update when leave finishes2476                    leavingHooks.afterLeave = () => {2477                        state.isLeaving = false;2478                        instance.update();2479                    };2480                    return emptyPlaceholder(child);2481                }2482                else if (mode === 'in-out') {2483                    delete prevHooks.delayedLeave;2484                    leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {2485                        const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild);2486                        leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;2487                        // early removal callback2488                        el._leaveCb = () => {2489                            earlyRemove();2490                            el._leaveCb = undefined;2491                            delete enterHooks.delayedLeave;2492                        };2493                        enterHooks.delayedLeave = delayedLeave;2494                    };2495                }2496            }2497            return child;2498        };2499    }2500};2501// export the public type for h/tsx inference2502// also to avoid inline import() in generated d.ts files2503const BaseTransition = BaseTransitionImpl;2504function getLeavingNodesForType(state, vnode) {2505    const { leavingVNodes } = state;2506    let leavingVNodesCache = leavingVNodes.get(vnode.type);2507    if (!leavingVNodesCache) {2508        leavingVNodesCache = Object.create(null);2509        leavingVNodes.set(vnode.type, leavingVNodesCache);2510    }2511    return leavingVNodesCache;2512}2513// The transition hooks are attached to the vnode as vnode.transition2514// and will be called at appropriate timing in the renderer.2515function resolveTransitionHooks(vnode, { appear, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled }, state, instance) {2516    const key = String(vnode.key);2517    const leavingVNodesCache = getLeavingNodesForType(state, vnode);2518    const callHook = (hook, args) => {2519        hook &&2520            callWithAsyncErrorHandling(hook, instance, 8 /* TRANSITION_HOOK */, args);2521    };2522    const hooks = {2523        persisted,2524        beforeEnter(el) {2525            if (!appear && !state.isMounted) {2526                return;2527            }2528            // for same element (v-show)2529            if (el._leaveCb) {2530                el._leaveCb(true /* cancelled */);2531            }2532            // for toggled element with same key (v-if)2533            const leavingVNode = leavingVNodesCache[key];2534            if (leavingVNode &&2535                isSameVNodeType(vnode, leavingVNode) &&2536                leavingVNode.el._leaveCb) {2537                // force early removal (not cancelled)2538                leavingVNode.el._leaveCb();2539            }2540            callHook(onBeforeEnter, [el]);2541        },2542        enter(el) {2543            if (!appear && !state.isMounted) {2544                return;2545            }2546            let called = false;2547            const afterEnter = (el._enterCb = (cancelled) => {2548                if (called)2549                    return;2550                called = true;2551                if (cancelled) {2552                    callHook(onEnterCancelled, [el]);2553                }2554                else {2555                    callHook(onAfterEnter, [el]);2556                }2557                if (hooks.delayedLeave) {2558                    hooks.delayedLeave();2559                }2560                el._enterCb = undefined;2561            });2562            if (onEnter) {2563                onEnter(el, afterEnter);2564            }2565            else {2566                afterEnter();2567            }2568        },2569        leave(el, remove) {2570            const key = String(vnode.key);2571            if (el._enterCb) {2572                el._enterCb(true /* cancelled */);2573            }2574            if (state.isUnmounting) {2575                return remove();2576            }2577            callHook(onBeforeLeave, [el]);2578            let called = false;2579            const afterLeave = (el._leaveCb = (cancelled) => {2580                if (called)2581                    return;2582                called = true;2583                remove();2584                if (cancelled) {2585                    callHook(onLeaveCancelled, [el]);2586                }2587                else {2588                    callHook(onAfterLeave, [el]);2589                }2590                el._leaveCb = undefined;2591                if (leavingVNodesCache[key] === vnode) {2592                    delete leavingVNodesCache[key];2593                }2594            });2595            leavingVNodesCache[key] = vnode;2596            if (onLeave) {2597                onLeave(el, afterLeave);2598            }2599            else {2600                afterLeave();2601            }2602        }2603    };2604    return hooks;2605}2606// the placeholder really only handles one special case: KeepAlive2607// in the case of a KeepAlive in a leave phase we need to return a KeepAlive2608// placeholder with empty content to avoid the KeepAlive instance from being2609// unmounted.2610function emptyPlaceholder(vnode) {2611    if (isKeepAlive(vnode)) {2612        vnode = cloneVNode(vnode);2613        vnode.children = null;2614        return vnode;2615    }2616}2617function getKeepAliveChild(vnode) {2618    return isKeepAlive(vnode)2619        ? vnode.children2620            ? vnode.children[0]2621            : undefined2622        : vnode;2623}2624function setTransitionHooks(vnode, hooks) {2625    if (vnode.shapeFlag & 6 /* COMPONENT */ && vnode.component) {2626        setTransitionHooks(vnode.component.subTree, hooks);2627    }2628    else {2629        vnode.transition = hooks;2630    }2631}...

charles-satellite.es.js

Source:charles-satellite.es.js

...1271      const child = children[0];1272      if (state.isLeaving) {1273        return emptyPlaceholder(child);1274      }1275      const innerChild = getKeepAliveChild(child);1276      if (!innerChild) {1277        return emptyPlaceholder(child);1278      }1279      const enterHooks = resolveTransitionHooks(innerChild, rawProps, state, instance);1280      setTransitionHooks(innerChild, enterHooks);1281      const oldChild = instance.subTree;1282      const oldInnerChild = oldChild && getKeepAliveChild(oldChild);1283      let transitionKeyChanged = false;1284      const { getTransitionKey } = innerChild.type;1285      if (getTransitionKey) {1286        const key = getTransitionKey();1287        if (prevTransitionKey === void 0) {1288          prevTransitionKey = key;1289        } else if (key !== prevTransitionKey) {1290          prevTransitionKey = key;1291          transitionKeyChanged = true;1292        }1293      }1294      if (oldInnerChild && oldInnerChild.type !== Comment && (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) {1295        const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance);1296        setTransitionHooks(oldInnerChild, leavingHooks);1297        if (mode === "out-in") {1298          state.isLeaving = true;1299          leavingHooks.afterLeave = () => {1300            state.isLeaving = false;1301            instance.update();1302          };1303          return emptyPlaceholder(child);1304        } else if (mode === "in-out" && innerChild.type !== Comment) {1305          leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {1306            const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild);1307            leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;1308            el._leaveCb = () => {1309              earlyRemove();1310              el._leaveCb = void 0;1311              delete enterHooks.delayedLeave;1312            };1313            enterHooks.delayedLeave = delayedLeave;1314          };1315        }1316      }1317      return child;1318    };1319  }1320};1321const BaseTransition = BaseTransitionImpl;1322function getLeavingNodesForType(state, vnode) {1323  const { leavingVNodes } = state;1324  let leavingVNodesCache = leavingVNodes.get(vnode.type);1325  if (!leavingVNodesCache) {1326    leavingVNodesCache = Object.create(null);1327    leavingVNodes.set(vnode.type, leavingVNodesCache);1328  }1329  return leavingVNodesCache;1330}1331function resolveTransitionHooks(vnode, props, state, instance) {1332  const { appear, mode, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, onBeforeAppear, onAppear, onAfterAppear, onAppearCancelled } = props;1333  const key = String(vnode.key);1334  const leavingVNodesCache = getLeavingNodesForType(state, vnode);1335  const callHook2 = (hook, args) => {1336    hook && callWithAsyncErrorHandling(hook, instance, 9, args);1337  };1338  const hooks = {1339    mode,1340    persisted,1341    beforeEnter(el) {1342      let hook = onBeforeEnter;1343      if (!state.isMounted) {1344        if (appear) {1345          hook = onBeforeAppear || onBeforeEnter;1346        } else {1347          return;1348        }1349      }1350      if (el._leaveCb) {1351        el._leaveCb(true);1352      }1353      const leavingVNode = leavingVNodesCache[key];1354      if (leavingVNode && isSameVNodeType(vnode, leavingVNode) && leavingVNode.el._leaveCb) {1355        leavingVNode.el._leaveCb();1356      }1357      callHook2(hook, [el]);1358    },1359    enter(el) {1360      let hook = onEnter;1361      let afterHook = onAfterEnter;1362      let cancelHook = onEnterCancelled;1363      if (!state.isMounted) {1364        if (appear) {1365          hook = onAppear || onEnter;1366          afterHook = onAfterAppear || onAfterEnter;1367          cancelHook = onAppearCancelled || onEnterCancelled;1368        } else {1369          return;1370        }1371      }1372      let called = false;1373      const done = el._enterCb = (cancelled) => {1374        if (called)1375          return;1376        called = true;1377        if (cancelled) {1378          callHook2(cancelHook, [el]);1379        } else {1380          callHook2(afterHook, [el]);1381        }1382        if (hooks.delayedLeave) {1383          hooks.delayedLeave();1384        }1385        el._enterCb = void 0;1386      };1387      if (hook) {1388        hook(el, done);1389        if (hook.length <= 1) {1390          done();1391        }1392      } else {1393        done();1394      }1395    },1396    leave(el, remove2) {1397      const key2 = String(vnode.key);1398      if (el._enterCb) {1399        el._enterCb(true);1400      }1401      if (state.isUnmounting) {1402        return remove2();1403      }1404      callHook2(onBeforeLeave, [el]);1405      let called = false;1406      const done = el._leaveCb = (cancelled) => {1407        if (called)1408          return;1409        called = true;1410        remove2();1411        if (cancelled) {1412          callHook2(onLeaveCancelled, [el]);1413        } else {1414          callHook2(onAfterLeave, [el]);1415        }1416        el._leaveCb = void 0;1417        if (leavingVNodesCache[key2] === vnode) {1418          delete leavingVNodesCache[key2];1419        }1420      };1421      leavingVNodesCache[key2] = vnode;1422      if (onLeave) {1423        onLeave(el, done);1424        if (onLeave.length <= 1) {1425          done();1426        }1427      } else {1428        done();1429      }1430    },1431    clone(vnode2) {1432      return resolveTransitionHooks(vnode2, props, state, instance);1433    }1434  };1435  return hooks;1436}1437function emptyPlaceholder(vnode) {1438  if (isKeepAlive(vnode)) {1439    vnode = cloneVNode(vnode);1440    vnode.children = null;1441    return vnode;1442  }1443}1444function getKeepAliveChild(vnode) {1445  return isKeepAlive(vnode) ? vnode.children ? vnode.children[0] : void 0 : vnode;1446}1447function setTransitionHooks(vnode, hooks) {1448  if (vnode.shapeFlag & 6 && vnode.component) {1449    setTransitionHooks(vnode.component.subTree, hooks);1450  } else if (vnode.shapeFlag & 128) {1451    vnode.ssContent.transition = hooks.clone(vnode.ssContent);1452    vnode.ssFallback.transition = hooks.clone(vnode.ssFallback);1453  } else {1454    vnode.transition = hooks;1455  }1456}1457function getTransitionRawChildren(children, keepComment = false) {1458  let ret = [];...

vendor.js

Source:vendor.js

...1636      const child = children[0];1637      if (state.isLeaving) {1638        return emptyPlaceholder(child);1639      }1640      const innerChild = getKeepAliveChild(child);1641      if (!innerChild) {1642        return emptyPlaceholder(child);1643      }1644      const enterHooks = resolveTransitionHooks(innerChild, rawProps, state, instance);1645      setTransitionHooks(innerChild, enterHooks);1646      const oldChild = instance.subTree;1647      const oldInnerChild = oldChild && getKeepAliveChild(oldChild);1648      let transitionKeyChanged = false;1649      const { getTransitionKey } = innerChild.type;1650      if (getTransitionKey) {1651        const key = getTransitionKey();1652        if (prevTransitionKey === void 0) {1653          prevTransitionKey = key;1654        } else if (key !== prevTransitionKey) {1655          prevTransitionKey = key;1656          transitionKeyChanged = true;1657        }1658      }1659      if (oldInnerChild && oldInnerChild.type !== Comment && (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) {1660        const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance);1661        setTransitionHooks(oldInnerChild, leavingHooks);1662        if (mode === "out-in") {1663          state.isLeaving = true;1664          leavingHooks.afterLeave = () => {1665            state.isLeaving = false;1666            instance.update();1667          };1668          return emptyPlaceholder(child);1669        } else if (mode === "in-out" && innerChild.type !== Comment) {1670          leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {1671            const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild);1672            leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;1673            el._leaveCb = () => {1674              earlyRemove();1675              el._leaveCb = void 0;1676              delete enterHooks.delayedLeave;1677            };1678            enterHooks.delayedLeave = delayedLeave;1679          };1680        }1681      }1682      return child;1683    };1684  }1685};1686const BaseTransition = BaseTransitionImpl;1687function getLeavingNodesForType(state, vnode) {1688  const { leavingVNodes } = state;1689  let leavingVNodesCache = leavingVNodes.get(vnode.type);1690  if (!leavingVNodesCache) {1691    leavingVNodesCache = /* @__PURE__ */ Object.create(null);1692    leavingVNodes.set(vnode.type, leavingVNodesCache);1693  }1694  return leavingVNodesCache;1695}1696function resolveTransitionHooks(vnode, props, state, instance) {1697  const { appear, mode, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, onBeforeAppear, onAppear, onAfterAppear, onAppearCancelled } = props;1698  const key = String(vnode.key);1699  const leavingVNodesCache = getLeavingNodesForType(state, vnode);1700  const callHook2 = (hook, args) => {1701    hook && callWithAsyncErrorHandling(hook, instance, 9, args);1702  };1703  const hooks = {1704    mode,1705    persisted,1706    beforeEnter(el) {1707      let hook = onBeforeEnter;1708      if (!state.isMounted) {1709        if (appear) {1710          hook = onBeforeAppear || onBeforeEnter;1711        } else {1712          return;1713        }1714      }1715      if (el._leaveCb) {1716        el._leaveCb(true);1717      }1718      const leavingVNode = leavingVNodesCache[key];1719      if (leavingVNode && isSameVNodeType(vnode, leavingVNode) && leavingVNode.el._leaveCb) {1720        leavingVNode.el._leaveCb();1721      }1722      callHook2(hook, [el]);1723    },1724    enter(el) {1725      let hook = onEnter;1726      let afterHook = onAfterEnter;1727      let cancelHook = onEnterCancelled;1728      if (!state.isMounted) {1729        if (appear) {1730          hook = onAppear || onEnter;1731          afterHook = onAfterAppear || onAfterEnter;1732          cancelHook = onAppearCancelled || onEnterCancelled;1733        } else {1734          return;1735        }1736      }1737      let called = false;1738      const done = el._enterCb = (cancelled) => {1739        if (called)1740          return;1741        called = true;1742        if (cancelled) {1743          callHook2(cancelHook, [el]);1744        } else {1745          callHook2(afterHook, [el]);1746        }1747        if (hooks.delayedLeave) {1748          hooks.delayedLeave();1749        }1750        el._enterCb = void 0;1751      };1752      if (hook) {1753        hook(el, done);1754        if (hook.length <= 1) {1755          done();1756        }1757      } else {1758        done();1759      }1760    },1761    leave(el, remove2) {1762      const key2 = String(vnode.key);1763      if (el._enterCb) {1764        el._enterCb(true);1765      }1766      if (state.isUnmounting) {1767        return remove2();1768      }1769      callHook2(onBeforeLeave, [el]);1770      let called = false;1771      const done = el._leaveCb = (cancelled) => {1772        if (called)1773          return;1774        called = true;1775        remove2();1776        if (cancelled) {1777          callHook2(onLeaveCancelled, [el]);1778        } else {1779          callHook2(onAfterLeave, [el]);1780        }1781        el._leaveCb = void 0;1782        if (leavingVNodesCache[key2] === vnode) {1783          delete leavingVNodesCache[key2];1784        }1785      };1786      leavingVNodesCache[key2] = vnode;1787      if (onLeave) {1788        onLeave(el, done);1789        if (onLeave.length <= 1) {1790          done();1791        }1792      } else {1793        done();1794      }1795    },1796    clone(vnode2) {1797      return resolveTransitionHooks(vnode2, props, state, instance);1798    }1799  };1800  return hooks;1801}1802function emptyPlaceholder(vnode) {1803  if (isKeepAlive(vnode)) {1804    vnode = cloneVNode(vnode);1805    vnode.children = null;1806    return vnode;1807  }1808}1809function getKeepAliveChild(vnode) {1810  return isKeepAlive(vnode) ? vnode.children ? vnode.children[0] : void 0 : vnode;1811}1812function setTransitionHooks(vnode, hooks) {1813  if (vnode.shapeFlag & 6 && vnode.component) {1814    setTransitionHooks(vnode.component.subTree, hooks);1815  } else if (vnode.shapeFlag & 128) {1816    vnode.ssContent.transition = hooks.clone(vnode.ssContent);1817    vnode.ssFallback.transition = hooks.clone(vnode.ssFallback);1818  } else {1819    vnode.transition = hooks;1820  }1821}1822function getTransitionRawChildren(children, keepComment = false) {1823  let ret = [];...

index.js

Source:index.js

...1821	                return emptyPlaceholder(child);1822	            }1823	            // in the case of <transition><keep-alive/></transition>, we need to1824	            // compare the type of the kept-alive children.1825	            const innerChild = getKeepAliveChild(child);1826	            if (!innerChild) {1827	                return emptyPlaceholder(child);1828	            }1829	            const enterHooks = (innerChild.transition = resolveTransitionHooks(innerChild, rawProps, state, instance));1830	            const oldChild = instance.subTree;1831	            const oldInnerChild = oldChild && getKeepAliveChild(oldChild);1832	            // handle mode1833	            if (oldInnerChild &&1834	                oldInnerChild.type !== Comment &&1835	                !isSameVNodeType(innerChild, oldInnerChild)) {1836	                const prevHooks = oldInnerChild.transition;1837	                const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance);1838	                // update old tree's hooks in case of dynamic transition1839	                setTransitionHooks(oldInnerChild, leavingHooks);1840	                // switching between different views1841	                if (mode === 'out-in') {1842	                    state.isLeaving = true;1843	                    // return placeholder node and queue update when leave finishes1844	                    leavingHooks.afterLeave = () => {1845	                        state.isLeaving = false;1846	                        instance.update();1847	                    };1848	                    return emptyPlaceholder(child);1849	                }1850	                else if (mode === 'in-out') {1851	                    delete prevHooks.delayedLeave;1852	                    leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {1853	                        const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild);1854	                        leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;1855	                        // early removal callback1856	                        el._leaveCb = () => {1857	                            earlyRemove();1858	                            el._leaveCb = undefined;1859	                            delete enterHooks.delayedLeave;1860	                        };1861	                        enterHooks.delayedLeave = delayedLeave;1862	                    };1863	                }1864	            }1865	            return child;1866	        };1867	    }1868	};1869	// export the public type for h/tsx inference1870	// also to avoid inline import() in generated d.ts files1871	const BaseTransition = BaseTransitionImpl;1872	function getLeavingNodesForType(state, vnode) {1873	    const { leavingVNodes } = state;1874	    let leavingVNodesCache = leavingVNodes.get(vnode.type);1875	    if (!leavingVNodesCache) {1876	        leavingVNodesCache = Object.create(null);1877	        leavingVNodes.set(vnode.type, leavingVNodesCache);1878	    }1879	    return leavingVNodesCache;1880	}1881	// The transition hooks are attached to the vnode as vnode.transition1882	// and will be called at appropriate timing in the renderer.1883	function resolveTransitionHooks(vnode, { appear, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled }, state, instance) {1884	    const key = String(vnode.key);1885	    const leavingVNodesCache = getLeavingNodesForType(state, vnode);1886	    const callHook = (hook, args) => {1887	        hook &&1888	            callWithAsyncErrorHandling(hook, instance, 9 /* TRANSITION_HOOK */, args);1889	    };1890	    const hooks = {1891	        persisted,1892	        beforeEnter(el) {1893	            if (!appear && !state.isMounted) {1894	                return;1895	            }1896	            // for same element (v-show)1897	            if (el._leaveCb) {1898	                el._leaveCb(true /* cancelled */);1899	            }1900	            // for toggled element with same key (v-if)1901	            const leavingVNode = leavingVNodesCache[key];1902	            if (leavingVNode &&1903	                isSameVNodeType(vnode, leavingVNode) &&1904	                leavingVNode.el._leaveCb) {1905	                // force early removal (not cancelled)1906	                leavingVNode.el._leaveCb();1907	            }1908	            callHook(onBeforeEnter, [el]);1909	        },1910	        enter(el) {1911	            if (!appear && !state.isMounted) {1912	                return;1913	            }1914	            let called = false;1915	            const afterEnter = (el._enterCb = (cancelled) => {1916	                if (called)1917	                    return;1918	                called = true;1919	                if (cancelled) {1920	                    callHook(onEnterCancelled, [el]);1921	                }1922	                else {1923	                    callHook(onAfterEnter, [el]);1924	                }1925	                if (hooks.delayedLeave) {1926	                    hooks.delayedLeave();1927	                }1928	                el._enterCb = undefined;1929	            });1930	            if (onEnter) {1931	                onEnter(el, afterEnter);1932	            }1933	            else {1934	                afterEnter();1935	            }1936	        },1937	        leave(el, remove$$1) {1938	            const key = String(vnode.key);1939	            if (el._enterCb) {1940	                el._enterCb(true /* cancelled */);1941	            }1942	            if (state.isUnmounting) {1943	                return remove$$1();1944	            }1945	            callHook(onBeforeLeave, [el]);1946	            let called = false;1947	            const afterLeave = (el._leaveCb = (cancelled) => {1948	                if (called)1949	                    return;1950	                called = true;1951	                remove$$1();1952	                if (cancelled) {1953	                    callHook(onLeaveCancelled, [el]);1954	                }1955	                else {1956	                    callHook(onAfterLeave, [el]);1957	                }1958	                el._leaveCb = undefined;1959	                if (leavingVNodesCache[key] === vnode) {1960	                    delete leavingVNodesCache[key];1961	                }1962	            });1963	            leavingVNodesCache[key] = vnode;1964	            if (onLeave) {1965	                onLeave(el, afterLeave);1966	            }1967	            else {1968	                afterLeave();1969	            }1970	        }1971	    };1972	    return hooks;1973	}1974	// the placeholder really only handles one special case: KeepAlive1975	// in the case of a KeepAlive in a leave phase we need to return a KeepAlive1976	// placeholder with empty content to avoid the KeepAlive instance from being1977	// unmounted.1978	function emptyPlaceholder(vnode) {1979	    if (isKeepAlive(vnode)) {1980	        vnode = cloneVNode(vnode);1981	        vnode.children = null;1982	        return vnode;1983	    }1984	}1985	function getKeepAliveChild(vnode) {1986	    return isKeepAlive(vnode)1987	        ? vnode.children1988	            ? vnode.children[0]1989	            : undefined1990	        : vnode;1991	}1992	function setTransitionHooks(vnode, hooks) {1993	    if (vnode.shapeFlag & 6 /* COMPONENT */ && vnode.component) {1994	        setTransitionHooks(vnode.component.subTree, hooks);1995	    }1996	    else {1997	        vnode.transition = hooks;1998	    }1999	}...

index.es.js

Source:index.es.js

...1817                return emptyPlaceholder(child);1818            }1819            // in the case of <transition><keep-alive/></transition>, we need to1820            // compare the type of the kept-alive children.1821            const innerChild = getKeepAliveChild(child);1822            if (!innerChild) {1823                return emptyPlaceholder(child);1824            }1825            const enterHooks = (innerChild.transition = resolveTransitionHooks(innerChild, rawProps, state, instance));1826            const oldChild = instance.subTree;1827            const oldInnerChild = oldChild && getKeepAliveChild(oldChild);1828            // handle mode1829            if (oldInnerChild &&1830                oldInnerChild.type !== Comment &&1831                !isSameVNodeType(innerChild, oldInnerChild)) {1832                const prevHooks = oldInnerChild.transition;1833                const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance);1834                // update old tree's hooks in case of dynamic transition1835                setTransitionHooks(oldInnerChild, leavingHooks);1836                // switching between different views1837                if (mode === 'out-in') {1838                    state.isLeaving = true;1839                    // return placeholder node and queue update when leave finishes1840                    leavingHooks.afterLeave = () => {1841                        state.isLeaving = false;1842                        instance.update();1843                    };1844                    return emptyPlaceholder(child);1845                }1846                else if (mode === 'in-out') {1847                    delete prevHooks.delayedLeave;1848                    leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {1849                        const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild);1850                        leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;1851                        // early removal callback1852                        el._leaveCb = () => {1853                            earlyRemove();1854                            el._leaveCb = undefined;1855                            delete enterHooks.delayedLeave;1856                        };1857                        enterHooks.delayedLeave = delayedLeave;1858                    };1859                }1860            }1861            return child;1862        };1863    }1864};1865// export the public type for h/tsx inference1866// also to avoid inline import() in generated d.ts files1867const BaseTransition = BaseTransitionImpl;1868function getLeavingNodesForType(state, vnode) {1869    const { leavingVNodes } = state;1870    let leavingVNodesCache = leavingVNodes.get(vnode.type);1871    if (!leavingVNodesCache) {1872        leavingVNodesCache = Object.create(null);1873        leavingVNodes.set(vnode.type, leavingVNodesCache);1874    }1875    return leavingVNodesCache;1876}1877// The transition hooks are attached to the vnode as vnode.transition1878// and will be called at appropriate timing in the renderer.1879function resolveTransitionHooks(vnode, { appear, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled }, state, instance) {1880    const key = String(vnode.key);1881    const leavingVNodesCache = getLeavingNodesForType(state, vnode);1882    const callHook = (hook, args) => {1883        hook &&1884            callWithAsyncErrorHandling(hook, instance, 9 /* TRANSITION_HOOK */, args);1885    };1886    const hooks = {1887        persisted,1888        beforeEnter(el) {1889            if (!appear && !state.isMounted) {1890                return;1891            }1892            // for same element (v-show)1893            if (el._leaveCb) {1894                el._leaveCb(true /* cancelled */);1895            }1896            // for toggled element with same key (v-if)1897            const leavingVNode = leavingVNodesCache[key];1898            if (leavingVNode &&1899                isSameVNodeType(vnode, leavingVNode) &&1900                leavingVNode.el._leaveCb) {1901                // force early removal (not cancelled)1902                leavingVNode.el._leaveCb();1903            }1904            callHook(onBeforeEnter, [el]);1905        },1906        enter(el) {1907            if (!appear && !state.isMounted) {1908                return;1909            }1910            let called = false;1911            const afterEnter = (el._enterCb = (cancelled) => {1912                if (called)1913                    return;1914                called = true;1915                if (cancelled) {1916                    callHook(onEnterCancelled, [el]);1917                }1918                else {1919                    callHook(onAfterEnter, [el]);1920                }1921                if (hooks.delayedLeave) {1922                    hooks.delayedLeave();1923                }1924                el._enterCb = undefined;1925            });1926            if (onEnter) {1927                onEnter(el, afterEnter);1928            }1929            else {1930                afterEnter();1931            }1932        },1933        leave(el, remove$$1) {1934            const key = String(vnode.key);1935            if (el._enterCb) {1936                el._enterCb(true /* cancelled */);1937            }1938            if (state.isUnmounting) {1939                return remove$$1();1940            }1941            callHook(onBeforeLeave, [el]);1942            let called = false;1943            const afterLeave = (el._leaveCb = (cancelled) => {1944                if (called)1945                    return;1946                called = true;1947                remove$$1();1948                if (cancelled) {1949                    callHook(onLeaveCancelled, [el]);1950                }1951                else {1952                    callHook(onAfterLeave, [el]);1953                }1954                el._leaveCb = undefined;1955                if (leavingVNodesCache[key] === vnode) {1956                    delete leavingVNodesCache[key];1957                }1958            });1959            leavingVNodesCache[key] = vnode;1960            if (onLeave) {1961                onLeave(el, afterLeave);1962            }1963            else {1964                afterLeave();1965            }1966        }1967    };1968    return hooks;1969}1970// the placeholder really only handles one special case: KeepAlive1971// in the case of a KeepAlive in a leave phase we need to return a KeepAlive1972// placeholder with empty content to avoid the KeepAlive instance from being1973// unmounted.1974function emptyPlaceholder(vnode) {1975    if (isKeepAlive(vnode)) {1976        vnode = cloneVNode(vnode);1977        vnode.children = null;1978        return vnode;1979    }1980}1981function getKeepAliveChild(vnode) {1982    return isKeepAlive(vnode)1983        ? vnode.children1984            ? vnode.children[0]1985            : undefined1986        : vnode;1987}1988function setTransitionHooks(vnode, hooks) {1989    if (vnode.shapeFlag & 6 /* COMPONENT */ && vnode.component) {1990        setTransitionHooks(vnode.component.subTree, hooks);1991    }1992    else {1993        vnode.transition = hooks;1994    }1995}...

transition.js

Source:transition.js

...47      if (state.isLeaving) {48        return emptyPlaceholder(child)49      }50      // å¤ç <transition><keep-alive/></transition> çæåµ51      const innerChild = getKeepAliveChild(child)52      if (!innerChild) {53        return emptyPlaceholder(child)54      }55      const enterHooks = resolveTransitionHooks(innerChild, rawProps, state, instance)56        setTransitionHooks(innerChild, enterHooks)57      const oldChild = instance.subTree58      const oldInnerChild = oldChild && getKeepAliveChild(oldChild)59      let transitionKeyChanged = false60      const { getTransitionKey } = innerChild.type61      if (getTransitionKey) {62        const key = getTransitionKey()63        if (prevTransitionKey === undefined) {64          prevTransitionKey = key65        }66        else if (key !== prevTransitionKey) {67          prevTransitionKey = key68          transitionKeyChanged = true69        }70      }71      if (oldInnerChild &&72        oldInnerChild.type !== Comment &&...

BaseTransition.js

Source:BaseTransition.js

...69        return emptyPlaceholder(child)70      }71      // in the case of <transition><keep-alive/></transition>, we need to72      // compare the type of the kept-alive children.73      const innerChild = getKeepAliveChild(child)74      if (!innerChild) {75        return emptyPlaceholder(child)76      }77      const enterHooks = resolveTransitionHooks(78        innerChild,79        rawProps,80        state,81        instance82      )83      setTransitionHooks(innerChild, enterHooks)84      const oldChild = instance.subTree85      const oldInnerChild = oldChild && getKeepAliveChild(oldChild)86      let transitionKeyChanged = false87      const { getTransitionKey } = innerChild.type88      if (getTransitionKey) {89        const key = getTransitionKey()90        if (prevTransitionKey === undefined) {91          prevTransitionKey = key92        } else if (key !== prevTransitionKey) {93          prevTransitionKey = key94          transitionKeyChanged = true95        }96      }97      // handle mode98      if (99        oldInnerChild &&...

Using AI Code Generation

1const { getKeepAliveChild } = require('playwright/lib/server/browserServer');2const browserServer = await playwright.chromium.launchServer();3const keepAliveChild = await getKeepAliveChild(browserServer);4console.log(keepAliveChild);5const { getKeepAliveChild } = require('playwright/lib/server/browserServer');6const browserServer = await playwright.chromium.launchServer();7const keepAliveChild = await getKeepAliveChild(browserServer);8console.log(keepAliveChild);9const { getKeepAliveChild } = require('playwright/lib/server/browserServer');10const browserServer = await playwright.chromium.launchServer();11const keepAliveChild = await getKeepAliveChild(browserServer);12console.log(keepAliveChild);13const { getKeepAliveChild } = require('playwright/lib/server/browserServer');14const browserServer = await playwright.chromium.launchServer();15const keepAliveChild = await getKeepAliveChild(browserServer);16console.log(keepAliveChild);17const { getKeepAliveChild } = require('playwright/lib/server/browserServer');18const browserServer = await playwright.chromium.launchServer();19const keepAliveChild = await getKeepAliveChild(browserServer);20console.log(keepAliveChild);21const { getKeepAliveChild } = require('playwright/lib/server/browserServer');22const browserServer = await playwright.chromium.launchServer();23const keepAliveChild = await getKeepAliveChild(browserServer);24console.log(keepAliveChild);25const { getKeepAliveChild } = require('playwright/lib/server/browserServer');26const browserServer = await playwright.chromium.launchServer();27const keepAliveChild = await getKeepAliveChild(browserServer);28console.log(keepAliveChild);29const { getKeepAliveChild } = require('playwright/lib/server/browserServer');30const browserServer = await playwright.chromium.launchServer();31const keepAliveChild = await getKeepAliveChild(browserServer);32console.log(keepAliveChild);

Using AI Code Generation

1const { getKeepAliveChild } = require('playwright/lib/server/childProcess');2(async () => {3  const child = await getKeepAliveChild();4  const browser = await child.newBrowser();5  const context = await browser.newContext();6  const page = await context.newPage();7  await page.screenshot({ path: 'example.png' });8  await browser.close();9})();

Using AI Code Generation

1const { getKeepAliveChild } = require('playwright/lib/server/browserType');2const browserType = require('playwright/lib/server/browserType').chromium;3(async () => {4  const browser = await browserType.launch();5  const child = getKeepAliveChild(browser);6  await child.send('Browser.close');7  await browser.close();8})();9    at ChildProcess.<anonymous> (C:\Users\MyUser\Documents\Playwright\playwright\lib\server\browserType.js:66:56)10    at ChildProcess.emit (events.js:315:20)11    at ChildProcess.cp.emit (C:\Users\MyUser\Documents\Playwright\playwright\lib\server\processLauncher.js:94:29)12    at maybeClose (internal/child_process.js:1021:16)13    at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)

Using AI Code Generation

1const { getKeepAliveChild } = require('playwright-core/lib/server/childProcess');2const child = getKeepAliveChild();3console.log(child);4const { getPlaywright } = require('playwright-core/lib/server/childProcess');5const playwright = getPlaywright();6console.log(playwright);

Using AI Code Generation

1const { getKeepAliveChild } = require('playwright/lib/server/processLauncher');2const child = getKeepAliveChild('firefox');3child.on('exit', (code, signal) => {4  console.log('child process exited with ' +5              `code ${code} and signal ${signal}`);6});7child.on('message', (message) => {8  console.log(message);9});10child.send('test message');

Using AI Code Generation

1const playwright = require('playwright');2(async () => {3  const browser = await playwright.chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  const childPage = await context._getKeepAliveChild();7  await browser.close();8})();9const playwright = require('playwright');10(async () => {11  const browser = await playwright.chromium.launch();12  const context = await browser.newContext();13  const page = await context.newPage();14  const childPage = await context._getKeepAliveChild();15  await browser.close();16})();17const playwright = require('playwright');18(async () => {19  const browser = await playwright.chromium.launch();20  const context = await browser.newContext();21  const page = await context.newPage();22  const childPage = await context._getKeepAliveChild();23  await browser.close();24})();25const playwright = require('playwright');26(async () => {27  const browser = await playwright.chromium.launch();28  const context = await browser.newContext();29  const page = await context.newPage();30  const childPage = await context._getKeepAliveChild();31  await browser.close();32})();33const playwright = require('playwright');

Using AI Code Generation

1const { getKeepAliveChild } = require('playwright/lib/server/processLauncher');2(async () => {3  const child = await getKeepAliveChild('chromium');4  console.log(child);5})();6ChildProcess {7  _events: [Object: null prototype] {},8  _handle: Process {9    onexit: [Function (anonymous)],10    [Symbol(owner_symbol)]: [Circular *1]11  },

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.