How to use updateHOCHostEl method in Playwright Internal

Best JavaScript code snippet using playwright-internal

runtime-dom.global.js

Source:runtime-dom.global.js Github

copy

Full Screen

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

Full Screen

Full Screen

runtime-dom.esm-browser.js

Source:runtime-dom.esm-browser.js Github

copy

Full Screen

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

Full Screen

Full Screen

runtime-core.cjs.js

Source:runtime-core.cjs.js Github

copy

Full Screen

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

Full Screen

Full Screen

runtime-core.esm-bundler.js

Source:runtime-core.esm-bundler.js Github

copy

Full Screen

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

Full Screen

Full Screen

runtime-core.cjs.prod.js

Source:runtime-core.cjs.prod.js Github

copy

Full Screen

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

Full Screen

Full Screen

renderer.js

Source:renderer.js Github

copy

Full Screen

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

Full Screen

Full Screen

2.js

Source:2.js Github

copy

Full Screen

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

Full Screen

Full Screen

componentRenderUtils.js

Source:componentRenderUtils.js Github

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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")

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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])

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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")

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Playwright tutorial

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

Chapters:

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

Run Playwright Internal automation tests on LambdaTest cloud grid

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

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

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

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

Was this article helpful?

Helpful

NotHelpful