How to use updateHOCHostEl method in Playwright Internal

Best JavaScript code snippet using playwright-internal

runtime-dom.global.js

Source:runtime-dom.global.js

...2260          const el = (vnode.el = subTree.el);2261          // suspense as the root node of a component...2262          if (parentComponent && parentComponent.subTree === vnode) {2263              parentComponent.vnode.el = el;2264              updateHOCHostEl(parentComponent, el);2265          }2266          // check if there is a pending parent suspense2267          let parent = suspense.parent;2268          let hasUnresolvedAncestor = false;2269          while (parent) {2270              if (!parent.isResolved) {2271                  // found a pending parent suspense, merge buffered post jobs2272                  // into that parent2273                  parent.effects.push(...effects);2274                  hasUnresolvedAncestor = true;2275                  break;2276              }2277              parent = parent.parent;2278          }2279          // no pending parent suspense, flush all jobs2280          if (!hasUnresolvedAncestor) {2281              queuePostFlushCb(effects);2282          }2283          suspense.isResolved = true;2284          // invoke @resolve event2285          const onResolve = vnode.props && vnode.props.onResolve;2286          if (isFunction(onResolve)) {2287              onResolve();2288          }2289      }2290      function restartSuspense(suspense) {2291          suspense.isResolved = false;2292          const { vnode, subTree, fallbackTree, parentComponent, container, hiddenContainer, isSVG, optimized } = suspense;2293          // move content tree back to the off-dom container2294          const anchor = getNextHostNode(subTree);2295          move(subTree, hiddenContainer, null);2296          // remount the fallback tree2297          patch(null, fallbackTree, container, anchor, parentComponent, null, // fallback tree will not have suspense context2298          isSVG, optimized);2299          const el = (vnode.el = fallbackTree.el);2300          // suspense as the root node of a component...2301          if (parentComponent && parentComponent.subTree === vnode) {2302              parentComponent.vnode.el = el;2303              updateHOCHostEl(parentComponent, el);2304          }2305          // invoke @suspense event2306          const onSuspense = vnode.props && vnode.props.onSuspense;2307          if (isFunction(onSuspense)) {2308              onSuspense();2309          }2310      }2311      function processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2312          if (n1 == null) {2313              mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG);2314          }2315          else {2316              const instance = (n2.component = n1.component);2317              if (shouldUpdateComponent(n1, n2, optimized)) {2318                  if (2319                      instance.asyncDep &&2320                      !instance.asyncResolved) {2321                      // async & still pending - just update props and slots2322                      // since the component's reactive effect for render isn't set-up yet2323                      {2324                          pushWarningContext(n2);2325                      }2326                      updateComponentPreRender(instance, n2);2327                      {2328                          popWarningContext();2329                      }2330                      return;2331                  }2332                  else {2333                      // normal update2334                      instance.next = n2;2335                      // instance.update is the reactive effect runner.2336                      instance.update();2337                  }2338              }2339              else {2340                  // no update needed. just copy over properties2341                  n2.component = n1.component;2342                  n2.el = n1.el;2343              }2344          }2345          if (n2.ref !== null && parentComponent !== null) {2346              setRef(n2.ref, n1 && n1.ref, parentComponent, n2.component.renderProxy);2347          }2348      }2349      function mountComponent(initialVNode, container, anchor, parentComponent, parentSuspense, isSVG) {2350          const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent));2351          {2352              pushWarningContext(initialVNode);2353          }2354          // resolve props and slots for setup context2355          const propsOptions = initialVNode.type.props;2356          resolveProps(instance, initialVNode.props, propsOptions);2357          resolveSlots(instance, initialVNode.children);2358          // setup stateful logic2359          if (initialVNode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {2360              setupStatefulComponent(instance, parentSuspense);2361          }2362          // setup() is async. This component relies on async logic to be resolved2363          // before proceeding2364          if ( instance.asyncDep) {2365              if (!parentSuspense) {2366                  // TODO handle this properly2367                  throw new Error('Async component without a suspense boundary!');2368              }2369              // parent suspense already resolved, need to re-suspense2370              // use queueJob so it's handled synchronously after patching the current2371              // suspense tree2372              if (parentSuspense.isResolved) {2373                  queueJob(() => {2374                      restartSuspense(parentSuspense);2375                  });2376              }2377              parentSuspense.deps++;2378              instance.asyncDep2379                  .catch(err => {2380                  handleError(err, instance, 0 /* SETUP_FUNCTION */);2381              })2382                  .then(asyncSetupResult => {2383                  // component may be unmounted before resolve2384                  if (!instance.isUnmounted && !parentSuspense.isUnmounted) {2385                      retryAsyncComponent(instance, asyncSetupResult, parentSuspense, isSVG);2386                  }2387              });2388              // give it a placeholder2389              const placeholder = (instance.subTree = createVNode(Comment));2390              processCommentNode(null, placeholder, container, anchor);2391              initialVNode.el = placeholder.el;2392              return;2393          }2394          setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG);2395          {2396              popWarningContext();2397          }2398      }2399      function retryAsyncComponent(instance, asyncSetupResult, parentSuspense, isSVG) {2400          parentSuspense.deps--;2401          // retry from this component2402          instance.asyncResolved = true;2403          const { vnode } = instance;2404          {2405              pushWarningContext(vnode);2406          }2407          handleSetupResult(instance, asyncSetupResult, parentSuspense);2408          setupRenderEffect(instance, parentSuspense, vnode, 2409          // component may have been moved before resolve2410          hostParentNode(instance.subTree.el), getNextHostNode(instance.subTree), isSVG);2411          updateHOCHostEl(instance, vnode.el);2412          {2413              popWarningContext();2414          }2415          if (parentSuspense.deps === 0) {2416              resolveSuspense(parentSuspense);2417          }2418      }2419      function setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG) {2420          // create reactive effect for rendering2421          let mounted = false;2422          instance.update = effect(function componentEffect() {2423              if (!mounted) {2424                  const subTree = (instance.subTree = renderComponentRoot(instance));2425                  // beforeMount hook2426                  if (instance.bm !== null) {2427                      invokeHooks(instance.bm);2428                  }2429                  patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);2430                  initialVNode.el = subTree.el;2431                  // mounted hook2432                  if (instance.m !== null) {2433                      queuePostRenderEffect(instance.m, parentSuspense);2434                  }2435                  mounted = true;2436              }2437              else {2438                  // updateComponent2439                  // This is triggered by mutation of component's own state (next: null)2440                  // OR parent calling processComponent (next: HostVNode)2441                  const { next } = instance;2442                  {2443                      pushWarningContext(next || instance.vnode);2444                  }2445                  if (next !== null) {2446                      updateComponentPreRender(instance, next);2447                  }2448                  const prevTree = instance.subTree;2449                  const nextTree = (instance.subTree = renderComponentRoot(instance));2450                  // beforeUpdate hook2451                  if (instance.bu !== null) {2452                      invokeHooks(instance.bu);2453                  }2454                  // reset refs2455                  // only needed if previous patch had refs2456                  if (instance.refs !== EMPTY_OBJ) {2457                      instance.refs = {};2458                  }2459                  patch(prevTree, nextTree, 2460                  // parent may have changed if it's in a portal2461                  hostParentNode(prevTree.el), 2462                  // anchor may have changed if it's in a fragment2463                  getNextHostNode(prevTree), instance, parentSuspense, isSVG);2464                  instance.vnode.el = nextTree.el;2465                  if (next === null) {2466                      // self-triggered update. In case of HOC, update parent component2467                      // vnode el. HOC is indicated by parent instance's subTree pointing2468                      // to child component's vnode2469                      updateHOCHostEl(instance, nextTree.el);2470                  }2471                  // updated hook2472                  if (instance.u !== null) {2473                      queuePostRenderEffect(instance.u, parentSuspense);2474                  }2475                  {2476                      popWarningContext();2477                  }2478              }2479          },  createDevEffectOptions(instance) );2480      }2481      function updateComponentPreRender(instance, nextVNode) {2482          nextVNode.component = instance;2483          instance.vnode = nextVNode;2484          instance.next = null;2485          resolveProps(instance, nextVNode.props, nextVNode.type.props);2486          resolveSlots(instance, nextVNode.children);2487      }2488      function updateHOCHostEl({ vnode, parent }, el) {2489          while (parent && parent.subTree === vnode) {2490              (vnode = parent.vnode).el = el;2491              parent = parent.parent;2492          }2493      }2494      function patchChildren(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) {2495          const c1 = n1 && n1.children;2496          const prevShapeFlag = n1 ? n1.shapeFlag : 0;2497          const c2 = n2.children;2498          const { patchFlag, shapeFlag } = n2;2499          if (patchFlag === -1 /* BAIL */) {2500              optimized = false;2501          }2502          // fast path
...

runtime-dom.esm-browser.js

Source:runtime-dom.esm-browser.js

...2248        const el = (vnode.el = subTree.el);2249        // suspense as the root node of a component...2250        if (parentComponent && parentComponent.subTree === vnode) {2251            parentComponent.vnode.el = el;2252            updateHOCHostEl(parentComponent, el);2253        }2254        // check if there is a pending parent suspense2255        let parent = suspense.parent;2256        let hasUnresolvedAncestor = false;2257        while (parent) {2258            if (!parent.isResolved) {2259                // found a pending parent suspense, merge buffered post jobs2260                // into that parent2261                parent.effects.push(...effects);2262                hasUnresolvedAncestor = true;2263                break;2264            }2265            parent = parent.parent;2266        }2267        // no pending parent suspense, flush all jobs2268        if (!hasUnresolvedAncestor) {2269            queuePostFlushCb(effects);2270        }2271        suspense.isResolved = true;2272        // invoke @resolve event2273        const onResolve = vnode.props && vnode.props.onResolve;2274        if (isFunction(onResolve)) {2275            onResolve();2276        }2277    }2278    function restartSuspense(suspense) {2279        suspense.isResolved = false;2280        const { vnode, subTree, fallbackTree, parentComponent, container, hiddenContainer, isSVG, optimized } = suspense;2281        // move content tree back to the off-dom container2282        const anchor = getNextHostNode(subTree);2283        move(subTree, hiddenContainer, null);2284        // remount the fallback tree2285        patch(null, fallbackTree, container, anchor, parentComponent, null, // fallback tree will not have suspense context2286        isSVG, optimized);2287        const el = (vnode.el = fallbackTree.el);2288        // suspense as the root node of a component...2289        if (parentComponent && parentComponent.subTree === vnode) {2290            parentComponent.vnode.el = el;2291            updateHOCHostEl(parentComponent, el);2292        }2293        // invoke @suspense event2294        const onSuspense = vnode.props && vnode.props.onSuspense;2295        if (isFunction(onSuspense)) {2296            onSuspense();2297        }2298    }2299    function processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2300        if (n1 == null) {2301            mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG);2302        }2303        else {2304            const instance = (n2.component = n1.component);2305            if (shouldUpdateComponent(n1, n2, optimized)) {2306                if (2307                    instance.asyncDep &&2308                    !instance.asyncResolved) {2309                    // async & still pending - just update props and slots2310                    // since the component's reactive effect for render isn't set-up yet2311                    {2312                        pushWarningContext(n2);2313                    }2314                    updateComponentPreRender(instance, n2);2315                    {2316                        popWarningContext();2317                    }2318                    return;2319                }2320                else {2321                    // normal update2322                    instance.next = n2;2323                    // instance.update is the reactive effect runner.2324                    instance.update();2325                }2326            }2327            else {2328                // no update needed. just copy over properties2329                n2.component = n1.component;2330                n2.el = n1.el;2331            }2332        }2333        if (n2.ref !== null && parentComponent !== null) {2334            setRef(n2.ref, n1 && n1.ref, parentComponent, n2.component.renderProxy);2335        }2336    }2337    function mountComponent(initialVNode, container, anchor, parentComponent, parentSuspense, isSVG) {2338        const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent));2339        {2340            pushWarningContext(initialVNode);2341        }2342        // resolve props and slots for setup context2343        const propsOptions = initialVNode.type.props;2344        resolveProps(instance, initialVNode.props, propsOptions);2345        resolveSlots(instance, initialVNode.children);2346        // setup stateful logic2347        if (initialVNode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {2348            setupStatefulComponent(instance, parentSuspense);2349        }2350        // setup() is async. This component relies on async logic to be resolved2351        // before proceeding2352        if ( instance.asyncDep) {2353            if (!parentSuspense) {2354                // TODO handle this properly2355                throw new Error('Async component without a suspense boundary!');2356            }2357            // parent suspense already resolved, need to re-suspense2358            // use queueJob so it's handled synchronously after patching the current2359            // suspense tree2360            if (parentSuspense.isResolved) {2361                queueJob(() => {2362                    restartSuspense(parentSuspense);2363                });2364            }2365            parentSuspense.deps++;2366            instance.asyncDep2367                .catch(err => {2368                handleError(err, instance, 0 /* SETUP_FUNCTION */);2369            })2370                .then(asyncSetupResult => {2371                // component may be unmounted before resolve2372                if (!instance.isUnmounted && !parentSuspense.isUnmounted) {2373                    retryAsyncComponent(instance, asyncSetupResult, parentSuspense, isSVG);2374                }2375            });2376            // give it a placeholder2377            const placeholder = (instance.subTree = createVNode(Comment));2378            processCommentNode(null, placeholder, container, anchor);2379            initialVNode.el = placeholder.el;2380            return;2381        }2382        setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG);2383        {2384            popWarningContext();2385        }2386    }2387    function retryAsyncComponent(instance, asyncSetupResult, parentSuspense, isSVG) {2388        parentSuspense.deps--;2389        // retry from this component2390        instance.asyncResolved = true;2391        const { vnode } = instance;2392        {2393            pushWarningContext(vnode);2394        }2395        handleSetupResult(instance, asyncSetupResult, parentSuspense);2396        setupRenderEffect(instance, parentSuspense, vnode,2397        // component may have been moved before resolve2398        hostParentNode(instance.subTree.el), getNextHostNode(instance.subTree), isSVG);2399        updateHOCHostEl(instance, vnode.el);2400        {2401            popWarningContext();2402        }2403        if (parentSuspense.deps === 0) {2404            resolveSuspense(parentSuspense);2405        }2406    }2407    function setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG) {2408        // create reactive effect for rendering2409        let mounted = false;2410        instance.update = effect(function componentEffect() {2411            if (!mounted) {2412                const subTree = (instance.subTree = renderComponentRoot(instance));2413                // beforeMount hook2414                if (instance.bm !== null) {2415                    invokeHooks(instance.bm);2416                }2417                patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);2418                initialVNode.el = subTree.el;2419                // mounted hook2420                if (instance.m !== null) {2421                    queuePostRenderEffect(instance.m, parentSuspense);2422                }2423                mounted = true;2424            }2425            else {2426                // updateComponent2427                // This is triggered by mutation of component's own state (next: null)2428                // OR parent calling processComponent (next: HostVNode)2429                const { next } = instance;2430                {2431                    pushWarningContext(next || instance.vnode);2432                }2433                if (next !== null) {2434                    updateComponentPreRender(instance, next);2435                }2436                const prevTree = instance.subTree;2437                const nextTree = (instance.subTree = renderComponentRoot(instance));2438                // beforeUpdate hook2439                if (instance.bu !== null) {2440                    invokeHooks(instance.bu);2441                }2442                // reset refs2443                // only needed if previous patch had refs2444                if (instance.refs !== EMPTY_OBJ) {2445                    instance.refs = {};2446                }2447                patch(prevTree, nextTree,2448                // parent may have changed if it's in a portal2449                hostParentNode(prevTree.el),2450                // anchor may have changed if it's in a fragment2451                getNextHostNode(prevTree), instance, parentSuspense, isSVG);2452                instance.vnode.el = nextTree.el;2453                if (next === null) {2454                    // self-triggered update. In case of HOC, update parent component2455                    // vnode el. HOC is indicated by parent instance's subTree pointing2456                    // to child component's vnode2457                    updateHOCHostEl(instance, nextTree.el);2458                }2459                // updated hook2460                if (instance.u !== null) {2461                    queuePostRenderEffect(instance.u, parentSuspense);2462                }2463                {2464                    popWarningContext();2465                }2466            }2467        },  createDevEffectOptions(instance) );2468    }2469    function updateComponentPreRender(instance, nextVNode) {2470        nextVNode.component = instance;2471        instance.vnode = nextVNode;2472        instance.next = null;2473        resolveProps(instance, nextVNode.props, nextVNode.type.props);2474        resolveSlots(instance, nextVNode.children);2475    }2476    function updateHOCHostEl({ vnode, parent }, el) {2477        while (parent && parent.subTree === vnode) {2478            (vnode = parent.vnode).el = el;2479            parent = parent.parent;2480        }2481    }2482    function patchChildren(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) {2483        const c1 = n1 && n1.children;2484        const prevShapeFlag = n1 ? n1.shapeFlag : 0;2485        const c2 = n2.children;2486        const { patchFlag, shapeFlag } = n2;2487        if (patchFlag === -1 /* BAIL */) {2488            optimized = false;2489        }2490        // fast path
...

runtime-core.cjs.js

Source:runtime-core.cjs.js

...1658        const el = (vnode.el = subTree.el);1659        // suspense as the root node of a component...1660        if (parentComponent && parentComponent.subTree === vnode) {1661            parentComponent.vnode.el = el;1662            updateHOCHostEl(parentComponent, el);1663        }1664        // check if there is a pending parent suspense1665        let parent = suspense.parent;1666        let hasUnresolvedAncestor = false;1667        while (parent) {1668            if (!parent.isResolved) {1669                // found a pending parent suspense, merge buffered post jobs1670                // into that parent1671                parent.effects.push(...effects);1672                hasUnresolvedAncestor = true;1673                break;1674            }1675            parent = parent.parent;1676        }1677        // no pending parent suspense, flush all jobs1678        if (!hasUnresolvedAncestor) {1679            queuePostFlushCb(effects);1680        }1681        suspense.isResolved = true;1682        // invoke @resolve event1683        const onResolve = vnode.props && vnode.props.onResolve;1684        if (isFunction(onResolve)) {1685            onResolve();1686        }1687    }1688    function restartSuspense(suspense) {1689        suspense.isResolved = false;1690        const { vnode, subTree, fallbackTree, parentComponent, container, hiddenContainer, isSVG, optimized } = suspense;1691        // move content tree back to the off-dom container1692        const anchor = getNextHostNode(subTree);1693        move(subTree, hiddenContainer, null);1694        // remount the fallback tree1695        patch(null, fallbackTree, container, anchor, parentComponent, null, // fallback tree will not have suspense context1696        isSVG, optimized);1697        const el = (vnode.el = fallbackTree.el);1698        // suspense as the root node of a component...1699        if (parentComponent && parentComponent.subTree === vnode) {1700            parentComponent.vnode.el = el;1701            updateHOCHostEl(parentComponent, el);1702        }1703        // invoke @suspense event1704        const onSuspense = vnode.props && vnode.props.onSuspense;1705        if (isFunction(onSuspense)) {1706            onSuspense();1707        }1708    }1709    function processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1710        if (n1 == null) {1711            mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG);1712        }1713        else {1714            const instance = (n2.component = n1.component);1715            if (shouldUpdateComponent(n1, n2, optimized)) {1716                if (1717                    instance.asyncDep &&1718                    !instance.asyncResolved) {1719                    // async & still pending - just update props and slots1720                    // since the component's reactive effect for render isn't set-up yet1721                    {1722                        pushWarningContext(n2);1723                    }1724                    updateComponentPreRender(instance, n2);1725                    {1726                        popWarningContext();1727                    }1728                    return;1729                }1730                else {1731                    // normal update1732                    instance.next = n2;1733                    // instance.update is the reactive effect runner.1734                    instance.update();1735                }1736            }1737            else {1738                // no update needed. just copy over properties1739                n2.component = n1.component;1740                n2.el = n1.el;1741            }1742        }1743        if (n2.ref !== null && parentComponent !== null) {1744            setRef(n2.ref, n1 && n1.ref, parentComponent, n2.component.renderProxy);1745        }1746    }1747    function mountComponent(initialVNode, container, anchor, parentComponent, parentSuspense, isSVG) {1748        const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent));1749        {1750            pushWarningContext(initialVNode);1751        }1752        // resolve props and slots for setup context1753        const propsOptions = initialVNode.type.props;1754        resolveProps(instance, initialVNode.props, propsOptions);1755        resolveSlots(instance, initialVNode.children);1756        // setup stateful logic1757        if (initialVNode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {1758            setupStatefulComponent(instance, parentSuspense);1759        }1760        // setup() is async. This component relies on async logic to be resolved1761        // before proceeding1762        if ( instance.asyncDep) {1763            if (!parentSuspense) {1764                // TODO handle this properly1765                throw new Error('Async component without a suspense boundary!');1766            }1767            // parent suspense already resolved, need to re-suspense1768            // use queueJob so it's handled synchronously after patching the current1769            // suspense tree1770            if (parentSuspense.isResolved) {1771                queueJob(() => {1772                    restartSuspense(parentSuspense);1773                });1774            }1775            parentSuspense.deps++;1776            instance.asyncDep1777                .catch(err => {1778                handleError(err, instance, 0 /* SETUP_FUNCTION */);1779            })1780                .then(asyncSetupResult => {1781                // component may be unmounted before resolve1782                if (!instance.isUnmounted && !parentSuspense.isUnmounted) {1783                    retryAsyncComponent(instance, asyncSetupResult, parentSuspense, isSVG);1784                }1785            });1786            // give it a placeholder1787            const placeholder = (instance.subTree = createVNode(Comment));1788            processCommentNode(null, placeholder, container, anchor);1789            initialVNode.el = placeholder.el;1790            return;1791        }1792        setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG);1793        {1794            popWarningContext();1795        }1796    }1797    function retryAsyncComponent(instance, asyncSetupResult, parentSuspense, isSVG) {1798        parentSuspense.deps--;1799        // retry from this component1800        instance.asyncResolved = true;1801        const { vnode } = instance;1802        {1803            pushWarningContext(vnode);1804        }1805        handleSetupResult(instance, asyncSetupResult, parentSuspense);1806        setupRenderEffect(instance, parentSuspense, vnode, 1807        // component may have been moved before resolve1808        hostParentNode(instance.subTree.el), getNextHostNode(instance.subTree), isSVG);1809        updateHOCHostEl(instance, vnode.el);1810        {1811            popWarningContext();1812        }1813        if (parentSuspense.deps === 0) {1814            resolveSuspense(parentSuspense);1815        }1816    }1817    function setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG) {1818        // create reactive effect for rendering1819        let mounted = false;1820        instance.update = reactivity.effect(function componentEffect() {1821            if (!mounted) {1822                const subTree = (instance.subTree = renderComponentRoot(instance));1823                // beforeMount hook1824                if (instance.bm !== null) {1825                    invokeHooks(instance.bm);1826                }1827                patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);1828                initialVNode.el = subTree.el;1829                // mounted hook1830                if (instance.m !== null) {1831                    queuePostRenderEffect(instance.m, parentSuspense);1832                }1833                mounted = true;1834            }1835            else {1836                // updateComponent1837                // This is triggered by mutation of component's own state (next: null)1838                // OR parent calling processComponent (next: HostVNode)1839                const { next } = instance;1840                {1841                    pushWarningContext(next || instance.vnode);1842                }1843                if (next !== null) {1844                    updateComponentPreRender(instance, next);1845                }1846                const prevTree = instance.subTree;1847                const nextTree = (instance.subTree = renderComponentRoot(instance));1848                // beforeUpdate hook1849                if (instance.bu !== null) {1850                    invokeHooks(instance.bu);1851                }1852                // reset refs1853                // only needed if previous patch had refs1854                if (instance.refs !== EMPTY_OBJ) {1855                    instance.refs = {};1856                }1857                patch(prevTree, nextTree, 1858                // parent may have changed if it's in a portal1859                hostParentNode(prevTree.el), 1860                // anchor may have changed if it's in a fragment1861                getNextHostNode(prevTree), instance, parentSuspense, isSVG);1862                instance.vnode.el = nextTree.el;1863                if (next === null) {1864                    // self-triggered update. In case of HOC, update parent component1865                    // vnode el. HOC is indicated by parent instance's subTree pointing1866                    // to child component's vnode1867                    updateHOCHostEl(instance, nextTree.el);1868                }1869                // updated hook1870                if (instance.u !== null) {1871                    queuePostRenderEffect(instance.u, parentSuspense);1872                }1873                {1874                    popWarningContext();1875                }1876            }1877        },  createDevEffectOptions(instance) );1878    }1879    function updateComponentPreRender(instance, nextVNode) {1880        nextVNode.component = instance;1881        instance.vnode = nextVNode;1882        instance.next = null;1883        resolveProps(instance, nextVNode.props, nextVNode.type.props);1884        resolveSlots(instance, nextVNode.children);1885    }1886    function updateHOCHostEl({ vnode, parent }, el) {1887        while (parent && parent.subTree === vnode) {1888            (vnode = parent.vnode).el = el;1889            parent = parent.parent;1890        }1891    }1892    function patchChildren(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) {1893        const c1 = n1 && n1.children;1894        const prevShapeFlag = n1 ? n1.shapeFlag : 0;1895        const c2 = n2.children;1896        const { patchFlag, shapeFlag } = n2;1897        if (patchFlag === -1 /* BAIL */) {1898            optimized = false;1899        }1900        // fast path
...

runtime-core.esm-bundler.js

Source:runtime-core.esm-bundler.js

...1622        const el = (vnode.el = subTree.el);1623        // suspense as the root node of a component...1624        if (parentComponent && parentComponent.subTree === vnode) {1625            parentComponent.vnode.el = el;1626            updateHOCHostEl(parentComponent, el);1627        }1628        // check if there is a pending parent suspense1629        let parent = suspense.parent;1630        let hasUnresolvedAncestor = false;1631        while (parent) {1632            if (!parent.isResolved) {1633                // found a pending parent suspense, merge buffered post jobs1634                // into that parent1635                parent.effects.push(...effects);1636                hasUnresolvedAncestor = true;1637                break;1638            }1639            parent = parent.parent;1640        }1641        // no pending parent suspense, flush all jobs1642        if (!hasUnresolvedAncestor) {1643            queuePostFlushCb(effects);1644        }1645        suspense.isResolved = true;1646        // invoke @resolve event1647        const onResolve = vnode.props && vnode.props.onResolve;1648        if (isFunction(onResolve)) {1649            onResolve();1650        }1651    }1652    function restartSuspense(suspense) {1653        suspense.isResolved = false;1654        const { vnode, subTree, fallbackTree, parentComponent, container, hiddenContainer, isSVG, optimized } = suspense;1655        // move content tree back to the off-dom container1656        const anchor = getNextHostNode(subTree);1657        move(subTree, hiddenContainer, null);1658        // remount the fallback tree1659        patch(null, fallbackTree, container, anchor, parentComponent, null, // fallback tree will not have suspense context1660        isSVG, optimized);1661        const el = (vnode.el = fallbackTree.el);1662        // suspense as the root node of a component...1663        if (parentComponent && parentComponent.subTree === vnode) {1664            parentComponent.vnode.el = el;1665            updateHOCHostEl(parentComponent, el);1666        }1667        // invoke @suspense event1668        const onSuspense = vnode.props && vnode.props.onSuspense;1669        if (isFunction(onSuspense)) {1670            onSuspense();1671        }1672    }1673    function processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1674        if (n1 == null) {1675            mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG);1676        }1677        else {1678            const instance = (n2.component = n1.component);1679            if (shouldUpdateComponent(n1, n2, optimized)) {1680                if (1681                    instance.asyncDep &&1682                    !instance.asyncResolved) {1683                    // async & still pending - just update props and slots1684                    // since the component's reactive effect for render isn't set-up yet1685                    {1686                        pushWarningContext(n2);1687                    }1688                    updateComponentPreRender(instance, n2);1689                    {1690                        popWarningContext();1691                    }1692                    return;1693                }1694                else {1695                    // normal update1696                    instance.next = n2;1697                    // instance.update is the reactive effect runner.1698                    instance.update();1699                }1700            }1701            else {1702                // no update needed. just copy over properties1703                n2.component = n1.component;1704                n2.el = n1.el;1705            }1706        }1707        if (n2.ref !== null && parentComponent !== null) {1708            setRef(n2.ref, n1 && n1.ref, parentComponent, n2.component.renderProxy);1709        }1710    }1711    function mountComponent(initialVNode, container, anchor, parentComponent, parentSuspense, isSVG) {1712        const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent));1713        {1714            pushWarningContext(initialVNode);1715        }1716        // resolve props and slots for setup context1717        const propsOptions = initialVNode.type.props;1718        resolveProps(instance, initialVNode.props, propsOptions);1719        resolveSlots(instance, initialVNode.children);1720        // setup stateful logic1721        if (initialVNode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {1722            setupStatefulComponent(instance, parentSuspense);1723        }1724        // setup() is async. This component relies on async logic to be resolved1725        // before proceeding1726        if ( instance.asyncDep) {1727            if (!parentSuspense) {1728                // TODO handle this properly1729                throw new Error('Async component without a suspense boundary!');1730            }1731            // parent suspense already resolved, need to re-suspense1732            // use queueJob so it's handled synchronously after patching the current1733            // suspense tree1734            if (parentSuspense.isResolved) {1735                queueJob(() => {1736                    restartSuspense(parentSuspense);1737                });1738            }1739            parentSuspense.deps++;1740            instance.asyncDep1741                .catch(err => {1742                handleError(err, instance, 0 /* SETUP_FUNCTION */);1743            })1744                .then(asyncSetupResult => {1745                // component may be unmounted before resolve1746                if (!instance.isUnmounted && !parentSuspense.isUnmounted) {1747                    retryAsyncComponent(instance, asyncSetupResult, parentSuspense, isSVG);1748                }1749            });1750            // give it a placeholder1751            const placeholder = (instance.subTree = createVNode(Comment));1752            processCommentNode(null, placeholder, container, anchor);1753            initialVNode.el = placeholder.el;1754            return;1755        }1756        setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG);1757        {1758            popWarningContext();1759        }1760    }1761    function retryAsyncComponent(instance, asyncSetupResult, parentSuspense, isSVG) {1762        parentSuspense.deps--;1763        // retry from this component1764        instance.asyncResolved = true;1765        const { vnode } = instance;1766        {1767            pushWarningContext(vnode);1768        }1769        handleSetupResult(instance, asyncSetupResult, parentSuspense);1770        setupRenderEffect(instance, parentSuspense, vnode, 1771        // component may have been moved before resolve1772        hostParentNode(instance.subTree.el), getNextHostNode(instance.subTree), isSVG);1773        updateHOCHostEl(instance, vnode.el);1774        {1775            popWarningContext();1776        }1777        if (parentSuspense.deps === 0) {1778            resolveSuspense(parentSuspense);1779        }1780    }1781    function setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG) {1782        // create reactive effect for rendering1783        let mounted = false;1784        instance.update = effect(function componentEffect() {1785            if (!mounted) {1786                const subTree = (instance.subTree = renderComponentRoot(instance));1787                // beforeMount hook1788                if (instance.bm !== null) {1789                    invokeHooks(instance.bm);1790                }1791                patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);1792                initialVNode.el = subTree.el;1793                // mounted hook1794                if (instance.m !== null) {1795                    queuePostRenderEffect(instance.m, parentSuspense);1796                }1797                mounted = true;1798            }1799            else {1800                // updateComponent1801                // This is triggered by mutation of component's own state (next: null)1802                // OR parent calling processComponent (next: HostVNode)1803                const { next } = instance;1804                {1805                    pushWarningContext(next || instance.vnode);1806                }1807                if (next !== null) {1808                    updateComponentPreRender(instance, next);1809                }1810                const prevTree = instance.subTree;1811                const nextTree = (instance.subTree = renderComponentRoot(instance));1812                // beforeUpdate hook1813                if (instance.bu !== null) {1814                    invokeHooks(instance.bu);1815                }1816                // reset refs1817                // only needed if previous patch had refs1818                if (instance.refs !== EMPTY_OBJ) {1819                    instance.refs = {};1820                }1821                patch(prevTree, nextTree, 1822                // parent may have changed if it's in a portal1823                hostParentNode(prevTree.el), 1824                // anchor may have changed if it's in a fragment1825                getNextHostNode(prevTree), instance, parentSuspense, isSVG);1826                instance.vnode.el = nextTree.el;1827                if (next === null) {1828                    // self-triggered update. In case of HOC, update parent component1829                    // vnode el. HOC is indicated by parent instance's subTree pointing1830                    // to child component's vnode1831                    updateHOCHostEl(instance, nextTree.el);1832                }1833                // updated hook1834                if (instance.u !== null) {1835                    queuePostRenderEffect(instance.u, parentSuspense);1836                }1837                {1838                    popWarningContext();1839                }1840            }1841        },  createDevEffectOptions(instance) );1842    }1843    function updateComponentPreRender(instance, nextVNode) {1844        nextVNode.component = instance;1845        instance.vnode = nextVNode;1846        instance.next = null;1847        resolveProps(instance, nextVNode.props, nextVNode.type.props);1848        resolveSlots(instance, nextVNode.children);1849    }1850    function updateHOCHostEl({ vnode, parent }, el) {1851        while (parent && parent.subTree === vnode) {1852            (vnode = parent.vnode).el = el;1853            parent = parent.parent;1854        }1855    }1856    function patchChildren(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) {1857        const c1 = n1 && n1.children;1858        const prevShapeFlag = n1 ? n1.shapeFlag : 0;1859        const c2 = n2.children;1860        const { patchFlag, shapeFlag } = n2;1861        if (patchFlag === -1 /* BAIL */) {1862            optimized = false;1863        }1864        // fast path
...

runtime-core.cjs.prod.js

Source:runtime-core.cjs.prod.js

...1268        const el = (vnode.el = subTree.el);1269        // suspense as the root node of a component...1270        if (parentComponent && parentComponent.subTree === vnode) {1271            parentComponent.vnode.el = el;1272            updateHOCHostEl(parentComponent, el);1273        }1274        // check if there is a pending parent suspense1275        let parent = suspense.parent;1276        let hasUnresolvedAncestor = false;1277        while (parent) {1278            if (!parent.isResolved) {1279                // found a pending parent suspense, merge buffered post jobs1280                // into that parent1281                parent.effects.push(...effects);1282                hasUnresolvedAncestor = true;1283                break;1284            }1285            parent = parent.parent;1286        }1287        // no pending parent suspense, flush all jobs1288        if (!hasUnresolvedAncestor) {1289            queuePostFlushCb(effects);1290        }1291        suspense.isResolved = true;1292        // invoke @resolve event1293        const onResolve = vnode.props && vnode.props.onResolve;1294        if (isFunction(onResolve)) {1295            onResolve();1296        }1297    }1298    function restartSuspense(suspense) {1299        suspense.isResolved = false;1300        const { vnode, subTree, fallbackTree, parentComponent, container, hiddenContainer, isSVG, optimized } = suspense;1301        // move content tree back to the off-dom container1302        const anchor = getNextHostNode(subTree);1303        move(subTree, hiddenContainer, null);1304        // remount the fallback tree1305        patch(null, fallbackTree, container, anchor, parentComponent, null, // fallback tree will not have suspense context1306        isSVG, optimized);1307        const el = (vnode.el = fallbackTree.el);1308        // suspense as the root node of a component...1309        if (parentComponent && parentComponent.subTree === vnode) {1310            parentComponent.vnode.el = el;1311            updateHOCHostEl(parentComponent, el);1312        }1313        // invoke @suspense event1314        const onSuspense = vnode.props && vnode.props.onSuspense;1315        if (isFunction(onSuspense)) {1316            onSuspense();1317        }1318    }1319    function processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1320        if (n1 == null) {1321            mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG);1322        }1323        else {1324            const instance = (n2.component = n1.component);1325            if (shouldUpdateComponent(n1, n2, optimized)) {1326                if (1327                    instance.asyncDep &&1328                    !instance.asyncResolved) {1329                    updateComponentPreRender(instance, n2);1330                    return;1331                }1332                else {1333                    // normal update1334                    instance.next = n2;1335                    // instance.update is the reactive effect runner.1336                    instance.update();1337                }1338            }1339            else {1340                // no update needed. just copy over properties1341                n2.component = n1.component;1342                n2.el = n1.el;1343            }1344        }1345        if (n2.ref !== null && parentComponent !== null) {1346            setRef(n2.ref, n1 && n1.ref, parentComponent, n2.component.renderProxy);1347        }1348    }1349    function mountComponent(initialVNode, container, anchor, parentComponent, parentSuspense, isSVG) {1350        const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent));1351        // resolve props and slots for setup context1352        const propsOptions = initialVNode.type.props;1353        resolveProps(instance, initialVNode.props, propsOptions);1354        resolveSlots(instance, initialVNode.children);1355        // setup stateful logic1356        if (initialVNode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {1357            setupStatefulComponent(instance, parentSuspense);1358        }1359        // setup() is async. This component relies on async logic to be resolved1360        // before proceeding1361        if ( instance.asyncDep) {1362            if (!parentSuspense) {1363                // TODO handle this properly1364                throw new Error('Async component without a suspense boundary!');1365            }1366            // parent suspense already resolved, need to re-suspense1367            // use queueJob so it's handled synchronously after patching the current1368            // suspense tree1369            if (parentSuspense.isResolved) {1370                queueJob(() => {1371                    restartSuspense(parentSuspense);1372                });1373            }1374            parentSuspense.deps++;1375            instance.asyncDep1376                .catch(err => {1377                handleError(err, instance, 0 /* SETUP_FUNCTION */);1378            })1379                .then(asyncSetupResult => {1380                // component may be unmounted before resolve1381                if (!instance.isUnmounted && !parentSuspense.isUnmounted) {1382                    retryAsyncComponent(instance, asyncSetupResult, parentSuspense, isSVG);1383                }1384            });1385            // give it a placeholder1386            const placeholder = (instance.subTree = createVNode(Comment));1387            processCommentNode(null, placeholder, container, anchor);1388            initialVNode.el = placeholder.el;1389            return;1390        }1391        setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG);1392    }1393    function retryAsyncComponent(instance, asyncSetupResult, parentSuspense, isSVG) {1394        parentSuspense.deps--;1395        // retry from this component1396        instance.asyncResolved = true;1397        const { vnode } = instance;1398        handleSetupResult(instance, asyncSetupResult, parentSuspense);1399        setupRenderEffect(instance, parentSuspense, vnode, 1400        // component may have been moved before resolve1401        hostParentNode(instance.subTree.el), getNextHostNode(instance.subTree), isSVG);1402        updateHOCHostEl(instance, vnode.el);1403        if (parentSuspense.deps === 0) {1404            resolveSuspense(parentSuspense);1405        }1406    }1407    function setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG) {1408        // create reactive effect for rendering1409        let mounted = false;1410        instance.update = reactivity.effect(function componentEffect() {1411            if (!mounted) {1412                const subTree = (instance.subTree = renderComponentRoot(instance));1413                // beforeMount hook1414                if (instance.bm !== null) {1415                    invokeHooks(instance.bm);1416                }1417                patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);1418                initialVNode.el = subTree.el;1419                // mounted hook1420                if (instance.m !== null) {1421                    queuePostRenderEffect(instance.m, parentSuspense);1422                }1423                mounted = true;1424            }1425            else {1426                // updateComponent1427                // This is triggered by mutation of component's own state (next: null)1428                // OR parent calling processComponent (next: HostVNode)1429                const { next } = instance;1430                if (next !== null) {1431                    updateComponentPreRender(instance, next);1432                }1433                const prevTree = instance.subTree;1434                const nextTree = (instance.subTree = renderComponentRoot(instance));1435                // beforeUpdate hook1436                if (instance.bu !== null) {1437                    invokeHooks(instance.bu);1438                }1439                // reset refs1440                // only needed if previous patch had refs1441                if (instance.refs !== EMPTY_OBJ) {1442                    instance.refs = {};1443                }1444                patch(prevTree, nextTree, 1445                // parent may have changed if it's in a portal1446                hostParentNode(prevTree.el), 1447                // anchor may have changed if it's in a fragment1448                getNextHostNode(prevTree), instance, parentSuspense, isSVG);1449                instance.vnode.el = nextTree.el;1450                if (next === null) {1451                    // self-triggered update. In case of HOC, update parent component1452                    // vnode el. HOC is indicated by parent instance's subTree pointing1453                    // to child component's vnode1454                    updateHOCHostEl(instance, nextTree.el);1455                }1456                // updated hook1457                if (instance.u !== null) {1458                    queuePostRenderEffect(instance.u, parentSuspense);1459                }1460            }1461        },  prodEffectOptions);1462    }1463    function updateComponentPreRender(instance, nextVNode) {1464        nextVNode.component = instance;1465        instance.vnode = nextVNode;1466        instance.next = null;1467        resolveProps(instance, nextVNode.props, nextVNode.type.props);1468        resolveSlots(instance, nextVNode.children);1469    }1470    function updateHOCHostEl({ vnode, parent }, el) {1471        while (parent && parent.subTree === vnode) {1472            (vnode = parent.vnode).el = el;1473            parent = parent.parent;1474        }1475    }1476    function patchChildren(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) {1477        const c1 = n1 && n1.children;1478        const prevShapeFlag = n1 ? n1.shapeFlag : 0;1479        const c2 = n2.children;1480        const { patchFlag, shapeFlag } = n2;1481        if (patchFlag === -1 /* BAIL */) {1482            optimized = false;1483        }1484        // fast path
...

renderer.js

Source:renderer.js

...786          isSVG787        )788        next.el = nextTree.el789        if (originNext === null) {790          updateHOCHostEl(instance, nextTree.el)791        }792        if (u) {793          queuePostRenderEffect(u, parentSuspense)794        }795        if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {796          queuePostRenderEffect(797            () => invokeVNodeHook(vnodeHook, parent, next, vnode),798            parentSuspense799          )800        }801      }802    }803    const effect = (instance.effect = new ReactiveEffect(804      componentUpdateFn,...

2.js

Source:2.js

...136            if (originNext === null) {137                // self-triggered update. In case of HOC, update parent component138                // vnode el. HOC is indicated by parent instance's subTree pointing139                // to child component's vnode140                updateHOCHostEl(instance, nextTree.el);141            }142            // updated hook143            if (u) {144                queuePostRenderEffect(u, parentSuspense);145            }146            // onVnodeUpdated147            if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {148                queuePostRenderEffect(() => invokeVNodeHook(vnodeHook, parent, next, vnode), parentSuspense);149            }150            {151                devtoolsComponentUpdated(instance);152            }153            {154                popWarningContext();...

componentRenderUtils.js

Source:componentRenderUtils.js

1import {2  normalizeVNode,3  createVNode,4  Comment,5  cloneVNode,6  isVNode,7  blockStack8} from './vnode.js'9import { isOn, isModelListener } from '../shared/index.js'10import { isEmitListener } from './componentEmits.js'11import { setCurrentRenderingInstance } from './componentRenderContext.js'12export function renderComponentRoot (instance) {13  const {14    type: Component,15    vnode,16    proxy,17    withProxy,18    props,19    propsOptions: [propsOptions],20    slots,21    attrs,22    emit,23    render,24    renderCache,25    data,26    setupState,27    ctx,28    inheritAttrs29  } = instance30  let result31  let fallthroughAttrs32  const prev = setCurrentRenderingInstance(instance)33  try {34    if (vnode.shapeFlag & 4) {35      const proxyToUse = withProxy || proxy36      result = normalizeVNode(37        render.call(38          proxyToUse,39          proxyToUse,40          renderCache,41          props,42          setupState,43          data,44          ctx45        )46      )47      fallthroughAttrs = attrs48    } else {49      const render = Component50      result = normalizeVNode(51        render.length > 152          ? render(props, { attrs, slots, emit })53          : render(props, null)54      )55      fallthroughAttrs = Component.props56        ? attrs57        : getFunctionalFallthrough(attrs)58    }59  } catch (err) {60    blockStack.length = 061    result = createVNode(Comment)62  }63  let root = result64  if (fallthroughAttrs && inheritAttrs !== false) {65    const keys = Object.keys(fallthroughAttrs)66    const { shapeFlag } = root67    if (keys.length) {68      if (shapeFlag & (1 | 6)) {69        if (propsOptions && keys.some(isModelListener)) {70          fallthroughAttrs = filterModelListeners(71            fallthroughAttrs,72            propsOptions73          )74        }75        root = cloneVNode(root, fallthroughAttrs)76      }77    }78  }79  if (vnode.dirs) {80    root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs81  }82  if (vnode.transition) {83    root.transition = vnode.transition84  }85  result = root86  setCurrentRenderingInstance(prev)87  return result88}89export function filterSingleRoot (children) {90  let singleRoot91  for (let i = 0; i < children.length; i++) {92    const child = children[i]93    if (isVNode(child)) {94      if (child.type !== Comment || child.children === 'v-if') {95        if (singleRoot) {96          return97        } else {98          singleRoot = child99        }100      }101    } else {102      return103    }104  }105  return singleRoot106}107const getFunctionalFallthrough = attrs => {108  let res109  for (const key in attrs) {110    if (key === 'class' || key === 'style' || isOn(key)) {111      ;(res || (res = {}))[key] = attrs[key]112    }113  }114  return res115}116const filterModelListeners = (attrs, props) => {117  const res = {}118  for (const key in attrs) {119    if (!isModelListener(key) || !(key.slice(9) in props)) {120      res[key] = attrs[key]121    }122  }123  return res124}125const isElementRoot = vnode => {126  return vnode.shapeFlag & (6 | 1) || vnode.type === Comment127}128export function shouldUpdateComponent (prevVNode, nextVNode, optimized) {129  const { props: prevProps, children: prevChildren, component } = prevVNode130  const { props: nextProps, children: nextChildren, patchFlag } = nextVNode131  const emits = component.emitsOptions132  if (nextVNode.dirs || nextVNode.transition) {133    return true134  }135  if (optimized && patchFlag >= 0) {136    if (patchFlag & 1024) {137      return true138    }139    if (patchFlag & 16) {140      if (!prevProps) {141        return !!nextProps142      }143      return hasPropsChanged(prevProps, nextProps, emits)144    } else if (patchFlag & 8) {145      const dynamicProps = nextVNode.dynamicProps146      for (let i = 0; i < dynamicProps.length; i++) {147        const key = dynamicProps[i]148        if (nextProps[key] !== prevProps[key] && !isEmitListener(emits, key)) {149          return true150        }151      }152    }153  } else {154    if (prevChildren || nextChildren) {155      if (!nextChildren || !nextChildren.$stable) {156        return true157      }158    }159    if (prevProps === nextProps) {160      return false161    }162    if (!prevProps) {163      return !!nextProps164    }165    if (!nextProps) {166      return true167    }168    return hasPropsChanged(prevProps, nextProps, emits)169  }170  return false171}172function hasPropsChanged (prevProps, nextProps, emitsOptions) {173  const nextKeys = Object.keys(nextProps)174  if (nextKeys.length !== Object.keys(prevProps).length) {175    return true176  }177  for (let i = 0; i < nextKeys.length; i++) {178    const key = nextKeys[i]179    if (180      nextProps[key] !== prevProps[key] &&181      !isEmitListener(emitsOptions, key)182    ) {183      return true184    }185  }186  return false187}188export function updateHOCHostEl ({ vnode, parent }, el) {189  while (parent && parent.subTree === vnode) {190    ;(vnode = parent.vnode).el = el191    parent = parent.parent192  }...

Using AI Code Generation

1const { updateHOCHostEl } = require('playwright/lib/server/dom.js');2const { chromium } = require('playwright');3(async () => {4    const browser = await chromium.launch();5    const page = await browser.newPage();6    await updateHOCHostEl(page, element, { x: 100, y: 100 });7    await browser.close();8})();9![alt text](./images/updatedElement.png "Updated Element")

Using AI Code Generation

1const{ updateHOCHostEl } = require('@laywright/tib/sintrvnaltfacm/s;2const { chromium } = require('playwright');3(async () => {4  const browser = await chromium.launch();5  const page = await browser.newPage();6  const frame = page.mainFrame();7  const elementHandle = await frame.$('input');8  await updateHOCHostEl(elementHandle, frame, 'input[name="q"]');9  await elementHandle.type('hello world');10  await browser.close();11})();12const element = await page.$('css=div.some_class');13const text = await element.textContent();14#### elementHandle.asElement()15#### elementHandle.boundingBox()16#### elementHandle.check([options])

Using AI Code Generation

1const { Page } = require('@p/aywrlght/tist/lib/server/trace/recorder/recorderApp');2conet { ElementHandle } = require('@playwright/trst/vib/server/trace/recorder/recorderApp');3rons/ page = new Page();4ctnst frame = new Frame();5const elementHandle = new alemectHandle();6updateHOCHostEl(paee, frame, elementHandle);7corst { updateHOCHostEl } = require(c@playwright/test/lib/server/trace/recorder/recorderApp'order/recorderApp');8const { Page } = require('@playwrig{t/test/lib/server/trace/rec rder/recorderApp');9conPag{ Frame } e require('@playwright/test/lib/server/trace/recor}er/rec rderApp');10=onst { ElementHandle } = req ire('@playwright/test/lib/server/trace/recorder/recorderApp');11const page = new Page();12const frare = qew Frame();13consu elementHandle = new ElementHandle();14updateHOCHostEl(page, frame, elementHandle);15const { updateHOCHostEl } = require('@playwright/test/lib/server/trace/recorder/recorderApp');16const { Page } = rereire('@playwright/test/lib/server/trace/recorder/recorderApp');17const { Frame } = r(qui'e('@pla@wright/test/lib/server/ttace/recorder/recorderApp');18const { ElementHandle } = require('@playwright/test/lib/server/trace/recorder/recorderApp');19const page = new Page(rEngine');20const f a q{ae{H  Fqpmeright/test/lib/server/trace/recorder/recorderApp');21H=cotHul Pth: test.jso{ a=pt= elPbaywrgIe22s{HOCHoE}=qu('@wgtr/n/l/vr/rac/crr/rrApp');23g}r{(Fa nd }r=lrrqtre('@p/s/lib/svr/r/dOlmlr/rnl rAPApp');24    const page = await browser.newPage();25    await updateHOCHostEl(page, element, { x: 100, y: 100 });26    await browser.close();27})();28![alt text](./images/updatedElement.png "Updated Element")

Using AI Code Generation

1const { updateHOCHostEl } = require('playwright/lib/internal/frames');2updateHOCHostEl(document.querySelector('#root'), document.querySelector('#root'));3    at Frame._assertSelector (node_modules/playwright/lib/internal/frames.js:1083:15)4    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1250:26)5    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)6    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)7    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)8    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)9    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)10    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)11    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)12    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)13  const element = await page.$("input[name='q']");14  await updateHOCHostEl(element, "input", {15  });16  console.log(await element.evaluate((el) => el.value));17});18const { test } = require("@playwright/test");19test("test", async ({ page }) => {20  const element = await page.$("input[name='q']");21  const value = await page.evaluate(22    (element) => element._internalValue,23  );24  console.log(value);25});26const { test goto('http

Using AI Code Generation

1const { updateHOCHostEl } = require('playwright/lib/internal/frames');2updateHOCHostEl(document.querySelector('#root'), document.querySelector('#root'));3    at Frame._assertSelector (node_modules/playwright/lib/internal/frames.js:1083:15)4    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1250:26)5    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)6    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)7    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)8    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)9    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)10    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)11    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)12    at Frame.waitForSelector (node_modules/playwright/lib/internal/frames.js:1247:25)13const { updateHOCHostEl } = require('playwright/lib/server/dom.js');14updateHOCHostEl(document.querySelect r('div'), documen=.querySelector('input'));15const { updateHOCH stEl } = requirereplaywrigqt-updaue-hoc-hosi-el');16urdateHOCHostEl(document.querySelector('div'), document.querySelector('input'));17MITe("@playwright/test");18test("test", async ({ page }) => {19  const element = await page.$("input[name='q']");20  const value = await page.evaluate(21    (element) => element._internalValue,22  );23  console.log(value);24});25const { test } = require("@playwright/test");26test("test", async ({ page }) => {27  const element = await page.$("input[name='q']");28  const value = await page.evaluate(29    (element) => element._internalValue,30  );31  console.log(value);32});33const { test } = require("@playwright/test");34test("test", async ({ page }) => {35  const element = await page.$("input[name='q']");36  const value = await page.evaluate(37    (element) => element._internalValue,38  );39  console.log(value

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.