How to use normalizeSuspenseChildren method in Playwright Internal
Best JavaScript code snippet using playwright-internal
runtime-dom.esm-browser.js
Source:runtime-dom.esm-browser.js 
...1831 isUnmounted: false,1832 effects: []1833 };1834}1835function normalizeSuspenseChildren(vnode) {1836 const { shapeFlag, children } = vnode;1837 if (shapeFlag & PublicShapeFlags.SLOTS_CHILDREN) {1838 const { default: d, fallback } = children;1839 return {1840 content: normalizeVNode(isFunction(d) ? d() : d),1841 fallback: normalizeVNode(isFunction(fallback) ? fallback() : fallback)1842 };1843 }1844 else {1845 return {1846 content: normalizeVNode(children),1847 fallback: normalizeVNode(null)1848 };1849 }1850}18511852function createDevEffectOptions(instance) {1853 return {1854 scheduler: queueJob,1855 onTrack: instance.rtc ? e => invokeHooks(instance.rtc, e) : void 0,1856 onTrigger: instance.rtg ? e => invokeHooks(instance.rtg, e) : void 01857 };1858}1859function isSameType$1(n1, n2) {1860 return n1.type === n2.type && n1.key === n2.key;1861}1862function invokeHooks(hooks, arg) {1863 for (let i = 0; i < hooks.length; i++) {1864 hooks[i](arg);1865 }1866}1867function queuePostRenderEffect(fn, suspense) {1868 if (suspense !== null && !suspense.isResolved) {1869 if (isArray(fn)) {1870 suspense.effects.push(...fn);1871 }1872 else {1873 suspense.effects.push(fn);1874 }1875 }1876 else {1877 queuePostFlushCb(fn);1878 }1879}1880/**1881 * The createRenderer function accepts two generic arguments:1882 * HostNode and HostElement, corresponding to Node and Element types in the1883 * host environment. For example, for runtime-dom, HostNode would be the DOM1884 * `Node` interface and HostElement would be the DOM `Element` interface.1885 *1886 * Custom renderers can pass in the platform specific types like this:1887 *1888 * ``` js1889 * const { render, createApp } = createRenderer<Node, Element>({1890 * patchProp,1891 * ...nodeOps1892 * })1893 * ```1894 */1895function createRenderer(options) {1896 const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, querySelector: hostQuerySelector } = options;1897 function patch(n1, // null means this is a mount1898 n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, optimized = false) {1899 // patching & not same type, unmount old tree1900 if (n1 != null && !isSameType$1(n1, n2)) {1901 anchor = getNextHostNode(n1);1902 unmount(n1, parentComponent, parentSuspense, true);1903 n1 = null;1904 }1905 const { type, shapeFlag } = n2;1906 switch (type) {1907 case Text:1908 processText(n1, n2, container, anchor);1909 break;1910 case Comment:1911 processCommentNode(n1, n2, container, anchor);1912 break;1913 case Fragment:1914 processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1915 break;1916 case Portal:1917 processPortal(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1918 break;1919 case Suspense:1920 {1921 processSuspense(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1922 }1923 break;1924 default:1925 if (shapeFlag & 1 /* ELEMENT */) {1926 processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1927 }1928 else if (shapeFlag & 6 /* COMPONENT */) {1929 processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1930 }1931 else {1932 warn('Invalid HostVNode type:', n2.type, `(${typeof n2.type})`);1933 }1934 }1935 }1936 function processText(n1, n2, container, anchor) {1937 if (n1 == null) {1938 hostInsert((n2.el = hostCreateText(n2.children)), container, anchor);1939 }1940 else {1941 const el = (n2.el = n1.el);1942 if (n2.children !== n1.children) {1943 hostSetText(el, n2.children);1944 }1945 }1946 }1947 function processCommentNode(n1, n2, container, anchor) {1948 if (n1 == null) {1949 hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor);1950 }1951 else {1952 // there's no support for dynamic comments1953 n2.el = n1.el;1954 }1955 }1956 function processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1957 if (n1 == null) {1958 mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG);1959 }1960 else {1961 patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized);1962 }1963 if (n2.ref !== null && parentComponent !== null) {1964 setRef(n2.ref, n1 && n1.ref, parentComponent, n2.el);1965 }1966 }1967 function mountElement(vnode, container, anchor, parentComponent, parentSuspense, isSVG) {1968 const tag = vnode.type;1969 isSVG = isSVG || tag === 'svg';1970 const el = (vnode.el = hostCreateElement(tag, isSVG));1971 const { props, shapeFlag } = vnode;1972 if (props != null) {1973 for (const key in props) {1974 if (isReservedProp(key))1975 continue;1976 hostPatchProp(el, key, props[key], null, isSVG);1977 }1978 if (props.vnodeBeforeMount != null) {1979 invokeDirectiveHook(props.vnodeBeforeMount, parentComponent, vnode);1980 }1981 }1982 if (shapeFlag & 8 /* TEXT_CHILDREN */) {1983 hostSetElementText(el, vnode.children);1984 }1985 else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1986 mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG);1987 }1988 hostInsert(el, container, anchor);1989 if (props != null && props.vnodeMounted != null) {1990 queuePostRenderEffect(() => {1991 invokeDirectiveHook(props.vnodeMounted, parentComponent, vnode);1992 }, parentSuspense);1993 }1994 }1995 function mountChildren(children, container, anchor, parentComponent, parentSuspense, isSVG, start = 0) {1996 for (let i = start; i < children.length; i++) {1997 const child = (children[i] = normalizeVNode(children[i]));1998 patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG);1999 }2000 }2001 function patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized) {2002 const el = (n2.el = n1.el);2003 const { patchFlag, dynamicChildren } = n2;2004 const oldProps = (n1 && n1.props) || EMPTY_OBJ;2005 const newProps = n2.props || EMPTY_OBJ;2006 if (newProps.vnodeBeforeUpdate != null) {2007 invokeDirectiveHook(newProps.vnodeBeforeUpdate, parentComponent, n2, n1);2008 }2009 if (patchFlag > 0) {2010 // the presence of a patchFlag means this element's render code was2011 // generated by the compiler and can take the fast path.2012 // in this path old node and new node are guaranteed to have the same shape2013 // (i.e. at the exact same position in the source template)2014 if (patchFlag & 16 /* FULL_PROPS */) {2015 // element props contain dynamic keys, full diff needed2016 patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);2017 }2018 else {2019 // class2020 // this flag is matched when the element has dynamic class bindings.2021 if (patchFlag & 2 /* CLASS */) {2022 if (oldProps.class !== newProps.class) {2023 hostPatchProp(el, 'class', newProps.class, null, isSVG);2024 }2025 }2026 // style2027 // this flag is matched when the element has dynamic style bindings2028 if (patchFlag & 4 /* STYLE */) {2029 hostPatchProp(el, 'style', newProps.style, oldProps.style, isSVG);2030 }2031 // props2032 // This flag is matched when the element has dynamic prop/attr bindings2033 // other than class and style. The keys of dynamic prop/attrs are saved for2034 // faster iteration.2035 // Note dynamic keys like :[foo]="bar" will cause this optimization to2036 // bail out and go through a full diff because we need to unset the old key2037 if (patchFlag & 8 /* PROPS */) {2038 // if the flag is present then dynamicProps must be non-null2039 const propsToUpdate = n2.dynamicProps;2040 for (let i = 0; i < propsToUpdate.length; i++) {2041 const key = propsToUpdate[i];2042 const prev = oldProps[key];2043 const next = newProps[key];2044 if (prev !== next) {2045 hostPatchProp(el, key, next, prev, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);2046 }2047 }2048 }2049 }2050 // text2051 // This flag is matched when the element has only dynamic text children.2052 // this flag is terminal (i.e. skips children diffing).2053 if (patchFlag & 1 /* TEXT */) {2054 if (n1.children !== n2.children) {2055 hostSetElementText(el, n2.children);2056 }2057 return; // terminal2058 }2059 }2060 else if (!optimized) {2061 // unoptimized, full diff2062 patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);2063 }2064 if (dynamicChildren != null) {2065 // children fast path2066 const oldDynamicChildren = n1.dynamicChildren;2067 for (let i = 0; i < dynamicChildren.length; i++) {2068 patch(oldDynamicChildren[i], dynamicChildren[i], el, null, parentComponent, parentSuspense, isSVG, true);2069 }2070 }2071 else if (!optimized) {2072 // full diff2073 patchChildren(n1, n2, el, null, parentComponent, parentSuspense, isSVG);2074 }2075 if (newProps.vnodeUpdated != null) {2076 queuePostRenderEffect(() => {2077 invokeDirectiveHook(newProps.vnodeUpdated, parentComponent, n2, n1);2078 }, parentSuspense);2079 }2080 }2081 function patchProps(el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) {2082 if (oldProps !== newProps) {2083 for (const key in newProps) {2084 if (isReservedProp(key))2085 continue;2086 const next = newProps[key];2087 const prev = oldProps[key];2088 if (next !== prev) {2089 hostPatchProp(el, key, next, prev, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);2090 }2091 }2092 if (oldProps !== EMPTY_OBJ) {2093 for (const key in oldProps) {2094 if (isReservedProp(key))2095 continue;2096 if (!(key in newProps)) {2097 hostPatchProp(el, key, null, null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);2098 }2099 }2100 }2101 }2102 }2103 function processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2104 const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateComment(''));2105 const fragmentEndAnchor = (n2.anchor = n12106 ? n1.anchor2107 : hostCreateComment(''));2108 if (n1 == null) {2109 hostInsert(fragmentStartAnchor, container, anchor);2110 hostInsert(fragmentEndAnchor, container, anchor);2111 // a fragment can only have array children2112 // since they are either generated by the compiler, or implicitly created2113 // from arrays.2114 mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG);2115 }2116 else {2117 patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);2118 }2119 }2120 function processPortal(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2121 const targetSelector = n2.props && n2.props.target;2122 const { patchFlag, shapeFlag, children } = n2;2123 if (n1 == null) {2124 const target = (n2.target = isString(targetSelector)2125 ? hostQuerySelector(targetSelector)2126 : null);2127 if (target != null) {2128 if (shapeFlag & 8 /* TEXT_CHILDREN */) {2129 hostSetElementText(target, children);2130 }2131 else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {2132 mountChildren(children, target, null, parentComponent, parentSuspense, isSVG);2133 }2134 }2135 else {2136 warn('Invalid Portal target on mount:', target, `(${typeof target})`);2137 }2138 }2139 else {2140 // update content2141 const target = (n2.target = n1.target);2142 if (patchFlag === 1 /* TEXT */) {2143 hostSetElementText(target, children);2144 }2145 else if (!optimized) {2146 patchChildren(n1, n2, target, null, parentComponent, parentSuspense, isSVG);2147 }2148 // target changed2149 if (targetSelector !== (n1.props && n1.props.target)) {2150 const nextTarget = (n2.target = isString(targetSelector)2151 ? hostQuerySelector(targetSelector)2152 : null);2153 if (nextTarget != null) {2154 // move content2155 if (shapeFlag & 8 /* TEXT_CHILDREN */) {2156 hostSetElementText(target, '');2157 hostSetElementText(nextTarget, children);2158 }2159 else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {2160 for (let i = 0; i < children.length; i++) {2161 move(children[i], nextTarget, null);2162 }2163 }2164 }2165 else {2166 warn('Invalid Portal target on update:', target, `(${typeof target})`);2167 }2168 }2169 }2170 // insert an empty node as the placeholder for the portal2171 processCommentNode(n1, n2, container, anchor);2172 }2173 function processSuspense(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2174 if (n1 == null) {2175 mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2176 }2177 else {2178 patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized);2179 }2180 }2181 function mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2182 const hiddenContainer = hostCreateElement('div');2183 const suspense = (n2.suspense = createSuspenseBoundary(n2, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, optimized));2184 const { content, fallback } = normalizeSuspenseChildren(n2);2185 suspense.subTree = content;2186 suspense.fallbackTree = fallback;2187 // start mounting the content subtree in an off-dom container2188 patch(null, content, hiddenContainer, null, parentComponent, suspense, isSVG, optimized);2189 // now check if we have encountered any async deps2190 if (suspense.deps > 0) {2191 // mount the fallback tree2192 patch(null, fallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context2193 isSVG, optimized);2194 n2.el = fallback.el;2195 }2196 else {2197 // Suspense has no async deps. Just resolve.2198 resolveSuspense(suspense);2199 }2200 }2201 function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized) {2202 const suspense = (n2.suspense = n1.suspense);2203 suspense.vnode = n2;2204 const { content, fallback } = normalizeSuspenseChildren(n2);2205 const oldSubTree = suspense.subTree;2206 const oldFallbackTree = suspense.fallbackTree;2207 if (!suspense.isResolved) {2208 patch(oldSubTree, content, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, optimized);2209 if (suspense.deps > 0) {2210 // still pending. patch the fallback tree.2211 patch(oldFallbackTree, fallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context2212 isSVG, optimized);2213 n2.el = fallback.el;2214 }2215 // If deps somehow becomes 0 after the patch it means the patch caused an2216 // async dep component to unmount and removed its dep. It will cause the2217 // suspense to resolve and we don't need to do anything here.2218 }
...
runtime-core.esm-bundler.js
Source:runtime-core.esm-bundler.js
...1206 isUnmounted: false,1207 effects: []1208 };1209}1210function normalizeSuspenseChildren(vnode) {1211 const { shapeFlag, children } = vnode;1212 if (shapeFlag & PublicShapeFlags.SLOTS_CHILDREN) {1213 const { default: d, fallback } = children;1214 return {1215 content: normalizeVNode(isFunction(d) ? d() : d),1216 fallback: normalizeVNode(isFunction(fallback) ? fallback() : fallback)1217 };1218 }1219 else {1220 return {1221 content: normalizeVNode(children),1222 fallback: normalizeVNode(null)1223 };1224 }1225}1226function createDevEffectOptions(instance) {1227 return {1228 scheduler: queueJob,1229 onTrack: instance.rtc ? e => invokeHooks(instance.rtc, e) : void 0,1230 onTrigger: instance.rtg ? e => invokeHooks(instance.rtg, e) : void 01231 };1232}1233function isSameType$1(n1, n2) {1234 return n1.type === n2.type && n1.key === n2.key;1235}1236function invokeHooks(hooks, arg) {1237 for (let i = 0; i < hooks.length; i++) {1238 hooks[i](arg);1239 }1240}1241function queuePostRenderEffect(fn, suspense) {1242 if (suspense !== null && !suspense.isResolved) {1243 if (isArray(fn)) {1244 suspense.effects.push(...fn);1245 }1246 else {1247 suspense.effects.push(fn);1248 }1249 }1250 else {1251 queuePostFlushCb(fn);1252 }1253}1254/**1255 * The createRenderer function accepts two generic arguments:1256 * HostNode and HostElement, corresponding to Node and Element types in the1257 * host environment. For example, for runtime-dom, HostNode would be the DOM1258 * `Node` interface and HostElement would be the DOM `Element` interface.1259 *1260 * Custom renderers can pass in the platform specific types like this:1261 *1262 * ``` js1263 * const { render, createApp } = createRenderer<Node, Element>({1264 * patchProp,1265 * ...nodeOps1266 * })1267 * ```1268 */1269function createRenderer(options) {1270 const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, querySelector: hostQuerySelector } = options;1271 function patch(n1, // null means this is a mount1272 n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, optimized = false) {1273 // patching & not same type, unmount old tree1274 if (n1 != null && !isSameType$1(n1, n2)) {1275 anchor = getNextHostNode(n1);1276 unmount(n1, parentComponent, parentSuspense, true);1277 n1 = null;1278 }1279 const { type, shapeFlag } = n2;1280 switch (type) {1281 case Text:1282 processText(n1, n2, container, anchor);1283 break;1284 case Comment:1285 processCommentNode(n1, n2, container, anchor);1286 break;1287 case Fragment:1288 processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1289 break;1290 case Portal:1291 processPortal(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1292 break;1293 case Suspense:1294 {1295 processSuspense(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1296 }1297 break;1298 default:1299 if (shapeFlag & 1 /* ELEMENT */) {1300 processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1301 }1302 else if (shapeFlag & 6 /* COMPONENT */) {1303 processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1304 }1305 else {1306 warn('Invalid HostVNode type:', n2.type, `(${typeof n2.type})`);1307 }1308 }1309 }1310 function processText(n1, n2, container, anchor) {1311 if (n1 == null) {1312 hostInsert((n2.el = hostCreateText(n2.children)), container, anchor);1313 }1314 else {1315 const el = (n2.el = n1.el);1316 if (n2.children !== n1.children) {1317 hostSetText(el, n2.children);1318 }1319 }1320 }1321 function processCommentNode(n1, n2, container, anchor) {1322 if (n1 == null) {1323 hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor);1324 }1325 else {1326 // there's no support for dynamic comments1327 n2.el = n1.el;1328 }1329 }1330 function processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1331 if (n1 == null) {1332 mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG);1333 }1334 else {1335 patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized);1336 }1337 if (n2.ref !== null && parentComponent !== null) {1338 setRef(n2.ref, n1 && n1.ref, parentComponent, n2.el);1339 }1340 }1341 function mountElement(vnode, container, anchor, parentComponent, parentSuspense, isSVG) {1342 const tag = vnode.type;1343 isSVG = isSVG || tag === 'svg';1344 const el = (vnode.el = hostCreateElement(tag, isSVG));1345 const { props, shapeFlag } = vnode;1346 if (props != null) {1347 for (const key in props) {1348 if (isReservedProp(key))1349 continue;1350 hostPatchProp(el, key, props[key], null, isSVG);1351 }1352 if (props.vnodeBeforeMount != null) {1353 invokeDirectiveHook(props.vnodeBeforeMount, parentComponent, vnode);1354 }1355 }1356 if (shapeFlag & 8 /* TEXT_CHILDREN */) {1357 hostSetElementText(el, vnode.children);1358 }1359 else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1360 mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG);1361 }1362 hostInsert(el, container, anchor);1363 if (props != null && props.vnodeMounted != null) {1364 queuePostRenderEffect(() => {1365 invokeDirectiveHook(props.vnodeMounted, parentComponent, vnode);1366 }, parentSuspense);1367 }1368 }1369 function mountChildren(children, container, anchor, parentComponent, parentSuspense, isSVG, start = 0) {1370 for (let i = start; i < children.length; i++) {1371 const child = (children[i] = normalizeVNode(children[i]));1372 patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG);1373 }1374 }1375 function patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized) {1376 const el = (n2.el = n1.el);1377 const { patchFlag, dynamicChildren } = n2;1378 const oldProps = (n1 && n1.props) || EMPTY_OBJ;1379 const newProps = n2.props || EMPTY_OBJ;1380 if (newProps.vnodeBeforeUpdate != null) {1381 invokeDirectiveHook(newProps.vnodeBeforeUpdate, parentComponent, n2, n1);1382 }1383 if (patchFlag > 0) {1384 // the presence of a patchFlag means this element's render code was1385 // generated by the compiler and can take the fast path.1386 // in this path old node and new node are guaranteed to have the same shape1387 // (i.e. at the exact same position in the source template)1388 if (patchFlag & 16 /* FULL_PROPS */) {1389 // element props contain dynamic keys, full diff needed1390 patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);1391 }1392 else {1393 // class1394 // this flag is matched when the element has dynamic class bindings.1395 if (patchFlag & 2 /* CLASS */) {1396 if (oldProps.class !== newProps.class) {1397 hostPatchProp(el, 'class', newProps.class, null, isSVG);1398 }1399 }1400 // style1401 // this flag is matched when the element has dynamic style bindings1402 if (patchFlag & 4 /* STYLE */) {1403 hostPatchProp(el, 'style', newProps.style, oldProps.style, isSVG);1404 }1405 // props1406 // This flag is matched when the element has dynamic prop/attr bindings1407 // other than class and style. The keys of dynamic prop/attrs are saved for1408 // faster iteration.1409 // Note dynamic keys like :[foo]="bar" will cause this optimization to1410 // bail out and go through a full diff because we need to unset the old key1411 if (patchFlag & 8 /* PROPS */) {1412 // if the flag is present then dynamicProps must be non-null1413 const propsToUpdate = n2.dynamicProps;1414 for (let i = 0; i < propsToUpdate.length; i++) {1415 const key = propsToUpdate[i];1416 const prev = oldProps[key];1417 const next = newProps[key];1418 if (prev !== next) {1419 hostPatchProp(el, key, next, prev, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);1420 }1421 }1422 }1423 }1424 // text1425 // This flag is matched when the element has only dynamic text children.1426 // this flag is terminal (i.e. skips children diffing).1427 if (patchFlag & 1 /* TEXT */) {1428 if (n1.children !== n2.children) {1429 hostSetElementText(el, n2.children);1430 }1431 return; // terminal1432 }1433 }1434 else if (!optimized) {1435 // unoptimized, full diff1436 patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);1437 }1438 if (dynamicChildren != null) {1439 // children fast path1440 const oldDynamicChildren = n1.dynamicChildren;1441 for (let i = 0; i < dynamicChildren.length; i++) {1442 patch(oldDynamicChildren[i], dynamicChildren[i], el, null, parentComponent, parentSuspense, isSVG, true);1443 }1444 }1445 else if (!optimized) {1446 // full diff1447 patchChildren(n1, n2, el, null, parentComponent, parentSuspense, isSVG);1448 }1449 if (newProps.vnodeUpdated != null) {1450 queuePostRenderEffect(() => {1451 invokeDirectiveHook(newProps.vnodeUpdated, parentComponent, n2, n1);1452 }, parentSuspense);1453 }1454 }1455 function patchProps(el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) {1456 if (oldProps !== newProps) {1457 for (const key in newProps) {1458 if (isReservedProp(key))1459 continue;1460 const next = newProps[key];1461 const prev = oldProps[key];1462 if (next !== prev) {1463 hostPatchProp(el, key, next, prev, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);1464 }1465 }1466 if (oldProps !== EMPTY_OBJ) {1467 for (const key in oldProps) {1468 if (isReservedProp(key))1469 continue;1470 if (!(key in newProps)) {1471 hostPatchProp(el, key, null, null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);1472 }1473 }1474 }1475 }1476 }1477 function processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1478 const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateComment(''));1479 const fragmentEndAnchor = (n2.anchor = n11480 ? n1.anchor1481 : hostCreateComment(''));1482 if (n1 == null) {1483 hostInsert(fragmentStartAnchor, container, anchor);1484 hostInsert(fragmentEndAnchor, container, anchor);1485 // a fragment can only have array children1486 // since they are either generated by the compiler, or implicitly created1487 // from arrays.1488 mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG);1489 }1490 else {1491 patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);1492 }1493 }1494 function processPortal(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1495 const targetSelector = n2.props && n2.props.target;1496 const { patchFlag, shapeFlag, children } = n2;1497 if (n1 == null) {1498 const target = (n2.target = isString(targetSelector)1499 ? hostQuerySelector(targetSelector)1500 : null);1501 if (target != null) {1502 if (shapeFlag & 8 /* TEXT_CHILDREN */) {1503 hostSetElementText(target, children);1504 }1505 else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1506 mountChildren(children, target, null, parentComponent, parentSuspense, isSVG);1507 }1508 }1509 else {1510 warn('Invalid Portal target on mount:', target, `(${typeof target})`);1511 }1512 }1513 else {1514 // update content1515 const target = (n2.target = n1.target);1516 if (patchFlag === 1 /* TEXT */) {1517 hostSetElementText(target, children);1518 }1519 else if (!optimized) {1520 patchChildren(n1, n2, target, null, parentComponent, parentSuspense, isSVG);1521 }1522 // target changed1523 if (targetSelector !== (n1.props && n1.props.target)) {1524 const nextTarget = (n2.target = isString(targetSelector)1525 ? hostQuerySelector(targetSelector)1526 : null);1527 if (nextTarget != null) {1528 // move content1529 if (shapeFlag & 8 /* TEXT_CHILDREN */) {1530 hostSetElementText(target, '');1531 hostSetElementText(nextTarget, children);1532 }1533 else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1534 for (let i = 0; i < children.length; i++) {1535 move(children[i], nextTarget, null);1536 }1537 }1538 }1539 else {1540 warn('Invalid Portal target on update:', target, `(${typeof target})`);1541 }1542 }1543 }1544 // insert an empty node as the placeholder for the portal1545 processCommentNode(n1, n2, container, anchor);1546 }1547 function processSuspense(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1548 if (n1 == null) {1549 mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1550 }1551 else {1552 patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized);1553 }1554 }1555 function mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1556 const hiddenContainer = hostCreateElement('div');1557 const suspense = (n2.suspense = createSuspenseBoundary(n2, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, optimized));1558 const { content, fallback } = normalizeSuspenseChildren(n2);1559 suspense.subTree = content;1560 suspense.fallbackTree = fallback;1561 // start mounting the content subtree in an off-dom container1562 patch(null, content, hiddenContainer, null, parentComponent, suspense, isSVG, optimized);1563 // now check if we have encountered any async deps1564 if (suspense.deps > 0) {1565 // mount the fallback tree1566 patch(null, fallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context1567 isSVG, optimized);1568 n2.el = fallback.el;1569 }1570 else {1571 // Suspense has no async deps. Just resolve.1572 resolveSuspense(suspense);1573 }1574 }1575 function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized) {1576 const suspense = (n2.suspense = n1.suspense);1577 suspense.vnode = n2;1578 const { content, fallback } = normalizeSuspenseChildren(n2);1579 const oldSubTree = suspense.subTree;1580 const oldFallbackTree = suspense.fallbackTree;1581 if (!suspense.isResolved) {1582 patch(oldSubTree, content, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, optimized);1583 if (suspense.deps > 0) {1584 // still pending. patch the fallback tree.1585 patch(oldFallbackTree, fallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context1586 isSVG, optimized);1587 n2.el = fallback.el;1588 }1589 // If deps somehow becomes 0 after the patch it means the patch caused an1590 // async dep component to unmount and removed its dep. It will cause the1591 // suspense to resolve and we don't need to do anything here.1592 }
...
runtime-core.cjs.prod.js
Source:runtime-core.cjs.prod.js
...873 isUnmounted: false,874 effects: []875 };876}877function normalizeSuspenseChildren(vnode) {878 const { shapeFlag, children } = vnode;879 if (shapeFlag & PublicShapeFlags.SLOTS_CHILDREN) {880 const { default: d, fallback } = children;881 return {882 content: normalizeVNode(isFunction(d) ? d() : d),883 fallback: normalizeVNode(isFunction(fallback) ? fallback() : fallback)884 };885 }886 else {887 return {888 content: normalizeVNode(children),889 fallback: normalizeVNode(null)890 };891 }892}893const prodEffectOptions = {894 scheduler: queueJob895};896function isSameType$1(n1, n2) {897 return n1.type === n2.type && n1.key === n2.key;898}899function invokeHooks(hooks, arg) {900 for (let i = 0; i < hooks.length; i++) {901 hooks[i](arg);902 }903}904function queuePostRenderEffect(fn, suspense) {905 if (suspense !== null && !suspense.isResolved) {906 if (isArray(fn)) {907 suspense.effects.push(...fn);908 }909 else {910 suspense.effects.push(fn);911 }912 }913 else {914 queuePostFlushCb(fn);915 }916}917/**918 * The createRenderer function accepts two generic arguments:919 * HostNode and HostElement, corresponding to Node and Element types in the920 * host environment. For example, for runtime-dom, HostNode would be the DOM921 * `Node` interface and HostElement would be the DOM `Element` interface.922 *923 * Custom renderers can pass in the platform specific types like this:924 *925 * ``` js926 * const { render, createApp } = createRenderer<Node, Element>({927 * patchProp,928 * ...nodeOps929 * })930 * ```931 */932function createRenderer(options) {933 const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, querySelector: hostQuerySelector } = options;934 function patch(n1, // null means this is a mount935 n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, optimized = false) {936 // patching & not same type, unmount old tree937 if (n1 != null && !isSameType$1(n1, n2)) {938 anchor = getNextHostNode(n1);939 unmount(n1, parentComponent, parentSuspense, true);940 n1 = null;941 }942 const { type, shapeFlag } = n2;943 switch (type) {944 case Text:945 processText(n1, n2, container, anchor);946 break;947 case Comment:948 processCommentNode(n1, n2, container, anchor);949 break;950 case Fragment:951 processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);952 break;953 case Portal:954 processPortal(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);955 break;956 case Suspense:957 {958 processSuspense(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);959 }960 break;961 default:962 if (shapeFlag & 1 /* ELEMENT */) {963 processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);964 }965 else if (shapeFlag & 6 /* COMPONENT */) {966 processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);967 }968 }969 }970 function processText(n1, n2, container, anchor) {971 if (n1 == null) {972 hostInsert((n2.el = hostCreateText(n2.children)), container, anchor);973 }974 else {975 const el = (n2.el = n1.el);976 if (n2.children !== n1.children) {977 hostSetText(el, n2.children);978 }979 }980 }981 function processCommentNode(n1, n2, container, anchor) {982 if (n1 == null) {983 hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor);984 }985 else {986 // there's no support for dynamic comments987 n2.el = n1.el;988 }989 }990 function processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {991 if (n1 == null) {992 mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG);993 }994 else {995 patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized);996 }997 if (n2.ref !== null && parentComponent !== null) {998 setRef(n2.ref, n1 && n1.ref, parentComponent, n2.el);999 }1000 }1001 function mountElement(vnode, container, anchor, parentComponent, parentSuspense, isSVG) {1002 const tag = vnode.type;1003 isSVG = isSVG || tag === 'svg';1004 const el = (vnode.el = hostCreateElement(tag, isSVG));1005 const { props, shapeFlag } = vnode;1006 if (props != null) {1007 for (const key in props) {1008 if (isReservedProp(key))1009 continue;1010 hostPatchProp(el, key, props[key], null, isSVG);1011 }1012 if (props.vnodeBeforeMount != null) {1013 invokeDirectiveHook(props.vnodeBeforeMount, parentComponent, vnode);1014 }1015 }1016 if (shapeFlag & 8 /* TEXT_CHILDREN */) {1017 hostSetElementText(el, vnode.children);1018 }1019 else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1020 mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG);1021 }1022 hostInsert(el, container, anchor);1023 if (props != null && props.vnodeMounted != null) {1024 queuePostRenderEffect(() => {1025 invokeDirectiveHook(props.vnodeMounted, parentComponent, vnode);1026 }, parentSuspense);1027 }1028 }1029 function mountChildren(children, container, anchor, parentComponent, parentSuspense, isSVG, start = 0) {1030 for (let i = start; i < children.length; i++) {1031 const child = (children[i] = normalizeVNode(children[i]));1032 patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG);1033 }1034 }1035 function patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized) {1036 const el = (n2.el = n1.el);1037 const { patchFlag, dynamicChildren } = n2;1038 const oldProps = (n1 && n1.props) || EMPTY_OBJ;1039 const newProps = n2.props || EMPTY_OBJ;1040 if (newProps.vnodeBeforeUpdate != null) {1041 invokeDirectiveHook(newProps.vnodeBeforeUpdate, parentComponent, n2, n1);1042 }1043 if (patchFlag > 0) {1044 // the presence of a patchFlag means this element's render code was1045 // generated by the compiler and can take the fast path.1046 // in this path old node and new node are guaranteed to have the same shape1047 // (i.e. at the exact same position in the source template)1048 if (patchFlag & 16 /* FULL_PROPS */) {1049 // element props contain dynamic keys, full diff needed1050 patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);1051 }1052 else {1053 // class1054 // this flag is matched when the element has dynamic class bindings.1055 if (patchFlag & 2 /* CLASS */) {1056 if (oldProps.class !== newProps.class) {1057 hostPatchProp(el, 'class', newProps.class, null, isSVG);1058 }1059 }1060 // style1061 // this flag is matched when the element has dynamic style bindings1062 if (patchFlag & 4 /* STYLE */) {1063 hostPatchProp(el, 'style', newProps.style, oldProps.style, isSVG);1064 }1065 // props1066 // This flag is matched when the element has dynamic prop/attr bindings1067 // other than class and style. The keys of dynamic prop/attrs are saved for1068 // faster iteration.1069 // Note dynamic keys like :[foo]="bar" will cause this optimization to1070 // bail out and go through a full diff because we need to unset the old key1071 if (patchFlag & 8 /* PROPS */) {1072 // if the flag is present then dynamicProps must be non-null1073 const propsToUpdate = n2.dynamicProps;1074 for (let i = 0; i < propsToUpdate.length; i++) {1075 const key = propsToUpdate[i];1076 const prev = oldProps[key];1077 const next = newProps[key];1078 if (prev !== next) {1079 hostPatchProp(el, key, next, prev, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);1080 }1081 }1082 }1083 }1084 // text1085 // This flag is matched when the element has only dynamic text children.1086 // this flag is terminal (i.e. skips children diffing).1087 if (patchFlag & 1 /* TEXT */) {1088 if (n1.children !== n2.children) {1089 hostSetElementText(el, n2.children);1090 }1091 return; // terminal1092 }1093 }1094 else if (!optimized) {1095 // unoptimized, full diff1096 patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);1097 }1098 if (dynamicChildren != null) {1099 // children fast path1100 const oldDynamicChildren = n1.dynamicChildren;1101 for (let i = 0; i < dynamicChildren.length; i++) {1102 patch(oldDynamicChildren[i], dynamicChildren[i], el, null, parentComponent, parentSuspense, isSVG, true);1103 }1104 }1105 else if (!optimized) {1106 // full diff1107 patchChildren(n1, n2, el, null, parentComponent, parentSuspense, isSVG);1108 }1109 if (newProps.vnodeUpdated != null) {1110 queuePostRenderEffect(() => {1111 invokeDirectiveHook(newProps.vnodeUpdated, parentComponent, n2, n1);1112 }, parentSuspense);1113 }1114 }1115 function patchProps(el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) {1116 if (oldProps !== newProps) {1117 for (const key in newProps) {1118 if (isReservedProp(key))1119 continue;1120 const next = newProps[key];1121 const prev = oldProps[key];1122 if (next !== prev) {1123 hostPatchProp(el, key, next, prev, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);1124 }1125 }1126 if (oldProps !== EMPTY_OBJ) {1127 for (const key in oldProps) {1128 if (isReservedProp(key))1129 continue;1130 if (!(key in newProps)) {1131 hostPatchProp(el, key, null, null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);1132 }1133 }1134 }1135 }1136 }1137 function processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1138 const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateComment(''));1139 const fragmentEndAnchor = (n2.anchor = n11140 ? n1.anchor1141 : hostCreateComment(''));1142 if (n1 == null) {1143 hostInsert(fragmentStartAnchor, container, anchor);1144 hostInsert(fragmentEndAnchor, container, anchor);1145 // a fragment can only have array children1146 // since they are either generated by the compiler, or implicitly created1147 // from arrays.1148 mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG);1149 }1150 else {1151 patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);1152 }1153 }1154 function processPortal(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1155 const targetSelector = n2.props && n2.props.target;1156 const { patchFlag, shapeFlag, children } = n2;1157 if (n1 == null) {1158 const target = (n2.target = isString(targetSelector)1159 ? hostQuerySelector(targetSelector)1160 : null);1161 if (target != null) {1162 if (shapeFlag & 8 /* TEXT_CHILDREN */) {1163 hostSetElementText(target, children);1164 }1165 else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1166 mountChildren(children, target, null, parentComponent, parentSuspense, isSVG);1167 }1168 }1169 }1170 else {1171 // update content1172 const target = (n2.target = n1.target);1173 if (patchFlag === 1 /* TEXT */) {1174 hostSetElementText(target, children);1175 }1176 else if (!optimized) {1177 patchChildren(n1, n2, target, null, parentComponent, parentSuspense, isSVG);1178 }1179 // target changed1180 if (targetSelector !== (n1.props && n1.props.target)) {1181 const nextTarget = (n2.target = isString(targetSelector)1182 ? hostQuerySelector(targetSelector)1183 : null);1184 if (nextTarget != null) {1185 // move content1186 if (shapeFlag & 8 /* TEXT_CHILDREN */) {1187 hostSetElementText(target, '');1188 hostSetElementText(nextTarget, children);1189 }1190 else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1191 for (let i = 0; i < children.length; i++) {1192 move(children[i], nextTarget, null);1193 }1194 }1195 }1196 }1197 }1198 // insert an empty node as the placeholder for the portal1199 processCommentNode(n1, n2, container, anchor);1200 }1201 function processSuspense(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1202 if (n1 == null) {1203 mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1204 }1205 else {1206 patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized);1207 }1208 }1209 function mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1210 const hiddenContainer = hostCreateElement('div');1211 const suspense = (n2.suspense = createSuspenseBoundary(n2, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, optimized));1212 const { content, fallback } = normalizeSuspenseChildren(n2);1213 suspense.subTree = content;1214 suspense.fallbackTree = fallback;1215 // start mounting the content subtree in an off-dom container1216 patch(null, content, hiddenContainer, null, parentComponent, suspense, isSVG, optimized);1217 // now check if we have encountered any async deps1218 if (suspense.deps > 0) {1219 // mount the fallback tree1220 patch(null, fallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context1221 isSVG, optimized);1222 n2.el = fallback.el;1223 }1224 else {1225 // Suspense has no async deps. Just resolve.1226 resolveSuspense(suspense);1227 }1228 }1229 function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized) {1230 const suspense = (n2.suspense = n1.suspense);1231 suspense.vnode = n2;1232 const { content, fallback } = normalizeSuspenseChildren(n2);1233 const oldSubTree = suspense.subTree;1234 const oldFallbackTree = suspense.fallbackTree;1235 if (!suspense.isResolved) {1236 patch(oldSubTree, content, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, optimized);1237 if (suspense.deps > 0) {1238 // still pending. patch the fallback tree.1239 patch(oldFallbackTree, fallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context1240 isSVG, optimized);1241 n2.el = fallback.el;1242 }1243 // If deps somehow becomes 0 after the patch it means the patch caused an1244 // async dep component to unmount and removed its dep. It will cause the1245 // suspense to resolve and we don't need to do anything here.1246 }
...
index.esm.js
Source:index.esm.js
...1395 }1396 return singleRoot;1397}1398const isSuspense = (type) => type.__isSuspense;1399function normalizeSuspenseChildren(vnode) {1400 const { shapeFlag, children } = vnode;1401 let content;1402 let fallback;1403 if (shapeFlag & 32 /* SLOTS_CHILDREN */) {1404 content = normalizeSuspenseSlot(children.default);1405 fallback = normalizeSuspenseSlot(children.fallback);1406 }1407 else {1408 content = normalizeSuspenseSlot(children);1409 fallback = normalizeVNode(null);1410 }1411 return {1412 content,1413 fallback1414 };1415}1416function normalizeSuspenseSlot(s) {1417 if (isFunction(s)) {1418 s = s();1419 }1420 if (isArray(s)) {1421 const singleChild = filterSingleRoot(s);1422 if ((process.env.NODE_ENV !== 'production') && !singleChild) {1423 warn(`<Suspense> slots expect a single root node.`);1424 }1425 s = singleChild;1426 }1427 return normalizeVNode(s);1428}1429function queueEffectWithSuspense(fn, suspense) {1430 if (suspense && suspense.pendingBranch) {1431 if (isArray(fn)) {1432 suspense.effects.push(...fn);1433 }1434 else {1435 suspense.effects.push(fn);1436 }1437 }1438 else {1439 queuePostFlushCb(fn);1440 }1441}1442let isRenderingCompiledSlot = 0;1443const setCompiledSlotRendering = (n) => (isRenderingCompiledSlot += n);1444// SFC scoped style ID management.1445let currentScopeId = null;1446// initial value for watchers to trigger on undefined initial values1447const INITIAL_WATCHER_VALUE = {};1448function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ, instance = currentInstance) {1449 if ((process.env.NODE_ENV !== 'production') && !cb) {1450 if (immediate !== undefined) {1451 warn(`watch() "immediate" option is only respected when using the ` +1452 `watch(source, callback, options?) signature.`);1453 }1454 if (deep !== undefined) {1455 warn(`watch() "deep" option is only respected when using the ` +1456 `watch(source, callback, options?) signature.`);1457 }1458 }1459 const warnInvalidSource = (s) => {1460 warn(`Invalid watch source: `, s, `A watch source can only be a getter/effect function, a ref, ` +1461 `a reactive object, or an array of these types.`);1462 };1463 let getter;1464 let forceTrigger = false;1465 if (isRef(source)) {1466 getter = () => source.value;1467 forceTrigger = !!source._shallow;1468 }1469 else if (isReactive(source)) {1470 getter = () => source;1471 deep = true;1472 }1473 else if (isArray(source)) {1474 getter = () => source.map(s => {1475 if (isRef(s)) {1476 return s.value;1477 }1478 else if (isReactive(s)) {1479 return traverse(s);1480 }1481 else if (isFunction(s)) {1482 return callWithErrorHandling(s, instance, 2 /* WATCH_GETTER */);1483 }1484 else {1485 (process.env.NODE_ENV !== 'production') && warnInvalidSource(s);1486 }1487 });1488 }1489 else if (isFunction(source)) {1490 if (cb) {1491 // getter with cb1492 getter = () => callWithErrorHandling(source, instance, 2 /* WATCH_GETTER */);1493 }1494 else {1495 // no cb -> simple effect1496 getter = () => {1497 if (instance && instance.isUnmounted) {1498 return;1499 }1500 if (cleanup) {1501 cleanup();1502 }1503 return callWithErrorHandling(source, instance, 3 /* WATCH_CALLBACK */, [onInvalidate]);1504 };1505 }1506 }1507 else {1508 getter = NOOP;1509 (process.env.NODE_ENV !== 'production') && warnInvalidSource(source);1510 }1511 if (cb && deep) {1512 const baseGetter = getter;1513 getter = () => traverse(baseGetter());1514 }1515 let cleanup;1516 const onInvalidate = (fn) => {1517 cleanup = runner.options.onStop = () => {1518 callWithErrorHandling(fn, instance, 4 /* WATCH_CLEANUP */);1519 };1520 };1521 let oldValue = isArray(source) ? [] : INITIAL_WATCHER_VALUE;1522 const job = () => {1523 if (!runner.active) {1524 return;1525 }1526 if (cb) {1527 // watch(source, cb)1528 const newValue = runner();1529 if (deep || forceTrigger || hasChanged(newValue, oldValue)) {1530 // cleanup before running cb again1531 if (cleanup) {1532 cleanup();1533 }1534 callWithAsyncErrorHandling(cb, instance, 3 /* WATCH_CALLBACK */, [1535 newValue,1536 // pass undefined as the old value when it's changed for the first time1537 oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,1538 onInvalidate1539 ]);1540 oldValue = newValue;1541 }1542 }1543 else {1544 // watchEffect1545 runner();1546 }1547 };1548 // important: mark the job as a watcher callback so that scheduler knows1549 // it is allowed to self-trigger (#1727)1550 job.allowRecurse = !!cb;1551 let scheduler;1552 if (flush === 'sync') {1553 scheduler = job;1554 }1555 else if (flush === 'post') {1556 scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);1557 }1558 else {1559 // default: 'pre'1560 scheduler = () => {1561 if (!instance || instance.isMounted) {1562 queuePreFlushCb(job);1563 }1564 else {1565 // with 'pre' option, the first call must happen before1566 // the component is mounted so it is called synchronously.1567 job();1568 }1569 };1570 }1571 const runner = effect(getter, {1572 lazy: true,1573 onTrack,1574 onTrigger,1575 scheduler1576 });1577 recordInstanceBoundEffect(runner, instance);1578 // initial run1579 if (cb) {1580 if (immediate) {1581 job();1582 }1583 else {1584 oldValue = runner();1585 }1586 }1587 else if (flush === 'post') {1588 queuePostRenderEffect(runner, instance && instance.suspense);1589 }1590 else {1591 runner();1592 }1593 return () => {1594 stop(runner);1595 if (instance) {1596 remove(instance.effects, runner);1597 }1598 };1599}1600// this.$watch1601function instanceWatch(source, cb, options) {1602 const publicThis = this.proxy;1603 const getter = isString(source)1604 ? () => publicThis[source]1605 : source.bind(publicThis);1606 return doWatch(getter, cb.bind(publicThis), options, this);1607}1608function traverse(value, seen = new Set()) {1609 if (!isObject(value) || seen.has(value)) {1610 return value;1611 }1612 seen.add(value);1613 if (isRef(value)) {1614 traverse(value.value, seen);1615 }1616 else if (isArray(value)) {1617 for (let i = 0; i < value.length; i++) {1618 traverse(value[i], seen);1619 }1620 }1621 else if (isSet(value) || isMap(value)) {1622 value.forEach((v) => {1623 traverse(v, seen);1624 });1625 }1626 else {1627 for (const key in value) {1628 traverse(value[key], seen);1629 }1630 }1631 return value;1632}1633// implementation, close to no-op1634function defineComponent(options) {1635 return isFunction(options) ? { setup: options, name: options.name } : options;1636}1637const queuePostRenderEffect = queueEffectWithSuspense1638 ;1639const isTeleport = (type) => type.__isTeleport;1640const NULL_DYNAMIC_COMPONENT = Symbol();1641const Fragment = Symbol((process.env.NODE_ENV !== 'production') ? 'Fragment' : undefined);1642const Text = Symbol((process.env.NODE_ENV !== 'production') ? 'Text' : undefined);1643const Comment = Symbol((process.env.NODE_ENV !== 'production') ? 'Comment' : undefined);1644Symbol((process.env.NODE_ENV !== 'production') ? 'Static' : undefined);1645let currentBlock = null;1646function isVNode(value) {1647 return value ? value.__v_isVNode === true : false;1648}1649const createVNodeWithArgsTransform = (...args) => {1650 return _createVNode(...(args));1651};1652const InternalObjectKey = `__vInternal`;1653const normalizeKey = ({ key }) => key != null ? key : null;1654const normalizeRef = ({ ref }) => {1655 return (ref != null1656 ? isString(ref) || isRef(ref) || isFunction(ref)1657 ? { i: currentRenderingInstance, r: ref }1658 : ref1659 : null);1660};1661const createVNode = ((process.env.NODE_ENV !== 'production')1662 ? createVNodeWithArgsTransform1663 : _createVNode);1664function _createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) {1665 if (!type || type === NULL_DYNAMIC_COMPONENT) {1666 if ((process.env.NODE_ENV !== 'production') && !type) {1667 warn(`Invalid vnode type when creating vnode: ${type}.`);1668 }1669 type = Comment;1670 }1671 if (isVNode(type)) {1672 // createVNode receiving an existing vnode. This happens in cases like1673 // <component :is="vnode"/>1674 // #2078 make sure to merge refs during the clone instead of overwriting it1675 const cloned = cloneVNode(type, props, true /* mergeRef: true */);1676 if (children) {1677 normalizeChildren(cloned, children);1678 }1679 return cloned;1680 }1681 // class component normalization.1682 if (isClassComponent(type)) {1683 type = type.__vccOpts;1684 }1685 // class & style normalization.1686 if (props) {1687 // for reactive or proxy objects, we need to clone it to enable mutation.1688 if (isProxy(props) || InternalObjectKey in props) {1689 props = extend({}, props);1690 }1691 let { class: klass, style } = props;1692 if (klass && !isString(klass)) {1693 props.class = normalizeClass(klass);1694 }1695 if (isObject(style)) {1696 // reactive state objects need to be cloned since they are likely to be1697 // mutated1698 if (isProxy(style) && !isArray(style)) {1699 style = extend({}, style);1700 }1701 props.style = normalizeStyle(style);1702 }1703 }1704 // encode the vnode type information into a bitmap1705 const shapeFlag = isString(type)1706 ? 1 /* ELEMENT */1707 : isSuspense(type)1708 ? 128 /* SUSPENSE */1709 : isTeleport(type)1710 ? 64 /* TELEPORT */1711 : isObject(type)1712 ? 4 /* STATEFUL_COMPONENT */1713 : isFunction(type)1714 ? 2 /* FUNCTIONAL_COMPONENT */1715 : 0;1716 if ((process.env.NODE_ENV !== 'production') && shapeFlag & 4 /* STATEFUL_COMPONENT */ && isProxy(type)) {1717 type = toRaw(type);1718 warn(`Vue received a Component which was made a reactive object. This can ` +1719 `lead to unnecessary performance overhead, and should be avoided by ` +1720 `marking the component with \`markRaw\` or using \`shallowRef\` ` +1721 `instead of \`ref\`.`, `\nComponent that was made reactive: `, type);1722 }1723 const vnode = {1724 __v_isVNode: true,1725 ["__v_skip" /* SKIP */]: true,1726 type,1727 props,1728 key: props && normalizeKey(props),1729 ref: props && normalizeRef(props),1730 scopeId: currentScopeId,1731 children: null,1732 component: null,1733 suspense: null,1734 ssContent: null,1735 ssFallback: null,1736 dirs: null,1737 transition: null,1738 el: null,1739 anchor: null,1740 target: null,1741 targetAnchor: null,1742 staticCount: 0,1743 shapeFlag,1744 patchFlag,1745 dynamicProps,1746 dynamicChildren: null,1747 appContext: null1748 };1749 // validate key1750 if ((process.env.NODE_ENV !== 'production') && vnode.key !== vnode.key) {1751 warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type);1752 }1753 normalizeChildren(vnode, children);1754 // normalize suspense children1755 if ( shapeFlag & 128 /* SUSPENSE */) {1756 const { content, fallback } = normalizeSuspenseChildren(vnode);1757 vnode.ssContent = content;1758 vnode.ssFallback = fallback;1759 }1760 if (// avoid a block node from tracking itself1761 !isBlockNode &&1762 // has current parent block1763 currentBlock &&1764 // presence of a patch flag indicates this node needs patching on updates.1765 // component nodes also should always be patched, because even if the1766 // component doesn't need to update, it needs to persist the instance on to1767 // the next vnode so that it can be properly unmounted later.1768 (patchFlag > 0 || shapeFlag & 6 /* COMPONENT */) &&1769 // the EVENTS flag is only for hydration and if it is the only flag, the1770 // vnode should not be considered dynamic due to handler caching....
browser.js
Source:browser.js
...1027 }1028 return singleRoot;1029 }1030 const isSuspense = (type) => type.__isSuspense;1031 function normalizeSuspenseChildren(vnode) {1032 const { shapeFlag, children } = vnode;1033 let content;1034 let fallback;1035 if (shapeFlag & 32 /* SLOTS_CHILDREN */) {1036 content = normalizeSuspenseSlot(children.default);1037 fallback = normalizeSuspenseSlot(children.fallback);1038 }1039 else {1040 content = normalizeSuspenseSlot(children);1041 fallback = normalizeVNode(null);1042 }1043 return {1044 content,1045 fallback1046 };1047 }1048 function normalizeSuspenseSlot(s) {1049 if (isFunction(s)) {1050 s = s();1051 }1052 if (isArray(s)) {1053 const singleChild = filterSingleRoot(s);1054 s = singleChild;1055 }1056 return normalizeVNode(s);1057 }1058 function queueEffectWithSuspense(fn, suspense) {1059 if (suspense && suspense.pendingBranch) {1060 if (isArray(fn)) {1061 suspense.effects.push(...fn);1062 }1063 else {1064 suspense.effects.push(fn);1065 }1066 }1067 else {1068 queuePostFlushCb(fn);1069 }1070 }1071 // initial value for watchers to trigger on undefined initial values1072 const INITIAL_WATCHER_VALUE = {};1073 function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ, instance = currentInstance) {1074 let getter;1075 let forceTrigger = false;1076 if (isRef(source)) {1077 getter = () => source.value;1078 forceTrigger = !!source._shallow;1079 }1080 else if (isReactive(source)) {1081 getter = () => source;1082 deep = true;1083 }1084 else if (isArray(source)) {1085 getter = () => source.map(s => {1086 if (isRef(s)) {1087 return s.value;1088 }1089 else if (isReactive(s)) {1090 return traverse(s);1091 }1092 else if (isFunction(s)) {1093 return callWithErrorHandling(s, instance, 2 /* WATCH_GETTER */, [1094 instance && instance.proxy1095 ]);1096 }1097 else ;1098 });1099 }1100 else if (isFunction(source)) {1101 if (cb) {1102 // getter with cb1103 getter = () => callWithErrorHandling(source, instance, 2 /* WATCH_GETTER */, [1104 instance && instance.proxy1105 ]);1106 }1107 else {1108 // no cb -> simple effect1109 getter = () => {1110 if (instance && instance.isUnmounted) {1111 return;1112 }1113 if (cleanup) {1114 cleanup();1115 }1116 return callWithAsyncErrorHandling(source, instance, 3 /* WATCH_CALLBACK */, [onInvalidate]);1117 };1118 }1119 }1120 else {1121 getter = NOOP;1122 }1123 if (cb && deep) {1124 const baseGetter = getter;1125 getter = () => traverse(baseGetter());1126 }1127 let cleanup;1128 let onInvalidate = (fn) => {1129 cleanup = runner.options.onStop = () => {1130 callWithErrorHandling(fn, instance, 4 /* WATCH_CLEANUP */);1131 };1132 };1133 let oldValue = isArray(source) ? [] : INITIAL_WATCHER_VALUE;1134 const job = () => {1135 if (!runner.active) {1136 return;1137 }1138 if (cb) {1139 // watch(source, cb)1140 const newValue = runner();1141 if (deep || forceTrigger || hasChanged(newValue, oldValue)) {1142 // cleanup before running cb again1143 if (cleanup) {1144 cleanup();1145 }1146 callWithAsyncErrorHandling(cb, instance, 3 /* WATCH_CALLBACK */, [1147 newValue,1148 // pass undefined as the old value when it's changed for the first time1149 oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,1150 onInvalidate1151 ]);1152 oldValue = newValue;1153 }1154 }1155 else {1156 // watchEffect1157 runner();1158 }1159 };1160 // important: mark the job as a watcher callback so that scheduler knows1161 // it is allowed to self-trigger (#1727)1162 job.allowRecurse = !!cb;1163 let scheduler;1164 if (flush === 'sync') {1165 scheduler = job;1166 }1167 else if (flush === 'post') {1168 scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);1169 }1170 else {1171 // default: 'pre'1172 scheduler = () => {1173 if (!instance || instance.isMounted) {1174 queuePreFlushCb(job);1175 }1176 else {1177 // with 'pre' option, the first call must happen before1178 // the component is mounted so it is called synchronously.1179 job();1180 }1181 };1182 }1183 const runner = effect(getter, {1184 lazy: true,1185 onTrack,1186 onTrigger,1187 scheduler1188 });1189 recordInstanceBoundEffect(runner, instance);1190 // initial run1191 if (cb) {1192 if (immediate) {1193 job();1194 }1195 else {1196 oldValue = runner();1197 }1198 }1199 else if (flush === 'post') {1200 queuePostRenderEffect(runner, instance && instance.suspense);1201 }1202 else {1203 runner();1204 }1205 return () => {1206 stop(runner);1207 if (instance) {1208 remove(instance.effects, runner);1209 }1210 };1211 }1212 // this.$watch1213 function instanceWatch(source, cb, options) {1214 const publicThis = this.proxy;1215 const getter = isString(source)1216 ? () => publicThis[source]1217 : source.bind(publicThis);1218 return doWatch(getter, cb.bind(publicThis), options, this);1219 }1220 function traverse(value, seen = new Set()) {1221 if (!isObject(value) || seen.has(value)) {1222 return value;1223 }1224 seen.add(value);1225 if (isRef(value)) {1226 traverse(value.value, seen);1227 }1228 else if (isArray(value)) {1229 for (let i = 0; i < value.length; i++) {1230 traverse(value[i], seen);1231 }1232 }1233 else if (isSet(value) || isMap(value)) {1234 value.forEach((v) => {1235 traverse(v, seen);1236 });1237 }1238 else {1239 for (const key in value) {1240 traverse(value[key], seen);1241 }1242 }1243 return value;1244 }1245 const queuePostRenderEffect = queueEffectWithSuspense1246 ;1247 const isTeleport = (type) => type.__isTeleport;1248 const NULL_DYNAMIC_COMPONENT = Symbol();1249 const Fragment = Symbol(undefined);1250 const Text = Symbol(undefined);1251 const Comment = Symbol(undefined);1252 // Since v-if and v-for are the two possible ways node structure can dynamically1253 // change, once we consider v-if branches and each v-for fragment a block, we1254 // can divide a template into nested blocks, and within each block the node1255 // structure would be stable. This allows us to skip most children diffing1256 // and only worry about the dynamic nodes (indicated by patch flags).1257 const blockStack = [];1258 let currentBlock = null;1259 /**1260 * Open a block.1261 * This must be called before `createBlock`. It cannot be part of `createBlock`1262 * because the children of the block are evaluated before `createBlock` itself1263 * is called. The generated code typically looks like this:1264 *1265 * ```js1266 * function render() {1267 * return (openBlock(),createBlock('div', null, [...]))1268 * }1269 * ```1270 * disableTracking is true when creating a v-for fragment block, since a v-for1271 * fragment always diffs its children.1272 *1273 * @private1274 */1275 function openBlock(disableTracking = false) {1276 blockStack.push((currentBlock = disableTracking ? null : []));1277 }1278 function closeBlock() {1279 blockStack.pop();1280 currentBlock = blockStack[blockStack.length - 1] || null;1281 }1282 /**1283 * Create a block root vnode. Takes the same exact arguments as `createVNode`.1284 * A block root keeps track of dynamic nodes within the block in the1285 * `dynamicChildren` array.1286 *1287 * @private1288 */1289 function createBlock(type, props, children, patchFlag, dynamicProps) {1290 const vnode = createVNode(type, props, children, patchFlag, dynamicProps, true /* isBlock: prevent a block from tracking itself */);1291 // save current block children on the block vnode1292 vnode.dynamicChildren = currentBlock || EMPTY_ARR;1293 // close block1294 closeBlock();1295 // a block is always going to be patched, so track it as a child of its1296 // parent block1297 if (currentBlock) {1298 currentBlock.push(vnode);1299 }1300 return vnode;1301 }1302 function isVNode(value) {1303 return value ? value.__v_isVNode === true : false;1304 }1305 const InternalObjectKey = `__vInternal`;1306 const normalizeKey = ({ key }) => key != null ? key : null;1307 const normalizeRef = ({ ref }) => {1308 return (ref != null1309 ? isString(ref) || isRef(ref) || isFunction(ref)1310 ? { i: currentRenderingInstance, r: ref }1311 : ref1312 : null);1313 };1314 const createVNode = (_createVNode);1315 function _createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) {1316 if (!type || type === NULL_DYNAMIC_COMPONENT) {1317 type = Comment;1318 }1319 if (isVNode(type)) {1320 // createVNode receiving an existing vnode. This happens in cases like1321 // <component :is="vnode"/>1322 // #2078 make sure to merge refs during the clone instead of overwriting it1323 const cloned = cloneVNode(type, props, true /* mergeRef: true */);1324 if (children) {1325 normalizeChildren(cloned, children);1326 }1327 return cloned;1328 }1329 // class component normalization.1330 if (isClassComponent(type)) {1331 type = type.__vccOpts;1332 }1333 // class & style normalization.1334 if (props) {1335 // for reactive or proxy objects, we need to clone it to enable mutation.1336 if (isProxy(props) || InternalObjectKey in props) {1337 props = extend({}, props);1338 }1339 let { class: klass, style } = props;1340 if (klass && !isString(klass)) {1341 props.class = normalizeClass(klass);1342 }1343 if (isObject(style)) {1344 // reactive state objects need to be cloned since they are likely to be1345 // mutated1346 if (isProxy(style) && !isArray(style)) {1347 style = extend({}, style);1348 }1349 props.style = normalizeStyle(style);1350 }1351 }1352 // encode the vnode type information into a bitmap1353 const shapeFlag = isString(type)1354 ? 1 /* ELEMENT */1355 : isSuspense(type)1356 ? 128 /* SUSPENSE */1357 : isTeleport(type)1358 ? 64 /* TELEPORT */1359 : isObject(type)1360 ? 4 /* STATEFUL_COMPONENT */1361 : isFunction(type)1362 ? 2 /* FUNCTIONAL_COMPONENT */1363 : 0;1364 const vnode = {1365 __v_isVNode: true,1366 ["__v_skip" /* SKIP */]: true,1367 type,1368 props,1369 key: props && normalizeKey(props),1370 ref: props && normalizeRef(props),1371 scopeId: currentScopeId,1372 slotScopeIds: null,1373 children: null,1374 component: null,1375 suspense: null,1376 ssContent: null,1377 ssFallback: null,1378 dirs: null,1379 transition: null,1380 el: null,1381 anchor: null,1382 target: null,1383 targetAnchor: null,1384 staticCount: 0,1385 shapeFlag,1386 patchFlag,1387 dynamicProps,1388 dynamicChildren: null,1389 appContext: null1390 };1391 normalizeChildren(vnode, children);1392 // normalize suspense children1393 if (shapeFlag & 128 /* SUSPENSE */) {1394 const { content, fallback } = normalizeSuspenseChildren(vnode);1395 vnode.ssContent = content;1396 vnode.ssFallback = fallback;1397 }1398 if (// avoid a block node from tracking itself1399 !isBlockNode &&1400 // has current parent block1401 currentBlock &&1402 // presence of a patch flag indicates this node needs patching on updates.1403 // component nodes also should always be patched, because even if the1404 // component doesn't need to update, it needs to persist the instance on to1405 // the next vnode so that it can be properly unmounted later.1406 (patchFlag > 0 || shapeFlag & 6 /* COMPONENT */) &&1407 // the EVENTS flag is only for hydration and if it is the only flag, the1408 // vnode should not be considered dynamic due to handler caching.
...
note-generate-code.js
Source:note-generate-code.js
...635 }636 normalizeChildren(vnode, children);637 // normalize suspense children638 if ( shapeFlag & 128 /* SUSPENSE */) {639 const { content, fallback } = normalizeSuspenseChildren(vnode);640 vnode.ssContent = content;641 vnode.ssFallback = fallback;642 }643 if (shouldTrack$1 > 0 &&644 // avoid a block node from tracking itself645 !isBlockNode &&646 // has current parent block647 currentBlock &&648 // presence of a patch flag indicates this node needs patching on updates.649 // component nodes also should always be patched, because even if the650 // component doesn't need to update, it needs to persist the instance on to651 // the next vnode so that it can be properly unmounted later.652 (patchFlag > 0 || shapeFlag & 6 /* COMPONENT */) &&653 // the EVENTS flag is only for hydration and if it is the only flag, the654 // vnode should not be considered dynamic due to handler caching.655 patchFlag !== 32 /* HYDRATE_EVENTS */) {656 currentBlock.push(vnode);657 }658 return vnode;659 }660 function normalizeChildren(vnode, children) {661 let type = 0;662 const { shapeFlag } = vnode;663 if (children == null) {664 children = null;665 }666 else if (isArray(children)) {667 type = 16 /* ARRAY_CHILDREN */;668 }669 else if (typeof children === 'object') {670 if (shapeFlag & 1 /* ELEMENT */ || shapeFlag & 64 /* TELEPORT */) {671 // Normalize slot to plain children for plain element and Teleport672 const slot = children.default;673 if (slot) {674 // _c marker is added by withCtx() indicating this is a compiled slot675 slot._c && setCompiledSlotRendering(1);676 normalizeChildren(vnode, slot());677 slot._c && setCompiledSlotRendering(-1);678 }679 return;680 }681 else {682 type = 32 /* SLOTS_CHILDREN */;683 const slotFlag = children._;684 if (!slotFlag && !(InternalObjectKey in children)) {685 children._ctx = currentRenderingInstance;686 }687 else if (slotFlag === 3 /* FORWARDED */ && currentRenderingInstance) {688 // a child component receives forwarded slots from the parent.689 // its slot type is determined by its parent's slot type.690 if (currentRenderingInstance.vnode.patchFlag & 1024 /* DYNAMIC_SLOTS */) {691 children._ = 2 /* DYNAMIC */;692 vnode.patchFlag |= 1024 /* DYNAMIC_SLOTS */;693 }694 else {695 children._ = 1 /* STABLE */;696 }697 }698 }699 }700 else if (isFunction(children)) {701 children = { default: children, _ctx: currentRenderingInstance };702 type = 32 /* SLOTS_CHILDREN */;703 }704 else {705 children = String(children);706 // force teleport children to array so it can be moved around707 if (shapeFlag & 64 /* TELEPORT */) {708 type = 16 /* ARRAY_CHILDREN */;709 children = [createTextVNode(children)];710 }711 else {712 type = 8 /* TEXT_CHILDREN */;713 }714 }715 vnode.children = children;716 vnode.shapeFlag |= type;717 }718 function normalizeSuspenseChildren(vnode) {719 const { shapeFlag, children } = vnode;720 let content;721 let fallback;722 if (shapeFlag & 32 /* SLOTS_CHILDREN */) {723 content = normalizeSuspenseSlot(children.default);724 fallback = normalizeSuspenseSlot(children.fallback);725 }726 else {727 content = normalizeSuspenseSlot(children);728 fallback = normalizeVNode(null);729 }730 return {731 content,732 fallback...
server-renderer.cjs.js
Source:server-renderer.cjs.js
...238 else if (shapeFlag & 64 /* TELEPORT */) {239 renderTeleportVNode(push, vnode, parentComponent);240 }241 else if (shapeFlag & 128 /* SUSPENSE */) {242 renderVNode(push, normalizeSuspenseChildren(vnode).content, parentComponent);243 }244 else {245 vue.warn('[@vue/server-renderer] Invalid VNode type:', type, `(${typeof type})`);246 }247 }248}249function renderVNodeChildren(push, children, parentComponent) {250 for (let i = 0; i < children.length; i++) {251 renderVNode(push, normalizeVNode(children[i]), parentComponent);252 }253}254function renderElementVNode(push, vnode, parentComponent) {255 const tag = vnode.type;256 let { props, children, shapeFlag, scopeId, dirs } = vnode;
...
server-renderer.cjs.prod.js
Source:server-renderer.cjs.prod.js
...235 else if (shapeFlag & 64 /* TELEPORT */) {236 renderTeleportVNode(push, vnode, parentComponent);237 }238 else if (shapeFlag & 128 /* SUSPENSE */) {239 renderVNode(push, normalizeSuspenseChildren(vnode).content, parentComponent);240 }241 else {242 vue.warn('[@vue/server-renderer] Invalid VNode type:', type, `(${typeof type})`);243 }244 }245}246function renderVNodeChildren(push, children, parentComponent) {247 for (let i = 0; i < children.length; i++) {248 renderVNode(push, normalizeVNode(children[i]), parentComponent);249 }250}251function renderElementVNode(push, vnode, parentComponent) {252 const tag = vnode.type;253 let { props, children, shapeFlag, scopeId, dirs } = vnode;
...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const children = await page.$$('.navbar__inner a');7 const normalizedChildren = await page.evaluate((children) => {8 return window.__playwright__internal__normalizeSuspenseChildren(children);9 }, children);10 console.log('Normalized children', normalizedChildren);11 await browser.close();12})();13 {14 element: ElementHandle {15 },16 },17 {18 element: ElementHandle {19 },20 },21 {22 element: ElementHandle {23 },24 },25 {26 element: ElementHandle {27 },28 }
Using AI Code Generation
1const { normalizeSuspenseChildren } = require('playwright-core/lib/server/supplements/recorder/recorderSupplement.js');2const { toMatchImageSnapshot } = require('jest-image-snapshot');3expect.extend({ toMatchImageSnapshot });4test('should match', async () => {5 const page = await browser.newPage();6 const element = await page.$('text=Get started');7 const image = await element.screenshot();8 expect(image).toMatchImageSnapshot();9});10module.exports = {11};
Using AI Code Generation
1const { normalizeSuspenseChildren } = require('playwright-core/lib/server/dom');2const { createJSHandle } = require('playwright-core/lib/server/jsHandle');3const { createExecutionContext } = require('playwright-core/lib/server/frames');4const { createPage } = require('playwright-core/lib/server/page');5const { createBrowserContext } = require('playwright-core/lib/server/browserContext');6const { createBrowser } = require('playwright-core/lib/server/browser');7const browser = createBrowser('browserName');8const browserContext = createBrowserContext(browser, 'browserContextId');9const page = createPage(browserContext, 'pageId', 'pageName');10const frame = page.mainFrame();11const context = createExecutionContext(page, frame, 'contextId');12const handle = createJSHandle(context, 'objectHandleId', 'objectHandleType', 'objectHandleValue');13const children = normalizeSuspenseChildren(handle);14console.log(children);15 {16 }
Using AI Code Generation
1const { normalizeSuspenseChildren } = require('playwright/lib/server/supplements/recorder/recorderSupplement');2 { type: 'text', value: 'Hello' },3 { type: 'text', value: 'World' },4 { type: 'text', value: '!' },5];6const normalizedChildren = normalizeSuspenseChildren(children);7console.log(normalizedChildren);8const { normalizeSuspenseChildren } = require('playwright/lib/server/supplements/recorder/recorderSupplement');9 { type: 'text', value: 'Hello' },10 { type: 'text', value: 'World' },11 { type: 'text', value: '!' },12];13const normalizedChildren = normalizeSuspenseChildren(children);14console.log(normalizedChildren);15const { normalizeSuspenseChildren } = require('playwright/lib/server/supplements/recorder/recorderSupplement');16 { type: 'text', value: 'Hello' },17 { type: 'text', value: 'World' },18 { type: 'text', value: '!' },19];20const normalizedChildren = normalizeSuspenseChildren(children);21console.log(normalizedChildren);
Using AI Code Generation
1const { normalizeSuspenseChildren } = require('playwright/lib/server/supplements/recorder/recorderSupplement');2const children = normalizeSuspenseChildren([3 {4 },5 {6 },7]);8console.log(children);9 {10 },11 {12 }
Using AI Code Generation
1const { normalizeSuspenseChildren } = require("playwright/lib/server/supplements/recorder/recorderSupplement");2const children = normalizeSuspenseChildren([3 {4 attributes: {5 },6 {7 attributes: {8 },9 },10 {11 attributes: {12 },13 },14 },15 {16 attributes: {17 },18 },19]);20console.log(children);21 {22 attributes: { 'data-testid': 'test-1' },23 {24 attributes: { 'data-testid': 'test-2' },25 },26 {27 attributes: { 'data-testid': 'test-3' },28 }29 },30 {31 attributes: { 'data-testid': 'test-4' },32 }
Using AI Code Generation
1const { normalizeSuspenseChildren } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');2const input = {3 { type: 'text', value: 'Hello' },4 { type: 'text', value: 'World' },5 { type: 'text', value: '!' },6};7console.log(normalizeSuspenseChildren(input));8const { normalizeSuspenseChildren } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');9const input = {10 { type: 'text', value: 'Hello' },11 { type: 'text', value: 'World' },12 { type: 'text', value: '!' },13};14console.log(normalizeSuspenseChildren(input));15const { normalizeSuspenseChildren } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');16const input = {17 { type: 'text', value: 'Hello' },18 { type: 'text', value: 'World' },19 { type: 'text', value: '!' },20};21console.log(normalizeSuspenseChildren(input));22const { normalizeSuspenseChildren } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');23const input = {24 { type: 'text', value: 'Hello' },25 { type: 'text', value: 'World' },26 { type: 'text', value: '
Using AI Code Generation
1const { Internal } = require('playwright/lib/server/server');2const children = [1, 2, 3];3const result = Internal.normalizeSuspenseChildren(children);4console.log(result);5const { Internal } = require('playwright/lib/server/server');6const children = [1, 2, 3];7const result = Internal.normalizeSuspenseChildren(children);8console.log(result);9const { Internal } = require('playwright/lib/server/server');10const children = [1, 2, 3];11const result = Internal.normalizeSuspenseChildren(children);12console.log(result);13const { Internal } = require('playwright/lib/server/server');14const children = [1, 2, 3];15const result = Internal.normalizeSuspenseChildren(children);16console.log(result);17const { Internal } = require('playwright/lib/server/server');18const children = [1, 2, 3];19const result = Internal.normalizeSuspenseChildren(children);20console.log(result);21const { Internal } = require('playwright/lib/server/server');22const children = [1, 2, 3];23const result = Internal.normalizeSuspenseChildren(children);24console.log(result);25const { Internal } = require('playwright/lib/server/server');26const children = [1, 2, 3];27const result = Internal.normalizeSuspenseChildren(children);28console.log(result);29const { Internal } = require('playwright/lib/server/server');30const children = [1, 2, 3];31const result = Internal.normalizeSuspenseChildren(children);32console.log(result);33const { Internal } = require('playwright/lib/server/server');34const children = [1, 2, 3];35const result = Internal.normalizeSuspenseChildren(children);36console.log(result);37const { Internal } = require('playwright/lib/server
Using AI Code Generation
1const { normalizeSuspenseChildren } = require('playwright/lib/server/dom.js');2const { h, render, Suspense } = require('preact');3const { useState, useEffect } = require('preact/hooks');4const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));5const Child = ({ name }) => {6 const [count, setCount] = useState(0);7 useEffect(() => {8 const interval = setInterval(() => setCount((c) => c + 1), 1000);9 return () => clearInterval(interval);10 }, []);11 return h('div', {}, `${name} ${count}`);12};13const Parent = () => {14 const [show, setShow] = useState(false);15 return h(16 {},17 h(18 {19 onClick: () => setShow((s) => !s),20 },21 ? h(22 {23 fallback: h('div', {}, 'loading'),24 },25 h(Child, { name: 'child1' }),26 h(Child, { name: 'child2' })27 );28};29render(h(Parent), document.body);30const normalizedChildren = normalizeSuspenseChildren([31 h(Child, { name: 'child1' }),32 h(Child, { name: 'child2' }),33]);34console.log(normalizedChildren);35const { normalizeSuspenseChildren } = require('playwright/lib/server/dom.js');36const { h, render, Suspense } = require('preact');37const { useState, useEffect } = require('preact/hooks');38const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));39const Child = ({ name }) => {
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?
