KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
How to use getRemainingWorkInPrimaryTree method in Playwright Internal
Best JavaScript code snippet using playwright-internal
ReactFiberBeginWork.new.js
Source:ReactFiberBeginWork.new.js 
...1569 suspenseContext,1570 (ForceSuspenseFallback: SuspenseContext),1571 );1572}1573function getRemainingWorkInPrimaryTree(1574 current: Fiber,1575 workInProgress: Fiber,1576 renderExpirationTime,1577) {1578 const currentChildExpirationTime = current.childExpirationTime;1579 const currentSuspenseState: SuspenseState = current.memoizedState;1580 if (currentSuspenseState !== null) {1581 // This boundary already timed out. Check if this render includes the level1582 // that previously suspended.1583 const baseTime = currentSuspenseState.baseTime;1584 if (baseTime !== NoWork && baseTime < renderExpirationTime) {1585 // There's pending work at a lower level that might now be unblocked.1586 return baseTime;1587 }1588 }1589 if (currentChildExpirationTime < renderExpirationTime) {1590 // The highest priority remaining work is not part of this render. So the1591 // remaining work has not changed.1592 return currentChildExpirationTime;1593 }1594 if ((workInProgress.mode & BlockingMode) !== NoMode) {1595 // The highest priority remaining work is part of this render. Since we only1596 // keep track of the highest level, we don't know if there's a lower1597 // priority level scheduled. As a compromise, we'll render at the lowest1598 // known level in the entire tree, since that will include everything.1599 // TODO: If expirationTime were a bitmask where each bit represents a1600 // separate task thread, this would be: currentChildBits & ~renderBits1601 const root = getWorkInProgressRoot();1602 if (root !== null) {1603 const lastPendingTime = root.lastPendingTime;1604 if (lastPendingTime < renderExpirationTime) {1605 return lastPendingTime;1606 }1607 }1608 }1609 // In legacy mode, there's no work left.1610 return NoWork;1611}1612function updateSuspenseComponent(1613 current,1614 workInProgress,1615 renderExpirationTime,1616) {1617 const mode = workInProgress.mode;1618 const nextProps = workInProgress.pendingProps;1619 // This is used by DevTools to force a boundary to suspend.1620 if (__DEV__) {1621 if (shouldSuspend(workInProgress)) {1622 workInProgress.effectTag |= DidCapture;1623 }1624 }1625 let suspenseContext: SuspenseContext = suspenseStackCursor.current;1626 let nextDidTimeout = false;1627 const didSuspend = (workInProgress.effectTag & DidCapture) !== NoEffect;1628 if (1629 didSuspend ||1630 shouldRemainOnFallback(1631 suspenseContext,1632 current,1633 workInProgress,1634 renderExpirationTime,1635 )1636 ) {1637 // Something in this boundary's subtree already suspended. Switch to1638 // rendering the fallback children.1639 nextDidTimeout = true;1640 workInProgress.effectTag &= ~DidCapture;1641 } else {1642 // Attempting the main content1643 if (1644 current === null ||1645 (current.memoizedState: null | SuspenseState) !== null1646 ) {1647 // This is a new mount or this boundary is already showing a fallback state.1648 // Mark this subtree context as having at least one invisible parent that could1649 // handle the fallback state.1650 // Boundaries without fallbacks or should be avoided are not considered since1651 // they cannot handle preferred fallback states.1652 if (1653 nextProps.fallback !== undefined &&1654 nextProps.unstable_avoidThisFallback !== true1655 ) {1656 suspenseContext = addSubtreeSuspenseContext(1657 suspenseContext,1658 InvisibleParentSuspenseContext,1659 );1660 }1661 }1662 }1663 suspenseContext = setDefaultShallowSuspenseContext(suspenseContext);1664 pushSuspenseContext(workInProgress, suspenseContext);1665 // This next part is a bit confusing. If the children timeout, we switch to1666 // showing the fallback children in place of the "primary" children.1667 // However, we don't want to delete the primary children because then their1668 // state will be lost (both the React state and the host state, e.g.1669 // uncontrolled form inputs). Instead we keep them mounted and hide them.1670 // Both the fallback children AND the primary children are rendered at the1671 // same time. Once the primary children are un-suspended, we can delete1672 // the fallback children â don't need to preserve their state.1673 //1674 // The two sets of children are siblings in the host environment, but1675 // semantically, for purposes of reconciliation, they are two separate sets.1676 // So we store them using two fragment fibers.1677 //1678 // However, we want to avoid allocating extra fibers for every placeholder.1679 // They're only necessary when the children time out, because that's the1680 // only time when both sets are mounted.1681 //1682 // So, the extra fragment fibers are only used if the children time out.1683 // Otherwise, we render the primary children directly. This requires some1684 // custom reconciliation logic to preserve the state of the primary1685 // children. It's essentially a very basic form of re-parenting.1686 if (current === null) {1687 // If we're currently hydrating, try to hydrate this boundary.1688 // But only if this has a fallback.1689 if (nextProps.fallback !== undefined) {1690 tryToClaimNextHydratableInstance(workInProgress);1691 // This could've been a dehydrated suspense component.1692 if (enableSuspenseServerRenderer) {1693 const suspenseState: null | SuspenseState =1694 workInProgress.memoizedState;1695 if (suspenseState !== null) {1696 const dehydrated = suspenseState.dehydrated;1697 if (dehydrated !== null) {1698 return mountDehydratedSuspenseComponent(1699 workInProgress,1700 dehydrated,1701 renderExpirationTime,1702 );1703 }1704 }1705 }1706 }1707 // This is the initial mount. This branch is pretty simple because there's1708 // no previous state that needs to be preserved.1709 if (nextDidTimeout) {1710 // Mount separate fragments for primary and fallback children.1711 const nextFallbackChildren = nextProps.fallback;1712 const primaryChildFragment = createFiberFromFragment(1713 null,1714 mode,1715 NoWork,1716 null,1717 );1718 primaryChildFragment.return = workInProgress;1719 if ((workInProgress.mode & BlockingMode) === NoMode) {1720 // Outside of blocking mode, we commit the effects from the1721 // partially completed, timed-out tree, too.1722 const progressedState: SuspenseState = workInProgress.memoizedState;1723 const progressedPrimaryChild: Fiber | null =1724 progressedState !== null1725 ? (workInProgress.child: any).child1726 : (workInProgress.child: any);1727 primaryChildFragment.child = progressedPrimaryChild;1728 let progressedChild = progressedPrimaryChild;1729 while (progressedChild !== null) {1730 progressedChild.return = primaryChildFragment;1731 progressedChild = progressedChild.sibling;1732 }1733 }1734 const fallbackChildFragment = createFiberFromFragment(1735 nextFallbackChildren,1736 mode,1737 renderExpirationTime,1738 null,1739 );1740 fallbackChildFragment.return = workInProgress;1741 primaryChildFragment.sibling = fallbackChildFragment;1742 // Skip the primary children, and continue working on the1743 // fallback children.1744 workInProgress.memoizedState = mountSuspenseState(renderExpirationTime);1745 workInProgress.child = primaryChildFragment;1746 return fallbackChildFragment;1747 } else {1748 // Mount the primary children without an intermediate fragment fiber.1749 const nextPrimaryChildren = nextProps.children;1750 workInProgress.memoizedState = null;1751 return (workInProgress.child = mountChildFibers(1752 workInProgress,1753 null,1754 nextPrimaryChildren,1755 renderExpirationTime,1756 ));1757 }1758 } else {1759 // This is an update. This branch is more complicated because we need to1760 // ensure the state of the primary children is preserved.1761 const prevState: null | SuspenseState = current.memoizedState;1762 if (prevState !== null) {1763 if (enableSuspenseServerRenderer) {1764 const dehydrated = prevState.dehydrated;1765 if (dehydrated !== null) {1766 if (!didSuspend) {1767 return updateDehydratedSuspenseComponent(1768 current,1769 workInProgress,1770 dehydrated,1771 prevState,1772 renderExpirationTime,1773 );1774 } else if (1775 (workInProgress.memoizedState: null | SuspenseState) !== null1776 ) {1777 // Something suspended and we should still be in dehydrated mode.1778 // Leave the existing child in place.1779 workInProgress.child = current.child;1780 // The dehydrated completion pass expects this flag to be there1781 // but the normal suspense pass doesn't.1782 workInProgress.effectTag |= DidCapture;1783 return null;1784 } else {1785 // Suspended but we should no longer be in dehydrated mode.1786 // Therefore we now have to render the fallback. Wrap the children1787 // in a fragment fiber to keep them separate from the fallback1788 // children.1789 const nextFallbackChildren = nextProps.fallback;1790 const primaryChildFragment = createFiberFromFragment(1791 // It shouldn't matter what the pending props are because we aren't1792 // going to render this fragment.1793 null,1794 mode,1795 NoWork,1796 null,1797 );1798 primaryChildFragment.return = workInProgress;1799 // This is always null since we never want the previous child1800 // that we're not going to hydrate.1801 primaryChildFragment.child = null;1802 if ((workInProgress.mode & BlockingMode) === NoMode) {1803 // Outside of blocking mode, we commit the effects from the1804 // partially completed, timed-out tree, too.1805 let progressedChild = (primaryChildFragment.child =1806 workInProgress.child);1807 while (progressedChild !== null) {1808 progressedChild.return = primaryChildFragment;1809 progressedChild = progressedChild.sibling;1810 }1811 } else {1812 // We will have dropped the effect list which contains the deletion.1813 // We need to reconcile to delete the current child.1814 reconcileChildFibers(1815 workInProgress,1816 current.child,1817 null,1818 renderExpirationTime,1819 );1820 }1821 // Because primaryChildFragment is a new fiber that we're inserting as the1822 // parent of a new tree, we need to set its treeBaseDuration.1823 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {1824 // treeBaseDuration is the sum of all the child tree base durations.1825 let treeBaseDuration = 0;1826 let hiddenChild = primaryChildFragment.child;1827 while (hiddenChild !== null) {1828 treeBaseDuration += hiddenChild.treeBaseDuration;1829 hiddenChild = hiddenChild.sibling;1830 }1831 primaryChildFragment.treeBaseDuration = treeBaseDuration;1832 }1833 // Create a fragment from the fallback children, too.1834 const fallbackChildFragment = createFiberFromFragment(1835 nextFallbackChildren,1836 mode,1837 renderExpirationTime,1838 null,1839 );1840 fallbackChildFragment.return = workInProgress;1841 primaryChildFragment.sibling = fallbackChildFragment;1842 fallbackChildFragment.effectTag |= Placement;1843 primaryChildFragment.childExpirationTime = getRemainingWorkInPrimaryTree(1844 current,1845 workInProgress,1846 renderExpirationTime,1847 );1848 workInProgress.memoizedState = updateSuspenseState(1849 current.memoizedState,1850 renderExpirationTime,1851 );1852 workInProgress.child = primaryChildFragment;1853 // Skip the primary children, and continue working on the1854 // fallback children.1855 return fallbackChildFragment;1856 }1857 }1858 }1859 // The current tree already timed out. That means each child set is1860 // wrapped in a fragment fiber.1861 const currentPrimaryChildFragment: Fiber = (current.child: any);1862 const currentFallbackChildFragment: Fiber = (currentPrimaryChildFragment.sibling: any);1863 if (nextDidTimeout) {1864 // Still timed out. Reuse the current primary children by cloning1865 // its fragment. We're going to skip over these entirely.1866 const nextFallbackChildren = nextProps.fallback;1867 const primaryChildFragment = createWorkInProgress(1868 currentPrimaryChildFragment,1869 currentPrimaryChildFragment.pendingProps,1870 );1871 primaryChildFragment.return = workInProgress;1872 if ((workInProgress.mode & BlockingMode) === NoMode) {1873 // Outside of blocking mode, we commit the effects from the1874 // partially completed, timed-out tree, too.1875 const progressedState: SuspenseState = workInProgress.memoizedState;1876 const progressedPrimaryChild: Fiber | null =1877 progressedState !== null1878 ? (workInProgress.child: any).child1879 : (workInProgress.child: any);1880 if (progressedPrimaryChild !== currentPrimaryChildFragment.child) {1881 primaryChildFragment.child = progressedPrimaryChild;1882 let progressedChild = progressedPrimaryChild;1883 while (progressedChild !== null) {1884 progressedChild.return = primaryChildFragment;1885 progressedChild = progressedChild.sibling;1886 }1887 }1888 }1889 // Because primaryChildFragment is a new fiber that we're inserting as the1890 // parent of a new tree, we need to set its treeBaseDuration.1891 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {1892 // treeBaseDuration is the sum of all the child tree base durations.1893 let treeBaseDuration = 0;1894 let hiddenChild = primaryChildFragment.child;1895 while (hiddenChild !== null) {1896 treeBaseDuration += hiddenChild.treeBaseDuration;1897 hiddenChild = hiddenChild.sibling;1898 }1899 primaryChildFragment.treeBaseDuration = treeBaseDuration;1900 }1901 // Clone the fallback child fragment, too. These we'll continue1902 // working on.1903 const fallbackChildFragment = createWorkInProgress(1904 currentFallbackChildFragment,1905 nextFallbackChildren,1906 );1907 fallbackChildFragment.return = workInProgress;1908 primaryChildFragment.sibling = fallbackChildFragment;1909 primaryChildFragment.childExpirationTime = getRemainingWorkInPrimaryTree(1910 current,1911 workInProgress,1912 renderExpirationTime,1913 );1914 // Skip the primary children, and continue working on the1915 // fallback children.1916 workInProgress.memoizedState = updateSuspenseState(1917 current.memoizedState,1918 renderExpirationTime,1919 );1920 workInProgress.child = primaryChildFragment;1921 return fallbackChildFragment;1922 } else {1923 // No longer suspended. Switch back to showing the primary children,1924 // and remove the intermediate fragment fiber.1925 const nextPrimaryChildren = nextProps.children;1926 const currentPrimaryChild = currentPrimaryChildFragment.child;1927 const primaryChild = reconcileChildFibers(1928 workInProgress,1929 currentPrimaryChild,1930 nextPrimaryChildren,1931 renderExpirationTime,1932 );1933 // If this render doesn't suspend, we need to delete the fallback1934 // children. Wait until the complete phase, after we've confirmed the1935 // fallback is no longer needed.1936 // TODO: Would it be better to store the fallback fragment on1937 // the stateNode?1938 // Continue rendering the children, like we normally do.1939 workInProgress.memoizedState = null;1940 return (workInProgress.child = primaryChild);1941 }1942 } else {1943 // The current tree has not already timed out. That means the primary1944 // children are not wrapped in a fragment fiber.1945 const currentPrimaryChild = current.child;1946 if (nextDidTimeout) {1947 // Timed out. Wrap the children in a fragment fiber to keep them1948 // separate from the fallback children.1949 const nextFallbackChildren = nextProps.fallback;1950 const primaryChildFragment = createFiberFromFragment(1951 // It shouldn't matter what the pending props are because we aren't1952 // going to render this fragment.1953 null,1954 mode,1955 NoWork,1956 null,1957 );1958 primaryChildFragment.return = workInProgress;1959 primaryChildFragment.child = currentPrimaryChild;1960 if (currentPrimaryChild !== null) {1961 currentPrimaryChild.return = primaryChildFragment;1962 }1963 // Even though we're creating a new fiber, there are no new children,1964 // because we're reusing an already mounted tree. So we don't need to1965 // schedule a placement.1966 // primaryChildFragment.effectTag |= Placement;1967 if ((workInProgress.mode & BlockingMode) === NoMode) {1968 // Outside of blocking mode, we commit the effects from the1969 // partially completed, timed-out tree, too.1970 const progressedState: SuspenseState = workInProgress.memoizedState;1971 const progressedPrimaryChild: Fiber | null =1972 progressedState !== null1973 ? (workInProgress.child: any).child1974 : (workInProgress.child: any);1975 primaryChildFragment.child = progressedPrimaryChild;1976 let progressedChild = progressedPrimaryChild;1977 while (progressedChild !== null) {1978 progressedChild.return = primaryChildFragment;1979 progressedChild = progressedChild.sibling;1980 }1981 }1982 // Because primaryChildFragment is a new fiber that we're inserting as the1983 // parent of a new tree, we need to set its treeBaseDuration.1984 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {1985 // treeBaseDuration is the sum of all the child tree base durations.1986 let treeBaseDuration = 0;1987 let hiddenChild = primaryChildFragment.child;1988 while (hiddenChild !== null) {1989 treeBaseDuration += hiddenChild.treeBaseDuration;1990 hiddenChild = hiddenChild.sibling;1991 }1992 primaryChildFragment.treeBaseDuration = treeBaseDuration;1993 }1994 // Create a fragment from the fallback children, too.1995 const fallbackChildFragment = createFiberFromFragment(1996 nextFallbackChildren,1997 mode,1998 renderExpirationTime,1999 null,2000 );2001 fallbackChildFragment.return = workInProgress;2002 primaryChildFragment.sibling = fallbackChildFragment;2003 fallbackChildFragment.effectTag |= Placement;2004 primaryChildFragment.childExpirationTime = getRemainingWorkInPrimaryTree(2005 current,2006 workInProgress,2007 renderExpirationTime,2008 );2009 // Skip the primary children, and continue working on the2010 // fallback children.2011 workInProgress.memoizedState = mountSuspenseState(renderExpirationTime);2012 workInProgress.child = primaryChildFragment;2013 return fallbackChildFragment;2014 } else {2015 // Still haven't timed out. Continue rendering the children, like we2016 // normally do.2017 workInProgress.memoizedState = null;2018 const nextPrimaryChildren = nextProps.children;...
ReactFiberBeginWork.old.js
Source:ReactFiberBeginWork.old.js
...1569 suspenseContext,1570 (ForceSuspenseFallback: SuspenseContext),1571 );1572}1573function getRemainingWorkInPrimaryTree(1574 current: Fiber,1575 workInProgress: Fiber,1576 renderExpirationTime,1577) {1578 const currentChildExpirationTime = current.childExpirationTime;1579 const currentSuspenseState: SuspenseState = current.memoizedState;1580 if (currentSuspenseState !== null) {1581 // This boundary already timed out. Check if this render includes the level1582 // that previously suspended.1583 const baseTime = currentSuspenseState.baseTime;1584 if (baseTime !== NoWork && baseTime < renderExpirationTime) {1585 // There's pending work at a lower level that might now be unblocked.1586 return baseTime;1587 }1588 }1589 if (currentChildExpirationTime < renderExpirationTime) {1590 // The highest priority remaining work is not part of this render. So the1591 // remaining work has not changed.1592 return currentChildExpirationTime;1593 }1594 if ((workInProgress.mode & BlockingMode) !== NoMode) {1595 // The highest priority remaining work is part of this render. Since we only1596 // keep track of the highest level, we don't know if there's a lower1597 // priority level scheduled. As a compromise, we'll render at the lowest1598 // known level in the entire tree, since that will include everything.1599 // TODO: If expirationTime were a bitmask where each bit represents a1600 // separate task thread, this would be: currentChildBits & ~renderBits1601 const root = getWorkInProgressRoot();1602 if (root !== null) {1603 const lastPendingTime = root.lastPendingTime;1604 if (lastPendingTime < renderExpirationTime) {1605 return lastPendingTime;1606 }1607 }1608 }1609 // In legacy mode, there's no work left.1610 return NoWork;1611}1612function updateSuspenseComponent(1613 current,1614 workInProgress,1615 renderExpirationTime,1616) {1617 const mode = workInProgress.mode;1618 const nextProps = workInProgress.pendingProps;1619 // This is used by DevTools to force a boundary to suspend.1620 if (__DEV__) {1621 if (shouldSuspend(workInProgress)) {1622 workInProgress.effectTag |= DidCapture;1623 }1624 }1625 let suspenseContext: SuspenseContext = suspenseStackCursor.current;1626 let nextDidTimeout = false;1627 const didSuspend = (workInProgress.effectTag & DidCapture) !== NoEffect;1628 if (1629 didSuspend ||1630 shouldRemainOnFallback(1631 suspenseContext,1632 current,1633 workInProgress,1634 renderExpirationTime,1635 )1636 ) {1637 // Something in this boundary's subtree already suspended. Switch to1638 // rendering the fallback children.1639 nextDidTimeout = true;1640 workInProgress.effectTag &= ~DidCapture;1641 } else {1642 // Attempting the main content1643 if (1644 current === null ||1645 (current.memoizedState: null | SuspenseState) !== null1646 ) {1647 // This is a new mount or this boundary is already showing a fallback state.1648 // Mark this subtree context as having at least one invisible parent that could1649 // handle the fallback state.1650 // Boundaries without fallbacks or should be avoided are not considered since1651 // they cannot handle preferred fallback states.1652 if (1653 nextProps.fallback !== undefined &&1654 nextProps.unstable_avoidThisFallback !== true1655 ) {1656 suspenseContext = addSubtreeSuspenseContext(1657 suspenseContext,1658 InvisibleParentSuspenseContext,1659 );1660 }1661 }1662 }1663 suspenseContext = setDefaultShallowSuspenseContext(suspenseContext);1664 pushSuspenseContext(workInProgress, suspenseContext);1665 // This next part is a bit confusing. If the children timeout, we switch to1666 // showing the fallback children in place of the "primary" children.1667 // However, we don't want to delete the primary children because then their1668 // state will be lost (both the React state and the host state, e.g.1669 // uncontrolled form inputs). Instead we keep them mounted and hide them.1670 // Both the fallback children AND the primary children are rendered at the1671 // same time. Once the primary children are un-suspended, we can delete1672 // the fallback children â don't need to preserve their state.1673 //1674 // The two sets of children are siblings in the host environment, but1675 // semantically, for purposes of reconciliation, they are two separate sets.1676 // So we store them using two fragment fibers.1677 //1678 // However, we want to avoid allocating extra fibers for every placeholder.1679 // They're only necessary when the children time out, because that's the1680 // only time when both sets are mounted.1681 //1682 // So, the extra fragment fibers are only used if the children time out.1683 // Otherwise, we render the primary children directly. This requires some1684 // custom reconciliation logic to preserve the state of the primary1685 // children. It's essentially a very basic form of re-parenting.1686 if (current === null) {1687 // If we're currently hydrating, try to hydrate this boundary.1688 // But only if this has a fallback.1689 if (nextProps.fallback !== undefined) {1690 tryToClaimNextHydratableInstance(workInProgress);1691 // This could've been a dehydrated suspense component.1692 if (enableSuspenseServerRenderer) {1693 const suspenseState: null | SuspenseState =1694 workInProgress.memoizedState;1695 if (suspenseState !== null) {1696 const dehydrated = suspenseState.dehydrated;1697 if (dehydrated !== null) {1698 return mountDehydratedSuspenseComponent(1699 workInProgress,1700 dehydrated,1701 renderExpirationTime,1702 );1703 }1704 }1705 }1706 }1707 // This is the initial mount. This branch is pretty simple because there's1708 // no previous state that needs to be preserved.1709 if (nextDidTimeout) {1710 // Mount separate fragments for primary and fallback children.1711 const nextFallbackChildren = nextProps.fallback;1712 const primaryChildFragment = createFiberFromFragment(1713 null,1714 mode,1715 NoWork,1716 null,1717 );1718 primaryChildFragment.return = workInProgress;1719 if ((workInProgress.mode & BlockingMode) === NoMode) {1720 // Outside of blocking mode, we commit the effects from the1721 // partially completed, timed-out tree, too.1722 const progressedState: SuspenseState = workInProgress.memoizedState;1723 const progressedPrimaryChild: Fiber | null =1724 progressedState !== null1725 ? (workInProgress.child: any).child1726 : (workInProgress.child: any);1727 primaryChildFragment.child = progressedPrimaryChild;1728 let progressedChild = progressedPrimaryChild;1729 while (progressedChild !== null) {1730 progressedChild.return = primaryChildFragment;1731 progressedChild = progressedChild.sibling;1732 }1733 }1734 const fallbackChildFragment = createFiberFromFragment(1735 nextFallbackChildren,1736 mode,1737 renderExpirationTime,1738 null,1739 );1740 fallbackChildFragment.return = workInProgress;1741 primaryChildFragment.sibling = fallbackChildFragment;1742 // Skip the primary children, and continue working on the1743 // fallback children.1744 workInProgress.memoizedState = mountSuspenseState(renderExpirationTime);1745 workInProgress.child = primaryChildFragment;1746 return fallbackChildFragment;1747 } else {1748 // Mount the primary children without an intermediate fragment fiber.1749 const nextPrimaryChildren = nextProps.children;1750 workInProgress.memoizedState = null;1751 return (workInProgress.child = mountChildFibers(1752 workInProgress,1753 null,1754 nextPrimaryChildren,1755 renderExpirationTime,1756 ));1757 }1758 } else {1759 // This is an update. This branch is more complicated because we need to1760 // ensure the state of the primary children is preserved.1761 const prevState: null | SuspenseState = current.memoizedState;1762 if (prevState !== null) {1763 if (enableSuspenseServerRenderer) {1764 const dehydrated = prevState.dehydrated;1765 if (dehydrated !== null) {1766 if (!didSuspend) {1767 return updateDehydratedSuspenseComponent(1768 current,1769 workInProgress,1770 dehydrated,1771 prevState,1772 renderExpirationTime,1773 );1774 } else if (1775 (workInProgress.memoizedState: null | SuspenseState) !== null1776 ) {1777 // Something suspended and we should still be in dehydrated mode.1778 // Leave the existing child in place.1779 workInProgress.child = current.child;1780 // The dehydrated completion pass expects this flag to be there1781 // but the normal suspense pass doesn't.1782 workInProgress.effectTag |= DidCapture;1783 return null;1784 } else {1785 // Suspended but we should no longer be in dehydrated mode.1786 // Therefore we now have to render the fallback. Wrap the children1787 // in a fragment fiber to keep them separate from the fallback1788 // children.1789 const nextFallbackChildren = nextProps.fallback;1790 const primaryChildFragment = createFiberFromFragment(1791 // It shouldn't matter what the pending props are because we aren't1792 // going to render this fragment.1793 null,1794 mode,1795 NoWork,1796 null,1797 );1798 primaryChildFragment.return = workInProgress;1799 // This is always null since we never want the previous child1800 // that we're not going to hydrate.1801 primaryChildFragment.child = null;1802 if ((workInProgress.mode & BlockingMode) === NoMode) {1803 // Outside of blocking mode, we commit the effects from the1804 // partially completed, timed-out tree, too.1805 let progressedChild = (primaryChildFragment.child =1806 workInProgress.child);1807 while (progressedChild !== null) {1808 progressedChild.return = primaryChildFragment;1809 progressedChild = progressedChild.sibling;1810 }1811 } else {1812 // We will have dropped the effect list which contains the deletion.1813 // We need to reconcile to delete the current child.1814 reconcileChildFibers(1815 workInProgress,1816 current.child,1817 null,1818 renderExpirationTime,1819 );1820 }1821 // Because primaryChildFragment is a new fiber that we're inserting as the1822 // parent of a new tree, we need to set its treeBaseDuration.1823 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {1824 // treeBaseDuration is the sum of all the child tree base durations.1825 let treeBaseDuration = 0;1826 let hiddenChild = primaryChildFragment.child;1827 while (hiddenChild !== null) {1828 treeBaseDuration += hiddenChild.treeBaseDuration;1829 hiddenChild = hiddenChild.sibling;1830 }1831 primaryChildFragment.treeBaseDuration = treeBaseDuration;1832 }1833 // Create a fragment from the fallback children, too.1834 const fallbackChildFragment = createFiberFromFragment(1835 nextFallbackChildren,1836 mode,1837 renderExpirationTime,1838 null,1839 );1840 fallbackChildFragment.return = workInProgress;1841 primaryChildFragment.sibling = fallbackChildFragment;1842 fallbackChildFragment.effectTag |= Placement;1843 primaryChildFragment.childExpirationTime = getRemainingWorkInPrimaryTree(1844 current,1845 workInProgress,1846 renderExpirationTime,1847 );1848 workInProgress.memoizedState = updateSuspenseState(1849 current.memoizedState,1850 renderExpirationTime,1851 );1852 workInProgress.child = primaryChildFragment;1853 // Skip the primary children, and continue working on the1854 // fallback children.1855 return fallbackChildFragment;1856 }1857 }1858 }1859 // The current tree already timed out. That means each child set is1860 // wrapped in a fragment fiber.1861 const currentPrimaryChildFragment: Fiber = (current.child: any);1862 const currentFallbackChildFragment: Fiber = (currentPrimaryChildFragment.sibling: any);1863 if (nextDidTimeout) {1864 // Still timed out. Reuse the current primary children by cloning1865 // its fragment. We're going to skip over these entirely.1866 const nextFallbackChildren = nextProps.fallback;1867 const primaryChildFragment = createWorkInProgress(1868 currentPrimaryChildFragment,1869 currentPrimaryChildFragment.pendingProps,1870 );1871 primaryChildFragment.return = workInProgress;1872 if ((workInProgress.mode & BlockingMode) === NoMode) {1873 // Outside of blocking mode, we commit the effects from the1874 // partially completed, timed-out tree, too.1875 const progressedState: SuspenseState = workInProgress.memoizedState;1876 const progressedPrimaryChild: Fiber | null =1877 progressedState !== null1878 ? (workInProgress.child: any).child1879 : (workInProgress.child: any);1880 if (progressedPrimaryChild !== currentPrimaryChildFragment.child) {1881 primaryChildFragment.child = progressedPrimaryChild;1882 let progressedChild = progressedPrimaryChild;1883 while (progressedChild !== null) {1884 progressedChild.return = primaryChildFragment;1885 progressedChild = progressedChild.sibling;1886 }1887 }1888 }1889 // Because primaryChildFragment is a new fiber that we're inserting as the1890 // parent of a new tree, we need to set its treeBaseDuration.1891 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {1892 // treeBaseDuration is the sum of all the child tree base durations.1893 let treeBaseDuration = 0;1894 let hiddenChild = primaryChildFragment.child;1895 while (hiddenChild !== null) {1896 treeBaseDuration += hiddenChild.treeBaseDuration;1897 hiddenChild = hiddenChild.sibling;1898 }1899 primaryChildFragment.treeBaseDuration = treeBaseDuration;1900 }1901 // Clone the fallback child fragment, too. These we'll continue1902 // working on.1903 const fallbackChildFragment = createWorkInProgress(1904 currentFallbackChildFragment,1905 nextFallbackChildren,1906 );1907 fallbackChildFragment.return = workInProgress;1908 primaryChildFragment.sibling = fallbackChildFragment;1909 primaryChildFragment.childExpirationTime = getRemainingWorkInPrimaryTree(1910 current,1911 workInProgress,1912 renderExpirationTime,1913 );1914 // Skip the primary children, and continue working on the1915 // fallback children.1916 workInProgress.memoizedState = updateSuspenseState(1917 current.memoizedState,1918 renderExpirationTime,1919 );1920 workInProgress.child = primaryChildFragment;1921 return fallbackChildFragment;1922 } else {1923 // No longer suspended. Switch back to showing the primary children,1924 // and remove the intermediate fragment fiber.1925 const nextPrimaryChildren = nextProps.children;1926 const currentPrimaryChild = currentPrimaryChildFragment.child;1927 const primaryChild = reconcileChildFibers(1928 workInProgress,1929 currentPrimaryChild,1930 nextPrimaryChildren,1931 renderExpirationTime,1932 );1933 // If this render doesn't suspend, we need to delete the fallback1934 // children. Wait until the complete phase, after we've confirmed the1935 // fallback is no longer needed.1936 // TODO: Would it be better to store the fallback fragment on1937 // the stateNode?1938 // Continue rendering the children, like we normally do.1939 workInProgress.memoizedState = null;1940 return (workInProgress.child = primaryChild);1941 }1942 } else {1943 // The current tree has not already timed out. That means the primary1944 // children are not wrapped in a fragment fiber.1945 const currentPrimaryChild = current.child;1946 if (nextDidTimeout) {1947 // Timed out. Wrap the children in a fragment fiber to keep them1948 // separate from the fallback children.1949 const nextFallbackChildren = nextProps.fallback;1950 const primaryChildFragment = createFiberFromFragment(1951 // It shouldn't matter what the pending props are because we aren't1952 // going to render this fragment.1953 null,1954 mode,1955 NoWork,1956 null,1957 );1958 primaryChildFragment.return = workInProgress;1959 primaryChildFragment.child = currentPrimaryChild;1960 if (currentPrimaryChild !== null) {1961 currentPrimaryChild.return = primaryChildFragment;1962 }1963 // Even though we're creating a new fiber, there are no new children,1964 // because we're reusing an already mounted tree. So we don't need to1965 // schedule a placement.1966 // primaryChildFragment.effectTag |= Placement;1967 if ((workInProgress.mode & BlockingMode) === NoMode) {1968 // Outside of blocking mode, we commit the effects from the1969 // partially completed, timed-out tree, too.1970 const progressedState: SuspenseState = workInProgress.memoizedState;1971 const progressedPrimaryChild: Fiber | null =1972 progressedState !== null1973 ? (workInProgress.child: any).child1974 : (workInProgress.child: any);1975 primaryChildFragment.child = progressedPrimaryChild;1976 let progressedChild = progressedPrimaryChild;1977 while (progressedChild !== null) {1978 progressedChild.return = primaryChildFragment;1979 progressedChild = progressedChild.sibling;1980 }1981 }1982 // Because primaryChildFragment is a new fiber that we're inserting as the1983 // parent of a new tree, we need to set its treeBaseDuration.1984 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {1985 // treeBaseDuration is the sum of all the child tree base durations.1986 let treeBaseDuration = 0;1987 let hiddenChild = primaryChildFragment.child;1988 while (hiddenChild !== null) {1989 treeBaseDuration += hiddenChild.treeBaseDuration;1990 hiddenChild = hiddenChild.sibling;1991 }1992 primaryChildFragment.treeBaseDuration = treeBaseDuration;1993 }1994 // Create a fragment from the fallback children, too.1995 const fallbackChildFragment = createFiberFromFragment(1996 nextFallbackChildren,1997 mode,1998 renderExpirationTime,1999 null,2000 );2001 fallbackChildFragment.return = workInProgress;2002 primaryChildFragment.sibling = fallbackChildFragment;2003 fallbackChildFragment.effectTag |= Placement;2004 primaryChildFragment.childExpirationTime = getRemainingWorkInPrimaryTree(2005 current,2006 workInProgress,2007 renderExpirationTime,2008 );2009 // Skip the primary children, and continue working on the2010 // fallback children.2011 workInProgress.memoizedState = mountSuspenseState(renderExpirationTime);2012 workInProgress.child = primaryChildFragment;2013 return fallbackChildFragment;2014 } else {2015 // Still haven't timed out. Continue rendering the children, like we2016 // normally do.2017 workInProgress.memoizedState = null;2018 const nextPrimaryChildren = nextProps.children;...
ReactFiberBeginWork.js
Source:ReactFiberBeginWork.js
...1543 suspenseContext,1544 (ForceSuspenseFallback: SuspenseContext),1545 );1546}1547function getRemainingWorkInPrimaryTree(1548 current: Fiber,1549 workInProgress: Fiber,1550 renderExpirationTime,1551) {1552 const currentChildExpirationTime = current.childExpirationTime;1553 const currentSuspenseState: SuspenseState = current.memoizedState;1554 if (currentSuspenseState !== null) {1555 // This boundary already timed out. Check if this render includes the level1556 // that previously suspended.1557 const baseTime = currentSuspenseState.baseTime;1558 if (1559 baseTime !== NoWork &&1560 baseTime < renderExpirationTime &&1561 baseTime > currentChildExpirationTime1562 ) {1563 // There's pending work at a lower level that might now be unblocked.1564 return baseTime;1565 }1566 }1567 if (currentChildExpirationTime < renderExpirationTime) {1568 // The highest priority remaining work is not part of this render. So the1569 // remaining work has not changed.1570 return currentChildExpirationTime;1571 }1572 if ((workInProgress.mode & BlockingMode) !== NoMode) {1573 // The highest priority remaining work is part of this render. Since we only1574 // keep track of the highest level, we don't know if there's a lower1575 // priority level scheduled. As a compromise, we'll render at the lowest1576 // known level in the entire tree, since that will include everything.1577 // TODO: If expirationTime were a bitmask where each bit represents a1578 // separate task thread, this would be: currentChildBits & ~renderBits1579 const root = getWorkInProgressRoot();1580 if (root !== null) {1581 const lastPendingTime = root.lastPendingTime;1582 if (lastPendingTime < renderExpirationTime) {1583 return lastPendingTime;1584 }1585 }1586 }1587 // In legacy mode, there's no work left.1588 return NoWork;1589}1590function updateSuspenseComponent(1591 current,1592 workInProgress,1593 renderExpirationTime,1594) {1595 const mode = workInProgress.mode;1596 const nextProps = workInProgress.pendingProps;1597 // This is used by DevTools to force a boundary to suspend.1598 if (__DEV__) {1599 if (shouldSuspend(workInProgress)) {1600 workInProgress.effectTag |= DidCapture;1601 }1602 }1603 let suspenseContext: SuspenseContext = suspenseStackCursor.current;1604 let nextDidTimeout = false;1605 const didSuspend = (workInProgress.effectTag & DidCapture) !== NoEffect;1606 if (1607 didSuspend ||1608 shouldRemainOnFallback(1609 suspenseContext,1610 current,1611 workInProgress,1612 renderExpirationTime,1613 )1614 ) {1615 // Something in this boundary's subtree already suspended. Switch to1616 // rendering the fallback children.1617 nextDidTimeout = true;1618 workInProgress.effectTag &= ~DidCapture;1619 } else {1620 // Attempting the main content1621 if (1622 current === null ||1623 (current.memoizedState: null | SuspenseState) !== null1624 ) {1625 // This is a new mount or this boundary is already showing a fallback state.1626 // Mark this subtree context as having at least one invisible parent that could1627 // handle the fallback state.1628 // Boundaries without fallbacks or should be avoided are not considered since1629 // they cannot handle preferred fallback states.1630 if (1631 nextProps.fallback !== undefined &&1632 nextProps.unstable_avoidThisFallback !== true1633 ) {1634 suspenseContext = addSubtreeSuspenseContext(1635 suspenseContext,1636 InvisibleParentSuspenseContext,1637 );1638 }1639 }1640 }1641 suspenseContext = setDefaultShallowSuspenseContext(suspenseContext);1642 pushSuspenseContext(workInProgress, suspenseContext);1643 // This next part is a bit confusing. If the children timeout, we switch to1644 // showing the fallback children in place of the "primary" children.1645 // However, we don't want to delete the primary children because then their1646 // state will be lost (both the React state and the host state, e.g.1647 // uncontrolled form inputs). Instead we keep them mounted and hide them.1648 // Both the fallback children AND the primary children are rendered at the1649 // same time. Once the primary children are un-suspended, we can delete1650 // the fallback children â don't need to preserve their state.1651 //1652 // The two sets of children are siblings in the host environment, but1653 // semantically, for purposes of reconciliation, they are two separate sets.1654 // So we store them using two fragment fibers.1655 //1656 // However, we want to avoid allocating extra fibers for every placeholder.1657 // They're only necessary when the children time out, because that's the1658 // only time when both sets are mounted.1659 //1660 // So, the extra fragment fibers are only used if the children time out.1661 // Otherwise, we render the primary children directly. This requires some1662 // custom reconciliation logic to preserve the state of the primary1663 // children. It's essentially a very basic form of re-parenting.1664 if (current === null) {1665 // If we're currently hydrating, try to hydrate this boundary.1666 // But only if this has a fallback.1667 if (nextProps.fallback !== undefined) {1668 tryToClaimNextHydratableInstance(workInProgress);1669 // This could've been a dehydrated suspense component.1670 if (enableSuspenseServerRenderer) {1671 const suspenseState: null | SuspenseState =1672 workInProgress.memoizedState;1673 if (suspenseState !== null) {1674 const dehydrated = suspenseState.dehydrated;1675 if (dehydrated !== null) {1676 return mountDehydratedSuspenseComponent(1677 workInProgress,1678 dehydrated,1679 renderExpirationTime,1680 );1681 }1682 }1683 }1684 }1685 // This is the initial mount. This branch is pretty simple because there's1686 // no previous state that needs to be preserved.1687 if (nextDidTimeout) {1688 // Mount separate fragments for primary and fallback children.1689 const nextFallbackChildren = nextProps.fallback;1690 const primaryChildFragment = createFiberFromFragment(1691 null,1692 mode,1693 NoWork,1694 null,1695 );1696 primaryChildFragment.return = workInProgress;1697 if ((workInProgress.mode & BlockingMode) === NoMode) {1698 // Outside of blocking mode, we commit the effects from the1699 // partially completed, timed-out tree, too.1700 const progressedState: SuspenseState = workInProgress.memoizedState;1701 const progressedPrimaryChild: Fiber | null =1702 progressedState !== null1703 ? (workInProgress.child: any).child1704 : (workInProgress.child: any);1705 primaryChildFragment.child = progressedPrimaryChild;1706 let progressedChild = progressedPrimaryChild;1707 while (progressedChild !== null) {1708 progressedChild.return = primaryChildFragment;1709 progressedChild = progressedChild.sibling;1710 }1711 }1712 const fallbackChildFragment = createFiberFromFragment(1713 nextFallbackChildren,1714 mode,1715 renderExpirationTime,1716 null,1717 );1718 fallbackChildFragment.return = workInProgress;1719 primaryChildFragment.sibling = fallbackChildFragment;1720 // Skip the primary children, and continue working on the1721 // fallback children.1722 workInProgress.memoizedState = mountSuspenseState(renderExpirationTime);1723 workInProgress.child = primaryChildFragment;1724 return fallbackChildFragment;1725 } else {1726 // Mount the primary children without an intermediate fragment fiber.1727 const nextPrimaryChildren = nextProps.children;1728 workInProgress.memoizedState = null;1729 return (workInProgress.child = mountChildFibers(1730 workInProgress,1731 null,1732 nextPrimaryChildren,1733 renderExpirationTime,1734 ));1735 }1736 } else {1737 // This is an update. This branch is more complicated because we need to1738 // ensure the state of the primary children is preserved.1739 const prevState: null | SuspenseState = current.memoizedState;1740 if (prevState !== null) {1741 if (enableSuspenseServerRenderer) {1742 const dehydrated = prevState.dehydrated;1743 if (dehydrated !== null) {1744 if (!didSuspend) {1745 return updateDehydratedSuspenseComponent(1746 current,1747 workInProgress,1748 dehydrated,1749 prevState,1750 renderExpirationTime,1751 );1752 } else if (1753 (workInProgress.memoizedState: null | SuspenseState) !== null1754 ) {1755 // Something suspended and we should still be in dehydrated mode.1756 // Leave the existing child in place.1757 workInProgress.child = current.child;1758 // The dehydrated completion pass expects this flag to be there1759 // but the normal suspense pass doesn't.1760 workInProgress.effectTag |= DidCapture;1761 return null;1762 } else {1763 // Suspended but we should no longer be in dehydrated mode.1764 // Therefore we now have to render the fallback. Wrap the children1765 // in a fragment fiber to keep them separate from the fallback1766 // children.1767 const nextFallbackChildren = nextProps.fallback;1768 const primaryChildFragment = createFiberFromFragment(1769 // It shouldn't matter what the pending props are because we aren't1770 // going to render this fragment.1771 null,1772 mode,1773 NoWork,1774 null,1775 );1776 primaryChildFragment.return = workInProgress;1777 // This is always null since we never want the previous child1778 // that we're not going to hydrate.1779 primaryChildFragment.child = null;1780 if ((workInProgress.mode & BlockingMode) === NoMode) {1781 // Outside of blocking mode, we commit the effects from the1782 // partially completed, timed-out tree, too.1783 let progressedChild = (primaryChildFragment.child =1784 workInProgress.child);1785 while (progressedChild !== null) {1786 progressedChild.return = primaryChildFragment;1787 progressedChild = progressedChild.sibling;1788 }1789 } else {1790 // We will have dropped the effect list which contains the deletion.1791 // We need to reconcile to delete the current child.1792 reconcileChildFibers(1793 workInProgress,1794 current.child,1795 null,1796 renderExpirationTime,1797 );1798 }1799 // Because primaryChildFragment is a new fiber that we're inserting as the1800 // parent of a new tree, we need to set its treeBaseDuration.1801 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {1802 // treeBaseDuration is the sum of all the child tree base durations.1803 let treeBaseDuration = 0;1804 let hiddenChild = primaryChildFragment.child;1805 while (hiddenChild !== null) {1806 treeBaseDuration += hiddenChild.treeBaseDuration;1807 hiddenChild = hiddenChild.sibling;1808 }1809 primaryChildFragment.treeBaseDuration = treeBaseDuration;1810 }1811 // Create a fragment from the fallback children, too.1812 const fallbackChildFragment = createFiberFromFragment(1813 nextFallbackChildren,1814 mode,1815 renderExpirationTime,1816 null,1817 );1818 fallbackChildFragment.return = workInProgress;1819 primaryChildFragment.sibling = fallbackChildFragment;1820 fallbackChildFragment.effectTag |= Placement;1821 primaryChildFragment.childExpirationTime = getRemainingWorkInPrimaryTree(1822 current,1823 workInProgress,1824 renderExpirationTime,1825 );1826 workInProgress.memoizedState = updateSuspenseState(1827 current.memoizedState,1828 renderExpirationTime,1829 );1830 workInProgress.child = primaryChildFragment;1831 // Skip the primary children, and continue working on the1832 // fallback children.1833 return fallbackChildFragment;1834 }1835 }1836 }1837 // The current tree already timed out. That means each child set is1838 // wrapped in a fragment fiber.1839 const currentPrimaryChildFragment: Fiber = (current.child: any);1840 const currentFallbackChildFragment: Fiber = (currentPrimaryChildFragment.sibling: any);1841 if (nextDidTimeout) {1842 // Still timed out. Reuse the current primary children by cloning1843 // its fragment. We're going to skip over these entirely.1844 const nextFallbackChildren = nextProps.fallback;1845 const primaryChildFragment = createWorkInProgress(1846 currentPrimaryChildFragment,1847 currentPrimaryChildFragment.pendingProps,1848 );1849 primaryChildFragment.return = workInProgress;1850 if ((workInProgress.mode & BlockingMode) === NoMode) {1851 // Outside of blocking mode, we commit the effects from the1852 // partially completed, timed-out tree, too.1853 const progressedState: SuspenseState = workInProgress.memoizedState;1854 const progressedPrimaryChild: Fiber | null =1855 progressedState !== null1856 ? (workInProgress.child: any).child1857 : (workInProgress.child: any);1858 if (progressedPrimaryChild !== currentPrimaryChildFragment.child) {1859 primaryChildFragment.child = progressedPrimaryChild;1860 let progressedChild = progressedPrimaryChild;1861 while (progressedChild !== null) {1862 progressedChild.return = primaryChildFragment;1863 progressedChild = progressedChild.sibling;1864 }1865 }1866 }1867 // Because primaryChildFragment is a new fiber that we're inserting as the1868 // parent of a new tree, we need to set its treeBaseDuration.1869 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {1870 // treeBaseDuration is the sum of all the child tree base durations.1871 let treeBaseDuration = 0;1872 let hiddenChild = primaryChildFragment.child;1873 while (hiddenChild !== null) {1874 treeBaseDuration += hiddenChild.treeBaseDuration;1875 hiddenChild = hiddenChild.sibling;1876 }1877 primaryChildFragment.treeBaseDuration = treeBaseDuration;1878 }1879 // Clone the fallback child fragment, too. These we'll continue1880 // working on.1881 const fallbackChildFragment = createWorkInProgress(1882 currentFallbackChildFragment,1883 nextFallbackChildren,1884 );1885 fallbackChildFragment.return = workInProgress;1886 primaryChildFragment.sibling = fallbackChildFragment;1887 primaryChildFragment.childExpirationTime = getRemainingWorkInPrimaryTree(1888 current,1889 workInProgress,1890 renderExpirationTime,1891 );1892 // Skip the primary children, and continue working on the1893 // fallback children.1894 workInProgress.memoizedState = updateSuspenseState(1895 current.memoizedState,1896 renderExpirationTime,1897 );1898 workInProgress.child = primaryChildFragment;1899 return fallbackChildFragment;1900 } else {1901 // No longer suspended. Switch back to showing the primary children,1902 // and remove the intermediate fragment fiber.1903 const nextPrimaryChildren = nextProps.children;1904 const currentPrimaryChild = currentPrimaryChildFragment.child;1905 const primaryChild = reconcileChildFibers(1906 workInProgress,1907 currentPrimaryChild,1908 nextPrimaryChildren,1909 renderExpirationTime,1910 );1911 // If this render doesn't suspend, we need to delete the fallback1912 // children. Wait until the complete phase, after we've confirmed the1913 // fallback is no longer needed.1914 // TODO: Would it be better to store the fallback fragment on1915 // the stateNode?1916 // Continue rendering the children, like we normally do.1917 workInProgress.memoizedState = null;1918 return (workInProgress.child = primaryChild);1919 }1920 } else {1921 // The current tree has not already timed out. That means the primary1922 // children are not wrapped in a fragment fiber.1923 const currentPrimaryChild = current.child;1924 if (nextDidTimeout) {1925 // Timed out. Wrap the children in a fragment fiber to keep them1926 // separate from the fallback children.1927 const nextFallbackChildren = nextProps.fallback;1928 const primaryChildFragment = createFiberFromFragment(1929 // It shouldn't matter what the pending props are because we aren't1930 // going to render this fragment.1931 null,1932 mode,1933 NoWork,1934 null,1935 );1936 primaryChildFragment.return = workInProgress;1937 primaryChildFragment.child = currentPrimaryChild;1938 if (currentPrimaryChild !== null) {1939 currentPrimaryChild.return = primaryChildFragment;1940 }1941 // Even though we're creating a new fiber, there are no new children,1942 // because we're reusing an already mounted tree. So we don't need to1943 // schedule a placement.1944 // primaryChildFragment.effectTag |= Placement;1945 if ((workInProgress.mode & BlockingMode) === NoMode) {1946 // Outside of blocking mode, we commit the effects from the1947 // partially completed, timed-out tree, too.1948 const progressedState: SuspenseState = workInProgress.memoizedState;1949 const progressedPrimaryChild: Fiber | null =1950 progressedState !== null1951 ? (workInProgress.child: any).child1952 : (workInProgress.child: any);1953 primaryChildFragment.child = progressedPrimaryChild;1954 let progressedChild = progressedPrimaryChild;1955 while (progressedChild !== null) {1956 progressedChild.return = primaryChildFragment;1957 progressedChild = progressedChild.sibling;1958 }1959 }1960 // Because primaryChildFragment is a new fiber that we're inserting as the1961 // parent of a new tree, we need to set its treeBaseDuration.1962 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {1963 // treeBaseDuration is the sum of all the child tree base durations.1964 let treeBaseDuration = 0;1965 let hiddenChild = primaryChildFragment.child;1966 while (hiddenChild !== null) {1967 treeBaseDuration += hiddenChild.treeBaseDuration;1968 hiddenChild = hiddenChild.sibling;1969 }1970 primaryChildFragment.treeBaseDuration = treeBaseDuration;1971 }1972 // Create a fragment from the fallback children, too.1973 const fallbackChildFragment = createFiberFromFragment(1974 nextFallbackChildren,1975 mode,1976 renderExpirationTime,1977 null,1978 );1979 fallbackChildFragment.return = workInProgress;1980 primaryChildFragment.sibling = fallbackChildFragment;1981 fallbackChildFragment.effectTag |= Placement;1982 primaryChildFragment.childExpirationTime = getRemainingWorkInPrimaryTree(1983 current,1984 workInProgress,1985 renderExpirationTime,1986 );1987 // Skip the primary children, and continue working on the1988 // fallback children.1989 workInProgress.memoizedState = mountSuspenseState(renderExpirationTime);1990 workInProgress.child = primaryChildFragment;1991 return fallbackChildFragment;1992 } else {1993 // Still haven't timed out. Continue rendering the children, like we1994 // normally do.1995 workInProgress.memoizedState = null;1996 const nextPrimaryChildren = nextProps.children;...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({4 });5 const context = await browser.newContext();6 const page = await context.newPage();7 console.log(await page._delegate.getRemainingWorkInPrimaryTree());8 await browser.close();9})();
Using AI Code Generation
1const { chromium, webkit, firefox } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.screenshot({ path: 'google.png' });7 await browser.close();8})();9const { chromium, webkit, firefox } = require('playwright');10(async () => {11 const browser = await chromium.launch();12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.screenshot({ path: 'google.png' });15 await browser.close();16})();17const { chromium, webkit, firefox } = require('playwright');18(async () => {19 const browser = await chromium.launch();20 const context = await browser.newContext();21 const page = await context.newPage();22 await page.screenshot({ path: 'google.png' });23 await browser.close();24})();25const { chromium, webkit, firefox } = require('playwright');26(async () => {27 const browser = await chromium.launch();28 const context = await browser.newContext();29 const page = await context.newPage();30 await page.screenshot({ path: 'google.png' });31 await browser.close();32})();33const { chromium, webkit, firefox } = require('playwright');34(async () => {35 const browser = await chromium.launch();36 const context = await browser.newContext();37 const page = await context.newPage();38 await page.screenshot({ path: 'google.png' });39 await browser.close();40})();41const { chromium, webkit, firefox } = require('
Using AI Code Generation
1const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/browserContext');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.click('text=Get started');8 await page.click('text=Docs');9 await page.click('text=API');
Using AI Code Generation
1const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/chromium/crBrowser.js');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 await page.waitForSelector('text=Get started');7 await page.click('text=Get started');8 await page.waitForSelector('text=Create a test project');9 await page.click('text=Create a test project');10 await page.waitForSelector('text=Playwright is a Node.js library to automate');11 await browser.close();12})();
Using AI Code Generation
1const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/progress');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 await page.waitForSelector('.navbar__inner');7 console.log(getRemainingWorkInPrimaryTree());8 await browser.close();9})();
Using AI Code Generation
1const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/chromium/crBrowser.js');2const browser = await chromium.launch();3const page = await browser.newPage();4await page.waitForSelector('text=Get started');5const remainingWork = await getRemainingWorkInPrimaryTree(page);6console.log(remainingWork);7await browser.close();
Using AI Code Generation
1const { getRemainingWorkInPrimaryTree } = require('playwright/lib/utils/progress');2const browser = await playwright.chromium.launch();3const context = await browser.newContext();4const page = await context.newPage();5await page.waitForSelector('.new-todo');6await page.type('.new-todo', 'Learn playwright');7await page.keyboard.press('Enter');8await page.type('.new-todo', 'Learn playwright internal API');9await page.keyboard.press('Enter');10await page.waitForSelector('.todo-list li:nth-child(2) .toggle');11await page.click('.todo-list li:nth-child(2) .toggle');12await page.waitForSelector('.todo-list li:nth-child(2).completed');13console.log(getRemainingWorkInPrimaryTree());14await browser.close();15const { getPendingTasks } = require('playwright/lib/utils/progress');16const browser = await playwright.chromium.launch();17const context = await browser.newContext();18const page = await context.newPage();19await page.waitForSelector('.new-todo');20await page.type('.new-todo', 'Learn playwright');21await page.keyboard.press('Enter');22await page.type('.new-todo', 'Learn playwright internal API');23await page.keyboard.press('Enter');24await page.waitForSelector('.todo-list li:nth-child(2) .toggle');25await page.click('.todo-list li:nth-child(2) .toggle');26await page.waitForSelector('.todo-list li:nth-child(2).completed');27console.log(getPendingTasks());28await browser.close();
Using AI Code Generation
1const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/progress');2const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/progress');3const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/progress');4const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/progress');5const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/progress');6const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/progress');7const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/progress');8const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/progress');9const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/progress');
Using AI Code Generation
1const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/supplements/recorder/recorderSupplement');2module.exports = async function(context, commands) {3 await commands.measure.stop();4 await commands.measure.stop();5 await commands.measure.stop();6 await commands.measure.stop();7};8const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/supplements/recorder/recorderSupplement');9module.exports = async function(context, commands) {10 await commands.measure.stop();11 await commands.measure.stop();12 await commands.measure.stop();13 await commands.measure.stop();14};15const { getRemainingWorkInPrimaryTree } = require('playwright/lib/server/supplements/recorder/recorderSupplement');16module.exports = async function(context, commands) {17 await commands.measure.stop();18 await commands.measure.stop();19 await commands.measure.stop();20 await commands.measure.stop();21 await commands.measure.stop();22 await commands.measure.stop();23 await commands.measure.stop();24};25const { getRemainingWorkInPrimaryTree } = require
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?
