KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta Join TestMu Conference

How to use cloneIfMounted method in Playwright Internal

Best JavaScript code snippet using playwright-internal

jquery-3.6.0.min.js

Source:jquery-3.6.0.min.js

...1253          }1254        }1255      }, mountChildren = (e, t, n, r, o, s, a, i, l = 0) => {1256        for (let c = l; c < e.length; c++) {1257          const l = e[c] = i ? cloneIfMounted(e[c]) : normalizeVNode(e[c]);1258          patch(null, l, t, n, r, o, s, a, i)1259        }1260      }, patchElement = (e, t, n, r, a, i, l) => {1261        const c = t.el = e.el;1262        let {patchFlag: f, dynamicChildren: p, dirs: d} = t;1263        f |= 16 & e.patchFlag;1264        const m = e.props || g, v = t.props || g;1265        let y;1266        if ((y = v.onVnodeBeforeUpdate) && invokeVNodeHook(y, n, t, e), d && invokeDirectiveHook(t, e, n, "beforeUpdate"), f > 0) {1267          if (16 & f) patchProps(c, t, m, v, n, r, a); else if (2 & f && m.class !== v.class && o(c, "class", null, v.class, a), 4 & f && o(c, "style", m.style, v.style, a), 8 & f) {1268            const i = t.dynamicProps;1269            for (let t = 0; t < i.length; t++) {1270              const l = i[t], u = m[l], f = v[l];1271              (f !== u || s && s(c, l)) && o(c, l, u, f, a, e.children, n, r, unmountChildren)1272            }1273          }1274          1 & f && e.children !== t.children && u(c, t.children)1275        } else l || null != p || patchProps(c, t, m, v, n, r, a);1276        const b = a && "foreignObject" !== t.type;1277        p ? patchBlockChildren(e.dynamicChildren, p, c, n, r, b, i) : l || patchChildren(e, t, c, null, n, r, b, i, !1), ((y = v.onVnodeUpdated) || d) && Me((() => {1278          y && invokeVNodeHook(y, n, t, e), d && invokeDirectiveHook(t, e, n, "updated")1279        }), r)1280      }, patchBlockChildren = (e, t, n, r, o, s, a) => {1281        for (let i = 0; i < t.length; i++) {1282          const l = e[i], c = t[i],1283            u = l.el && (l.type === Le || !isSameVNodeType(l, c) || 6 & l.shapeFlag || 64 & l.shapeFlag) ? f(l.el) : n;1284          patch(l, c, u, null, r, o, s, a, !0)1285        }1286      }, patchProps = (e, t, n, r, a, i, l) => {1287        if (n !== r) {1288          for (const c in r) {1289            if (k(c)) continue;1290            const u = r[c], f = n[c];1291            (u !== f || s && s(e, c)) && o(e, c, f, u, l, t.children, a, i, unmountChildren)1292          }1293          if (n !== g) for (const s in n) k(s) || s in r || o(e, s, n[s], null, l, t.children, a, i, unmountChildren)1294        }1295      }, processFragment = (e, t, r, o, s, a, l, c, u) => {1296        const f = t.el = e ? e.el : i(""), p = t.anchor = e ? e.anchor : i("");1297        let {patchFlag: d, dynamicChildren: m, slotScopeIds: g} = t;1298        m && (u = !0), g && (c = c ? c.concat(g) : g), null == e ? (n(f, r, o), n(p, r, o), mountChildren(t.children, r, p, s, a, l, c, u)) : d > 0 && 64 & d && m && e.dynamicChildren ? (patchBlockChildren(e.dynamicChildren, m, r, s, a, l, c), (null != t.key || s && t === s.subTree) && traverseStaticChildren(e, t, !0)) : patchChildren(e, t, r, p, s, a, l, c, u)1299      }, processComponent = (e, t, n, r, o, s, a, i, l) => {1300        t.slotScopeIds = i, null == e ? 512 & t.shapeFlag ? o.ctx.activate(t, n, r, a, l) : mountComponent(t, n, r, o, s, a, l) : updateComponent(e, t, l)1301      }, mountComponent = (e, t, n, r, o, s, a) => {1302        const i = e.component = function createComponentInstance(e, t, n) {1303          const r = e.type, o = (t ? t.appContext : e.appContext) || Qe, s = {1304            uid: Je++,1305            vnode: e,1306            type: r,1307            parent: t,1308            appContext: o,1309            root: null,1310            next: null,1311            subTree: null,1312            update: null,1313            render: null,1314            proxy: null,1315            exposed: null,1316            withProxy: null,1317            effects: null,1318            provides: t ? t.provides : Object.create(o.provides),1319            accessCache: null,1320            renderCache: [],1321            components: null,1322            directives: null,1323            propsOptions: normalizePropsOptions(r, o),1324            emitsOptions: normalizeEmitsOptions(r, o),1325            emit: null,1326            emitted: null,1327            propsDefaults: g,1328            inheritAttrs: r.inheritAttrs,1329            ctx: g,1330            data: g,1331            props: g,1332            attrs: g,1333            slots: g,1334            refs: g,1335            setupState: g,1336            setupContext: null,1337            suspense: n,1338            suspenseId: n ? n.pendingId : 0,1339            asyncDep: null,1340            asyncResolved: !1,1341            isMounted: !1,1342            isUnmounted: !1,1343            isDeactivated: !1,1344            bc: null,1345            c: null,1346            bm: null,1347            m: null,1348            bu: null,1349            u: null,1350            um: null,1351            bum: null,1352            da: null,1353            a: null,1354            rtg: null,1355            rtc: null,1356            ec: null,1357            sp: null1358          };1359          return s.ctx = {_: s}, s.root = t ? t.root : s, s.emit = emit.bind(null, s), s1360        }(e, r, o);1361        if (isKeepAlive(e) && (i.ctx.renderer = R), function setupComponent(e, t = !1) {1362          Xe = t;1363          const {props: n, children: r} = e.vnode, o = isStatefulComponent(e);1364          initProps(e, n, o, t), ((e, t) => {1365            if (32 & e.vnode.shapeFlag) {1366              const n = t._;1367              n ? (e.slots = toRaw(t), def(t, "_", n)) : normalizeObjectSlots(t, e.slots = {})1368            } else e.slots = {}, t && normalizeVNodeSlots(e, t);1369            def(e.slots, Ue, 1)1370          })(e, r);1371          const s = o ? function setupStatefulComponent(e, t) {1372            const n = e.type;1373            e.accessCache = Object.create(null), e.proxy = function markRaw(e) {1374              return def(e, "__v_skip", !0), e1375            }(new Proxy(e.ctx, qe));1376            const {setup: r} = n;1377            if (r) {1378              const n = e.setupContext = r.length > 1 ? function createSetupContext(e) {1379                const expose = t => {1380                  e.exposed = proxyRefs(t)1381                };1382                return {attrs: e.attrs, slots: e.slots, emit: e.emit, expose}1383              }(e) : null;1384              Ye = e, pauseTracking();1385              const o = callWithErrorHandling(r, e, 0, [e.props, n]);1386              if (resetTracking(), Ye = null, isPromise(o)) {1387                if (t) return o.then((t => {1388                  handleSetupResult(e, t)1389                })).catch((t => {1390                  handleError(t, e, 0)1391                }));1392                e.asyncDep = o1393              } else handleSetupResult(e, o)1394            } else finishComponentSetup(e)1395          }(e, t) : void 0;1396          return Xe = !1, s1397        }(i), i.asyncDep) {1398          if (o && o.registerDep(i, setupRenderEffect), !e.el) {1399            const e = i.subTree = De(He);1400            processCommentNode(null, e, t, n)1401          }1402        } else setupRenderEffect(i, e, t, n, o, s, a)1403      }, updateComponent = (e, t, n) => {1404        const r = t.component = e.component;1405        if (function shouldUpdateComponent(e, t, n) {1406          const {props: r, children: o, component: s} = e, {props: a, children: i, patchFlag: l} = t, c = s.emitsOptions;1407          if (t.dirs || t.transition) return !0;1408          if (!(n && l >= 0)) return !(!o && !i || i && i.$stable) || r !== a && (r ? !a || hasPropsChanged(r, a, c) : !!a);1409          if (1024 & l) return !0;1410          if (16 & l) return r ? hasPropsChanged(r, a, c) : !!a;1411          if (8 & l) {1412            const e = t.dynamicProps;1413            for (let t = 0; t < e.length; t++) {1414              const n = e[t];1415              if (a[n] !== r[n] && !isEmitListener(c, n)) return !01416            }1417          }1418          return !11419        }(e, t, n)) {1420          if (r.asyncDep && !r.asyncResolved) return void updateComponentPreRender(r, t, n);1421          r.next = t, function invalidateJob(e) {1422            const t = le.indexOf(e);1423            t > ce && le.splice(t, 1)1424          }(r.update), r.update()1425        } else t.component = e.component, t.el = e.el, r.vnode = t1426      }, setupRenderEffect = (e, t, n, r, o, s, a) => {1427        e.update = effect((function componentEffect() {1428          if (e.isMounted) {1429            let t, {next: n, bu: r, u: i, parent: l, vnode: c} = e, u = n;1430            n ? (n.el = c.el, updateComponentPreRender(e, n, a)) : n = c, r && invokeArrayFns(r), (t = n.props && n.props.onVnodeBeforeUpdate) && invokeVNodeHook(t, l, n, c);1431            const p = renderComponentRoot(e), d = e.subTree;1432            e.subTree = p, patch(d, p, f(d.el), getNextHostNode(d), e, o, s), n.el = p.el, null === u && function updateHOCHostEl({1433                                                                                                                                    vnode: e,1434                                                                                                                                    parent: t1435                                                                                                                                  }, n) {1436              for (; t && t.subTree === e;) (e = t.vnode).el = n, t = t.parent1437            }(e, p.el), i && Me(i, o), (t = n.props && n.props.onVnodeUpdated) && Me((() => invokeVNodeHook(t, l, n, c)), o)1438          } else {1439            let a;1440            const {el: i, props: l} = t, {bm: c, m: u, parent: f} = e;1441            if (c && invokeArrayFns(c), (a = l && l.onVnodeBeforeMount) && invokeVNodeHook(a, f, t), i && _) {1442              const hydrateSubTree = () => {1443                e.subTree = renderComponentRoot(e), _(i, e.subTree, e, o, null)1444              };1445              isAsyncWrapper(t) ? t.type.__asyncLoader().then((() => !e.isUnmounted && hydrateSubTree())) : hydrateSubTree()1446            } else {1447              const a = e.subTree = renderComponentRoot(e);1448              patch(null, a, n, r, e, o, s), t.el = a.el1449            }1450            if (u && Me(u, o), a = l && l.onVnodeMounted) {1451              const e = t;1452              Me((() => invokeVNodeHook(a, f, e)), o)1453            }1454            256 & t.shapeFlag && e.a && Me(e.a, o), e.isMounted = !0, t = n = r = null1455          }1456        }), Ie)1457      }, updateComponentPreRender = (e, t, n) => {1458        t.component = e;1459        const r = e.vnode.props;1460        e.vnode = t, e.next = null, function updateProps(e, t, n, r) {1461          const {props: o, attrs: s, vnode: {patchFlag: a}} = e, i = toRaw(o), [l] = e.propsOptions;1462          let c = !1;1463          if (!(r || a > 0) || 16 & a) {1464            let r;1465            setFullProps(e, t, o, s) && (c = !0);1466            for (const s in i) t && (hasOwn(t, s) || (r = C(s)) !== s && hasOwn(t, r)) || (l ? !n || void 0 === n[s] && void 0 === n[r] || (o[s] = resolvePropValue(l, i, s, void 0, e, !0)) : delete o[s]);1467            if (s !== i) for (const e in s) t && hasOwn(t, e) || (delete s[e], c = !0)1468          } else if (8 & a) {1469            const n = e.vnode.dynamicProps;1470            for (let r = 0; r < n.length; r++) {1471              let a = n[r];1472              const u = t[a];1473              if (l) if (hasOwn(s, a)) u !== s[a] && (s[a] = u, c = !0); else {1474                const t = S(a);1475                o[t] = resolvePropValue(l, i, t, u, e, !1)1476              } else u !== s[a] && (s[a] = u, c = !0)1477            }1478          }1479          c && trigger(e, "set", "$attrs")1480        }(e, t.props, r, n), ((e, t, n) => {1481          const {vnode: r, slots: o} = e;1482          let s = !0, a = g;1483          if (32 & r.shapeFlag) {1484            const e = t._;1485            e ? n && 1 === e ? s = !1 : (b(o, t), n || 1 !== e || delete o._) : (s = !t.$stable, normalizeObjectSlots(t, o)), a = t1486          } else t && (normalizeVNodeSlots(e, t), a = {default: 1});1487          if (s) for (const i in o) isInternalKey(i) || i in a || delete o[i]1488        })(e, t.children, n), pauseTracking(), flushPreFlushCbs(void 0, e.update), resetTracking()1489      }, patchChildren = (e, t, n, r, o, s, a, i, l = !1) => {1490        const c = e && e.children, f = e ? e.shapeFlag : 0, p = t.children, {patchFlag: d, shapeFlag: m} = t;1491        if (d > 0) {1492          if (128 & d) return void patchKeyedChildren(c, p, n, r, o, s, a, i, l);1493          if (256 & d) return void patchUnkeyedChildren(c, p, n, r, o, s, a, i, l)1494        }1495        8 & m ? (16 & f && unmountChildren(c, o, s), p !== c && u(n, p)) : 16 & f ? 16 & m ? patchKeyedChildren(c, p, n, r, o, s, a, i, l) : unmountChildren(c, o, s, !0) : (8 & f && u(n, ""), 16 & m && mountChildren(p, n, r, o, s, a, i, l))1496      }, patchUnkeyedChildren = (e, t, n, r, o, s, a, i, l) => {1497        t = t || v;1498        const c = (e = e || v).length, u = t.length, f = Math.min(c, u);1499        let p;1500        for (p = 0; p < f; p++) {1501          const r = t[p] = l ? cloneIfMounted(t[p]) : normalizeVNode(t[p]);1502          patch(e[p], r, n, null, o, s, a, i, l)1503        }1504        c > u ? unmountChildren(e, o, s, !0, !1, f) : mountChildren(t, n, r, o, s, a, i, l, f)1505      }, patchKeyedChildren = (e, t, n, r, o, s, a, i, l) => {1506        let c = 0;1507        const u = t.length;1508        let f = e.length - 1, p = u - 1;1509        for (; c <= f && c <= p;) {1510          const r = e[c], u = t[c] = l ? cloneIfMounted(t[c]) : normalizeVNode(t[c]);1511          if (!isSameVNodeType(r, u)) break;1512          patch(r, u, n, null, o, s, a, i, l), c++1513        }1514        for (; c <= f && c <= p;) {1515          const r = e[f], c = t[p] = l ? cloneIfMounted(t[p]) : normalizeVNode(t[p]);1516          if (!isSameVNodeType(r, c)) break;1517          patch(r, c, n, null, o, s, a, i, l), f--, p--1518        }1519        if (c > f) {1520          if (c <= p) {1521            const e = p + 1, f = e < u ? t[e].el : r;1522            for (; c <= p;) patch(null, t[c] = l ? cloneIfMounted(t[c]) : normalizeVNode(t[c]), n, f, o, s, a, i, l), c++1523          }1524        } else if (c > p) for (; c <= f;) unmount(e[c], o, s, !0), c++; else {1525          const d = c, m = c, g = new Map;1526          for (c = m; c <= p; c++) {1527            const e = t[c] = l ? cloneIfMounted(t[c]) : normalizeVNode(t[c]);1528            null != e.key && g.set(e.key, c)1529          }1530          let y, b = 0;1531          const R = p - m + 1;1532          let w = !1, _ = 0;1533          const k = new Array(R);1534          for (c = 0; c < R; c++) k[c] = 0;1535          for (c = d; c <= f; c++) {1536            const r = e[c];1537            if (b >= R) {1538              unmount(r, o, s, !0);1539              continue1540            }1541            let u;1542            if (null != r.key) u = g.get(r.key); else for (y = m; y <= p; y++) if (0 === k[y - m] && isSameVNodeType(r, t[y])) {1543              u = y;1544              break1545            }1546            void 0 === u ? unmount(r, o, s, !0) : (k[u - m] = c + 1, u >= _ ? _ = u : w = !0, patch(r, t[u], n, null, o, s, a, i, l), b++)1547          }1548          const x = w ? function getSequence(e) {1549            const t = e.slice(), n = [0];1550            let r, o, s, a, i;1551            const l = e.length;1552            for (r = 0; r < l; r++) {1553              const l = e[r];1554              if (0 !== l) {1555                if (o = n[n.length - 1], e[o] < l) {1556                  t[r] = o, n.push(r);1557                  continue1558                }1559                for (s = 0, a = n.length - 1; s < a;) i = (s + a) / 2 | 0, e[n[i]] < l ? s = i + 1 : a = i;1560                l < e[n[s]] && (s > 0 && (t[r] = n[s - 1]), n[s] = r)1561              }1562            }1563            s = n.length, a = n[s - 1];1564            for (; s-- > 0;) n[s] = a, a = t[a];1565            return n1566          }(k) : v;1567          for (y = x.length - 1, c = R - 1; c >= 0; c--) {1568            const e = m + c, f = t[e], p = e + 1 < u ? t[e + 1].el : r;1569            0 === k[c] ? patch(null, f, n, p, o, s, a, i, l) : w && (y < 0 || c !== x[y] ? move(f, n, p, 2) : y--)1570          }1571        }1572      }, move = (e, t, r, o, s = null) => {1573        const {el: a, type: i, transition: l, children: c, shapeFlag: u} = e;1574        if (6 & u) return void move(e.component.subTree, t, r, o);1575        if (128 & u) return void e.suspense.move(t, r, o);1576        if (64 & u) return void i.move(e, t, r, R);1577        if (i === Le) {1578          n(a, t, r);1579          for (let e = 0; e < c.length; e++) move(c[e], t, r, o);1580          return void n(e.anchor, t, r)1581        }1582        if (i === Be) return void moveStaticNode(e, t, r);1583        if (2 !== o && 1 & u && l) if (0 === o) l.beforeEnter(a), n(a, t, r), Me((() => l.enter(a)), s); else {1584          const {leave: e, delayLeave: o, afterLeave: s} = l, remove3 = () => n(a, t, r), performLeave = () => {1585            e(a, (() => {1586              remove3(), s && s()1587            }))1588          };1589          o ? o(a, remove3, performLeave) : performLeave()1590        } else n(a, t, r)1591      }, unmount = (e, t, n, r = !1, o = !1) => {1592        const {type: s, props: a, ref: i, children: l, dynamicChildren: c, shapeFlag: u, patchFlag: f, dirs: p} = e;1593        if (null != i && setRef(i, null, n, e, !0), 256 & u) return void t.ctx.deactivate(e);1594        const d = 1 & u && p;1595        let m;1596        if ((m = a && a.onVnodeBeforeUnmount) && invokeVNodeHook(m, t, e), 6 & u) unmountComponent(e.component, n, r); else {1597          if (128 & u) return void e.suspense.unmount(n, r);1598          d && invokeDirectiveHook(e, null, t, "beforeUnmount"), 64 & u ? e.type.remove(e, t, n, o, R, r) : c && (s !== Le || f > 0 && 64 & f) ? unmountChildren(c, t, n, !1, !0) : (s === Le && (128 & f || 256 & f) || !o && 16 & u) && unmountChildren(l, t, n), r && remove2(e)1599        }1600        ((m = a && a.onVnodeUnmounted) || d) && Me((() => {1601          m && invokeVNodeHook(m, t, e), d && invokeDirectiveHook(e, null, t, "unmounted")1602        }), n)1603      }, remove2 = e => {1604        const {type: t, el: n, anchor: o, transition: s} = e;1605        if (t === Le) return void removeFragment(n, o);1606        if (t === Be) return void removeStaticNode(e);1607        const performRemove = () => {1608          r(n), s && !s.persisted && s.afterLeave && s.afterLeave()1609        };1610        if (1 & e.shapeFlag && s && !s.persisted) {1611          const {leave: t, delayLeave: r} = s, performLeave = () => t(n, performRemove);1612          r ? r(e.el, performRemove, performLeave) : performLeave()1613        } else performRemove()1614      }, removeFragment = (e, t) => {1615        let n;1616        for (; e !== t;) n = p(e), r(e), e = n;1617        r(t)1618      }, unmountComponent = (e, t, n) => {1619        const {bum: r, effects: o, update: s, subTree: a, um: i} = e;1620        if (r && invokeArrayFns(r), o) for (let l = 0; l < o.length; l++) stop(o[l]);1621        s && (stop(s), unmount(a, e, t, n)), i && Me(i, t), Me((() => {1622          e.isUnmounted = !01623        }), t), t && t.pendingBranch && !t.isUnmounted && e.asyncDep && !e.asyncResolved && e.suspenseId === t.pendingId && (t.deps--, 0 === t.deps && t.resolve())1624      }, unmountChildren = (e, t, n, r = !1, o = !1, s = 0) => {1625        for (let a = s; a < e.length; a++) unmount(e[a], t, n, r, o)1626      },1627      getNextHostNode = e => 6 & e.shapeFlag ? getNextHostNode(e.component.subTree) : 128 & e.shapeFlag ? e.suspense.next() : p(e.anchor || e.el),1628      render = (e, t, n) => {1629        null == e ? t._vnode && unmount(t._vnode, null, null, !0) : patch(t._vnode || null, e, t, null, null, null, n), flushPostFlushCbs(), t._vnode = e1630      }, R = {1631        p: patch,1632        um: unmount,1633        m: move,1634        r: remove2,1635        mt: mountComponent,1636        mc: mountChildren,1637        pc: patchChildren,1638        pbc: patchBlockChildren,1639        n: getNextHostNode,1640        o: e1641      };1642    let w, _;1643    t && ([w, _] = t(R));1644    return {render, hydrate: w, createApp: createAppAPI(render, w)}1645  }(e)1646}1647function invokeVNodeHook(e, t, n, r = null) {1648  callWithAsyncErrorHandling(e, t, 7, [n, r])1649}1650function traverseStaticChildren(e, t, n = !1) {1651  const r = e.children, o = t.children;1652  if (w(r) && w(o)) for (let s = 0; s < r.length; s++) {1653    const e = r[s];1654    let t = o[s];1655    1 & t.shapeFlag && !t.dynamicChildren && ((t.patchFlag <= 0 || 32 === t.patchFlag) && (t = o[s] = cloneIfMounted(o[s]), t.el = e.el), n || traverseStaticChildren(e, t))1656  }1657}1658function resolveComponent(e, t) {1659  return resolveAsset("components", e, !0, t) || e1660}1661const Fe = Symbol();1662function resolveAsset(e, t, n = !0, r = !1) {1663  const o = be || Ye;1664  if (o) {1665    const n = o.type;1666    if ("components" === e) {1667      const e = getComponentName(n);1668      if (e && (e === t || e === S(t) || e === A(S(t)))) return n1669    }1670    const s = resolve(o[e] || n[e], t) || resolve(o.appContext[e], t);1671    return !s && r ? n : s1672  }1673}1674function resolve(e, t) {1675  return e && (e[t] || e[S(t)] || e[A(S(t))])1676}1677const Le = Symbol(void 0), Ve = Symbol(void 0), He = Symbol(void 0), Be = Symbol(void 0), ze = [];1678let $e = null;1679function openBlock(e = !1) {1680  ze.push($e = e ? null : [])1681}1682let We = 1;1683function setBlockTracking(e) {1684  We += e1685}1686function createBlock(e, t, n, r, o) {1687  const s = De(e, t, n, r, o, !0);1688  return s.dynamicChildren = We > 0 ? $e || v : null, function closeBlock() {1689    ze.pop(), $e = ze[ze.length - 1] || null1690  }(), We > 0 && $e && $e.push(s), s1691}1692function isVNode(e) {1693  return !!e && !0 === e.__v_isVNode1694}1695function isSameVNodeType(e, t) {1696  return e.type === t.type && e.key === t.key1697}1698const Ue = "__vInternal", normalizeKey = ({key: e}) => null != e ? e : null,1699  normalizeRef = ({ref: e}) => null != e ? isString$1(e) || isRef(e) || isFunction(e) ? {i: be, r: e} : e : null,1700  De = function _createVNode(e, t = null, n = null, r = 0, o = null, s = !1) {1701    e && e !== Fe || (e = He);1702    if (isVNode(e)) {1703      const r = cloneVNode(e, t, !0);1704      return n && normalizeChildren(r, n), r1705    }1706    (function isClassComponent(e) {1707      return isFunction(e) && "__vccOpts" in e1708    })(e) && (e = e.__vccOpts);1709    if (t) {1710      (isProxy(t) || Ue in t) && (t = b({}, t));1711      let {class: e, style: n} = t;1712      e && !isString$1(e) && (t.class = normalizeClass(e)), isObject(n) && (isProxy(n) && !w(n) && (n = b({}, n)), t.style = normalizeStyle(n))1713    }1714    const a = isString$1(e) ? 1 : (e => e.__isSuspense)(e) ? 128 : (e => e.__isTeleport)(e) ? 64 : isObject(e) ? 4 : isFunction(e) ? 2 : 0,1715      i = {1716        __v_isVNode: !0,1717        __v_skip: !0,1718        type: e,1719        props: t,1720        key: t && normalizeKey(t),1721        ref: t && normalizeRef(t),1722        scopeId: Re,1723        slotScopeIds: null,1724        children: null,1725        component: null,1726        suspense: null,1727        ssContent: null,1728        ssFallback: null,1729        dirs: null,1730        transition: null,1731        el: null,1732        anchor: null,1733        target: null,1734        targetAnchor: null,1735        staticCount: 0,1736        shapeFlag: a,1737        patchFlag: r,1738        dynamicProps: o,1739        dynamicChildren: null,1740        appContext: null1741      };1742    normalizeChildren(i, n), 128 & a && e.normalize(i);1743    We > 0 && !s && $e && (r > 0 || 6 & a) && 32 !== r && $e.push(i);1744    return i1745  };1746function cloneVNode(e, t, n = !1) {1747  const {props: r, ref: o, patchFlag: s, children: a} = e, i = t ? function mergeProps(...e) {1748    const t = b({}, e[0]);1749    for (let n = 1; n < e.length; n++) {1750      const r = e[n];1751      for (const e in r) if ("class" === e) t.class !== r.class && (t.class = normalizeClass([t.class, r.class])); else if ("style" === e) t.style = normalizeStyle([t.style, r.style]); else if (isOn(e)) {1752        const n = t[e], o = r[e];1753        n !== o && (t[e] = n ? [].concat(n, o) : o)1754      } else "" !== e && (t[e] = r[e])1755    }1756    return t1757  }(r || {}, t) : r;1758  return {1759    __v_isVNode: !0,1760    __v_skip: !0,1761    type: e.type,1762    props: i,1763    key: i && normalizeKey(i),1764    ref: t && t.ref ? n && o ? w(o) ? o.concat(normalizeRef(t)) : [o, normalizeRef(t)] : normalizeRef(t) : o,1765    scopeId: e.scopeId,1766    slotScopeIds: e.slotScopeIds,1767    children: a,1768    target: e.target,1769    targetAnchor: e.targetAnchor,1770    staticCount: e.staticCount,1771    shapeFlag: e.shapeFlag,1772    patchFlag: t && e.type !== Le ? -1 === s ? 16 : 16 | s : s,1773    dynamicProps: e.dynamicProps,1774    dynamicChildren: e.dynamicChildren,1775    appContext: e.appContext,1776    dirs: e.dirs,1777    transition: e.transition,1778    component: e.component,1779    suspense: e.suspense,1780    ssContent: e.ssContent && cloneVNode(e.ssContent),1781    ssFallback: e.ssFallback && cloneVNode(e.ssFallback),1782    el: e.el,1783    anchor: e.anchor1784  }1785}1786function createTextVNode(e = " ", t = 0) {1787  return De(Ve, null, e, t)1788}1789function createCommentVNode(e = "", t = !1) {1790  return t ? (openBlock(), createBlock(He, null, e)) : De(He, null, e)1791}1792function normalizeVNode(e) {1793  return null == e || "boolean" == typeof e ? De(He) : w(e) ? De(Le, null, e.slice()) : "object" == typeof e ? cloneIfMounted(e) : De(Ve, null, String(e))1794}1795function cloneIfMounted(e) {1796  return null === e.el ? e : cloneVNode(e)1797}1798function normalizeChildren(e, t) {1799  let n = 0;1800  const {shapeFlag: r} = e;1801  if (null == t) t = null; else if (w(t)) n = 16; else if ("object" == typeof t) {1802    if (1 & r || 64 & r) {1803      const n = t.default;1804      return void (n && (n._c && (n._d = !1), normalizeChildren(e, n()), n._c && (n._d = !0)))1805    }1806    {1807      n = 32;1808      const r = t._;1809      r || Ue in t ? 3 === r && be && (1 === be.slots._ ? t._ = 1 : (t._ = 2, e.patchFlag |= 1024)) : t._ctx = be...

note.js

Source:note.js

...537    };538    const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, optimized, start = 0) => {539        for (let i = start; i < children.length; i++) {540            const child = (children[i] = optimized541                ? cloneIfMounted(children[i])542                : normalizeVNode(children[i]));543            patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, optimized);544        }545    };546    const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, optimized) => {547        const el = (n2.el = n1.el);548        let { patchFlag, dynamicChildren, dirs } = n2;549        // #1426 take the old vnode's patch flag into account since user may clone a550        // compiler-generated vnode, which de-opts to FULL_PROPS551        patchFlag |= n1.patchFlag & 16 /* FULL_PROPS */;552        const oldProps = n1.props || EMPTY_OBJ;553        const newProps = n2.props || EMPTY_OBJ;554        let vnodeHook;555        if ((vnodeHook = newProps.onVnodeBeforeUpdate)) {556            invokeVNodeHook(vnodeHook, parentComponent, n2, n1);557        }558        if (dirs) {559            invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate');560        }561        if ( isHmrUpdating) {562            // HMR updated, force full diff563            patchFlag = 0;564            optimized = false;565            dynamicChildren = null;566        }567        if (patchFlag > 0) {568            // the presence of a patchFlag means this element's render code was569            // generated by the compiler and can take the fast path.570            // in this path old node and new node are guaranteed to have the same shape571            // (i.e. at the exact same position in the source template)572            if (patchFlag & 16 /* FULL_PROPS */) {573                // element props contain dynamic keys, full diff needed574                patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);575            }576            else {577                // class578                // this flag is matched when the element has dynamic class bindings.579                if (patchFlag & 2 /* CLASS */) {580                    if (oldProps.class !== newProps.class) {581                        hostPatchProp(el, 'class', null, newProps.class, isSVG);582                    }583                }584                // style585                // this flag is matched when the element has dynamic style bindings586                if (patchFlag & 4 /* STYLE */) {587                    hostPatchProp(el, 'style', oldProps.style, newProps.style, isSVG);588                }589                // props590                // This flag is matched when the element has dynamic prop/attr bindings591                // other than class and style. The keys of dynamic prop/attrs are saved for592                // faster iteration.593                // Note dynamic keys like :[foo]="bar" will cause this optimization to594                // bail out and go through a full diff because we need to unset the old key595                if (patchFlag & 8 /* PROPS */) {596                    // if the flag is present then dynamicProps must be non-null597                    const propsToUpdate = n2.dynamicProps;598                    for (let i = 0; i < propsToUpdate.length; i++) {599                        const key = propsToUpdate[i];600                        const prev = oldProps[key];601                        const next = newProps[key];602                        if (next !== prev ||603                            (hostForcePatchProp && hostForcePatchProp(el, key))) {604                            hostPatchProp(el, key, prev, next, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);605                        }606                    }607                }608            }609            // text610            // This flag is matched when the element has only dynamic text children.611            if (patchFlag & 1 /* TEXT */) {612                if (n1.children !== n2.children) {613                    hostSetElementText(el, n2.children);614                }615            }616        }617        else if (!optimized && dynamicChildren == null) {618            // unoptimized, full diff619            patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);620        }621        const areChildrenSVG = isSVG && n2.type !== 'foreignObject';622        if (dynamicChildren) {623            patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG);624            if ( parentComponent && parentComponent.type.__hmrId) {625                traverseStaticChildren(n1, n2);626            }627        }628        else if (!optimized) {629            // full diff630            patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG);631        }632        if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {633            queuePostRenderEffect(() => {634                vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);635                dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated');636            }, parentSuspense);637        }638    };639    // The fast path for blocks.640    const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG) => {641        for (let i = 0; i < newChildren.length; i++) {642            const oldVNode = oldChildren[i];643            const newVNode = newChildren[i];644            // Determine the container (parent element) for the patch.645            const container = 646            // - In the case of a Fragment, we need to provide the actual parent647            // of the Fragment itself so it can move its children.648            oldVNode.type === Fragment ||649                // - In the case of different nodes, there is going to be a replacement650                // which also requires the correct parent container651                !isSameVNodeType(oldVNode, newVNode) ||652                // - In the case of a component, it could contain anything.653                oldVNode.shapeFlag & 6 /* COMPONENT */ ||654                oldVNode.shapeFlag & 64 /* TELEPORT */655                ? hostParentNode(oldVNode.el)656                : // In other cases, the parent container is not actually used so we657                    // just pass the block element here to avoid a DOM parentNode call.658                    fallbackContainer;659            patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, true);660        }661    };662    const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {663        if (oldProps !== newProps) {664            for (const key in newProps) {665                if (isReservedProp(key))666                    continue;667                const next = newProps[key];668                const prev = oldProps[key];669                if (next !== prev ||670                    (hostForcePatchProp && hostForcePatchProp(el, key))) {671                    hostPatchProp(el, key, prev, next, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);672                }673            }674            if (oldProps !== EMPTY_OBJ) {675                for (const key in oldProps) {676                    if (!isReservedProp(key) && !(key in newProps)) {677                        hostPatchProp(el, key, oldProps[key], null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);678                    }679                }680            }681        }682    };683    const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {684        const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''));685        const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''));686        let { patchFlag, dynamicChildren } = n2;687        if (patchFlag > 0) {688            optimized = true;689        }690        if ( isHmrUpdating) {691            // HMR updated, force full diff692            patchFlag = 0;693            optimized = false;694            dynamicChildren = null;695        }696        if (n1 == null) {697            hostInsert(fragmentStartAnchor, container, anchor);698            hostInsert(fragmentEndAnchor, container, anchor);699            // a fragment can only have array children700            // since they are either generated by the compiler, or implicitly created701            // from arrays.702            mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);703        }704        else {705            if (patchFlag > 0 &&706                patchFlag & 64 /* STABLE_FRAGMENT */ &&707                dynamicChildren) {708                // a stable fragment (template root or <template v-for>) doesn't need to709                // patch children order, but it may contain dynamicChildren.710                patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG);711                if ( parentComponent && parentComponent.type.__hmrId) {712                    traverseStaticChildren(n1, n2);713                }714                else if (715                // #2080 if the stable fragment has a key, it's a <template v-for> that may716                //  get moved around. Make sure all root level vnodes inherit el.717                // #2134 or if it's a component root, it may also get moved around718                // as the component is being moved.719                n2.key != null ||720                    (parentComponent && n2 === parentComponent.subTree)) {721                    traverseStaticChildren(n1, n2, true /* shallow */);722                }723            }724            else {725                // keyed / unkeyed, or manual fragments.726                // for keyed & unkeyed, since they are compiler generated from v-for,727                // each child is guaranteed to be a block so the fragment will never728                // have dynamicChildren.729                patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);730            }731        }732    };733    const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {734        if (n1 == null) {735            if (n2.shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) {736                parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized);737            }738            else {739                mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);740            }741        }742        else {743            updateComponent(n1, n2, optimized);744        }745    };746    const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {747        const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense));748        if ( instance.type.__hmrId) {749            registerHMR(instance);750        }751        {752            pushWarningContext(initialVNode);753            startMeasure(instance, `mount`);754        }755        // inject renderer internals for keepAlive756        if (isKeepAlive(initialVNode)) {757            instance.ctx.renderer = internals;758        }759        // resolve props and slots for setup context760        {761            startMeasure(instance, `init`);762        }763        setupComponent(instance);764        {765            endMeasure(instance, `init`);766        }767        // setup() is async. This component relies on async logic to be resolved768        // before proceeding769        if ( instance.asyncDep) {770            parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect);771            // Give it a placeholder if this is not hydration772            // TODO handle self-defined fallback773            if (!initialVNode.el) {774                const placeholder = (instance.subTree = createVNode(Comment));775                processCommentNode(null, placeholder, container, anchor);776            }777            return;778        }779        setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);780        {781            popWarningContext();782            endMeasure(instance, `mount`);783        }784    };785    const updateComponent = (n1, n2, optimized) => {786        const instance = (n2.component = n1.component);787        if (shouldUpdateComponent(n1, n2, optimized)) {788            if (789                instance.asyncDep &&790                !instance.asyncResolved) {791                // async & still pending - just update props and slots792                // since the component's reactive effect for render isn't set-up yet793                {794                    pushWarningContext(n2);795                }796                updateComponentPreRender(instance, n2, optimized);797                {798                    popWarningContext();799                }800                return;801            }802            else {803                // normal update804                instance.next = n2;805                // in case the child component is also queued, remove it to avoid806                // double updating the same child component in the same flush.807                invalidateJob(instance.update);808                // instance.update is the reactive effect runner.809                instance.update();810            }811        }812        else {813            // no update needed. just copy over properties814            n2.component = n1.component;815            n2.el = n1.el;816            instance.vnode = n2;817        }818    };819    const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {820        // create reactive effect for rendering821        instance.update = effect(function componentEffect() {822            if (!instance.isMounted) {823                let vnodeHook;824                const { el, props } = initialVNode;825                const { bm, m, parent } = instance;826                // beforeMount hook827                if (bm) {828                    invokeArrayFns(bm);829                }830                // onVnodeBeforeMount831                if ((vnodeHook = props && props.onVnodeBeforeMount)) {832                    invokeVNodeHook(vnodeHook, parent, initialVNode);833                }834                // render835                {836                    startMeasure(instance, `render`);837                }838                const subTree = (instance.subTree = renderComponentRoot(instance));839                {840                    endMeasure(instance, `render`);841                }842                if (el && hydrateNode) {843                    {844                        startMeasure(instance, `hydrate`);845                    }846                    // vnode has adopted host node - perform hydration instead of mount.847                    hydrateNode(initialVNode.el, subTree, instance, parentSuspense);848                    {849                        endMeasure(instance, `hydrate`);850                    }851                }852                else {853                    {854                        startMeasure(instance, `patch`);855                    }856                    patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);857                    {858                        endMeasure(instance, `patch`);859                    }860                    initialVNode.el = subTree.el;861                }862                // mounted hook863                if (m) {864                    queuePostRenderEffect(m, parentSuspense);865                }866                // onVnodeMounted867                if ((vnodeHook = props && props.onVnodeMounted)) {868                    queuePostRenderEffect(() => {869                        invokeVNodeHook(vnodeHook, parent, initialVNode);870                    }, parentSuspense);871                }872                // activated hook for keep-alive roots.873                // #1742 activated hook must be accessed after first render874                // since the hook may be injected by a child keep-alive875                const { a } = instance;876                if (a &&877                    initialVNode.shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {878                    queuePostRenderEffect(a, parentSuspense);879                }880                instance.isMounted = true;881            }882            else {883                // updateComponent884                // This is triggered by mutation of component's own state (next: null)885                // OR parent calling processComponent (next: VNode)886                let { next, bu, u, parent, vnode } = instance;887                let originNext = next;888                let vnodeHook;889                {890                    pushWarningContext(next || instance.vnode);891                }892                if (next) {893                    updateComponentPreRender(instance, next, optimized);894                }895                else {896                    next = vnode;897                }898                next.el = vnode.el;899                // beforeUpdate hook900                if (bu) {901                    invokeArrayFns(bu);902                }903                // onVnodeBeforeUpdate904                if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {905                    invokeVNodeHook(vnodeHook, parent, next, vnode);906                }907                // render908                {909                    startMeasure(instance, `render`);910                }911                const nextTree = renderComponentRoot(instance);912                {913                    endMeasure(instance, `render`);914                }915                const prevTree = instance.subTree;916                instance.subTree = nextTree;917                // reset refs918                // only needed if previous patch had refs919                if (instance.refs !== EMPTY_OBJ) {920                    instance.refs = {};921                }922                {923                    startMeasure(instance, `patch`);924                }925                patch(prevTree, nextTree, 926                // parent may have changed if it's in a teleport927                hostParentNode(prevTree.el), 928                // anchor may have changed if it's in a fragment929                getNextHostNode(prevTree), instance, parentSuspense, isSVG);930                {931                    endMeasure(instance, `patch`);932                }933                next.el = nextTree.el;934                if (originNext === null) {935                    // self-triggered update. In case of HOC, update parent component936                    // vnode el. HOC is indicated by parent instance's subTree pointing937                    // to child component's vnode938                    updateHOCHostEl(instance, nextTree.el);939                }940                // updated hook941                if (u) {942                    queuePostRenderEffect(u, parentSuspense);943                }944                // onVnodeUpdated945                if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {946                    queuePostRenderEffect(() => {947                        invokeVNodeHook(vnodeHook, parent, next, vnode);948                    }, parentSuspense);949                }950                {951                    devtoolsComponentUpdated(instance);952                }953                {954                    popWarningContext();955                }956            }957        },  createDevEffectOptions(instance) );958    };959    const updateComponentPreRender = (instance, nextVNode, optimized) => {960        nextVNode.component = instance;961        const prevProps = instance.vnode.props;962        instance.vnode = nextVNode;963        instance.next = null;964        updateProps(instance, nextVNode.props, prevProps, optimized);965        updateSlots(instance, nextVNode.children);966        // props update may have triggered pre-flush watchers.967        // flush them before the render update.968        flushPreFlushCbs(undefined, instance.update);969    };970    const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) => {971        const c1 = n1 && n1.children;972        const prevShapeFlag = n1 ? n1.shapeFlag : 0;973        const c2 = n2.children;974        const { patchFlag, shapeFlag } = n2;975        // fast path976        if (patchFlag > 0) {977            if (patchFlag & 128 /* KEYED_FRAGMENT */) {978                // this could be either fully-keyed or mixed (some keyed some not)979                // presence of patchFlag means children are guaranteed to be arrays980                patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);981                return;982            }983            else if (patchFlag & 256 /* UNKEYED_FRAGMENT */) {984                // unkeyed985                patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);986                return;987            }988        }989        // children has 3 possibilities: text, array or no children.990        if (shapeFlag & 8 /* TEXT_CHILDREN */) {991            // text children fast path992            if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {993                unmountChildren(c1, parentComponent, parentSuspense);994            }995            if (c2 !== c1) {996                hostSetElementText(container, c2);997            }998        }999        else {1000            if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {1001                // prev children was array1002                if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1003                    // two arrays, cannot assume anything, do full diff1004                    patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1005                }1006                else {1007                    // no new children, just unmount old1008                    unmountChildren(c1, parentComponent, parentSuspense, true);1009                }1010            }1011            else {1012                // prev children was text OR null1013                // new children is array OR null1014                if (prevShapeFlag & 8 /* TEXT_CHILDREN */) {1015                    hostSetElementText(container, '');1016                }1017                // mount new if array1018                if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1019                    mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1020                }1021            }1022        }1023    };1024    const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {1025        c1 = c1 || EMPTY_ARR;1026        c2 = c2 || EMPTY_ARR;1027        const oldLength = c1.length;1028        const newLength = c2.length;1029        const commonLength = Math.min(oldLength, newLength);1030        let i;1031        for (i = 0; i < commonLength; i++) {1032            const nextChild = (c2[i] = optimized1033                ? cloneIfMounted(c2[i])1034                : normalizeVNode(c2[i]));1035            patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, optimized);1036        }1037        if (oldLength > newLength) {1038            // remove old1039            unmountChildren(c1, parentComponent, parentSuspense, true, commonLength);1040        }1041        else {1042            // mount new1043            mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, commonLength);1044        }1045    };1046    // can be all-keyed or mixed1047    const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) => {1048        let i = 0;1049        const l2 = c2.length;1050        let e1 = c1.length - 1; // prev ending index1051        let e2 = l2 - 1; // next ending index1052        // 1. sync from start1053        // (a b) c1054        // (a b) d e1055        while (i <= e1 && i <= e2) {1056            const n1 = c1[i];1057            const n2 = (c2[i] = optimized1058                ? cloneIfMounted(c2[i])1059                : normalizeVNode(c2[i]));1060            if (isSameVNodeType(n1, n2)) {1061                patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, optimized);1062            }1063            else {1064                break;1065            }1066            i++;1067        }1068        // 2. sync from end1069        // a (b c)1070        // d e (b c)1071        while (i <= e1 && i <= e2) {1072            const n1 = c1[e1];1073            const n2 = (c2[e2] = optimized1074                ? cloneIfMounted(c2[e2])1075                : normalizeVNode(c2[e2]));1076            if (isSameVNodeType(n1, n2)) {1077                patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, optimized);1078            }1079            else {1080                break;1081            }1082            e1--;1083            e2--;1084        }1085        // 3. common sequence + mount1086        // (a b)1087        // (a b) c1088        // i = 2, e1 = 1, e2 = 21089        // (a b)1090        // c (a b)1091        // i = 0, e1 = -1, e2 = 01092        if (i > e1) {1093            if (i <= e2) {1094                const nextPos = e2 + 1;1095                const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;1096                while (i <= e2) {1097                    patch(null, (c2[i] = optimized1098                        ? cloneIfMounted(c2[i])1099                        : normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG);1100                    i++;1101                }1102            }1103        }1104        // 4. common sequence + unmount1105        // (a b) c1106        // (a b)1107        // i = 2, e1 = 2, e2 = 11108        // a (b c)1109        // (b c)1110        // i = 0, e1 = 0, e2 = -11111        else if (i > e2) {1112            while (i <= e1) {1113                unmount(c1[i], parentComponent, parentSuspense, true);1114                i++;1115            }1116        }1117        // 5. unknown sequence1118        // [i ... e1 + 1]: a b [c d e] f g1119        // [i ... e2 + 1]: a b [e d c h] f g1120        // i = 2, e1 = 4, e2 = 51121        else {1122            const s1 = i; // prev starting index1123            const s2 = i; // next starting index1124            // 5.1 build key:index map for newChildren1125            const keyToNewIndexMap = new Map();1126            for (i = s2; i <= e2; i++) {1127                const nextChild = (c2[i] = optimized1128                    ? cloneIfMounted(c2[i])1129                    : normalizeVNode(c2[i]));1130                if (nextChild.key != null) {1131                    if ( keyToNewIndexMap.has(nextChild.key)) {1132                        warn(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);1133                    }1134                    keyToNewIndexMap.set(nextChild.key, i);1135                }1136            }1137            // 5.2 loop through old children left to be patched and try to patch1138            // matching nodes & remove nodes that are no longer present1139            let j;1140            let patched = 0;1141            const toBePatched = e2 - s2 + 1;1142            let moved = false;1143            // used to track whether any node has moved1144            let maxNewIndexSoFar = 0;1145            // works as Map<newIndex, oldIndex>1146            // Note that oldIndex is offset by +11147            // and oldIndex = 0 is a special value indicating the new node has1148            // no corresponding old node.1149            // used for determining longest stable subsequence1150            const newIndexToOldIndexMap = new Array(toBePatched);1151            for (i = 0; i < toBePatched; i++)1152                newIndexToOldIndexMap[i] = 0;1153            for (i = s1; i <= e1; i++) {1154                const prevChild = c1[i];1155                if (patched >= toBePatched) {1156                    // all new children have been patched so this can only be a removal1157                    unmount(prevChild, parentComponent, parentSuspense, true);1158                    continue;1159                }1160                let newIndex;1161                if (prevChild.key != null) {1162                    newIndex = keyToNewIndexMap.get(prevChild.key);1163                }1164                else {1165                    // key-less node, try to locate a key-less node of the same type1166                    for (j = s2; j <= e2; j++) {1167                        if (newIndexToOldIndexMap[j - s2] === 0 &&1168                            isSameVNodeType(prevChild, c2[j])) {1169                            newIndex = j;1170                            break;1171                        }1172                    }1173                }1174                if (newIndex === undefined) {1175                    unmount(prevChild, parentComponent, parentSuspense, true);1176                }1177                else {1178                    newIndexToOldIndexMap[newIndex - s2] = i + 1;1179                    if (newIndex >= maxNewIndexSoFar) {1180                        maxNewIndexSoFar = newIndex;1181                    }1182                    else {1183                        moved = true;1184                    }1185                    patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, optimized);1186                    patched++;1187                }1188            }1189            // 5.3 move and mount1190            // generate longest stable subsequence only when nodes have moved1191            const increasingNewIndexSequence = moved1192                ? getSequence(newIndexToOldIndexMap)1193                : EMPTY_ARR;1194            j = increasingNewIndexSequence.length - 1;1195            // looping backwards so that we can use last patched node as anchor1196            for (i = toBePatched - 1; i >= 0; i--) {1197                const nextIndex = s2 + i;1198                const nextChild = c2[nextIndex];1199                const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;1200                if (newIndexToOldIndexMap[i] === 0) {1201                    // mount new1202                    patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG);1203                }1204                else if (moved) {1205                    // move if:1206                    // There is no stable subsequence (e.g. a reverse)1207                    // OR current node is not among the stable sequence1208                    if (j < 0 || i !== increasingNewIndexSequence[j]) {1209                        move(nextChild, container, anchor, 2 /* REORDER */);1210                    }1211                    else {1212                        j--;1213                    }1214                }1215            }1216        }1217    };1218    const move = (vnode, container, anchor, moveType, parentSuspense = null) => {1219        const { el, type, transition, children, shapeFlag } = vnode;1220        if (shapeFlag & 6 /* COMPONENT */) {1221            move(vnode.component.subTree, container, anchor, moveType);1222            return;1223        }1224        if ( shapeFlag & 128 /* SUSPENSE */) {1225            vnode.suspense.move(container, anchor, moveType);1226            return;1227        }1228        if (shapeFlag & 64 /* TELEPORT */) {1229            type.move(vnode, container, anchor, internals);1230            return;1231        }1232        if (type === Fragment) {1233            hostInsert(el, container, anchor);1234            for (let i = 0; i < children.length; i++) {1235                move(children[i], container, anchor, moveType);1236            }1237            hostInsert(vnode.anchor, container, anchor);1238            return;1239        }1240        // static node move can only happen when force updating HMR1241        if ( type === Static) {1242            moveStaticNode(vnode, container, anchor);1243            return;1244        }1245        // single nodes1246        const needTransition = moveType !== 2 /* REORDER */ &&1247            shapeFlag & 1 /* ELEMENT */ &&1248            transition;1249        if (needTransition) {1250            if (moveType === 0 /* ENTER */) {1251                transition.beforeEnter(el);1252                hostInsert(el, container, anchor);1253                queuePostRenderEffect(() => transition.enter(el), parentSuspense);1254            }1255            else {1256                const { leave, delayLeave, afterLeave } = transition;1257                const remove = () => hostInsert(el, container, anchor);1258                const performLeave = () => {1259                    leave(el, () => {1260                        remove();1261                        afterLeave && afterLeave();1262                    });1263                };1264                if (delayLeave) {1265                    delayLeave(el, remove, performLeave);1266                }1267                else {1268                    performLeave();1269                }1270            }1271        }1272        else {1273            hostInsert(el, container, anchor);1274        }1275    };1276    const unmount = (vnode, parentComponent, parentSuspense, doRemove = false) => {1277        const { type, props, ref, children, dynamicChildren, shapeFlag, patchFlag, dirs } = vnode;1278        // unset ref1279        if (ref != null && parentComponent) {1280            setRef(ref, null, parentComponent, parentSuspense, null);1281        }1282        if (shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {1283            parentComponent.ctx.deactivate(vnode);1284            return;1285        }1286        const shouldInvokeDirs = shapeFlag & 1 /* ELEMENT */ && dirs;1287        let vnodeHook;1288        if ((vnodeHook = props && props.onVnodeBeforeUnmount)) {1289            invokeVNodeHook(vnodeHook, parentComponent, vnode);1290        }1291        if (shapeFlag & 6 /* COMPONENT */) {1292            unmountComponent(vnode.component, parentSuspense, doRemove);1293        }1294        else {1295            if ( shapeFlag & 128 /* SUSPENSE */) {1296                vnode.suspense.unmount(parentSuspense, doRemove);1297                return;1298            }1299            if (shouldInvokeDirs) {1300                invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount');1301            }1302            if (dynamicChildren &&1303                // #1153: fast path should not be taken for non-stable (v-for) fragments1304                (type !== Fragment ||1305                    (patchFlag > 0 && patchFlag & 64 /* STABLE_FRAGMENT */))) {1306                // fast path for block nodes: only need to unmount dynamic children.1307                unmountChildren(dynamicChildren, parentComponent, parentSuspense);1308            }1309            else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1310                unmountChildren(children, parentComponent, parentSuspense);1311            }1312            // an unmounted teleport should always remove its children1313            if (shapeFlag & 64 /* TELEPORT */) {1314                vnode.type.remove(vnode, internals);1315            }1316            if (doRemove) {1317                remove(vnode);1318            }1319        }1320        if ((vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) {1321            queuePostRenderEffect(() => {1322                vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);1323                shouldInvokeDirs &&1324                    invokeDirectiveHook(vnode, null, parentComponent, 'unmounted');1325            }, parentSuspense);1326        }1327    };1328    const remove = vnode => {1329        const { type, el, anchor, transition } = vnode;1330        if (type === Fragment) {1331            removeFragment(el, anchor);1332            return;1333        }1334        if ( type === Static) {1335            removeStaticNode(vnode);1336            return;1337        }1338        const performRemove = () => {1339            hostRemove(el);1340            if (transition && !transition.persisted && transition.afterLeave) {1341                transition.afterLeave();1342            }1343        };1344        if (vnode.shapeFlag & 1 /* ELEMENT */ &&1345            transition &&1346            !transition.persisted) {1347            const { leave, delayLeave } = transition;1348            const performLeave = () => leave(el, performRemove);1349            if (delayLeave) {1350                delayLeave(vnode.el, performRemove, performLeave);1351            }1352            else {1353                performLeave();1354            }1355        }1356        else {1357            performRemove();1358        }1359    };1360    const removeFragment = (cur, end) => {1361        // For fragments, directly remove all contained DOM nodes.1362        // (fragment child nodes cannot have transition)1363        let next;1364        while (cur !== end) {1365            next = hostNextSibling(cur);1366            hostRemove(cur);1367            cur = next;1368        }1369        hostRemove(end);1370    };1371    const unmountComponent = (instance, parentSuspense, doRemove) => {1372        if ( instance.type.__hmrId) {1373            unregisterHMR(instance);1374        }1375        const { bum, effects, update, subTree, um } = instance;1376        // beforeUnmount hook1377        if (bum) {1378            invokeArrayFns(bum);1379        }1380        if (effects) {1381            for (let i = 0; i < effects.length; i++) {1382                stop(effects[i]);1383            }1384        }1385        // update may be null if a component is unmounted before its async1386        // setup has resolved.1387        if (update) {1388            stop(update);1389            unmount(subTree, instance, parentSuspense, doRemove);1390        }1391        // unmounted hook1392        if (um) {1393            queuePostRenderEffect(um, parentSuspense);1394        }1395        queuePostRenderEffect(() => {1396            instance.isUnmounted = true;1397        }, parentSuspense);1398        // A component with async dep inside a pending suspense is unmounted before1399        // its async dep resolves. This should remove the dep from the suspense, and1400        // cause the suspense to resolve immediately if that was the last dep.1401        if (1402            parentSuspense &&1403            parentSuspense.pendingBranch &&1404            !parentSuspense.isUnmounted &&1405            instance.asyncDep &&1406            !instance.asyncResolved &&1407            instance.suspenseId === parentSuspense.pendingId) {1408            parentSuspense.deps--;1409            if (parentSuspense.deps === 0) {1410                parentSuspense.resolve();1411            }1412        }1413        {1414            devtoolsComponentRemoved(instance);1415        }1416    };1417    const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, start = 0) => {1418        for (let i = start; i < children.length; i++) {1419            unmount(children[i], parentComponent, parentSuspense, doRemove);1420        }1421    };1422    const getNextHostNode = vnode => {1423        if (vnode.shapeFlag & 6 /* COMPONENT */) {1424            return getNextHostNode(vnode.component.subTree);1425        }1426        if ( vnode.shapeFlag & 128 /* SUSPENSE */) {1427            return vnode.suspense.next();1428        }1429        return hostNextSibling((vnode.anchor || vnode.el));1430    };1431    /**1432     * #11561433     * When a component is HMR-enabled, we need to make sure that all static nodes1434     * inside a block also inherit the DOM element from the previous tree so that1435     * HMR updates (which are full updates) can retrieve the element for patching.1436     *1437     * #20801438     * Inside keyed `template` fragment static children, if a fragment is moved,1439     * the children will always moved so that need inherit el form previous nodes1440     * to ensure correct moved position.1441     */1442    const traverseStaticChildren = (n1, n2, shallow = false) => {1443        const ch1 = n1.children;1444        const ch2 = n2.children;1445        if (isArray(ch1) && isArray(ch2)) {1446            for (let i = 0; i < ch1.length; i++) {1447                // this is only called in the optimized path so array children are1448                // guaranteed to be vnodes1449                const c1 = ch1[i];1450                const c2 = (ch2[i] = cloneIfMounted(ch2[i]));1451                if (c2.shapeFlag & 1 /* ELEMENT */ && !c2.dynamicChildren) {1452                    if (c2.patchFlag <= 0 || c2.patchFlag === 32 /* HYDRATE_EVENTS */) {1453                        c2.el = c1.el;1454                    }1455                    if (!shallow)1456                        traverseStaticChildren(c1, c2);1457                }1458                if ( c2.type === Comment) {1459                    c2.el = c1.el;1460                }1461            }1462        }1463    };1464    const render = (vnode, container) => {...

createApp.js

Source:createApp.js

...410    };411    const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, optimized, start = 0) => {412        for (let i = start; i < children.length; i++) {413            const child = (children[i] = optimized414                ? cloneIfMounted(children[i])415                : normalizeVNode(children[i]));416            patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, optimized);417        }418    };419    const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, optimized) => {420        const el = (n2.el = n1.el);421        let { patchFlag, dynamicChildren, dirs } = n2;422        // #1426 take the old vnode's patch flag into account since user may clone a423        // compiler-generated vnode, which de-opts to FULL_PROPS424        patchFlag |= n1.patchFlag & 16 /* FULL_PROPS */;425        const oldProps = n1.props || EMPTY_OBJ;426        const newProps = n2.props || EMPTY_OBJ;427        let vnodeHook;428        if ((vnodeHook = newProps.onVnodeBeforeUpdate)) {429            invokeVNodeHook(vnodeHook, parentComponent, n2, n1);430        }431        if (dirs) {432            invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate');433        }434        if ( isHmrUpdating) {435            // HMR updated, force full diff436            patchFlag = 0;437            optimized = false;438            dynamicChildren = null;439        }440        if (patchFlag > 0) {441            // the presence of a patchFlag means this element's render code was442            // generated by the compiler and can take the fast path.443            // in this path old node and new node are guaranteed to have the same shape444            // (i.e. at the exact same position in the source template)445            if (patchFlag & 16 /* FULL_PROPS */) {446                // element props contain dynamic keys, full diff needed447                patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);448            }449            else {450                // class451                // this flag is matched when the element has dynamic class bindings.452                if (patchFlag & 2 /* CLASS */) {453                    if (oldProps.class !== newProps.class) {454                        hostPatchProp(el, 'class', null, newProps.class, isSVG);455                    }456                }457                // style458                // this flag is matched when the element has dynamic style bindings459                if (patchFlag & 4 /* STYLE */) {460                    hostPatchProp(el, 'style', oldProps.style, newProps.style, isSVG);461                }462                // props463                // This flag is matched when the element has dynamic prop/attr bindings464                // other than class and style. The keys of dynamic prop/attrs are saved for465                // faster iteration.466                // Note dynamic keys like :[foo]="bar" will cause this optimization to467                // bail out and go through a full diff because we need to unset the old key468                if (patchFlag & 8 /* PROPS */) {469                    // if the flag is present then dynamicProps must be non-null470                    const propsToUpdate = n2.dynamicProps;471                    for (let i = 0; i < propsToUpdate.length; i++) {472                        const key = propsToUpdate[i];473                        const prev = oldProps[key];474                        const next = newProps[key];475                        if (next !== prev ||476                            (hostForcePatchProp && hostForcePatchProp(el, key))) {477                            hostPatchProp(el, key, prev, next, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);478                        }479                    }480                }481            }482            // text483            // This flag is matched when the element has only dynamic text children.484            if (patchFlag & 1 /* TEXT */) {485                if (n1.children !== n2.children) {486                    hostSetElementText(el, n2.children);487                }488            }489        }490        else if (!optimized && dynamicChildren == null) {491            // unoptimized, full diff492            patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);493        }494        const areChildrenSVG = isSVG && n2.type !== 'foreignObject';495        if (dynamicChildren) {496            patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG);497            if ( parentComponent && parentComponent.type.__hmrId) {498                traverseStaticChildren(n1, n2);499            }500        }501        else if (!optimized) {502            // full diff503            patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG);504        }505        if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {506            queuePostRenderEffect(() => {507                vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);508                dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated');509            }, parentSuspense);510        }511    };512    // The fast path for blocks.513    const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG) => {514        for (let i = 0; i < newChildren.length; i++) {515            const oldVNode = oldChildren[i];516            const newVNode = newChildren[i];517            // Determine the container (parent element) for the patch.518            const container = 519            // - In the case of a Fragment, we need to provide the actual parent520            // of the Fragment itself so it can move its children.521            oldVNode.type === Fragment ||522                // - In the case of different nodes, there is going to be a replacement523                // which also requires the correct parent container524                !isSameVNodeType(oldVNode, newVNode) ||525                // - In the case of a component, it could contain anything.526                oldVNode.shapeFlag & 6 /* COMPONENT */ ||527                oldVNode.shapeFlag & 64 /* TELEPORT */528                ? hostParentNode(oldVNode.el)529                : // In other cases, the parent container is not actually used so we530                    // just pass the block element here to avoid a DOM parentNode call.531                    fallbackContainer;532            patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, true);533        }534    };535    const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {536        if (oldProps !== newProps) {537            for (const key in newProps) {538                if (isReservedProp(key))539                    continue;540                const next = newProps[key];541                const prev = oldProps[key];542                if (next !== prev ||543                    (hostForcePatchProp && hostForcePatchProp(el, key))) {544                    hostPatchProp(el, key, prev, next, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);545                }546            }547            if (oldProps !== EMPTY_OBJ) {548                for (const key in oldProps) {549                    if (!isReservedProp(key) && !(key in newProps)) {550                        hostPatchProp(el, key, oldProps[key], null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);551                    }552                }553            }554        }555    };556    const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {557        const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''));558        const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''));559        let { patchFlag, dynamicChildren } = n2;560        if (patchFlag > 0) {561            optimized = true;562        }563        if ( isHmrUpdating) {564            // HMR updated, force full diff565            patchFlag = 0;566            optimized = false;567            dynamicChildren = null;568        }569        if (n1 == null) {570            hostInsert(fragmentStartAnchor, container, anchor);571            hostInsert(fragmentEndAnchor, container, anchor);572            // a fragment can only have array children573            // since they are either generated by the compiler, or implicitly created574            // from arrays.575            mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);576        }577        else {578            if (patchFlag > 0 &&579                patchFlag & 64 /* STABLE_FRAGMENT */ &&580                dynamicChildren) {581                // a stable fragment (template root or <template v-for>) doesn't need to582                // patch children order, but it may contain dynamicChildren.583                patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG);584                if ( parentComponent && parentComponent.type.__hmrId) {585                    traverseStaticChildren(n1, n2);586                }587                else if (588                // #2080 if the stable fragment has a key, it's a <template v-for> that may589                //  get moved around. Make sure all root level vnodes inherit el.590                // #2134 or if it's a component root, it may also get moved around591                // as the component is being moved.592                n2.key != null ||593                    (parentComponent && n2 === parentComponent.subTree)) {594                    traverseStaticChildren(n1, n2, true /* shallow */);595                }596            }597            else {598                // keyed / unkeyed, or manual fragments.599                // for keyed & unkeyed, since they are compiler generated from v-for,600                // each child is guaranteed to be a block so the fragment will never601                // have dynamicChildren.602                patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);603            }604        }605    };606    const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {607        if (n1 == null) {608            if (n2.shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) {609                parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized);610            }611            else {612                mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);613            }614        }615        else {616            updateComponent(n1, n2, optimized);617        }618    };619    const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {620        const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense));621        if ( instance.type.__hmrId) {622            registerHMR(instance);623        }624        {625            pushWarningContext(initialVNode);626            startMeasure(instance, `mount`);627        }628        // inject renderer internals for keepAlive629        if (isKeepAlive(initialVNode)) {630            instance.ctx.renderer = internals;631        }632        // resolve props and slots for setup context633        {634            startMeasure(instance, `init`);635        }636        setupComponent(instance);637        {638            endMeasure(instance, `init`);639        }640        // setup() is async. This component relies on async logic to be resolved641        // before proceeding642        if ( instance.asyncDep) {643            parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect);644            // Give it a placeholder if this is not hydration645            // TODO handle self-defined fallback646            if (!initialVNode.el) {647                const placeholder = (instance.subTree = createVNode(Comment));648                processCommentNode(null, placeholder, container, anchor);649            }650            return;651        }652        setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);653        {654            popWarningContext();655            endMeasure(instance, `mount`);656        }657    };658    const updateComponent = (n1, n2, optimized) => {659        const instance = (n2.component = n1.component);660        if (shouldUpdateComponent(n1, n2, optimized)) {661            if (662                instance.asyncDep &&663                !instance.asyncResolved) {664                // async & still pending - just update props and slots665                // since the component's reactive effect for render isn't set-up yet666                {667                    pushWarningContext(n2);668                }669                updateComponentPreRender(instance, n2, optimized);670                {671                    popWarningContext();672                }673                return;674            }675            else {676                // normal update677                instance.next = n2;678                // in case the child component is also queued, remove it to avoid679                // double updating the same child component in the same flush.680                invalidateJob(instance.update);681                // instance.update is the reactive effect runner.682                instance.update();683            }684        }685        else {686            // no update needed. just copy over properties687            n2.component = n1.component;688            n2.el = n1.el;689            instance.vnode = n2;690        }691    };692    const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {693        // create reactive effect for rendering694        instance.update = effect(function componentEffect() {695            if (!instance.isMounted) {696                let vnodeHook;697                const { el, props } = initialVNode;698                const { bm, m, parent } = instance;699                // beforeMount hook700                if (bm) {701                    invokeArrayFns(bm);702                }703                // onVnodeBeforeMount704                if ((vnodeHook = props && props.onVnodeBeforeMount)) {705                    invokeVNodeHook(vnodeHook, parent, initialVNode);706                }707                // render708                {709                    startMeasure(instance, `render`);710                }711                const subTree = (instance.subTree = renderComponentRoot(instance));712                {713                    endMeasure(instance, `render`);714                }715                if (el && hydrateNode) {716                    {717                        startMeasure(instance, `hydrate`);718                    }719                    // vnode has adopted host node - perform hydration instead of mount.720                    hydrateNode(initialVNode.el, subTree, instance, parentSuspense);721                    {722                        endMeasure(instance, `hydrate`);723                    }724                }725                else {726                    {727                        startMeasure(instance, `patch`);728                    }729                    patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);730                    {731                        endMeasure(instance, `patch`);732                    }733                    initialVNode.el = subTree.el;734                }735                // mounted hook736                if (m) {737                    queuePostRenderEffect(m, parentSuspense);738                }739                // onVnodeMounted740                if ((vnodeHook = props && props.onVnodeMounted)) {741                    queuePostRenderEffect(() => {742                        invokeVNodeHook(vnodeHook, parent, initialVNode);743                    }, parentSuspense);744                }745                // activated hook for keep-alive roots.746                // #1742 activated hook must be accessed after first render747                // since the hook may be injected by a child keep-alive748                const { a } = instance;749                if (a &&750                    initialVNode.shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {751                    queuePostRenderEffect(a, parentSuspense);752                }753                instance.isMounted = true;754            }755            else {756                // updateComponent757                // This is triggered by mutation of component's own state (next: null)758                // OR parent calling processComponent (next: VNode)759                let { next, bu, u, parent, vnode } = instance;760                let originNext = next;761                let vnodeHook;762                {763                    pushWarningContext(next || instance.vnode);764                }765                if (next) {766                    updateComponentPreRender(instance, next, optimized);767                }768                else {769                    next = vnode;770                }771                next.el = vnode.el;772                // beforeUpdate hook773                if (bu) {774                    invokeArrayFns(bu);775                }776                // onVnodeBeforeUpdate777                if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {778                    invokeVNodeHook(vnodeHook, parent, next, vnode);779                }780                // render781                {782                    startMeasure(instance, `render`);783                }784                const nextTree = renderComponentRoot(instance);785                {786                    endMeasure(instance, `render`);787                }788                const prevTree = instance.subTree;789                instance.subTree = nextTree;790                // reset refs791                // only needed if previous patch had refs792                if (instance.refs !== EMPTY_OBJ) {793                    instance.refs = {};794                }795                {796                    startMeasure(instance, `patch`);797                }798                patch(prevTree, nextTree, 799                // parent may have changed if it's in a teleport800                hostParentNode(prevTree.el), 801                // anchor may have changed if it's in a fragment802                getNextHostNode(prevTree), instance, parentSuspense, isSVG);803                {804                    endMeasure(instance, `patch`);805                }806                next.el = nextTree.el;807                if (originNext === null) {808                    // self-triggered update. In case of HOC, update parent component809                    // vnode el. HOC is indicated by parent instance's subTree pointing810                    // to child component's vnode811                    updateHOCHostEl(instance, nextTree.el);812                }813                // updated hook814                if (u) {815                    queuePostRenderEffect(u, parentSuspense);816                }817                // onVnodeUpdated818                if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {819                    queuePostRenderEffect(() => {820                        invokeVNodeHook(vnodeHook, parent, next, vnode);821                    }, parentSuspense);822                }823                {824                    devtoolsComponentUpdated(instance);825                }826                {827                    popWarningContext();828                }829            }830        },  createDevEffectOptions(instance) );831    };832    const updateComponentPreRender = (instance, nextVNode, optimized) => {833        nextVNode.component = instance;834        const prevProps = instance.vnode.props;835        instance.vnode = nextVNode;836        instance.next = null;837        updateProps(instance, nextVNode.props, prevProps, optimized);838        updateSlots(instance, nextVNode.children);839        // props update may have triggered pre-flush watchers.840        // flush them before the render update.841        flushPreFlushCbs(undefined, instance.update);842    };843    const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) => {844        const c1 = n1 && n1.children;845        const prevShapeFlag = n1 ? n1.shapeFlag : 0;846        const c2 = n2.children;847        const { patchFlag, shapeFlag } = n2;848        // fast path849        if (patchFlag > 0) {850            if (patchFlag & 128 /* KEYED_FRAGMENT */) {851                // this could be either fully-keyed or mixed (some keyed some not)852                // presence of patchFlag means children are guaranteed to be arrays853                patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);854                return;855            }856            else if (patchFlag & 256 /* UNKEYED_FRAGMENT */) {857                // unkeyed858                patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);859                return;860            }861        }862        // children has 3 possibilities: text, array or no children.863        if (shapeFlag & 8 /* TEXT_CHILDREN */) {864            // text children fast path865            if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {866                unmountChildren(c1, parentComponent, parentSuspense);867            }868            if (c2 !== c1) {869                hostSetElementText(container, c2);870            }871        }872        else {873            if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {874                // prev children was array875                if (shapeFlag & 16 /* ARRAY_CHILDREN */) {876                    // two arrays, cannot assume anything, do full diff877                    patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);878                }879                else {880                    // no new children, just unmount old881                    unmountChildren(c1, parentComponent, parentSuspense, true);882                }883            }884            else {885                // prev children was text OR null886                // new children is array OR null887                if (prevShapeFlag & 8 /* TEXT_CHILDREN */) {888                    hostSetElementText(container, '');889                }890                // mount new if array891                if (shapeFlag & 16 /* ARRAY_CHILDREN */) {892                    mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);893                }894            }895        }896    };897    const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {898        c1 = c1 || EMPTY_ARR;899        c2 = c2 || EMPTY_ARR;900        const oldLength = c1.length;901        const newLength = c2.length;902        const commonLength = Math.min(oldLength, newLength);903        let i;904        for (i = 0; i < commonLength; i++) {905            const nextChild = (c2[i] = optimized906                ? cloneIfMounted(c2[i])907                : normalizeVNode(c2[i]));908            patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, optimized);909        }910        if (oldLength > newLength) {911            // remove old912            unmountChildren(c1, parentComponent, parentSuspense, true, commonLength);913        }914        else {915            // mount new916            mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, commonLength);917        }918    };919    // can be all-keyed or mixed920    const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) => {921        let i = 0;922        const l2 = c2.length;923        let e1 = c1.length - 1; // prev ending index924        let e2 = l2 - 1; // next ending index925        // 1. sync from start926        // (a b) c927        // (a b) d e928        while (i <= e1 && i <= e2) {929            const n1 = c1[i];930            const n2 = (c2[i] = optimized931                ? cloneIfMounted(c2[i])932                : normalizeVNode(c2[i]));933            if (isSameVNodeType(n1, n2)) {934                patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, optimized);935            }936            else {937                break;938            }939            i++;940        }941        // 2. sync from end942        // a (b c)943        // d e (b c)944        while (i <= e1 && i <= e2) {945            const n1 = c1[e1];946            const n2 = (c2[e2] = optimized947                ? cloneIfMounted(c2[e2])948                : normalizeVNode(c2[e2]));949            if (isSameVNodeType(n1, n2)) {950                patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, optimized);951            }952            else {953                break;954            }955            e1--;956            e2--;957        }958        // 3. common sequence + mount959        // (a b)960        // (a b) c961        // i = 2, e1 = 1, e2 = 2962        // (a b)963        // c (a b)964        // i = 0, e1 = -1, e2 = 0965        if (i > e1) {966            if (i <= e2) {967                const nextPos = e2 + 1;968                const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;969                while (i <= e2) {970                    patch(null, (c2[i] = optimized971                        ? cloneIfMounted(c2[i])972                        : normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG);973                    i++;974                }975            }976        }977        // 4. common sequence + unmount978        // (a b) c979        // (a b)980        // i = 2, e1 = 2, e2 = 1981        // a (b c)982        // (b c)983        // i = 0, e1 = 0, e2 = -1984        else if (i > e2) {985            while (i <= e1) {986                unmount(c1[i], parentComponent, parentSuspense, true);987                i++;988            }989        }990        // 5. unknown sequence991        // [i ... e1 + 1]: a b [c d e] f g992        // [i ... e2 + 1]: a b [e d c h] f g993        // i = 2, e1 = 4, e2 = 5994        else {995            const s1 = i; // prev starting index996            const s2 = i; // next starting index997            // 5.1 build key:index map for newChildren998            const keyToNewIndexMap = new Map();999            for (i = s2; i <= e2; i++) {1000                const nextChild = (c2[i] = optimized1001                    ? cloneIfMounted(c2[i])1002                    : normalizeVNode(c2[i]));1003                if (nextChild.key != null) {1004                    if ( keyToNewIndexMap.has(nextChild.key)) {1005                        warn(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);1006                    }1007                    keyToNewIndexMap.set(nextChild.key, i);1008                }1009            }1010            // 5.2 loop through old children left to be patched and try to patch1011            // matching nodes & remove nodes that are no longer present1012            let j;1013            let patched = 0;1014            const toBePatched = e2 - s2 + 1;1015            let moved = false;1016            // used to track whether any node has moved1017            let maxNewIndexSoFar = 0;1018            // works as Map<newIndex, oldIndex>1019            // Note that oldIndex is offset by +11020            // and oldIndex = 0 is a special value indicating the new node has1021            // no corresponding old node.1022            // used for determining longest stable subsequence1023            const newIndexToOldIndexMap = new Array(toBePatched);1024            for (i = 0; i < toBePatched; i++)1025                newIndexToOldIndexMap[i] = 0;1026            for (i = s1; i <= e1; i++) {1027                const prevChild = c1[i];1028                if (patched >= toBePatched) {1029                    // all new children have been patched so this can only be a removal1030                    unmount(prevChild, parentComponent, parentSuspense, true);1031                    continue;1032                }1033                let newIndex;1034                if (prevChild.key != null) {1035                    newIndex = keyToNewIndexMap.get(prevChild.key);1036                }1037                else {1038                    // key-less node, try to locate a key-less node of the same type1039                    for (j = s2; j <= e2; j++) {1040                        if (newIndexToOldIndexMap[j - s2] === 0 &&1041                            isSameVNodeType(prevChild, c2[j])) {1042                            newIndex = j;1043                            break;1044                        }1045                    }1046                }1047                if (newIndex === undefined) {1048                    unmount(prevChild, parentComponent, parentSuspense, true);1049                }1050                else {1051                    newIndexToOldIndexMap[newIndex - s2] = i + 1;1052                    if (newIndex >= maxNewIndexSoFar) {1053                        maxNewIndexSoFar = newIndex;1054                    }1055                    else {1056                        moved = true;1057                    }1058                    patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, optimized);1059                    patched++;1060                }1061            }1062            // 5.3 move and mount1063            // generate longest stable subsequence only when nodes have moved1064            const increasingNewIndexSequence = moved1065                ? getSequence(newIndexToOldIndexMap)1066                : EMPTY_ARR;1067            j = increasingNewIndexSequence.length - 1;1068            // looping backwards so that we can use last patched node as anchor1069            for (i = toBePatched - 1; i >= 0; i--) {1070                const nextIndex = s2 + i;1071                const nextChild = c2[nextIndex];1072                const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;1073                if (newIndexToOldIndexMap[i] === 0) {1074                    // mount new1075                    patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG);1076                }1077                else if (moved) {1078                    // move if:1079                    // There is no stable subsequence (e.g. a reverse)1080                    // OR current node is not among the stable sequence1081                    if (j < 0 || i !== increasingNewIndexSequence[j]) {1082                        move(nextChild, container, anchor, 2 /* REORDER */);1083                    }1084                    else {1085                        j--;1086                    }1087                }1088            }1089        }1090    };1091    const move = (vnode, container, anchor, moveType, parentSuspense = null) => {1092        const { el, type, transition, children, shapeFlag } = vnode;1093        if (shapeFlag & 6 /* COMPONENT */) {1094            move(vnode.component.subTree, container, anchor, moveType);1095            return;1096        }1097        if ( shapeFlag & 128 /* SUSPENSE */) {1098            vnode.suspense.move(container, anchor, moveType);1099            return;1100        }1101        if (shapeFlag & 64 /* TELEPORT */) {1102            type.move(vnode, container, anchor, internals);1103            return;1104        }1105        if (type === Fragment) {1106            hostInsert(el, container, anchor);1107            for (let i = 0; i < children.length; i++) {1108                move(children[i], container, anchor, moveType);1109            }1110            hostInsert(vnode.anchor, container, anchor);1111            return;1112        }1113        // static node move can only happen when force updating HMR1114        if ( type === Static) {1115            moveStaticNode(vnode, container, anchor);1116            return;1117        }1118        // single nodes1119        const needTransition = moveType !== 2 /* REORDER */ &&1120            shapeFlag & 1 /* ELEMENT */ &&1121            transition;1122        if (needTransition) {1123            if (moveType === 0 /* ENTER */) {1124                transition.beforeEnter(el);1125                hostInsert(el, container, anchor);1126                queuePostRenderEffect(() => transition.enter(el), parentSuspense);1127            }1128            else {1129                const { leave, delayLeave, afterLeave } = transition;1130                const remove = () => hostInsert(el, container, anchor);1131                const performLeave = () => {1132                    leave(el, () => {1133                        remove();1134                        afterLeave && afterLeave();1135                    });1136                };1137                if (delayLeave) {1138                    delayLeave(el, remove, performLeave);1139                }1140                else {1141                    performLeave();1142                }1143            }1144        }1145        else {1146            hostInsert(el, container, anchor);1147        }1148    };1149    const unmount = (vnode, parentComponent, parentSuspense, doRemove = false) => {1150        const { type, props, ref, children, dynamicChildren, shapeFlag, patchFlag, dirs } = vnode;1151        // unset ref1152        if (ref != null && parentComponent) {1153            setRef(ref, null, parentComponent, parentSuspense, null);1154        }1155        if (shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {1156            parentComponent.ctx.deactivate(vnode);1157            return;1158        }1159        const shouldInvokeDirs = shapeFlag & 1 /* ELEMENT */ && dirs;1160        let vnodeHook;1161        if ((vnodeHook = props && props.onVnodeBeforeUnmount)) {1162            invokeVNodeHook(vnodeHook, parentComponent, vnode);1163        }1164        if (shapeFlag & 6 /* COMPONENT */) {1165            unmountComponent(vnode.component, parentSuspense, doRemove);1166        }1167        else {1168            if ( shapeFlag & 128 /* SUSPENSE */) {1169                vnode.suspense.unmount(parentSuspense, doRemove);1170                return;1171            }1172            if (shouldInvokeDirs) {1173                invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount');1174            }1175            if (dynamicChildren &&1176                // #1153: fast path should not be taken for non-stable (v-for) fragments1177                (type !== Fragment ||1178                    (patchFlag > 0 && patchFlag & 64 /* STABLE_FRAGMENT */))) {1179                // fast path for block nodes: only need to unmount dynamic children.1180                unmountChildren(dynamicChildren, parentComponent, parentSuspense);1181            }1182            else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1183                unmountChildren(children, parentComponent, parentSuspense);1184            }1185            // an unmounted teleport should always remove its children1186            if (shapeFlag & 64 /* TELEPORT */) {1187                vnode.type.remove(vnode, internals);1188            }1189            if (doRemove) {1190                remove(vnode);1191            }1192        }1193        if ((vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) {1194            queuePostRenderEffect(() => {1195                vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);1196                shouldInvokeDirs &&1197                    invokeDirectiveHook(vnode, null, parentComponent, 'unmounted');1198            }, parentSuspense);1199        }1200    };1201    const remove = vnode => {1202        const { type, el, anchor, transition } = vnode;1203        if (type === Fragment) {1204            removeFragment(el, anchor);1205            return;1206        }1207        if ( type === Static) {1208            removeStaticNode(vnode);1209            return;1210        }1211        const performRemove = () => {1212            hostRemove(el);1213            if (transition && !transition.persisted && transition.afterLeave) {1214                transition.afterLeave();1215            }1216        };1217        if (vnode.shapeFlag & 1 /* ELEMENT */ &&1218            transition &&1219            !transition.persisted) {1220            const { leave, delayLeave } = transition;1221            const performLeave = () => leave(el, performRemove);1222            if (delayLeave) {1223                delayLeave(vnode.el, performRemove, performLeave);1224            }1225            else {1226                performLeave();1227            }1228        }1229        else {1230            performRemove();1231        }1232    };1233    const removeFragment = (cur, end) => {1234        // For fragments, directly remove all contained DOM nodes.1235        // (fragment child nodes cannot have transition)1236        let next;1237        while (cur !== end) {1238            next = hostNextSibling(cur);1239            hostRemove(cur);1240            cur = next;1241        }1242        hostRemove(end);1243    };1244    const unmountComponent = (instance, parentSuspense, doRemove) => {1245        if ( instance.type.__hmrId) {1246            unregisterHMR(instance);1247        }1248        const { bum, effects, update, subTree, um } = instance;1249        // beforeUnmount hook1250        if (bum) {1251            invokeArrayFns(bum);1252        }1253        if (effects) {1254            for (let i = 0; i < effects.length; i++) {1255                stop(effects[i]);1256            }1257        }1258        // update may be null if a component is unmounted before its async1259        // setup has resolved.1260        if (update) {1261            stop(update);1262            unmount(subTree, instance, parentSuspense, doRemove);1263        }1264        // unmounted hook1265        if (um) {1266            queuePostRenderEffect(um, parentSuspense);1267        }1268        queuePostRenderEffect(() => {1269            instance.isUnmounted = true;1270        }, parentSuspense);1271        // A component with async dep inside a pending suspense is unmounted before1272        // its async dep resolves. This should remove the dep from the suspense, and1273        // cause the suspense to resolve immediately if that was the last dep.1274        if (1275            parentSuspense &&1276            parentSuspense.pendingBranch &&1277            !parentSuspense.isUnmounted &&1278            instance.asyncDep &&1279            !instance.asyncResolved &&1280            instance.suspenseId === parentSuspense.pendingId) {1281            parentSuspense.deps--;1282            if (parentSuspense.deps === 0) {1283                parentSuspense.resolve();1284            }1285        }1286        {1287            devtoolsComponentRemoved(instance);1288        }1289    };1290    const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, start = 0) => {1291        for (let i = start; i < children.length; i++) {1292            unmount(children[i], parentComponent, parentSuspense, doRemove);1293        }1294    };1295    const getNextHostNode = vnode => {1296        if (vnode.shapeFlag & 6 /* COMPONENT */) {1297            return getNextHostNode(vnode.component.subTree);1298        }1299        if ( vnode.shapeFlag & 128 /* SUSPENSE */) {1300            return vnode.suspense.next();1301        }1302        return hostNextSibling((vnode.anchor || vnode.el));1303    };1304    /**1305     * #11561306     * When a component is HMR-enabled, we need to make sure that all static nodes1307     * inside a block also inherit the DOM element from the previous tree so that1308     * HMR updates (which are full updates) can retrieve the element for patching.1309     *1310     * #20801311     * Inside keyed `template` fragment static children, if a fragment is moved,1312     * the children will always moved so that need inherit el form previous nodes1313     * to ensure correct moved position.1314     */1315    const traverseStaticChildren = (n1, n2, shallow = false) => {1316        const ch1 = n1.children;1317        const ch2 = n2.children;1318        if (isArray(ch1) && isArray(ch2)) {1319            for (let i = 0; i < ch1.length; i++) {1320                // this is only called in the optimized path so array children are1321                // guaranteed to be vnodes1322                const c1 = ch1[i];1323                const c2 = (ch2[i] = cloneIfMounted(ch2[i]));1324                if (c2.shapeFlag & 1 /* ELEMENT */ && !c2.dynamicChildren) {1325                    if (c2.patchFlag <= 0 || c2.patchFlag === 32 /* HYDRATE_EVENTS */) {1326                        c2.el = c1.el;1327                    }1328                    if (!shallow)1329                        traverseStaticChildren(c1, c2);1330                }1331                if ( c2.type === Comment) {1332                    c2.el = c1.el;1333                }1334            }1335        }1336    };1337    const render = (vnode, container) => {...

patch.js

Source:patch.js

...94        }95    }96};97// optimized normalization for template-compiled render fns98function cloneIfMounted(child) {99    return child.el === null ? child : cloneVNode(child);100}101function isSameVNodeType(n1, n2) {102    if (103        n2.shapeFlag & 6 /* COMPONENT */ &&104        hmrDirtyComponents.has(n2.type)) {105        // HMR only: if the component has been hot-updated, force a reload.106        return false;107    }108    return n1.type === n2.type && n1.key === n2.key;109}110// can be all-keyed or mixed111const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) => {112    let i = 0;113    const l2 = c2.length;114    let e1 = c1.length - 1; // prev ending index115    let e2 = l2 - 1; // next ending index116    // 1. sync from start117    // (a b) c118    // (a b) d e119    while (i <= e1 && i <= e2) {120        const n1 = c1[i];121        const n2 = (c2[i] = optimized122            ? cloneIfMounted(c2[i])123            : normalizeVNode(c2[i]));124        if (isSameVNodeType(n1, n2)) {125            patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, optimized);126        }127        else {128            break;129        }130        i++;131    }132    // 2. sync from end133    // a (b c)134    // d e (b c)135    while (i <= e1 && i <= e2) {136        const n1 = c1[e1];137        const n2 = (c2[e2] = optimized138            ? cloneIfMounted(c2[e2])139            : normalizeVNode(c2[e2]));140        if (isSameVNodeType(n1, n2)) {141            patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, optimized);142        }143        else {144            break;145        }146        e1--;147        e2--;148    }149    // 3. common sequence + mount150    // (a b)151    // (a b) c152    // i = 2, e1 = 1, e2 = 2153    // (a b)154    // c (a b)155    // i = 0, e1 = -1, e2 = 0156    if (i > e1) {157        if (i <= e2) {158            const nextPos = e2 + 1;159            const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;160            while (i <= e2) {161                patch(null, (c2[i] = optimized162                    ? cloneIfMounted(c2[i])163                    : normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG);164                i++;165            }166        }167    }168    // 4. common sequence + unmount169    // (a b) c170    // (a b)171    // i = 2, e1 = 2, e2 = 1172    // a (b c)173    // (b c)174    // i = 0, e1 = 0, e2 = -1175    else if (i > e2) {176        while (i <= e1) {177            unmount(c1[i], parentComponent, parentSuspense, true);178            i++;179        }180    }181    // 5. unknown sequence182    // [i ... e1 + 1]: a b [c d e] f g183    // [i ... e2 + 1]: a b [e d c h] f g184    // i = 2, e1 = 4, e2 = 5185    else {186        const s1 = i; // prev starting index187        const s2 = i; // next starting index188        // 5.1 build key:index map for newChildren189        const keyToNewIndexMap = new Map();190        for (i = s2; i <= e2; i++) {191            const nextChild = (c2[i] = optimized192                ? cloneIfMounted(c2[i])193                : normalizeVNode(c2[i]));194            if (nextChild.key != null) {195                if ( keyToNewIndexMap.has(nextChild.key)) {196                    warn(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);197                }198                keyToNewIndexMap.set(nextChild.key, i);199            }200        }201        // 5.2 loop through old children left to be patched and try to patch202        // matching nodes & remove nodes that are no longer present203        let j;204        let patched = 0;205        const toBePatched = e2 - s2 + 1;206        let moved = false;207        // used to track whether any node has moved208        let maxNewIndexSoFar = 0;209        // works as Map<newIndex, oldIndex>210        // Note that oldIndex is offset by +1211        // and oldIndex = 0 is a special value indicating the new node has212        // no corresponding old node.213        // used for determining longest stable subsequence214        const newIndexToOldIndexMap = new Array(toBePatched);215        for (i = 0; i < toBePatched; i++)216            newIndexToOldIndexMap[i] = 0;217        for (i = s1; i <= e1; i++) {218            const prevChild = c1[i];219            if (patched >= toBePatched) {220                // all new children have been patched so this can only be a removal221                unmount(prevChild, parentComponent, parentSuspense, true);222                continue;223            }224            let newIndex;225            if (prevChild.key != null) {226                newIndex = keyToNewIndexMap.get(prevChild.key);227            }228            else {229                // key-less node, try to locate a key-less node of the same type230                for (j = s2; j <= e2; j++) {231                    if (newIndexToOldIndexMap[j - s2] === 0 &&232                        isSameVNodeType(prevChild, c2[j])) {233                        newIndex = j;234                        break;235                    }236                }237            }238            if (newIndex === undefined) {239                unmount(prevChild, parentComponent, parentSuspense, true);240            }241            else {242                newIndexToOldIndexMap[newIndex - s2] = i + 1; // +1 æä½ä¾¿äº0å¤æ243                if (newIndex >= maxNewIndexSoFar) {244                    maxNewIndexSoFar = newIndex;245                }246                else {247                    moved = true;248                }249                patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, optimized);250                patched++;251            }252        }253        // 5.3 move and mount254        // generate longest stable subsequence only when nodes have moved255        const increasingNewIndexSequence = moved256            ? getSequence(newIndexToOldIndexMap) // æ°çindexåºåéçoldåºå257            : EMPTY_ARR;258        j = increasingNewIndexSequence.length - 1;259        // looping backwards so that we can use last patched node as anchor260        for (i = toBePatched - 1; i >= 0; i--) {261            const nextIndex = s2 + i;262            const nextChild = c2[nextIndex];263            const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;264            if (newIndexToOldIndexMap[i] === 0) {265                // mount new266                patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG);267            }268            else if (moved) {269                // move if:270                // There is no stable subsequence (e.g. a reverse)271                // OR current node is not among the stable sequence272                if (j < 0 || i !== increasingNewIndexSequence[j]) {273                    move(nextChild, container, anchor, 2 /* REORDER */);274                }275                else {276                    j--;277                }278            }279        }280    }281};282        // https://en.wikipedia.org/wiki/Longest_increasing_subsequence283        function getSequence(arr) {284            const p = arr.slice();285            const result = [0];286            let i, j, u, v, c;287            const len = arr.length;288            for (i = 0; i < len; i++) {289                const arrI = arr[i];290                if (arrI !== 0) {291                    j = result[result.length - 1];292                    if (arr[j] < arrI) {293                        p[i] = j;294                        result.push(i);295                        continue;296                    }297                    u = 0;298                    v = result.length - 1;299                    while (u < v) {300                        c = ((u + v) / 2) | 0;301                        if (arr[result[c]] < arrI) {302                            u = c + 1;303                        }304                        else {305                            v = c;306                        }307                    }308                    if (arrI < arr[result[u]]) {309                        if (u > 0) {310                            p[i] = result[u - 1];311                        }312                        result[u] = i;313                    }314                }315            }316            u = result.length;317            v = result[u - 1];318            while (u-- > 0) {319                result[u] = v;320                v = p[v];321            }322            return result;323        }324        const move = (vnode, container, anchor, moveType, parentSuspense = null) => {325            const { el, type, transition, children, shapeFlag } = vnode;326            if (shapeFlag & 6 /* COMPONENT */) {327                move(vnode.component.subTree, container, anchor, moveType);328                return;329            }330            if ( shapeFlag & 128 /* SUSPENSE */) {331                vnode.suspense.move(container, anchor, moveType);332                return;333            }334            if (shapeFlag & 64 /* TELEPORT */) {335                type.move(vnode, container, anchor, internals);336                return;337            }338            if (type === Fragment) {339                hostInsert(el, container, anchor);340                for (let i = 0; i < children.length; i++) {341                    move(children[i], container, anchor, moveType);342                }343                hostInsert(vnode.anchor, container, anchor);344                return;345            }346            // static node move can only happen when force updating HMR347            if ( type === Static) {348                moveStaticNode(vnode, container, anchor);349                return;350            }351            // single nodes352            const needTransition = moveType !== 2 /* REORDER */ &&353                shapeFlag & 1 /* ELEMENT */ &&354                transition;355            if (needTransition) {356                if (moveType === 0 /* ENTER */) {357                    transition.beforeEnter(el);358                    hostInsert(el, container, anchor);359                    queuePostRenderEffect(() => transition.enter(el), parentSuspense);360                }361                else {362                    const { leave, delayLeave, afterLeave } = transition;363                    const remove = () => hostInsert(el, container, anchor);364                    const performLeave = () => {365                        leave(el, () => {366                            remove();367                            afterLeave && afterLeave();368                        });369                    };370                    if (delayLeave) {371                        delayLeave(el, remove, performLeave);372                    }373                    else {374                        performLeave();375                    }376                }377            }378            else {379                hostInsert(el, container, anchor);380            }381        };382            /**383             * Dev / HMR only384             */385            const moveStaticNode = (vnode, container, anchor) => {386                let cur = vnode.el;387                const end = vnode.anchor;388                while (cur && cur !== end) {389                    const next = hostNextSibling(cur);390                    hostInsert(cur, container, anchor);391                    cur = next;392                }393                hostInsert(end, container, anchor);394            };395const unmount = (vnode, parentComponent, parentSuspense, doRemove = false) => {396    const { type, props, ref, children, dynamicChildren, shapeFlag, patchFlag, dirs } = vnode;397    // unset ref398    if (ref != null && parentComponent) {399        setRef(ref, null, parentComponent, parentSuspense, null);400    }401    if (shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {402        parentComponent.ctx.deactivate(vnode);403        return;404    }405    const shouldInvokeDirs = shapeFlag & 1 /* ELEMENT */ && dirs;406    let vnodeHook;407    if ((vnodeHook = props && props.onVnodeBeforeUnmount)) {408        invokeVNodeHook(vnodeHook, parentComponent, vnode);409    }410    if (shapeFlag & 6 /* COMPONENT */) {411        unmountComponent(vnode.component, parentSuspense, doRemove);412    }413    else {414        if ( shapeFlag & 128 /* SUSPENSE */) {415            vnode.suspense.unmount(parentSuspense, doRemove);416            return;417        }418        if (shouldInvokeDirs) {419            invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount');420        }421        if (dynamicChildren &&422            // #1153: fast path should not be taken for non-stable (v-for) fragments423            (type !== Fragment ||424                (patchFlag > 0 && patchFlag & 64 /* STABLE_FRAGMENT */))) {425            // fast path for block nodes: only need to unmount dynamic children.426            unmountChildren(dynamicChildren, parentComponent, parentSuspense);427        }428        else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {429            unmountChildren(children, parentComponent, parentSuspense);430        }431        // an unmounted teleport should always remove its children432        if (shapeFlag & 64 /* TELEPORT */) {433            vnode.type.remove(vnode, internals);434        }435        if (doRemove) {436            remove(vnode);437        }438    }439    if ((vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) {440        queuePostRenderEffect(() => {441            vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);442            shouldInvokeDirs &&443                invokeDirectiveHook(vnode, null, parentComponent, 'unmounted');444        }, parentSuspense);445    }446};447const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, optimized = false) => {448    // patching & not same type, unmount old tree449    if (n1 && !isSameVNodeType(n1, n2)) {450        anchor = getNextHostNode(n1);451        unmount(n1, parentComponent, parentSuspense, true);452        n1 = null;453    }454    if (n2.patchFlag === -2 /* BAIL */) {455        optimized = false;456        n2.dynamicChildren = null;457    }458    const { type, ref, shapeFlag } = n2;459    switch (type) {460        case Text:461            processText(n1, n2, container, anchor);462            break;463        case Comment:464            processCommentNode(n1, n2, container, anchor);465            break;466        case Static:467            if (n1 == null) {468                mountStaticNode(n2, container, anchor, isSVG);469            }470            else {471                patchStaticNode(n1, n2, container, isSVG);472            }473            break;474        case Fragment:475            processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);476            break;477        default:478            if (shapeFlag & 1 /* ELEMENT */) {479                processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);480            }481            else if (shapeFlag & 6 /* COMPONENT */) {482                processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);483            }484            else if (shapeFlag & 64 /* TELEPORT */) {485                type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);486            }487            else if ( shapeFlag & 128 /* SUSPENSE */) {488                type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);489            }490            else {491                warn('Invalid VNode type:', type, `(${typeof type})`);492            }493    }494    // set ref495    if (ref != null && parentComponent) {496        setRef(ref, n1 && n1.ref, parentComponent, parentSuspense, n2);497    }498};499const processText = (n1, n2, container, anchor) => {500    if (n1 == null) {501        hostInsert((n2.el = hostCreateText(n2.children)), container, anchor);502    }503    else {504        const el = (n2.el = n1.el);505        if (n2.children !== n1.children) {506            hostSetText(el, n2.children);507        }508    }509};510const processCommentNode = (n1, n2, container, anchor) => {511    if (n1 == null) {512        hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor);513    }514    else {515        // there's no support for dynamic comments516        n2.el = n1.el;517    }518};519const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {520    isSVG = isSVG || n2.type === 'svg';521    if (n1 == null) {522        mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);523    }524    else {525        patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized);526    }527};528    const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {529        let el;530        let vnodeHook;531        const { type, props, shapeFlag, transition, scopeId, patchFlag, dirs } = vnode;532        {533            el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is);534            // mount children first, since some props may rely on child content535            // being already rendered, e.g. `<select value>`536            if (shapeFlag & 8 /* TEXT_CHILDREN */) {537                hostSetElementText(el, vnode.children);538            }539            else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {540                mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG && type !== 'foreignObject', optimized || !!vnode.dynamicChildren);541            }542            if (dirs) {543                invokeDirectiveHook(vnode, null, parentComponent, 'created');544            }545            // props546            if (props) {547                for (const key in props) {548                    if (!isReservedProp(key)) {549                        hostPatchProp(el, key, null, props[key], isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);550                    }551                }552                if ((vnodeHook = props.onVnodeBeforeMount)) {553                    invokeVNodeHook(vnodeHook, parentComponent, vnode);554                }555            }556            // scopeId557            setScopeId(el, scopeId, vnode, parentComponent);558        }559        {560            Object.defineProperty(el, '__vnode', {561                value: vnode,562                enumerable: false563            });564            Object.defineProperty(el, '__vueParentComponent', {565                value: parentComponent,566                enumerable: false567            });568        }569        if (dirs) {570            invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount');571        }572        // #1583 For inside suspense + suspense not resolved case, enter hook should call when suspense resolved573        // #1689 For inside suspense + suspense resolved case, just call it574        const needCallTransitionHooks = (!parentSuspense || (parentSuspense && !parentSuspense.pendingBranch)) &&575            transition &&576            !transition.persisted;577        if (needCallTransitionHooks) {578            transition.beforeEnter(el);579        }580        hostInsert(el, container, anchor);581        if ((vnodeHook = props && props.onVnodeMounted) ||582            needCallTransitionHooks ||583            dirs) {584            queuePostRenderEffect(() => {585                vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);586                needCallTransitionHooks && transition.enter(el);587                dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted');588            }, parentSuspense);589        }590    };591        function invokeDirectiveHook(vnode, prevVNode, instance, name) {592            const bindings = vnode.dirs;593            const oldBindings = prevVNode && prevVNode.dirs;594            for (let i = 0; i < bindings.length; i++) {595                const binding = bindings[i];596                if (oldBindings) {597                    binding.oldValue = oldBindings[i].value;598                }599                const hook = binding.dir[name];600                if (hook) {601                    callWithAsyncErrorHandling(hook, instance, 8 /* DIRECTIVE_HOOK */, [602                        vnode.el,603                        binding,604                        vnode,605                        prevVNode606                    ]);607                }608            }609        }610        function callWithAsyncErrorHandling(fn, instance, type, args) {611            if (isFunction(fn)) {612                const res = callWithErrorHandling(fn, instance, type, args);613                if (res && isPromise(res)) {614                    res.catch(err => {615                        handleError(err, instance, type);616                    });617                }618                return res;619            }620            const values = [];621            for (let i = 0; i < fn.length; i++) {622                values.push(callWithAsyncErrorHandling(fn[i], instance, type, args));623            }624            return values;625        }626        const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, optimized, start = 0) => {627            for (let i = start; i < children.length; i++) {628                const child = (children[i] = optimized629                    ? cloneIfMounted(children[i])630                    : normalizeVNode(children[i]));631                patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, optimized);632            }633        };634        const setScopeId = (el, scopeId, vnode, parentComponent) => {635            if (scopeId) {636                hostSetScopeId(el, scopeId);637            }638            if (parentComponent) {639                const treeOwnerId = parentComponent.type.__scopeId;640                // vnode's own scopeId and the current patched component's scopeId is641                // different - this is a slot content node.642                if (treeOwnerId && treeOwnerId !== scopeId) {643                    hostSetScopeId(el, treeOwnerId + '-s');...

vnodeToDom.js

Source:vnodeToDom.js

...261const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, optimized, start = 0) => {262  for (let i = start; i < children.length; i++) {263    // é¢å¤ç child264    const child = (children[i] = optimized265      ? cloneIfMounted(children[i])266      : normalizeVNode(children[i]))267    // éå½ patch æè½½ child268    patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, optimized)269  }270}...

diff.js

Source:diff.js

...35  /* ä»å¤´å¯¹æ¯æ¾å°æç¸åçèç¹ patch ï¼åç°ä¸åï¼ç«å³è·³åº*/36  while (i <= e1 && i <= e2) {37    const n1 = c1[i]38    const n2 = (c2[i] = optimized39      ? cloneIfMounted(c2[i] as VNode)40      : normalizeVNode(c2[i]))41      /* å¤ækey ï¼typeæ¯å¦ç¸ç */42    if (isSameVNodeType(n1, n2)) {43      patch(44        n1,45        n2,46        container, 47        parentAnchor,48        parentComponent,49        parentSuspense,50        isSVG,51        optimized52      )53    } else {...

vnode.js

Source:vnode.js

...286    return createVNode(Comment)287  } else if (isArray(child)) {288    return createVNode(Fragment, null, child.slice())289  } else if (typeof child === 'object') {290    return cloneIfMounted(child)291  } else {292    return createVNode(Text, null, String(child))293  }294}295export function cloneIfMounted (child) {296  return child.el === null || child.memo ? child : cloneVNode(child)297}298export function normalizeChildren (vnode, children) {299  let type = 0300  const { shapeFlag } = vnode301  if (children == null) {302    children = null303  } else if (isArray(children)) {304    type = 16...

_v3_patch.js

Source:_v3_patch.js

...9    // (a b) d e10    while (i <= e1 && i <= e2) {11        const n1 = c1[i];12        const n2 = (c2[i] = optimized ?13            cloneIfMounted(c2[i]) :14            normalizeVNode(c2[i]));15        if (isSameVNodeType(n1, n2)) { // type and key are the same.16            patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);17        } else {18            break;19        }20        i++;21    }22    // 2. sync from end23    // a (b c)24    // d e (b c)25    while (i <= e1 && i <= e2) {26        const n1 = c1[e1];27        const n2 = (c2[e2] = optimized ?28            cloneIfMounted(c2[e2]) :29            normalizeVNode(c2[e2]));30        if (isSameVNodeType(n1, n2)) { // type and key are the same.31            patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);32        } else {33            break;34        }35        e1--;36        e2--;37    }38    // [Mars] : 2. Compare the head and the tail first.39    // 3. common sequence + mount40    // (a b)41    // (a b) c42    // i = 2, e1 = 1, e2 = 243    // (a b)44    // c (a b)45    // i = 0, e1 = -1, e2 = 046    if (i > e1) {47        if (i <= e2) {48            const nextPos = e2 + 1;49            const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;50            while (i <= e2) {51                // mount new added vnodes not contained in oldChilds.52                patch(null, (c2[i] = optimized ?53                    cloneIfMounted(c2[i]) :54                    normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);55                i++;56            }57        }58    }59    // 4. common sequence + unmount60    // (a b) c61    // (a b)62    // i = 2, e1 = 2, e2 = 163    // a (b c)64    // (b c)65    // i = 0, e1 = 0, e2 = -166    else if (i > e2) {67        while (i <= e1) {68            unmount(c1[i], parentComponent, parentSuspense, true);69            i++;70        }71    }72    // 5. unknown sequence73    // [i ... e1 + 1]: a b [c d e] f g74    // [i ... e2 + 1]: a b [e d c h] f g75    // i = 2, e1 = 4, e2 = 576    else {77        const s1 = i; // prev starting index78        const s2 = i; // next starting index79        // 5.1 build key:index map for newChildren80        const keyToNewIndexMap = new Map(); // use hashMap, cause it's easy to search an index of a key.81        for (i = s2; i <= e2; i++) {82            const nextChild = (c2[i] = optimized ?83                cloneIfMounted(c2[i]) :84                normalizeVNode(c2[i]));85            if (nextChild.key != null) {86                if (keyToNewIndexMap.has(nextChild.key)) {87                    warn$1(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);88                }89                keyToNewIndexMap.set(nextChild.key, i);90            }91        }92        // 5.2 loop through old children left to be patched and try to patch93        // matching nodes & remove nodes that are no longer present94        let j;95        let patched = 0;96        const toBePatched = e2 - s2 + 1;97        let moved = false;...

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 clonedPage = await page._delegate.cloneIfMounted();7    await clonedPage.screenshot({ path: `example.png` });8    await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12    const browser = await chromium.launch();13    const context = await browser.newContext();14    const page = await context.newPage();15    const clonedPage = await page._delegate.cloneIfMounted();16    await clonedPage.screenshot({ path: `example.png` });17    await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21    const browser = await chromium.launch();22    const context = await browser.newContext();23    const page = await context.newPage();24    const clonedPage = await page._delegate.cloneIfMounted();25    await clonedPage.screenshot({ path: `example.png` });26    await browser.close();27})();28const { chromium } = require('playwright');29(async () => {30    const browser = await chromium.launch();31    const context = await browser.newContext();32    const page = await context.newPage();33    const clonedPage = await page._delegate.cloneIfMounted();34    await clonedPage.screenshot({ path: `example.png` });35    await browser.close();36})();37const { chromium } = require('playwright');38(async () => {39    const browser = await chromium.launch();40    const context = await browser.newContext();41    const page = await context.newPage();42    const clonedPage = await page._delegate.cloneIfMounted();43    await clonedPage.screenshot({ path

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const page = await browser.newPage();5  const elementHandle = await page.$('text=Get started');6  const clonedElementHandle = await elementHandle._internalApi.cloneIfMounted();7  console.log(await clonedElementHandle.evaluate(element => element.textContent));8  await browser.close();9})();

Using AI Code Generation

1const { chromium } = require('playwright');2const { cloneIfMounted } = require('playwright/lib/server/frames');3(async () => {4  const browser = await chromium.launch();5  const page = await browser.newPage();6  const frame = page.mainFrame();7  const clonedFrame = await cloneIfMounted(frame);8  console.log(clonedFrame.url());9  await browser.close();10})();

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const page = await browser.newPage();5  const clonedPage = await page._delegate.cloneIfMounted();6  await browser.close();7})();8const { chromium } = require('playwright');9(async () => {10  const browser = await chromium.launch();11  const page = await browser.newPage();12  const clonedPage = await page._delegate.cloneIfMounted();13  await browser.close();14})();15const { chromium } = require('playwright');16(async () => {17  const browser = await chromium.launch();18  const page = await browser.newPage();19  const clonedPage = await page._delegate.cloneIfMounted();20  await browser.close();21})();22const { chromium } = require('playwright');23(async () => {24  const browser = await chromium.launch();25  const page = await browser.newPage();26  const clonedPage = await page._delegate.cloneIfMounted();27  await browser.close();28})();29const { chromium } = require('playwright');30(async () => {31  const browser = await chromium.launch();32  const page = await browser.newPage();33  const clonedPage = await page._delegate.cloneIfMounted();34  await browser.close();35})();36const { chromium } = require('playwright');37(async () => {38  const browser = await chromium.launch();39  const page = await browser.newPage();40  const clonedPage = await page._delegate.cloneIfMounted();41  await browser.close();42})();43const { chromium } = require('playwright');44(async () => {45  const browser = await chromium.launch();46  const page = await browser.newPage();47  const clonedPage = await page._delegate.cloneIfMounted();48  await browser.close();49})();

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3    const browser = await chromium.launch({4    });5    const page = await browser.newPage();6    const elementHandle = await page.$('text=Get started');7    const clone = elementHandle.cloneIfMounted();8    await clone.click();9    await page.waitForTimeout(5000);10    await browser.close();11})();

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch({ headless: false });4  const page = await browser.newPage();5  const page2 = await page.cloneIfMounted();6  await page2.screenshot({ path: 'screenshot.png' });7  await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11  const browser = await chromium.launch({ headless: false });12  const page = await browser.newPage();13  const page2 = await page.cloneIfMounted();14  if (page2) {15    await page2.screenshot({ path: 'screenshot.png' });16  }17  await browser.close();18})();19addBinding(name, callback)20addInitScript(script[, arg])21bringToFront()22bringToFrontIfNeeded()23browserContext()24canScreenshotOutsideViewport()25close([options])26content()27contentFrame()28coverage()29deleteCookie(...cookies)30deleteCookies(...cookies)31dispatchEvent(type[, eventInit])32domcontentloaded()33evaluateHandle(expression[, arg])34evaluateHandleUnsafe(expression[, arg])35evaluateHandleAndWaitForSignals(expression[, arg])36evaluateHandleAndWaitForSignalsUnsafe(expression[, arg])37evaluateHandleWithTimeout(expression[, arg])38evaluateHandleWithTimeoutUnsafe(expression[, arg])39evaluateUnsafe(expression[, arg])40evaluateAndWaitForSignals(expression[, arg])41evaluateAndWaitForSignalsUnsafe(expression[, arg])42evaluateWithTimeout(expression[, arg])43evaluateWithTimeoutUnsafe(expression[, arg])44exposeBinding(name, callback[, handle])45exposeFunction(name, callback)46exposeFunctionInUtility(name, callback)47exposeFunctionInUtilityAndWaitForSignals(name, callback)48exposeFunctionInUtilityWithTimeout(name, callback)49exposure()

Using AI Code Generation

1const { chromium } = require('playwright');2const { devices } = require('playwright');3(async () => {4    const browser = await chromium.launch({ headless: false });5    const context = await browser.newContext();6    const page = await context.newPage();7    await page.screenshot({ path: `example.png` });8    await browser.close();9})();10const { chromium } = require('playwright');11const { devices } = require('playwright');12(async () => {13    const browser = await chromium.launch({ headless: false });14    const context = await browser.newContext();15    const page = await context.newPage();16    await page.screenshot({ path: `example.png` });17    await browser.close();18})();19I am using the latest version of Playwright (1.11.1). I am not sure if I am using the method in the right way. I am using the method in the following way:20const page = await context.newPage();21await page.screenshot({ path: `example.png` });22await browser.close();23I am using the latest version of Playwright (1.11.1). I am not sure if I am using the method in the right way. I am using the method in the following way:24const page = await context.newPage();25await page.screenshot({ path: `example.png` });26await browser.close();

Using AI Code Generation

1const { cloneIfMounted } = require('playwright/lib/server/frames');2const { chromium } = require('playwright');3const { assert } = require('console');4(async () => {5  const browser = await chromium.launch();6  const context = await browser.newContext();7  const page = await context.newPage();8  const frame = await page.mainFrame();9  const clone = await cloneIfMounted(frame);10  assert(frame !== clone);11  await browser.close();12})();13const { chromium } = require('playwright');14const { assert } = require('console');15(async () => {16  const browser = await chromium.launch();17  const context = await browser.newContext();18  const page = await context.newPage();19  const frame = await page.mainFrame();20  const clone = await frame._clone();21  assert(frame !== clone);22  await browser.close();23})();24const { chromium } = require('playwright');25const { assert } = require('console');26(async () => {27  const browser = await chromium.launch();28  const context = await browser.newContext();29  const page = await context.newPage();30  const frame = await page.mainFrame();31  const clone = await frame._frameManager._cloneFrame(frame);32  assert(frame !== clone);33  await browser.close();34})();35const { chromium } = require('playwright');36const { assert } = require('console');37(async () => {38  const browser = await chromium.launch();39  const context = await browser.newContext();40  const page = await context.newPage();41  const frame = await page.mainFrame();42  const clone = await frame._page._delegate._cloneFrame(frame);43  assert(frame !== clone);44  await browser.close();45})();46const { chromium } = require('playwright');47const { assert } = require('console');48(async () => {49  const browser = await chromium.launch();50  const context = await browser.newContext();51  const page = await context.newPage();52  const frame = await page.mainFrame();53  const clone = await frame._page._delegate._frameManager._cloneFrame(frame);54  assert(frame !== clone);55  await browser.close();56})();57const { chromium } = require('playwright');58const { assert } = require('console');59(async () => {

Using AI Code Generation

1const { chromium } = require('playwright');2const { cloneIfMounted } = require('playwright/lib/server/browserContext');3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  const clonedPage = await cloneIfMounted(page);8  await browser.close();9})();10import { Page } from './page';11import { PageChannel } from '../protocol/channels';12import { PageInitializer } from '../server/pageInitializer';13import { BrowserContext } from './browserContext';14import { BrowserContextChannel } from '../protocol/channels';15import { BrowserContextInitializer } from '../server/browserContextInitializer';16import { PageChannelOwner } from './page';17import { BrowserContextChannelOwner } from './browserContext';18export function cloneIfMounted(page: Page) {19  const pageChannel = (page as any)._channel as PageChannel;20  const browserContextChannel = (page.context() as any)._channel as BrowserContextChannel;21  const pageInitializer = (pageChannel as any)._initializer as PageInitializer;22  const browserContextInitializer = (browserContextChannel as any)._initializer as BrowserContextInitializer;23  const clonedPageChannel = new PageChannel(pageChannel._connection, pageInitializer);24  const clonedBrowserContextChannel = new BrowserContextChannel(browserContextChannel._connection, browserContextInitializer);25  const clonedPage = new PageChannelOwner(clonedPageChannel, pageInitializer);26  const clonedBrowserContext = new BrowserContextChannelOwner(clonedBrowserContextChannel, browserContextInitializer);27  return clonedPage._initialize();28}29import { PageChannel } from '../protocol/channels';30import { PageInitializer } from '../server/pageInitializer';31import { BrowserContextInitializer } from '../server/browserContextInitializer';32import { Page, PageDelegate } from '../page';33import { BrowserContext } from '../browserContext';34import { BrowserContextChannel } from '../protocol/channels';35import { PageChannelOwner } from './page';36import { BrowserContextChannelOwner } from './browserContext';37export function cloneIfMounted(page: Page) {

Using AI Code Generation

1const { cloneIfMounted } = require('playwright/lib/server/dom.js');2const { parseSelector } = require('playwright/lib/server/selectors.js');3const { ElementHandle } = require('playwright/lib/server/dom.js');4const { JSHandle } = require('playwright/lib/server/jsHandle.js');5async function main() {6  const selector = 'css=.myclass';7  const parsedSelector = parseSelector(selector);8  const handle = await page.$(selector);9  const clonedHandle = await cloneIfMounted(handle, parsedSelector);10  console.log(clonedHandle.asElement().toString());11}12main();

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.