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 Github

copy

Full Screen

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

Full Screen

Full Screen

runtime-core.esm-bundler.js

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

copy

Full Screen

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

Full Screen

Full Screen

runtime-core.cjs.prod.js

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

copy

Full Screen

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

Full Screen

Full Screen

index.esm.js

Source:index.esm.js Github

copy

Full Screen

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

Full Screen

Full Screen

browser.js

Source:browser.js Github

copy

Full Screen

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

Full Screen

Full Screen

note-generate-code.js

Source:note-generate-code.js Github

copy

Full Screen

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

Full Screen

Full Screen

server-renderer.cjs.js

Source:server-renderer.cjs.js Github

copy

Full Screen

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

Full Screen

Full Screen

server-renderer.cjs.prod.js

Source:server-renderer.cjs.prod.js Github

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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 }

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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 }

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { normalizeSuspenseChildren } = require('playwright/lib/server/supplements/recorder/recorderSupplement');2const children = normalizeSuspenseChildren([3 {4 },5 {6 },7]);8console.log(children);9 {10 },11 {12 }

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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 }

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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: '

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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 }) => {

Full Screen

Full Screen

Playwright tutorial

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

Chapters:

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

Run Playwright Internal automation tests on LambdaTest cloud grid

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

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

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

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

Was this article helpful?

Helpful

NotHelpful