Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More
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
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
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.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
