Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More

How to use registerHMR method in Playwright Internal

Best JavaScript code snippet using playwright-internal

main.js

Source:main.js

...1488    reload: tryWrap(reload)1489  };1490}1491var map = new Map();1492function registerHMR(instance) {1493  const id = instance.type.__hmrId;1494  let record = map.get(id);1495  if (!record) {1496    createRecord(id, instance.type);1497    record = map.get(id);1498  }1499  record.instances.add(instance);1500}1501function unregisterHMR(instance) {1502  map.get(instance.type.__hmrId).instances.delete(instance);1503}1504function createRecord(id, initialDef) {1505  if (map.has(id)) {1506    return false;1507  }1508  map.set(id, {1509    initialDef: normalizeClassComponent(initialDef),1510    instances: new Set()1511  });1512  return true;1513}1514function normalizeClassComponent(component) {1515  return isClassComponent(component) ? component.__vccOpts : component;1516}1517function rerender(id, newRender) {1518  const record = map.get(id);1519  if (!record) {1520    return;1521  }1522  record.initialDef.render = newRender;1523  [...record.instances].forEach((instance) => {1524    if (newRender) {1525      instance.render = newRender;1526      normalizeClassComponent(instance.type).render = newRender;1527    }1528    instance.renderCache = [];1529    isHmrUpdating = true;1530    instance.update();1531    isHmrUpdating = false;1532  });1533}1534function reload(id, newComp) {1535  const record = map.get(id);1536  if (!record)1537    return;1538  newComp = normalizeClassComponent(newComp);1539  updateComponentDef(record.initialDef, newComp);1540  const instances = [...record.instances];1541  for (const instance of instances) {1542    const oldComp = normalizeClassComponent(instance.type);1543    if (!hmrDirtyComponents.has(oldComp)) {1544      if (oldComp !== record.initialDef) {1545        updateComponentDef(oldComp, newComp);1546      }1547      hmrDirtyComponents.add(oldComp);1548    }1549    instance.appContext.optionsCache.delete(instance.type);1550    if (instance.ceReload) {1551      hmrDirtyComponents.add(oldComp);1552      instance.ceReload(newComp.styles);1553      hmrDirtyComponents.delete(oldComp);1554    } else if (instance.parent) {1555      queueJob(instance.parent.update);1556      if (instance.parent.type.__asyncLoader && instance.parent.ceReload) {1557        instance.parent.ceReload(newComp.styles);1558      }1559    } else if (instance.appContext.reload) {1560      instance.appContext.reload();1561    } else if (typeof window !== "undefined") {1562      window.location.reload();1563    } else {1564      console.warn("[HMR] Root or manually mounted instance modified. Full reload required.");1565    }1566  }1567  queuePostFlushCb(() => {1568    for (const instance of instances) {1569      hmrDirtyComponents.delete(normalizeClassComponent(instance.type));1570    }1571  });1572}1573function updateComponentDef(oldComp, newComp) {1574  extend(oldComp, newComp);1575  for (const key in oldComp) {1576    if (key !== "__file" && !(key in newComp)) {1577      delete oldComp[key];1578    }1579  }1580}1581function tryWrap(fn) {1582  return (id, arg) => {1583    try {1584      return fn(id, arg);1585    } catch (e) {1586      console.error(e);1587      console.warn(`[HMR] Something went wrong during Vue component hot-reload. Full reload required.`);1588    }1589  };1590}1591var devtools;1592var buffer = [];1593var devtoolsNotInstalled = false;1594function emit(event, ...args) {1595  if (devtools) {1596    devtools.emit(event, ...args);1597  } else if (!devtoolsNotInstalled) {1598    buffer.push({ event, args });1599  }1600}1601function setDevtoolsHook(hook, target) {1602  var _a2, _b;1603  devtools = hook;1604  if (devtools) {1605    devtools.enabled = true;1606    buffer.forEach(({ event, args }) => devtools.emit(event, ...args));1607    buffer = [];1608  } else if (typeof window !== "undefined" && window.HTMLElement && !((_b = (_a2 = window.navigator) === null || _a2 === void 0 ? void 0 : _a2.userAgent) === null || _b === void 0 ? void 0 : _b.includes("jsdom"))) {1609    const replay = target.__VUE_DEVTOOLS_HOOK_REPLAY__ = target.__VUE_DEVTOOLS_HOOK_REPLAY__ || [];1610    replay.push((newHook) => {1611      setDevtoolsHook(newHook, target);1612    });1613    setTimeout(() => {1614      if (!devtools) {1615        target.__VUE_DEVTOOLS_HOOK_REPLAY__ = null;1616        devtoolsNotInstalled = true;1617        buffer = [];1618      }1619    }, 3e3);1620  } else {1621    devtoolsNotInstalled = true;1622    buffer = [];1623  }1624}1625function devtoolsInitApp(app, version2) {1626  emit("app:init", app, version2, {1627    Fragment,1628    Text,1629    Comment,1630    Static1631  });1632}1633function devtoolsUnmountApp(app) {1634  emit("app:unmount", app);1635}1636var devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook("component:added");1637var devtoolsComponentUpdated = /* @__PURE__ */ createDevtoolsComponentHook("component:updated");1638var devtoolsComponentRemoved = /* @__PURE__ */ createDevtoolsComponentHook("component:removed");1639function createDevtoolsComponentHook(hook) {1640  return (component) => {1641    emit(hook, component.appContext.app, component.uid, component.parent ? component.parent.uid : void 0, component);1642  };1643}1644var devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:start");1645var devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:end");1646function createDevtoolsPerformanceHook(hook) {1647  return (component, type, time) => {1648    emit(hook, component.appContext.app, component.uid, component, type, time);1649  };1650}1651function devtoolsComponentEmit(component, event, params) {1652  emit("component:emit", component.appContext.app, component, event, params);1653}1654function emit$1(instance, event, ...rawArgs) {1655  const props = instance.vnode.props || EMPTY_OBJ;1656  if (true) {1657    const { emitsOptions, propsOptions: [propsOptions] } = instance;1658    if (emitsOptions) {1659      if (!(event in emitsOptions) && true) {1660        if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {1661          warn2(`Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(event)}" prop.`);1662        }1663      } else {1664        const validator = emitsOptions[event];1665        if (isFunction(validator)) {1666          const isValid = validator(...rawArgs);1667          if (!isValid) {1668            warn2(`Invalid event arguments: event validation failed for event "${event}".`);1669          }1670        }1671      }1672    }1673  }1674  let args = rawArgs;1675  const isModelListener2 = event.startsWith("update:");1676  const modelArg = isModelListener2 && event.slice(7);1677  if (modelArg && modelArg in props) {1678    const modifiersKey = `${modelArg === "modelValue" ? "model" : modelArg}Modifiers`;1679    const { number, trim } = props[modifiersKey] || EMPTY_OBJ;1680    if (trim) {1681      args = rawArgs.map((a) => a.trim());1682    } else if (number) {1683      args = rawArgs.map(toNumber);1684    }1685  }1686  if (true) {1687    devtoolsComponentEmit(instance, event, args);1688  }1689  if (true) {1690    const lowerCaseEvent = event.toLowerCase();1691    if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) {1692      warn2(`Event "${lowerCaseEvent}" is emitted in component ${formatComponentName(instance, instance.type)} but the handler is registered for "${event}". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "${hyphenate(event)}" instead of "${event}".`);1693    }1694  }1695  let handlerName;1696  let handler = props[handlerName = toHandlerKey(event)] || props[handlerName = toHandlerKey(camelize(event))];1697  if (!handler && isModelListener2) {1698    handler = props[handlerName = toHandlerKey(hyphenate(event))];1699  }1700  if (handler) {1701    callWithAsyncErrorHandling(handler, instance, 6, args);1702  }1703  const onceHandler = props[handlerName + `Once`];1704  if (onceHandler) {1705    if (!instance.emitted) {1706      instance.emitted = {};1707    } else if (instance.emitted[handlerName]) {1708      return;1709    }1710    instance.emitted[handlerName] = true;1711    callWithAsyncErrorHandling(onceHandler, instance, 6, args);1712  }1713}1714function normalizeEmitsOptions(comp, appContext, asMixin = false) {1715  const cache = appContext.emitsCache;1716  const cached = cache.get(comp);1717  if (cached !== void 0) {1718    return cached;1719  }1720  const raw = comp.emits;1721  let normalized = {};1722  let hasExtends = false;1723  if (!isFunction(comp)) {1724    const extendEmits = (raw2) => {1725      const normalizedFromExtend = normalizeEmitsOptions(raw2, appContext, true);1726      if (normalizedFromExtend) {1727        hasExtends = true;1728        extend(normalized, normalizedFromExtend);1729      }1730    };1731    if (!asMixin && appContext.mixins.length) {1732      appContext.mixins.forEach(extendEmits);1733    }1734    if (comp.extends) {1735      extendEmits(comp.extends);1736    }1737    if (comp.mixins) {1738      comp.mixins.forEach(extendEmits);1739    }1740  }1741  if (!raw && !hasExtends) {1742    cache.set(comp, null);1743    return null;1744  }1745  if (isArray(raw)) {1746    raw.forEach((key) => normalized[key] = null);1747  } else {1748    extend(normalized, raw);1749  }1750  cache.set(comp, normalized);1751  return normalized;1752}1753function isEmitListener(options, key) {1754  if (!options || !isOn(key)) {1755    return false;1756  }1757  key = key.slice(2).replace(/Once$/, "");1758  return hasOwn(options, key[0].toLowerCase() + key.slice(1)) || hasOwn(options, hyphenate(key)) || hasOwn(options, key);1759}1760var currentRenderingInstance = null;1761var currentScopeId = null;1762function setCurrentRenderingInstance(instance) {1763  const prev = currentRenderingInstance;1764  currentRenderingInstance = instance;1765  currentScopeId = instance && instance.type.__scopeId || null;1766  return prev;1767}1768function pushScopeId(id) {1769  currentScopeId = id;1770}1771function popScopeId() {1772  currentScopeId = null;1773}1774function withCtx(fn, ctx = currentRenderingInstance, isNonScopedSlot) {1775  if (!ctx)1776    return fn;1777  if (fn._n) {1778    return fn;1779  }1780  const renderFnWithContext = (...args) => {1781    if (renderFnWithContext._d) {1782      setBlockTracking(-1);1783    }1784    const prevInstance = setCurrentRenderingInstance(ctx);1785    const res = fn(...args);1786    setCurrentRenderingInstance(prevInstance);1787    if (renderFnWithContext._d) {1788      setBlockTracking(1);1789    }1790    if (true) {1791      devtoolsComponentUpdated(ctx);1792    }1793    return res;1794  };1795  renderFnWithContext._n = true;1796  renderFnWithContext._c = true;1797  renderFnWithContext._d = true;1798  return renderFnWithContext;1799}1800var accessedAttrs = false;1801function markAttrsAccessed() {1802  accessedAttrs = true;1803}1804function renderComponentRoot(instance) {1805  const { type: Component, vnode, proxy, withProxy, props, propsOptions: [propsOptions], slots, attrs, emit: emit2, render: render3, renderCache, data, setupState, ctx, inheritAttrs } = instance;1806  let result;1807  let fallthroughAttrs;1808  const prev = setCurrentRenderingInstance(instance);1809  if (true) {1810    accessedAttrs = false;1811  }1812  try {1813    if (vnode.shapeFlag & 4) {1814      const proxyToUse = withProxy || proxy;1815      result = normalizeVNode(render3.call(proxyToUse, proxyToUse, renderCache, props, setupState, data, ctx));1816      fallthroughAttrs = attrs;1817    } else {1818      const render4 = Component;1819      if (attrs === props) {1820        markAttrsAccessed();1821      }1822      result = normalizeVNode(render4.length > 1 ? render4(props, true ? {1823        get attrs() {1824          markAttrsAccessed();1825          return attrs;1826        },1827        slots,1828        emit: emit21829      } : { attrs, slots, emit: emit2 }) : render4(props, null));1830      fallthroughAttrs = Component.props ? attrs : getFunctionalFallthrough(attrs);1831    }1832  } catch (err) {1833    blockStack.length = 0;1834    handleError(err, instance, 1);1835    result = createVNode(Comment);1836  }1837  let root = result;1838  let setRoot = void 0;1839  if (result.patchFlag > 0 && result.patchFlag & 2048) {1840    [root, setRoot] = getChildRoot(result);1841  }1842  if (fallthroughAttrs && inheritAttrs !== false) {1843    const keys = Object.keys(fallthroughAttrs);1844    const { shapeFlag } = root;1845    if (keys.length) {1846      if (shapeFlag & (1 | 6)) {1847        if (propsOptions && keys.some(isModelListener)) {1848          fallthroughAttrs = filterModelListeners(fallthroughAttrs, propsOptions);1849        }1850        root = cloneVNode(root, fallthroughAttrs);1851      } else if (!accessedAttrs && root.type !== Comment) {1852        const allAttrs = Object.keys(attrs);1853        const eventAttrs = [];1854        const extraAttrs = [];1855        for (let i = 0, l = allAttrs.length; i < l; i++) {1856          const key = allAttrs[i];1857          if (isOn(key)) {1858            if (!isModelListener(key)) {1859              eventAttrs.push(key[2].toLowerCase() + key.slice(3));1860            }1861          } else {1862            extraAttrs.push(key);1863          }1864        }1865        if (extraAttrs.length) {1866          warn2(`Extraneous non-props attributes (${extraAttrs.join(", ")}) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.`);1867        }1868        if (eventAttrs.length) {1869          warn2(`Extraneous non-emits event listeners (${eventAttrs.join(", ")}) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.`);1870        }1871      }1872    }1873  }1874  if (vnode.dirs) {1875    if (!isElementRoot(root)) {1876      warn2(`Runtime directive used on component with non-element root node. The directives will not function as intended.`);1877    }1878    root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs;1879  }1880  if (vnode.transition) {1881    if (!isElementRoot(root)) {1882      warn2(`Component inside <Transition> renders non-element root node that cannot be animated.`);1883    }1884    root.transition = vnode.transition;1885  }1886  if (setRoot) {1887    setRoot(root);1888  } else {1889    result = root;1890  }1891  setCurrentRenderingInstance(prev);1892  return result;1893}1894var getChildRoot = (vnode) => {1895  const rawChildren = vnode.children;1896  const dynamicChildren = vnode.dynamicChildren;1897  const childRoot = filterSingleRoot(rawChildren);1898  if (!childRoot) {1899    return [vnode, void 0];1900  }1901  const index = rawChildren.indexOf(childRoot);1902  const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1;1903  const setRoot = (updatedRoot) => {1904    rawChildren[index] = updatedRoot;1905    if (dynamicChildren) {1906      if (dynamicIndex > -1) {1907        dynamicChildren[dynamicIndex] = updatedRoot;1908      } else if (updatedRoot.patchFlag > 0) {1909        vnode.dynamicChildren = [...dynamicChildren, updatedRoot];1910      }1911    }1912  };1913  return [normalizeVNode(childRoot), setRoot];1914};1915function filterSingleRoot(children) {1916  let singleRoot;1917  for (let i = 0; i < children.length; i++) {1918    const child = children[i];1919    if (isVNode(child)) {1920      if (child.type !== Comment || child.children === "v-if") {1921        if (singleRoot) {1922          return;1923        } else {1924          singleRoot = child;1925        }1926      }1927    } else {1928      return;1929    }1930  }1931  return singleRoot;1932}1933var getFunctionalFallthrough = (attrs) => {1934  let res;1935  for (const key in attrs) {1936    if (key === "class" || key === "style" || isOn(key)) {1937      (res || (res = {}))[key] = attrs[key];1938    }1939  }1940  return res;1941};1942var filterModelListeners = (attrs, props) => {1943  const res = {};1944  for (const key in attrs) {1945    if (!isModelListener(key) || !(key.slice(9) in props)) {1946      res[key] = attrs[key];1947    }1948  }1949  return res;1950};1951var isElementRoot = (vnode) => {1952  return vnode.shapeFlag & (6 | 1) || vnode.type === Comment;1953};1954function shouldUpdateComponent(prevVNode, nextVNode, optimized) {1955  const { props: prevProps, children: prevChildren, component } = prevVNode;1956  const { props: nextProps, children: nextChildren, patchFlag } = nextVNode;1957  const emits = component.emitsOptions;1958  if ((prevChildren || nextChildren) && isHmrUpdating) {1959    return true;1960  }1961  if (nextVNode.dirs || nextVNode.transition) {1962    return true;1963  }1964  if (optimized && patchFlag >= 0) {1965    if (patchFlag & 1024) {1966      return true;1967    }1968    if (patchFlag & 16) {1969      if (!prevProps) {1970        return !!nextProps;1971      }1972      return hasPropsChanged(prevProps, nextProps, emits);1973    } else if (patchFlag & 8) {1974      const dynamicProps = nextVNode.dynamicProps;1975      for (let i = 0; i < dynamicProps.length; i++) {1976        const key = dynamicProps[i];1977        if (nextProps[key] !== prevProps[key] && !isEmitListener(emits, key)) {1978          return true;1979        }1980      }1981    }1982  } else {1983    if (prevChildren || nextChildren) {1984      if (!nextChildren || !nextChildren.$stable) {1985        return true;1986      }1987    }1988    if (prevProps === nextProps) {1989      return false;1990    }1991    if (!prevProps) {1992      return !!nextProps;1993    }1994    if (!nextProps) {1995      return true;1996    }1997    return hasPropsChanged(prevProps, nextProps, emits);1998  }1999  return false;2000}2001function hasPropsChanged(prevProps, nextProps, emitsOptions) {2002  const nextKeys = Object.keys(nextProps);2003  if (nextKeys.length !== Object.keys(prevProps).length) {2004    return true;2005  }2006  for (let i = 0; i < nextKeys.length; i++) {2007    const key = nextKeys[i];2008    if (nextProps[key] !== prevProps[key] && !isEmitListener(emitsOptions, key)) {2009      return true;2010    }2011  }2012  return false;2013}2014function updateHOCHostEl({ vnode, parent }, el) {2015  while (parent && parent.subTree === vnode) {2016    (vnode = parent.vnode).el = el;2017    parent = parent.parent;2018  }2019}2020var isSuspense = (type) => type.__isSuspense;2021function queueEffectWithSuspense(fn, suspense) {2022  if (suspense && suspense.pendingBranch) {2023    if (isArray(fn)) {2024      suspense.effects.push(...fn);2025    } else {2026      suspense.effects.push(fn);2027    }2028  } else {2029    queuePostFlushCb(fn);2030  }2031}2032function provide(key, value) {2033  if (!currentInstance) {2034    if (true) {2035      warn2(`provide() can only be used inside setup().`);2036    }2037  } else {2038    let provides = currentInstance.provides;2039    const parentProvides = currentInstance.parent && currentInstance.parent.provides;2040    if (parentProvides === provides) {2041      provides = currentInstance.provides = Object.create(parentProvides);2042    }2043    provides[key] = value;2044  }2045}2046function inject(key, defaultValue, treatDefaultAsFactory = false) {2047  const instance = currentInstance || currentRenderingInstance;2048  if (instance) {2049    const provides = instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides;2050    if (provides && key in provides) {2051      return provides[key];2052    } else if (arguments.length > 1) {2053      return treatDefaultAsFactory && isFunction(defaultValue) ? defaultValue.call(instance.proxy) : defaultValue;2054    } else if (true) {2055      warn2(`injection "${String(key)}" not found.`);2056    }2057  } else if (true) {2058    warn2(`inject() can only be used inside setup() or functional components.`);2059  }2060}2061var INITIAL_WATCHER_VALUE = {};2062function watch(source, cb, options) {2063  if (!isFunction(cb)) {2064    warn2(`\`watch(fn, options?)\` signature has been moved to a separate API. Use \`watchEffect(fn, options?)\` instead. \`watch\` now only supports \`watch(source, cb, options?) signature.`);2065  }2066  return doWatch(source, cb, options);2067}2068function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ) {2069  if (!cb) {2070    if (immediate !== void 0) {2071      warn2(`watch() "immediate" option is only respected when using the watch(source, callback, options?) signature.`);2072    }2073    if (deep !== void 0) {2074      warn2(`watch() "deep" option is only respected when using the watch(source, callback, options?) signature.`);2075    }2076  }2077  const warnInvalidSource = (s) => {2078    warn2(`Invalid watch source: `, s, `A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`);2079  };2080  const instance = currentInstance;2081  let getter;2082  let forceTrigger = false;2083  let isMultiSource = false;2084  if (isRef(source)) {2085    getter = () => source.value;2086    forceTrigger = isShallow(source);2087  } else if (isReactive(source)) {2088    getter = () => source;2089    deep = true;2090  } else if (isArray(source)) {2091    isMultiSource = true;2092    forceTrigger = source.some(isReactive);2093    getter = () => source.map((s) => {2094      if (isRef(s)) {2095        return s.value;2096      } else if (isReactive(s)) {2097        return traverse(s);2098      } else if (isFunction(s)) {2099        return callWithErrorHandling(s, instance, 2);2100      } else {2101        warnInvalidSource(s);2102      }2103    });2104  } else if (isFunction(source)) {2105    if (cb) {2106      getter = () => callWithErrorHandling(source, instance, 2);2107    } else {2108      getter = () => {2109        if (instance && instance.isUnmounted) {2110          return;2111        }2112        if (cleanup) {2113          cleanup();2114        }2115        return callWithAsyncErrorHandling(source, instance, 3, [onCleanup]);2116      };2117    }2118  } else {2119    getter = NOOP;2120    warnInvalidSource(source);2121  }2122  if (cb && deep) {2123    const baseGetter = getter;2124    getter = () => traverse(baseGetter());2125  }2126  let cleanup;2127  let onCleanup = (fn) => {2128    cleanup = effect2.onStop = () => {2129      callWithErrorHandling(fn, instance, 4);2130    };2131  };2132  if (isInSSRComponentSetup) {2133    onCleanup = NOOP;2134    if (!cb) {2135      getter();2136    } else if (immediate) {2137      callWithAsyncErrorHandling(cb, instance, 3, [2138        getter(),2139        isMultiSource ? [] : void 0,2140        onCleanup2141      ]);2142    }2143    return NOOP;2144  }2145  let oldValue = isMultiSource ? [] : INITIAL_WATCHER_VALUE;2146  const job = () => {2147    if (!effect2.active) {2148      return;2149    }2150    if (cb) {2151      const newValue = effect2.run();2152      if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue)) || false) {2153        if (cleanup) {2154          cleanup();2155        }2156        callWithAsyncErrorHandling(cb, instance, 3, [2157          newValue,2158          oldValue === INITIAL_WATCHER_VALUE ? void 0 : oldValue,2159          onCleanup2160        ]);2161        oldValue = newValue;2162      }2163    } else {2164      effect2.run();2165    }2166  };2167  job.allowRecurse = !!cb;2168  let scheduler;2169  if (flush === "sync") {2170    scheduler = job;2171  } else if (flush === "post") {2172    scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);2173  } else {2174    scheduler = () => {2175      if (!instance || instance.isMounted) {2176        queuePreFlushCb(job);2177      } else {2178        job();2179      }2180    };2181  }2182  const effect2 = new ReactiveEffect(getter, scheduler);2183  if (true) {2184    effect2.onTrack = onTrack;2185    effect2.onTrigger = onTrigger;2186  }2187  if (cb) {2188    if (immediate) {2189      job();2190    } else {2191      oldValue = effect2.run();2192    }2193  } else if (flush === "post") {2194    queuePostRenderEffect(effect2.run.bind(effect2), instance && instance.suspense);2195  } else {2196    effect2.run();2197  }2198  return () => {2199    effect2.stop();2200    if (instance && instance.scope) {2201      remove(instance.scope.effects, effect2);2202    }2203  };2204}2205function instanceWatch(source, value, options) {2206  const publicThis = this.proxy;2207  const getter = isString(source) ? source.includes(".") ? createPathGetter(publicThis, source) : () => publicThis[source] : source.bind(publicThis, publicThis);2208  let cb;2209  if (isFunction(value)) {2210    cb = value;2211  } else {2212    cb = value.handler;2213    options = value;2214  }2215  const cur = currentInstance;2216  setCurrentInstance(this);2217  const res = doWatch(getter, cb.bind(publicThis), options);2218  if (cur) {2219    setCurrentInstance(cur);2220  } else {2221    unsetCurrentInstance();2222  }2223  return res;2224}2225function createPathGetter(ctx, path) {2226  const segments = path.split(".");2227  return () => {2228    let cur = ctx;2229    for (let i = 0; i < segments.length && cur; i++) {2230      cur = cur[segments[i]];2231    }2232    return cur;2233  };2234}2235function traverse(value, seen) {2236  if (!isObject(value) || value["__v_skip"]) {2237    return value;2238  }2239  seen = seen || new Set();2240  if (seen.has(value)) {2241    return value;2242  }2243  seen.add(value);2244  if (isRef(value)) {2245    traverse(value.value, seen);2246  } else if (isArray(value)) {2247    for (let i = 0; i < value.length; i++) {2248      traverse(value[i], seen);2249    }2250  } else if (isSet(value) || isMap(value)) {2251    value.forEach((v) => {2252      traverse(v, seen);2253    });2254  } else if (isPlainObject(value)) {2255    for (const key in value) {2256      traverse(value[key], seen);2257    }2258  }2259  return value;2260}2261function useTransitionState() {2262  const state = {2263    isMounted: false,2264    isLeaving: false,2265    isUnmounting: false,2266    leavingVNodes: new Map()2267  };2268  onMounted(() => {2269    state.isMounted = true;2270  });2271  onBeforeUnmount(() => {2272    state.isUnmounting = true;2273  });2274  return state;2275}2276var TransitionHookValidator = [Function, Array];2277var BaseTransitionImpl = {2278  name: `BaseTransition`,2279  props: {2280    mode: String,2281    appear: Boolean,2282    persisted: Boolean,2283    onBeforeEnter: TransitionHookValidator,2284    onEnter: TransitionHookValidator,2285    onAfterEnter: TransitionHookValidator,2286    onEnterCancelled: TransitionHookValidator,2287    onBeforeLeave: TransitionHookValidator,2288    onLeave: TransitionHookValidator,2289    onAfterLeave: TransitionHookValidator,2290    onLeaveCancelled: TransitionHookValidator,2291    onBeforeAppear: TransitionHookValidator,2292    onAppear: TransitionHookValidator,2293    onAfterAppear: TransitionHookValidator,2294    onAppearCancelled: TransitionHookValidator2295  },2296  setup(props, { slots }) {2297    const instance = getCurrentInstance();2298    const state = useTransitionState();2299    let prevTransitionKey;2300    return () => {2301      const children = slots.default && getTransitionRawChildren(slots.default(), true);2302      if (!children || !children.length) {2303        return;2304      }2305      if (children.length > 1) {2306        warn2("<transition> can only be used on a single element or component. Use <transition-group> for lists.");2307      }2308      const rawProps = toRaw(props);2309      const { mode } = rawProps;2310      if (mode && mode !== "in-out" && mode !== "out-in" && mode !== "default") {2311        warn2(`invalid <transition> mode: ${mode}`);2312      }2313      const child = children[0];2314      if (state.isLeaving) {2315        return emptyPlaceholder(child);2316      }2317      const innerChild = getKeepAliveChild(child);2318      if (!innerChild) {2319        return emptyPlaceholder(child);2320      }2321      const enterHooks = resolveTransitionHooks(innerChild, rawProps, state, instance);2322      setTransitionHooks(innerChild, enterHooks);2323      const oldChild = instance.subTree;2324      const oldInnerChild = oldChild && getKeepAliveChild(oldChild);2325      let transitionKeyChanged = false;2326      const { getTransitionKey } = innerChild.type;2327      if (getTransitionKey) {2328        const key = getTransitionKey();2329        if (prevTransitionKey === void 0) {2330          prevTransitionKey = key;2331        } else if (key !== prevTransitionKey) {2332          prevTransitionKey = key;2333          transitionKeyChanged = true;2334        }2335      }2336      if (oldInnerChild && oldInnerChild.type !== Comment && (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) {2337        const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance);2338        setTransitionHooks(oldInnerChild, leavingHooks);2339        if (mode === "out-in") {2340          state.isLeaving = true;2341          leavingHooks.afterLeave = () => {2342            state.isLeaving = false;2343            instance.update();2344          };2345          return emptyPlaceholder(child);2346        } else if (mode === "in-out" && innerChild.type !== Comment) {2347          leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {2348            const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild);2349            leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;2350            el._leaveCb = () => {2351              earlyRemove();2352              el._leaveCb = void 0;2353              delete enterHooks.delayedLeave;2354            };2355            enterHooks.delayedLeave = delayedLeave;2356          };2357        }2358      }2359      return child;2360    };2361  }2362};2363var BaseTransition = BaseTransitionImpl;2364function getLeavingNodesForType(state, vnode) {2365  const { leavingVNodes } = state;2366  let leavingVNodesCache = leavingVNodes.get(vnode.type);2367  if (!leavingVNodesCache) {2368    leavingVNodesCache = Object.create(null);2369    leavingVNodes.set(vnode.type, leavingVNodesCache);2370  }2371  return leavingVNodesCache;2372}2373function resolveTransitionHooks(vnode, props, state, instance) {2374  const { appear, mode, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, onBeforeAppear, onAppear, onAfterAppear, onAppearCancelled } = props;2375  const key = String(vnode.key);2376  const leavingVNodesCache = getLeavingNodesForType(state, vnode);2377  const callHook3 = (hook, args) => {2378    hook && callWithAsyncErrorHandling(hook, instance, 9, args);2379  };2380  const hooks = {2381    mode,2382    persisted,2383    beforeEnter(el) {2384      let hook = onBeforeEnter;2385      if (!state.isMounted) {2386        if (appear) {2387          hook = onBeforeAppear || onBeforeEnter;2388        } else {2389          return;2390        }2391      }2392      if (el._leaveCb) {2393        el._leaveCb(true);2394      }2395      const leavingVNode = leavingVNodesCache[key];2396      if (leavingVNode && isSameVNodeType(vnode, leavingVNode) && leavingVNode.el._leaveCb) {2397        leavingVNode.el._leaveCb();2398      }2399      callHook3(hook, [el]);2400    },2401    enter(el) {2402      let hook = onEnter;2403      let afterHook = onAfterEnter;2404      let cancelHook = onEnterCancelled;2405      if (!state.isMounted) {2406        if (appear) {2407          hook = onAppear || onEnter;2408          afterHook = onAfterAppear || onAfterEnter;2409          cancelHook = onAppearCancelled || onEnterCancelled;2410        } else {2411          return;2412        }2413      }2414      let called = false;2415      const done = el._enterCb = (cancelled) => {2416        if (called)2417          return;2418        called = true;2419        if (cancelled) {2420          callHook3(cancelHook, [el]);2421        } else {2422          callHook3(afterHook, [el]);2423        }2424        if (hooks.delayedLeave) {2425          hooks.delayedLeave();2426        }2427        el._enterCb = void 0;2428      };2429      if (hook) {2430        hook(el, done);2431        if (hook.length <= 1) {2432          done();2433        }2434      } else {2435        done();2436      }2437    },2438    leave(el, remove2) {2439      const key2 = String(vnode.key);2440      if (el._enterCb) {2441        el._enterCb(true);2442      }2443      if (state.isUnmounting) {2444        return remove2();2445      }2446      callHook3(onBeforeLeave, [el]);2447      let called = false;2448      const done = el._leaveCb = (cancelled) => {2449        if (called)2450          return;2451        called = true;2452        remove2();2453        if (cancelled) {2454          callHook3(onLeaveCancelled, [el]);2455        } else {2456          callHook3(onAfterLeave, [el]);2457        }2458        el._leaveCb = void 0;2459        if (leavingVNodesCache[key2] === vnode) {2460          delete leavingVNodesCache[key2];2461        }2462      };2463      leavingVNodesCache[key2] = vnode;2464      if (onLeave) {2465        onLeave(el, done);2466        if (onLeave.length <= 1) {2467          done();2468        }2469      } else {2470        done();2471      }2472    },2473    clone(vnode2) {2474      return resolveTransitionHooks(vnode2, props, state, instance);2475    }2476  };2477  return hooks;2478}2479function emptyPlaceholder(vnode) {2480  if (isKeepAlive(vnode)) {2481    vnode = cloneVNode(vnode);2482    vnode.children = null;2483    return vnode;2484  }2485}2486function getKeepAliveChild(vnode) {2487  return isKeepAlive(vnode) ? vnode.children ? vnode.children[0] : void 0 : vnode;2488}2489function setTransitionHooks(vnode, hooks) {2490  if (vnode.shapeFlag & 6 && vnode.component) {2491    setTransitionHooks(vnode.component.subTree, hooks);2492  } else if (vnode.shapeFlag & 128) {2493    vnode.ssContent.transition = hooks.clone(vnode.ssContent);2494    vnode.ssFallback.transition = hooks.clone(vnode.ssFallback);2495  } else {2496    vnode.transition = hooks;2497  }2498}2499function getTransitionRawChildren(children, keepComment = false) {2500  let ret = [];2501  let keyedFragmentCount = 0;2502  for (let i = 0; i < children.length; i++) {2503    const child = children[i];2504    if (child.type === Fragment) {2505      if (child.patchFlag & 128)2506        keyedFragmentCount++;2507      ret = ret.concat(getTransitionRawChildren(child.children, keepComment));2508    } else if (keepComment || child.type !== Comment) {2509      ret.push(child);2510    }2511  }2512  if (keyedFragmentCount > 1) {2513    for (let i = 0; i < ret.length; i++) {2514      ret[i].patchFlag = -2;2515    }2516  }2517  return ret;2518}2519function defineComponent(options) {2520  return isFunction(options) ? { setup: options, name: options.name } : options;2521}2522var isAsyncWrapper = (i) => !!i.type.__asyncLoader;2523var isKeepAlive = (vnode) => vnode.type.__isKeepAlive;2524function onActivated(hook, target) {2525  registerKeepAliveHook(hook, "a", target);2526}2527function onDeactivated(hook, target) {2528  registerKeepAliveHook(hook, "da", target);2529}2530function registerKeepAliveHook(hook, type, target = currentInstance) {2531  const wrappedHook = hook.__wdc || (hook.__wdc = () => {2532    let current = target;2533    while (current) {2534      if (current.isDeactivated) {2535        return;2536      }2537      current = current.parent;2538    }2539    return hook();2540  });2541  injectHook(type, wrappedHook, target);2542  if (target) {2543    let current = target.parent;2544    while (current && current.parent) {2545      if (isKeepAlive(current.parent.vnode)) {2546        injectToKeepAliveRoot(wrappedHook, type, target, current);2547      }2548      current = current.parent;2549    }2550  }2551}2552function injectToKeepAliveRoot(hook, type, target, keepAliveRoot) {2553  const injected = injectHook(type, hook, keepAliveRoot, true);2554  onUnmounted(() => {2555    remove(keepAliveRoot[type], injected);2556  }, target);2557}2558function injectHook(type, hook, target = currentInstance, prepend = false) {2559  if (target) {2560    const hooks = target[type] || (target[type] = []);2561    const wrappedHook = hook.__weh || (hook.__weh = (...args) => {2562      if (target.isUnmounted) {2563        return;2564      }2565      pauseTracking();2566      setCurrentInstance(target);2567      const res = callWithAsyncErrorHandling(hook, target, type, args);2568      unsetCurrentInstance();2569      resetTracking();2570      return res;2571    });2572    if (prepend) {2573      hooks.unshift(wrappedHook);2574    } else {2575      hooks.push(wrappedHook);2576    }2577    return wrappedHook;2578  } else if (true) {2579    const apiName = toHandlerKey(ErrorTypeStrings[type].replace(/ hook$/, ""));2580    warn2(`${apiName} is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.`);2581  }2582}2583var createHook = (lifecycle) => (hook, target = currentInstance) => (!isInSSRComponentSetup || lifecycle === "sp") && injectHook(lifecycle, hook, target);2584var onBeforeMount = createHook("bm");2585var onMounted = createHook("m");2586var onBeforeUpdate = createHook("bu");2587var onUpdated = createHook("u");2588var onBeforeUnmount = createHook("bum");2589var onUnmounted = createHook("um");2590var onServerPrefetch = createHook("sp");2591var onRenderTriggered = createHook("rtg");2592var onRenderTracked = createHook("rtc");2593function onErrorCaptured(hook, target = currentInstance) {2594  injectHook("ec", hook, target);2595}2596function createDuplicateChecker() {2597  const cache = Object.create(null);2598  return (type, key) => {2599    if (cache[key]) {2600      warn2(`${type} property "${key}" is already defined in ${cache[key]}.`);2601    } else {2602      cache[key] = type;2603    }2604  };2605}2606var shouldCacheAccess = true;2607function applyOptions(instance) {2608  const options = resolveMergedOptions(instance);2609  const publicThis = instance.proxy;2610  const ctx = instance.ctx;2611  shouldCacheAccess = false;2612  if (options.beforeCreate) {2613    callHook(options.beforeCreate, instance, "bc");2614  }2615  const {2616    data: dataOptions,2617    computed: computedOptions,2618    methods,2619    watch: watchOptions,2620    provide: provideOptions,2621    inject: injectOptions,2622    created,2623    beforeMount,2624    mounted,2625    beforeUpdate,2626    updated,2627    activated,2628    deactivated,2629    beforeDestroy,2630    beforeUnmount,2631    destroyed,2632    unmounted,2633    render: render3,2634    renderTracked,2635    renderTriggered,2636    errorCaptured,2637    serverPrefetch,2638    expose,2639    inheritAttrs,2640    components,2641    directives,2642    filters2643  } = options;2644  const checkDuplicateProperties = true ? createDuplicateChecker() : null;2645  if (true) {2646    const [propsOptions] = instance.propsOptions;2647    if (propsOptions) {2648      for (const key in propsOptions) {2649        checkDuplicateProperties("Props", key);2650      }2651    }2652  }2653  if (injectOptions) {2654    resolveInjections(injectOptions, ctx, checkDuplicateProperties, instance.appContext.config.unwrapInjectedRef);2655  }2656  if (methods) {2657    for (const key in methods) {2658      const methodHandler = methods[key];2659      if (isFunction(methodHandler)) {2660        if (true) {2661          Object.defineProperty(ctx, key, {2662            value: methodHandler.bind(publicThis),2663            configurable: true,2664            enumerable: true,2665            writable: true2666          });2667        } else {2668          ctx[key] = methodHandler.bind(publicThis);2669        }2670        if (true) {2671          checkDuplicateProperties("Methods", key);2672        }2673      } else if (true) {2674        warn2(`Method "${key}" has type "${typeof methodHandler}" in the component definition. Did you reference the function correctly?`);2675      }2676    }2677  }2678  if (dataOptions) {2679    if (!isFunction(dataOptions)) {2680      warn2(`The data option must be a function. Plain object usage is no longer supported.`);2681    }2682    const data = dataOptions.call(publicThis, publicThis);2683    if (isPromise(data)) {2684      warn2(`data() returned a Promise - note data() cannot be async; If you intend to perform data fetching before component renders, use async setup() + <Suspense>.`);2685    }2686    if (!isObject(data)) {2687      warn2(`data() should return an object.`);2688    } else {2689      instance.data = reactive(data);2690      if (true) {2691        for (const key in data) {2692          checkDuplicateProperties("Data", key);2693          if (key[0] !== "$" && key[0] !== "_") {2694            Object.defineProperty(ctx, key, {2695              configurable: true,2696              enumerable: true,2697              get: () => data[key],2698              set: NOOP2699            });2700          }2701        }2702      }2703    }2704  }2705  shouldCacheAccess = true;2706  if (computedOptions) {2707    for (const key in computedOptions) {2708      const opt = computedOptions[key];2709      const get2 = isFunction(opt) ? opt.bind(publicThis, publicThis) : isFunction(opt.get) ? opt.get.bind(publicThis, publicThis) : NOOP;2710      if (get2 === NOOP) {2711        warn2(`Computed property "${key}" has no getter.`);2712      }2713      const set2 = !isFunction(opt) && isFunction(opt.set) ? opt.set.bind(publicThis) : true ? () => {2714        warn2(`Write operation failed: computed property "${key}" is readonly.`);2715      } : NOOP;2716      const c = computed2({2717        get: get2,2718        set: set22719      });2720      Object.defineProperty(ctx, key, {2721        enumerable: true,2722        configurable: true,2723        get: () => c.value,2724        set: (v) => c.value = v2725      });2726      if (true) {2727        checkDuplicateProperties("Computed", key);2728      }2729    }2730  }2731  if (watchOptions) {2732    for (const key in watchOptions) {2733      createWatcher(watchOptions[key], ctx, publicThis, key);2734    }2735  }2736  if (provideOptions) {2737    const provides = isFunction(provideOptions) ? provideOptions.call(publicThis) : provideOptions;2738    Reflect.ownKeys(provides).forEach((key) => {2739      provide(key, provides[key]);2740    });2741  }2742  if (created) {2743    callHook(created, instance, "c");2744  }2745  function registerLifecycleHook(register, hook) {2746    if (isArray(hook)) {2747      hook.forEach((_hook) => register(_hook.bind(publicThis)));2748    } else if (hook) {2749      register(hook.bind(publicThis));2750    }2751  }2752  registerLifecycleHook(onBeforeMount, beforeMount);2753  registerLifecycleHook(onMounted, mounted);2754  registerLifecycleHook(onBeforeUpdate, beforeUpdate);2755  registerLifecycleHook(onUpdated, updated);2756  registerLifecycleHook(onActivated, activated);2757  registerLifecycleHook(onDeactivated, deactivated);2758  registerLifecycleHook(onErrorCaptured, errorCaptured);2759  registerLifecycleHook(onRenderTracked, renderTracked);2760  registerLifecycleHook(onRenderTriggered, renderTriggered);2761  registerLifecycleHook(onBeforeUnmount, beforeUnmount);2762  registerLifecycleHook(onUnmounted, unmounted);2763  registerLifecycleHook(onServerPrefetch, serverPrefetch);2764  if (isArray(expose)) {2765    if (expose.length) {2766      const exposed = instance.exposed || (instance.exposed = {});2767      expose.forEach((key) => {2768        Object.defineProperty(exposed, key, {2769          get: () => publicThis[key],2770          set: (val) => publicThis[key] = val2771        });2772      });2773    } else if (!instance.exposed) {2774      instance.exposed = {};2775    }2776  }2777  if (render3 && instance.render === NOOP) {2778    instance.render = render3;2779  }2780  if (inheritAttrs != null) {2781    instance.inheritAttrs = inheritAttrs;2782  }2783  if (components)2784    instance.components = components;2785  if (directives)2786    instance.directives = directives;2787}2788function resolveInjections(injectOptions, ctx, checkDuplicateProperties = NOOP, unwrapRef = false) {2789  if (isArray(injectOptions)) {2790    injectOptions = normalizeInject(injectOptions);2791  }2792  for (const key in injectOptions) {2793    const opt = injectOptions[key];2794    let injected;2795    if (isObject(opt)) {2796      if ("default" in opt) {2797        injected = inject(opt.from || key, opt.default, true);2798      } else {2799        injected = inject(opt.from || key);2800      }2801    } else {2802      injected = inject(opt);2803    }2804    if (isRef(injected)) {2805      if (unwrapRef) {2806        Object.defineProperty(ctx, key, {2807          enumerable: true,2808          configurable: true,2809          get: () => injected.value,2810          set: (v) => injected.value = v2811        });2812      } else {2813        if (true) {2814          warn2(`injected property "${key}" is a ref and will be auto-unwrapped and no longer needs \`.value\` in the next minor release. To opt-in to the new behavior now, set \`app.config.unwrapInjectedRef = true\` (this config is temporary and will not be needed in the future.)`);2815        }2816        ctx[key] = injected;2817      }2818    } else {2819      ctx[key] = injected;2820    }2821    if (true) {2822      checkDuplicateProperties("Inject", key);2823    }2824  }2825}2826function callHook(hook, instance, type) {2827  callWithAsyncErrorHandling(isArray(hook) ? hook.map((h2) => h2.bind(instance.proxy)) : hook.bind(instance.proxy), instance, type);2828}2829function createWatcher(raw, ctx, publicThis, key) {2830  const getter = key.includes(".") ? createPathGetter(publicThis, key) : () => publicThis[key];2831  if (isString(raw)) {2832    const handler = ctx[raw];2833    if (isFunction(handler)) {2834      watch(getter, handler);2835    } else if (true) {2836      warn2(`Invalid watch handler specified by key "${raw}"`, handler);2837    }2838  } else if (isFunction(raw)) {2839    watch(getter, raw.bind(publicThis));2840  } else if (isObject(raw)) {2841    if (isArray(raw)) {2842      raw.forEach((r) => createWatcher(r, ctx, publicThis, key));2843    } else {2844      const handler = isFunction(raw.handler) ? raw.handler.bind(publicThis) : ctx[raw.handler];2845      if (isFunction(handler)) {2846        watch(getter, handler, raw);2847      } else if (true) {2848        warn2(`Invalid watch handler specified by key "${raw.handler}"`, handler);2849      }2850    }2851  } else if (true) {2852    warn2(`Invalid watch option: "${key}"`, raw);2853  }2854}2855function resolveMergedOptions(instance) {2856  const base = instance.type;2857  const { mixins, extends: extendsOptions } = base;2858  const { mixins: globalMixins, optionsCache: cache, config: { optionMergeStrategies } } = instance.appContext;2859  const cached = cache.get(base);2860  let resolved;2861  if (cached) {2862    resolved = cached;2863  } else if (!globalMixins.length && !mixins && !extendsOptions) {2864    {2865      resolved = base;2866    }2867  } else {2868    resolved = {};2869    if (globalMixins.length) {2870      globalMixins.forEach((m) => mergeOptions(resolved, m, optionMergeStrategies, true));2871    }2872    mergeOptions(resolved, base, optionMergeStrategies);2873  }2874  cache.set(base, resolved);2875  return resolved;2876}2877function mergeOptions(to, from, strats, asMixin = false) {2878  const { mixins, extends: extendsOptions } = from;2879  if (extendsOptions) {2880    mergeOptions(to, extendsOptions, strats, true);2881  }2882  if (mixins) {2883    mixins.forEach((m) => mergeOptions(to, m, strats, true));2884  }2885  for (const key in from) {2886    if (asMixin && key === "expose") {2887      warn2(`"expose" option is ignored when declared in mixins or extends. It should only be declared in the base component itself.`);2888    } else {2889      const strat = internalOptionMergeStrats[key] || strats && strats[key];2890      to[key] = strat ? strat(to[key], from[key]) : from[key];2891    }2892  }2893  return to;2894}2895var internalOptionMergeStrats = {2896  data: mergeDataFn,2897  props: mergeObjectOptions,2898  emits: mergeObjectOptions,2899  methods: mergeObjectOptions,2900  computed: mergeObjectOptions,2901  beforeCreate: mergeAsArray,2902  created: mergeAsArray,2903  beforeMount: mergeAsArray,2904  mounted: mergeAsArray,2905  beforeUpdate: mergeAsArray,2906  updated: mergeAsArray,2907  beforeDestroy: mergeAsArray,2908  beforeUnmount: mergeAsArray,2909  destroyed: mergeAsArray,2910  unmounted: mergeAsArray,2911  activated: mergeAsArray,2912  deactivated: mergeAsArray,2913  errorCaptured: mergeAsArray,2914  serverPrefetch: mergeAsArray,2915  components: mergeObjectOptions,2916  directives: mergeObjectOptions,2917  watch: mergeWatchOptions,2918  provide: mergeDataFn,2919  inject: mergeInject2920};2921function mergeDataFn(to, from) {2922  if (!from) {2923    return to;2924  }2925  if (!to) {2926    return from;2927  }2928  return function mergedDataFn() {2929    return extend(isFunction(to) ? to.call(this, this) : to, isFunction(from) ? from.call(this, this) : from);2930  };2931}2932function mergeInject(to, from) {2933  return mergeObjectOptions(normalizeInject(to), normalizeInject(from));2934}2935function normalizeInject(raw) {2936  if (isArray(raw)) {2937    const res = {};2938    for (let i = 0; i < raw.length; i++) {2939      res[raw[i]] = raw[i];2940    }2941    return res;2942  }2943  return raw;2944}2945function mergeAsArray(to, from) {2946  return to ? [...new Set([].concat(to, from))] : from;2947}2948function mergeObjectOptions(to, from) {2949  return to ? extend(extend(Object.create(null), to), from) : from;2950}2951function mergeWatchOptions(to, from) {2952  if (!to)2953    return from;2954  if (!from)2955    return to;2956  const merged = extend(Object.create(null), to);2957  for (const key in from) {2958    merged[key] = mergeAsArray(to[key], from[key]);2959  }2960  return merged;2961}2962function initProps(instance, rawProps, isStateful, isSSR = false) {2963  const props = {};2964  const attrs = {};2965  def(attrs, InternalObjectKey, 1);2966  instance.propsDefaults = Object.create(null);2967  setFullProps(instance, rawProps, props, attrs);2968  for (const key in instance.propsOptions[0]) {2969    if (!(key in props)) {2970      props[key] = void 0;2971    }2972  }2973  if (true) {2974    validateProps(rawProps || {}, props, instance);2975  }2976  if (isStateful) {2977    instance.props = isSSR ? props : shallowReactive(props);2978  } else {2979    if (!instance.type.props) {2980      instance.props = attrs;2981    } else {2982      instance.props = props;2983    }2984  }2985  instance.attrs = attrs;2986}2987function updateProps(instance, rawProps, rawPrevProps, optimized) {2988  const { props, attrs, vnode: { patchFlag } } = instance;2989  const rawCurrentProps = toRaw(props);2990  const [options] = instance.propsOptions;2991  let hasAttrsChanged = false;2992  if (!(instance.type.__hmrId || instance.parent && instance.parent.type.__hmrId) && (optimized || patchFlag > 0) && !(patchFlag & 16)) {2993    if (patchFlag & 8) {2994      const propsToUpdate = instance.vnode.dynamicProps;2995      for (let i = 0; i < propsToUpdate.length; i++) {2996        let key = propsToUpdate[i];2997        const value = rawProps[key];2998        if (options) {2999          if (hasOwn(attrs, key)) {3000            if (value !== attrs[key]) {3001              attrs[key] = value;3002              hasAttrsChanged = true;3003            }3004          } else {3005            const camelizedKey = camelize(key);3006            props[camelizedKey] = resolvePropValue(options, rawCurrentProps, camelizedKey, value, instance, false);3007          }3008        } else {3009          if (value !== attrs[key]) {3010            attrs[key] = value;3011            hasAttrsChanged = true;3012          }3013        }3014      }3015    }3016  } else {3017    if (setFullProps(instance, rawProps, props, attrs)) {3018      hasAttrsChanged = true;3019    }3020    let kebabKey;3021    for (const key in rawCurrentProps) {3022      if (!rawProps || !hasOwn(rawProps, key) && ((kebabKey = hyphenate(key)) === key || !hasOwn(rawProps, kebabKey))) {3023        if (options) {3024          if (rawPrevProps && (rawPrevProps[key] !== void 0 || rawPrevProps[kebabKey] !== void 0)) {3025            props[key] = resolvePropValue(options, rawCurrentProps, key, void 0, instance, true);3026          }3027        } else {3028          delete props[key];3029        }3030      }3031    }3032    if (attrs !== rawCurrentProps) {3033      for (const key in attrs) {3034        if (!rawProps || !hasOwn(rawProps, key) && true) {3035          delete attrs[key];3036          hasAttrsChanged = true;3037        }3038      }3039    }3040  }3041  if (hasAttrsChanged) {3042    trigger(instance, "set", "$attrs");3043  }3044  if (true) {3045    validateProps(rawProps || {}, props, instance);3046  }3047}3048function setFullProps(instance, rawProps, props, attrs) {3049  const [options, needCastKeys] = instance.propsOptions;3050  let hasAttrsChanged = false;3051  let rawCastValues;3052  if (rawProps) {3053    for (let key in rawProps) {3054      if (isReservedProp(key)) {3055        continue;3056      }3057      const value = rawProps[key];3058      let camelKey;3059      if (options && hasOwn(options, camelKey = camelize(key))) {3060        if (!needCastKeys || !needCastKeys.includes(camelKey)) {3061          props[camelKey] = value;3062        } else {3063          (rawCastValues || (rawCastValues = {}))[camelKey] = value;3064        }3065      } else if (!isEmitListener(instance.emitsOptions, key)) {3066        if (!(key in attrs) || value !== attrs[key]) {3067          attrs[key] = value;3068          hasAttrsChanged = true;3069        }3070      }3071    }3072  }3073  if (needCastKeys) {3074    const rawCurrentProps = toRaw(props);3075    const castValues = rawCastValues || EMPTY_OBJ;3076    for (let i = 0; i < needCastKeys.length; i++) {3077      const key = needCastKeys[i];3078      props[key] = resolvePropValue(options, rawCurrentProps, key, castValues[key], instance, !hasOwn(castValues, key));3079    }3080  }3081  return hasAttrsChanged;3082}3083function resolvePropValue(options, props, key, value, instance, isAbsent) {3084  const opt = options[key];3085  if (opt != null) {3086    const hasDefault = hasOwn(opt, "default");3087    if (hasDefault && value === void 0) {3088      const defaultValue = opt.default;3089      if (opt.type !== Function && isFunction(defaultValue)) {3090        const { propsDefaults } = instance;3091        if (key in propsDefaults) {3092          value = propsDefaults[key];3093        } else {3094          setCurrentInstance(instance);3095          value = propsDefaults[key] = defaultValue.call(null, props);3096          unsetCurrentInstance();3097        }3098      } else {3099        value = defaultValue;3100      }3101    }3102    if (opt[0]) {3103      if (isAbsent && !hasDefault) {3104        value = false;3105      } else if (opt[1] && (value === "" || value === hyphenate(key))) {3106        value = true;3107      }3108    }3109  }3110  return value;3111}3112function normalizePropsOptions(comp, appContext, asMixin = false) {3113  const cache = appContext.propsCache;3114  const cached = cache.get(comp);3115  if (cached) {3116    return cached;3117  }3118  const raw = comp.props;3119  const normalized = {};3120  const needCastKeys = [];3121  let hasExtends = false;3122  if (!isFunction(comp)) {3123    const extendProps = (raw2) => {3124      hasExtends = true;3125      const [props, keys] = normalizePropsOptions(raw2, appContext, true);3126      extend(normalized, props);3127      if (keys)3128        needCastKeys.push(...keys);3129    };3130    if (!asMixin && appContext.mixins.length) {3131      appContext.mixins.forEach(extendProps);3132    }3133    if (comp.extends) {3134      extendProps(comp.extends);3135    }3136    if (comp.mixins) {3137      comp.mixins.forEach(extendProps);3138    }3139  }3140  if (!raw && !hasExtends) {3141    cache.set(comp, EMPTY_ARR);3142    return EMPTY_ARR;3143  }3144  if (isArray(raw)) {3145    for (let i = 0; i < raw.length; i++) {3146      if (!isString(raw[i])) {3147        warn2(`props must be strings when using array syntax.`, raw[i]);3148      }3149      const normalizedKey = camelize(raw[i]);3150      if (validatePropName(normalizedKey)) {3151        normalized[normalizedKey] = EMPTY_OBJ;3152      }3153    }3154  } else if (raw) {3155    if (!isObject(raw)) {3156      warn2(`invalid props options`, raw);3157    }3158    for (const key in raw) {3159      const normalizedKey = camelize(key);3160      if (validatePropName(normalizedKey)) {3161        const opt = raw[key];3162        const prop = normalized[normalizedKey] = isArray(opt) || isFunction(opt) ? { type: opt } : opt;3163        if (prop) {3164          const booleanIndex = getTypeIndex(Boolean, prop.type);3165          const stringIndex = getTypeIndex(String, prop.type);3166          prop[0] = booleanIndex > -1;3167          prop[1] = stringIndex < 0 || booleanIndex < stringIndex;3168          if (booleanIndex > -1 || hasOwn(prop, "default")) {3169            needCastKeys.push(normalizedKey);3170          }3171        }3172      }3173    }3174  }3175  const res = [normalized, needCastKeys];3176  cache.set(comp, res);3177  return res;3178}3179function validatePropName(key) {3180  if (key[0] !== "$") {3181    return true;3182  } else if (true) {3183    warn2(`Invalid prop name: "${key}" is a reserved property.`);3184  }3185  return false;3186}3187function getType(ctor) {3188  const match = ctor && ctor.toString().match(/^\s*function (\w+)/);3189  return match ? match[1] : ctor === null ? "null" : "";3190}3191function isSameType(a, b) {3192  return getType(a) === getType(b);3193}3194function getTypeIndex(type, expectedTypes) {3195  if (isArray(expectedTypes)) {3196    return expectedTypes.findIndex((t) => isSameType(t, type));3197  } else if (isFunction(expectedTypes)) {3198    return isSameType(expectedTypes, type) ? 0 : -1;3199  }3200  return -1;3201}3202function validateProps(rawProps, props, instance) {3203  const resolvedValues = toRaw(props);3204  const options = instance.propsOptions[0];3205  for (const key in options) {3206    let opt = options[key];3207    if (opt == null)3208      continue;3209    validateProp(key, resolvedValues[key], opt, !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key)));3210  }3211}3212function validateProp(name, value, prop, isAbsent) {3213  const { type, required, validator } = prop;3214  if (required && isAbsent) {3215    warn2('Missing required prop: "' + name + '"');3216    return;3217  }3218  if (value == null && !prop.required) {3219    return;3220  }3221  if (type != null && type !== true) {3222    let isValid = false;3223    const types = isArray(type) ? type : [type];3224    const expectedTypes = [];3225    for (let i = 0; i < types.length && !isValid; i++) {3226      const { valid, expectedType } = assertType(value, types[i]);3227      expectedTypes.push(expectedType || "");3228      isValid = valid;3229    }3230    if (!isValid) {3231      warn2(getInvalidTypeMessage(name, value, expectedTypes));3232      return;3233    }3234  }3235  if (validator && !validator(value)) {3236    warn2('Invalid prop: custom validator check failed for prop "' + name + '".');3237  }3238}3239var isSimpleType = /* @__PURE__ */ makeMap("String,Number,Boolean,Function,Symbol,BigInt");3240function assertType(value, type) {3241  let valid;3242  const expectedType = getType(type);3243  if (isSimpleType(expectedType)) {3244    const t = typeof value;3245    valid = t === expectedType.toLowerCase();3246    if (!valid && t === "object") {3247      valid = value instanceof type;3248    }3249  } else if (expectedType === "Object") {3250    valid = isObject(value);3251  } else if (expectedType === "Array") {3252    valid = isArray(value);3253  } else if (expectedType === "null") {3254    valid = value === null;3255  } else {3256    valid = value instanceof type;3257  }3258  return {3259    valid,3260    expectedType3261  };3262}3263function getInvalidTypeMessage(name, value, expectedTypes) {3264  let message = `Invalid prop: type check failed for prop "${name}". Expected ${expectedTypes.map(capitalize).join(" | ")}`;3265  const expectedType = expectedTypes[0];3266  const receivedType = toRawType(value);3267  const expectedValue = styleValue(value, expectedType);3268  const receivedValue = styleValue(value, receivedType);3269  if (expectedTypes.length === 1 && isExplicable(expectedType) && !isBoolean(expectedType, receivedType)) {3270    message += ` with value ${expectedValue}`;3271  }3272  message += `, got ${receivedType} `;3273  if (isExplicable(receivedType)) {3274    message += `with value ${receivedValue}.`;3275  }3276  return message;3277}3278function styleValue(value, type) {3279  if (type === "String") {3280    return `"${value}"`;3281  } else if (type === "Number") {3282    return `${Number(value)}`;3283  } else {3284    return `${value}`;3285  }3286}3287function isExplicable(type) {3288  const explicitTypes = ["string", "number", "boolean"];3289  return explicitTypes.some((elem) => type.toLowerCase() === elem);3290}3291function isBoolean(...args) {3292  return args.some((elem) => elem.toLowerCase() === "boolean");3293}3294var isInternalKey = (key) => key[0] === "_" || key === "$stable";3295var normalizeSlotValue = (value) => isArray(value) ? value.map(normalizeVNode) : [normalizeVNode(value)];3296var normalizeSlot = (key, rawSlot, ctx) => {3297  const normalized = withCtx((...args) => {3298    if (currentInstance) {3299      warn2(`Slot "${key}" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.`);3300    }3301    return normalizeSlotValue(rawSlot(...args));3302  }, ctx);3303  normalized._c = false;3304  return normalized;3305};3306var normalizeObjectSlots = (rawSlots, slots, instance) => {3307  const ctx = rawSlots._ctx;3308  for (const key in rawSlots) {3309    if (isInternalKey(key))3310      continue;3311    const value = rawSlots[key];3312    if (isFunction(value)) {3313      slots[key] = normalizeSlot(key, value, ctx);3314    } else if (value != null) {3315      if (true) {3316        warn2(`Non-function value encountered for slot "${key}". Prefer function slots for better performance.`);3317      }3318      const normalized = normalizeSlotValue(value);3319      slots[key] = () => normalized;3320    }3321  }3322};3323var normalizeVNodeSlots = (instance, children) => {3324  if (!isKeepAlive(instance.vnode) && true) {3325    warn2(`Non-function value encountered for default slot. Prefer function slots for better performance.`);3326  }3327  const normalized = normalizeSlotValue(children);3328  instance.slots.default = () => normalized;3329};3330var initSlots = (instance, children) => {3331  if (instance.vnode.shapeFlag & 32) {3332    const type = children._;3333    if (type) {3334      instance.slots = toRaw(children);3335      def(children, "_", type);3336    } else {3337      normalizeObjectSlots(children, instance.slots = {});3338    }3339  } else {3340    instance.slots = {};3341    if (children) {3342      normalizeVNodeSlots(instance, children);3343    }3344  }3345  def(instance.slots, InternalObjectKey, 1);3346};3347var updateSlots = (instance, children, optimized) => {3348  const { vnode, slots } = instance;3349  let needDeletionCheck = true;3350  let deletionComparisonTarget = EMPTY_OBJ;3351  if (vnode.shapeFlag & 32) {3352    const type = children._;3353    if (type) {3354      if (isHmrUpdating) {3355        extend(slots, children);3356      } else if (optimized && type === 1) {3357        needDeletionCheck = false;3358      } else {3359        extend(slots, children);3360        if (!optimized && type === 1) {3361          delete slots._;3362        }3363      }3364    } else {3365      needDeletionCheck = !children.$stable;3366      normalizeObjectSlots(children, slots);3367    }3368    deletionComparisonTarget = children;3369  } else if (children) {3370    normalizeVNodeSlots(instance, children);3371    deletionComparisonTarget = { default: 1 };3372  }3373  if (needDeletionCheck) {3374    for (const key in slots) {3375      if (!isInternalKey(key) && !(key in deletionComparisonTarget)) {3376        delete slots[key];3377      }3378    }3379  }3380};3381function validateDirectiveName(name) {3382  if (isBuiltInDirective(name)) {3383    warn2("Do not use built-in directive ids as custom directive id: " + name);3384  }3385}3386function invokeDirectiveHook(vnode, prevVNode, instance, name) {3387  const bindings = vnode.dirs;3388  const oldBindings = prevVNode && prevVNode.dirs;3389  for (let i = 0; i < bindings.length; i++) {3390    const binding = bindings[i];3391    if (oldBindings) {3392      binding.oldValue = oldBindings[i].value;3393    }3394    let hook = binding.dir[name];3395    if (hook) {3396      pauseTracking();3397      callWithAsyncErrorHandling(hook, instance, 8, [3398        vnode.el,3399        binding,3400        vnode,3401        prevVNode3402      ]);3403      resetTracking();3404    }3405  }3406}3407function createAppContext() {3408  return {3409    app: null,3410    config: {3411      isNativeTag: NO,3412      performance: false,3413      globalProperties: {},3414      optionMergeStrategies: {},3415      errorHandler: void 0,3416      warnHandler: void 0,3417      compilerOptions: {}3418    },3419    mixins: [],3420    components: {},3421    directives: {},3422    provides: Object.create(null),3423    optionsCache: new WeakMap(),3424    propsCache: new WeakMap(),3425    emitsCache: new WeakMap()3426  };3427}3428var uid = 0;3429function createAppAPI(render3, hydrate) {3430  return function createApp2(rootComponent, rootProps = null) {3431    if (rootProps != null && !isObject(rootProps)) {3432      warn2(`root props passed to app.mount() must be an object.`);3433      rootProps = null;3434    }3435    const context = createAppContext();3436    const installedPlugins = new Set();3437    let isMounted = false;3438    const app = context.app = {3439      _uid: uid++,3440      _component: rootComponent,3441      _props: rootProps,3442      _container: null,3443      _context: context,3444      _instance: null,3445      version,3446      get config() {3447        return context.config;3448      },3449      set config(v) {3450        if (true) {3451          warn2(`app.config cannot be replaced. Modify individual options instead.`);3452        }3453      },3454      use(plugin, ...options) {3455        if (installedPlugins.has(plugin)) {3456          warn2(`Plugin has already been applied to target app.`);3457        } else if (plugin && isFunction(plugin.install)) {3458          installedPlugins.add(plugin);3459          plugin.install(app, ...options);3460        } else if (isFunction(plugin)) {3461          installedPlugins.add(plugin);3462          plugin(app, ...options);3463        } else if (true) {3464          warn2(`A plugin must either be a function or an object with an "install" function.`);3465        }3466        return app;3467      },3468      mixin(mixin) {3469        if (true) {3470          if (!context.mixins.includes(mixin)) {3471            context.mixins.push(mixin);3472          } else if (true) {3473            warn2("Mixin has already been applied to target app" + (mixin.name ? `: ${mixin.name}` : ""));3474          }3475        } else if (true) {3476          warn2("Mixins are only available in builds supporting Options API");3477        }3478        return app;3479      },3480      component(name, component) {3481        if (true) {3482          validateComponentName(name, context.config);3483        }3484        if (!component) {3485          return context.components[name];3486        }3487        if (context.components[name]) {3488          warn2(`Component "${name}" has already been registered in target app.`);3489        }3490        context.components[name] = component;3491        return app;3492      },3493      directive(name, directive) {3494        if (true) {3495          validateDirectiveName(name);3496        }3497        if (!directive) {3498          return context.directives[name];3499        }3500        if (context.directives[name]) {3501          warn2(`Directive "${name}" has already been registered in target app.`);3502        }3503        context.directives[name] = directive;3504        return app;3505      },3506      mount(rootContainer, isHydrate, isSVG) {3507        if (!isMounted) {3508          const vnode = createVNode(rootComponent, rootProps);3509          vnode.appContext = context;3510          if (true) {3511            context.reload = () => {3512              render3(cloneVNode(vnode), rootContainer, isSVG);3513            };3514          }3515          if (isHydrate && hydrate) {3516            hydrate(vnode, rootContainer);3517          } else {3518            render3(vnode, rootContainer, isSVG);3519          }3520          isMounted = true;3521          app._container = rootContainer;3522          rootContainer.__vue_app__ = app;3523          if (true) {3524            app._instance = vnode.component;3525            devtoolsInitApp(app, version);3526          }3527          return getExposeProxy(vnode.component) || vnode.component.proxy;3528        } else if (true) {3529          warn2(`App has already been mounted.3530If you want to remount the same app, move your app creation logic into a factory function and create fresh app instances for each mount - e.g. \`const createMyApp = () => createApp(App)\``);3531        }3532      },3533      unmount() {3534        if (isMounted) {3535          render3(null, app._container);3536          if (true) {3537            app._instance = null;3538            devtoolsUnmountApp(app);3539          }3540          delete app._container.__vue_app__;3541        } else if (true) {3542          warn2(`Cannot unmount an app that is not mounted.`);3543        }3544      },3545      provide(key, value) {3546        if (key in context.provides) {3547          warn2(`App already provides property with key "${String(key)}". It will be overwritten with the new value.`);3548        }3549        context.provides[key] = value;3550        return app;3551      }3552    };3553    return app;3554  };3555}3556function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {3557  if (isArray(rawRef)) {3558    rawRef.forEach((r, i) => setRef(r, oldRawRef && (isArray(oldRawRef) ? oldRawRef[i] : oldRawRef), parentSuspense, vnode, isUnmount));3559    return;3560  }3561  if (isAsyncWrapper(vnode) && !isUnmount) {3562    return;3563  }3564  const refValue = vnode.shapeFlag & 4 ? getExposeProxy(vnode.component) || vnode.component.proxy : vnode.el;3565  const value = isUnmount ? null : refValue;3566  const { i: owner, r: ref2 } = rawRef;3567  if (!owner) {3568    warn2(`Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.`);3569    return;3570  }3571  const oldRef = oldRawRef && oldRawRef.r;3572  const refs = owner.refs === EMPTY_OBJ ? owner.refs = {} : owner.refs;3573  const setupState = owner.setupState;3574  if (oldRef != null && oldRef !== ref2) {3575    if (isString(oldRef)) {3576      refs[oldRef] = null;3577      if (hasOwn(setupState, oldRef)) {3578        setupState[oldRef] = null;3579      }3580    } else if (isRef(oldRef)) {3581      oldRef.value = null;3582    }3583  }3584  if (isFunction(ref2)) {3585    callWithErrorHandling(ref2, owner, 12, [value, refs]);3586  } else {3587    const _isString = isString(ref2);3588    const _isRef = isRef(ref2);3589    if (_isString || _isRef) {3590      const doSet = () => {3591        if (rawRef.f) {3592          const existing = _isString ? refs[ref2] : ref2.value;3593          if (isUnmount) {3594            isArray(existing) && remove(existing, refValue);3595          } else {3596            if (!isArray(existing)) {3597              if (_isString) {3598                refs[ref2] = [refValue];3599              } else {3600                ref2.value = [refValue];3601                if (rawRef.k)3602                  refs[rawRef.k] = ref2.value;3603              }3604            } else if (!existing.includes(refValue)) {3605              existing.push(refValue);3606            }3607          }3608        } else if (_isString) {3609          refs[ref2] = value;3610          if (hasOwn(setupState, ref2)) {3611            setupState[ref2] = value;3612          }3613        } else if (isRef(ref2)) {3614          ref2.value = value;3615          if (rawRef.k)3616            refs[rawRef.k] = value;3617        } else if (true) {3618          warn2("Invalid template ref type:", ref2, `(${typeof ref2})`);3619        }3620      };3621      if (value) {3622        doSet.id = -1;3623        queuePostRenderEffect(doSet, parentSuspense);3624      } else {3625        doSet();3626      }3627    } else if (true) {3628      warn2("Invalid template ref type:", ref2, `(${typeof ref2})`);3629    }3630  }3631}3632var supported;3633var perf;3634function startMeasure(instance, type) {3635  if (instance.appContext.config.performance && isSupported()) {3636    perf.mark(`vue-${type}-${instance.uid}`);3637  }3638  if (true) {3639    devtoolsPerfStart(instance, type, supported ? perf.now() : Date.now());3640  }3641}3642function endMeasure(instance, type) {3643  if (instance.appContext.config.performance && isSupported()) {3644    const startTag = `vue-${type}-${instance.uid}`;3645    const endTag = startTag + `:end`;3646    perf.mark(endTag);3647    perf.measure(`<${formatComponentName(instance, instance.type)}> ${type}`, startTag, endTag);3648    perf.clearMarks(startTag);3649    perf.clearMarks(endTag);3650  }3651  if (true) {3652    devtoolsPerfEnd(instance, type, supported ? perf.now() : Date.now());3653  }3654}3655function isSupported() {3656  if (supported !== void 0) {3657    return supported;3658  }3659  if (typeof window !== "undefined" && window.performance) {3660    supported = true;3661    perf = window.performance;3662  } else {3663    supported = false;3664  }3665  return supported;3666}3667function initFeatureFlags() {3668  const needWarn = [];3669  if (false) {3670    needWarn.push(`__VUE_OPTIONS_API__`);3671    getGlobalThis().__VUE_OPTIONS_API__ = true;3672  }3673  if (false) {3674    needWarn.push(`__VUE_PROD_DEVTOOLS__`);3675    getGlobalThis().__VUE_PROD_DEVTOOLS__ = false;3676  }3677  if (needWarn.length) {3678    const multi = needWarn.length > 1;3679    console.warn(`Feature flag${multi ? `s` : ``} ${needWarn.join(", ")} ${multi ? `are` : `is`} not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.3680For more details, see https://link.vuejs.org/feature-flags.`);3681  }3682}3683var queuePostRenderEffect = queueEffectWithSuspense;3684function createRenderer(options) {3685  return baseCreateRenderer(options);3686}3687function baseCreateRenderer(options, createHydrationFns) {3688  {3689    initFeatureFlags();3690  }3691  const target = getGlobalThis();3692  target.__VUE__ = true;3693  if (true) {3694    setDevtoolsHook(target.__VUE_DEVTOOLS_GLOBAL_HOOK__, target);3695  }3696  const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, setScopeId: hostSetScopeId = NOOP, cloneNode: hostCloneNode, insertStaticContent: hostInsertStaticContent } = options;3697  const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, slotScopeIds = null, optimized = isHmrUpdating ? false : !!n2.dynamicChildren) => {3698    if (n1 === n2) {3699      return;3700    }3701    if (n1 && !isSameVNodeType(n1, n2)) {3702      anchor = getNextHostNode(n1);3703      unmount(n1, parentComponent, parentSuspense, true);3704      n1 = null;3705    }3706    if (n2.patchFlag === -2) {3707      optimized = false;3708      n2.dynamicChildren = null;3709    }3710    const { type, ref: ref2, shapeFlag } = n2;3711    switch (type) {3712      case Text:3713        processText(n1, n2, container, anchor);3714        break;3715      case Comment:3716        processCommentNode(n1, n2, container, anchor);3717        break;3718      case Static:3719        if (n1 == null) {3720          mountStaticNode(n2, container, anchor, isSVG);3721        } else if (true) {3722          patchStaticNode(n1, n2, container, isSVG);3723        }3724        break;3725      case Fragment:3726        processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);3727        break;3728      default:3729        if (shapeFlag & 1) {3730          processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);3731        } else if (shapeFlag & 6) {3732          processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);3733        } else if (shapeFlag & 64) {3734          type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals);3735        } else if (shapeFlag & 128) {3736          type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals);3737        } else if (true) {3738          warn2("Invalid VNode type:", type, `(${typeof type})`);3739        }3740    }3741    if (ref2 != null && parentComponent) {3742      setRef(ref2, n1 && n1.ref, parentSuspense, n2 || n1, !n2);3743    }3744  };3745  const processText = (n1, n2, container, anchor) => {3746    if (n1 == null) {3747      hostInsert(n2.el = hostCreateText(n2.children), container, anchor);3748    } else {3749      const el = n2.el = n1.el;3750      if (n2.children !== n1.children) {3751        hostSetText(el, n2.children);3752      }3753    }3754  };3755  const processCommentNode = (n1, n2, container, anchor) => {3756    if (n1 == null) {3757      hostInsert(n2.el = hostCreateComment(n2.children || ""), container, anchor);3758    } else {3759      n2.el = n1.el;3760    }3761  };3762  const mountStaticNode = (n2, container, anchor, isSVG) => {3763    [n2.el, n2.anchor] = hostInsertStaticContent(n2.children, container, anchor, isSVG, n2.el, n2.anchor);3764  };3765  const patchStaticNode = (n1, n2, container, isSVG) => {3766    if (n2.children !== n1.children) {3767      const anchor = hostNextSibling(n1.anchor);3768      removeStaticNode(n1);3769      [n2.el, n2.anchor] = hostInsertStaticContent(n2.children, container, anchor, isSVG);3770    } else {3771      n2.el = n1.el;3772      n2.anchor = n1.anchor;3773    }3774  };3775  const moveStaticNode = ({ el, anchor }, container, nextSibling) => {3776    let next;3777    while (el && el !== anchor) {3778      next = hostNextSibling(el);3779      hostInsert(el, container, nextSibling);3780      el = next;3781    }3782    hostInsert(anchor, container, nextSibling);3783  };3784  const removeStaticNode = ({ el, anchor }) => {3785    let next;3786    while (el && el !== anchor) {3787      next = hostNextSibling(el);3788      hostRemove(el);3789      el = next;3790    }3791    hostRemove(anchor);3792  };3793  const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {3794    isSVG = isSVG || n2.type === "svg";3795    if (n1 == null) {3796      mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);3797    } else {3798      patchElement(n1, n2, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);3799    }3800  };3801  const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {3802    let el;3803    let vnodeHook;3804    const { type, props, shapeFlag, transition, patchFlag, dirs } = vnode;3805    if (false) {3806      el = vnode.el = hostCloneNode(vnode.el);3807    } else {3808      el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is, props);3809      if (shapeFlag & 8) {3810        hostSetElementText(el, vnode.children);3811      } else if (shapeFlag & 16) {3812        mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG && type !== "foreignObject", slotScopeIds, optimized);3813      }3814      if (dirs) {3815        invokeDirectiveHook(vnode, null, parentComponent, "created");3816      }3817      if (props) {3818        for (const key in props) {3819          if (key !== "value" && !isReservedProp(key)) {3820            hostPatchProp(el, key, null, props[key], isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);3821          }3822        }3823        if ("value" in props) {3824          hostPatchProp(el, "value", null, props.value);3825        }3826        if (vnodeHook = props.onVnodeBeforeMount) {3827          invokeVNodeHook(vnodeHook, parentComponent, vnode);3828        }3829      }3830      setScopeId(el, vnode, vnode.scopeId, slotScopeIds, parentComponent);3831    }3832    if (true) {3833      Object.defineProperty(el, "__vnode", {3834        value: vnode,3835        enumerable: false3836      });3837      Object.defineProperty(el, "__vueParentComponent", {3838        value: parentComponent,3839        enumerable: false3840      });3841    }3842    if (dirs) {3843      invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");3844    }3845    const needCallTransitionHooks = (!parentSuspense || parentSuspense && !parentSuspense.pendingBranch) && transition && !transition.persisted;3846    if (needCallTransitionHooks) {3847      transition.beforeEnter(el);3848    }3849    hostInsert(el, container, anchor);3850    if ((vnodeHook = props && props.onVnodeMounted) || needCallTransitionHooks || dirs) {3851      queuePostRenderEffect(() => {3852        vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);3853        needCallTransitionHooks && transition.enter(el);3854        dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");3855      }, parentSuspense);3856    }3857  };3858  const setScopeId = (el, vnode, scopeId, slotScopeIds, parentComponent) => {3859    if (scopeId) {3860      hostSetScopeId(el, scopeId);3861    }3862    if (slotScopeIds) {3863      for (let i = 0; i < slotScopeIds.length; i++) {3864        hostSetScopeId(el, slotScopeIds[i]);3865      }3866    }3867    if (parentComponent) {3868      let subTree = parentComponent.subTree;3869      if (subTree.patchFlag > 0 && subTree.patchFlag & 2048) {3870        subTree = filterSingleRoot(subTree.children) || subTree;3871      }3872      if (vnode === subTree) {3873        const parentVNode = parentComponent.vnode;3874        setScopeId(el, parentVNode, parentVNode.scopeId, parentVNode.slotScopeIds, parentComponent.parent);3875      }3876    }3877  };3878  const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, start = 0) => {3879    for (let i = start; i < children.length; i++) {3880      const child = children[i] = optimized ? cloneIfMounted(children[i]) : normalizeVNode(children[i]);3881      patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);3882    }3883  };3884  const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {3885    const el = n2.el = n1.el;3886    let { patchFlag, dynamicChildren, dirs } = n2;3887    patchFlag |= n1.patchFlag & 16;3888    const oldProps = n1.props || EMPTY_OBJ;3889    const newProps = n2.props || EMPTY_OBJ;3890    let vnodeHook;3891    parentComponent && toggleRecurse(parentComponent, false);3892    if (vnodeHook = newProps.onVnodeBeforeUpdate) {3893      invokeVNodeHook(vnodeHook, parentComponent, n2, n1);3894    }3895    if (dirs) {3896      invokeDirectiveHook(n2, n1, parentComponent, "beforeUpdate");3897    }3898    parentComponent && toggleRecurse(parentComponent, true);3899    if (isHmrUpdating) {3900      patchFlag = 0;3901      optimized = false;3902      dynamicChildren = null;3903    }3904    const areChildrenSVG = isSVG && n2.type !== "foreignObject";3905    if (dynamicChildren) {3906      patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG, slotScopeIds);3907      if (parentComponent && parentComponent.type.__hmrId) {3908        traverseStaticChildren(n1, n2);3909      }3910    } else if (!optimized) {3911      patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG, slotScopeIds, false);3912    }3913    if (patchFlag > 0) {3914      if (patchFlag & 16) {3915        patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);3916      } else {3917        if (patchFlag & 2) {3918          if (oldProps.class !== newProps.class) {3919            hostPatchProp(el, "class", null, newProps.class, isSVG);3920          }3921        }3922        if (patchFlag & 4) {3923          hostPatchProp(el, "style", oldProps.style, newProps.style, isSVG);3924        }3925        if (patchFlag & 8) {3926          const propsToUpdate = n2.dynamicProps;3927          for (let i = 0; i < propsToUpdate.length; i++) {3928            const key = propsToUpdate[i];3929            const prev = oldProps[key];3930            const next = newProps[key];3931            if (next !== prev || key === "value") {3932              hostPatchProp(el, key, prev, next, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);3933            }3934          }3935        }3936      }3937      if (patchFlag & 1) {3938        if (n1.children !== n2.children) {3939          hostSetElementText(el, n2.children);3940        }3941      }3942    } else if (!optimized && dynamicChildren == null) {3943      patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);3944    }3945    if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {3946      queuePostRenderEffect(() => {3947        vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);3948        dirs && invokeDirectiveHook(n2, n1, parentComponent, "updated");3949      }, parentSuspense);3950    }3951  };3952  const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG, slotScopeIds) => {3953    for (let i = 0; i < newChildren.length; i++) {3954      const oldVNode = oldChildren[i];3955      const newVNode = newChildren[i];3956      const container = oldVNode.el && (oldVNode.type === Fragment || !isSameVNodeType(oldVNode, newVNode) || oldVNode.shapeFlag & (6 | 64)) ? hostParentNode(oldVNode.el) : fallbackContainer;3957      patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, true);3958    }3959  };3960  const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {3961    if (oldProps !== newProps) {3962      for (const key in newProps) {3963        if (isReservedProp(key))3964          continue;3965        const next = newProps[key];3966        const prev = oldProps[key];3967        if (next !== prev && key !== "value") {3968          hostPatchProp(el, key, prev, next, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);3969        }3970      }3971      if (oldProps !== EMPTY_OBJ) {3972        for (const key in oldProps) {3973          if (!isReservedProp(key) && !(key in newProps)) {3974            hostPatchProp(el, key, oldProps[key], null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);3975          }3976        }3977      }3978      if ("value" in newProps) {3979        hostPatchProp(el, "value", oldProps.value, newProps.value);3980      }3981    }3982  };3983  const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {3984    const fragmentStartAnchor = n2.el = n1 ? n1.el : hostCreateText("");3985    const fragmentEndAnchor = n2.anchor = n1 ? n1.anchor : hostCreateText("");3986    let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2;3987    if (isHmrUpdating) {3988      patchFlag = 0;3989      optimized = false;3990      dynamicChildren = null;3991    }3992    if (fragmentSlotScopeIds) {3993      slotScopeIds = slotScopeIds ? slotScopeIds.concat(fragmentSlotScopeIds) : fragmentSlotScopeIds;3994    }3995    if (n1 == null) {3996      hostInsert(fragmentStartAnchor, container, anchor);3997      hostInsert(fragmentEndAnchor, container, anchor);3998      mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);3999    } else {4000      if (patchFlag > 0 && patchFlag & 64 && dynamicChildren && n1.dynamicChildren) {4001        patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG, slotScopeIds);4002        if (parentComponent && parentComponent.type.__hmrId) {4003          traverseStaticChildren(n1, n2);4004        } else if (n2.key != null || parentComponent && n2 === parentComponent.subTree) {4005          traverseStaticChildren(n1, n2, true);4006        }4007      } else {4008        patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4009      }4010    }4011  };4012  const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {4013    n2.slotScopeIds = slotScopeIds;4014    if (n1 == null) {4015      if (n2.shapeFlag & 512) {4016        parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized);4017      } else {4018        mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);4019      }4020    } else {4021      updateComponent(n1, n2, optimized);4022    }4023  };4024  const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {4025    const instance = initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense);4026    if (instance.type.__hmrId) {4027      registerHMR(instance);4028    }4029    if (true) {4030      pushWarningContext(initialVNode);4031      startMeasure(instance, `mount`);4032    }4033    if (isKeepAlive(initialVNode)) {4034      instance.ctx.renderer = internals;4035    }4036    {4037      if (true) {4038        startMeasure(instance, `init`);4039      }4040      setupComponent(instance);4041      if (true) {4042        endMeasure(instance, `init`);4043      }4044    }4045    if (instance.asyncDep) {4046      parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect);4047      if (!initialVNode.el) {4048        const placeholder = instance.subTree = createVNode(Comment);4049        processCommentNode(null, placeholder, container, anchor);4050      }4051      return;4052    }4053    setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);4054    if (true) {4055      popWarningContext();4056      endMeasure(instance, `mount`);4057    }4058  };4059  const updateComponent = (n1, n2, optimized) => {4060    const instance = n2.component = n1.component;4061    if (shouldUpdateComponent(n1, n2, optimized)) {4062      if (instance.asyncDep && !instance.asyncResolved) {4063        if (true) {4064          pushWarningContext(n2);4065        }4066        updateComponentPreRender(instance, n2, optimized);4067        if (true) {4068          popWarningContext();4069        }4070        return;4071      } else {4072        instance.next = n2;4073        invalidateJob(instance.update);4074        instance.update();4075      }4076    } else {4077      n2.component = n1.component;4078      n2.el = n1.el;4079      instance.vnode = n2;4080    }4081  };4082  const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {4083    const componentUpdateFn = () => {4084      if (!instance.isMounted) {4085        let vnodeHook;4086        const { el, props } = initialVNode;4087        const { bm, m, parent } = instance;4088        const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);4089        toggleRecurse(instance, false);4090        if (bm) {4091          invokeArrayFns(bm);4092        }4093        if (!isAsyncWrapperVNode && (vnodeHook = props && props.onVnodeBeforeMount)) {4094          invokeVNodeHook(vnodeHook, parent, initialVNode);4095        }4096        toggleRecurse(instance, true);4097        if (el && hydrateNode) {4098          const hydrateSubTree = () => {4099            if (true) {4100              startMeasure(instance, `render`);4101            }4102            instance.subTree = renderComponentRoot(instance);4103            if (true) {4104              endMeasure(instance, `render`);4105            }4106            if (true) {4107              startMeasure(instance, `hydrate`);4108            }4109            hydrateNode(el, instance.subTree, instance, parentSuspense, null);4110            if (true) {4111              endMeasure(instance, `hydrate`);4112            }4113          };4114          if (isAsyncWrapperVNode) {4115            initialVNode.type.__asyncLoader().then(() => !instance.isUnmounted && hydrateSubTree());4116          } else {4117            hydrateSubTree();4118          }4119        } else {4120          if (true) {4121            startMeasure(instance, `render`);4122          }4123          const subTree = instance.subTree = renderComponentRoot(instance);4124          if (true) {4125            endMeasure(instance, `render`);4126          }4127          if (true) {4128            startMeasure(instance, `patch`);4129          }4130          patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);4131          if (true) {4132            endMeasure(instance, `patch`);4133          }4134          initialVNode.el = subTree.el;4135        }4136        if (m) {4137          queuePostRenderEffect(m, parentSuspense);4138        }4139        if (!isAsyncWrapperVNode && (vnodeHook = props && props.onVnodeMounted)) {4140          const scopedInitialVNode = initialVNode;4141          queuePostRenderEffect(() => invokeVNodeHook(vnodeHook, parent, scopedInitialVNode), parentSuspense);4142        }4143        if (initialVNode.shapeFlag & 256) {4144          instance.a && queuePostRenderEffect(instance.a, parentSuspense);4145        }4146        instance.isMounted = true;4147        if (true) {4148          devtoolsComponentAdded(instance);4149        }4150        initialVNode = container = anchor = null;4151      } else {4152        let { next, bu, u, parent, vnode } = instance;4153        let originNext = next;4154        let vnodeHook;4155        if (true) {4156          pushWarningContext(next || instance.vnode);4157        }4158        toggleRecurse(instance, false);4159        if (next) {4160          next.el = vnode.el;4161          updateComponentPreRender(instance, next, optimized);4162        } else {4163          next = vnode;4164        }4165        if (bu) {4166          invokeArrayFns(bu);4167        }4168        if (vnodeHook = next.props && next.props.onVnodeBeforeUpdate) {4169          invokeVNodeHook(vnodeHook, parent, next, vnode);4170        }4171        toggleRecurse(instance, true);4172        if (true) {4173          startMeasure(instance, `render`);4174        }4175        const nextTree = renderComponentRoot(instance);4176        if (true) {4177          endMeasure(instance, `render`);4178        }4179        const prevTree = instance.subTree;4180        instance.subTree = nextTree;4181        if (true) {4182          startMeasure(instance, `patch`);4183        }4184        patch(prevTree, nextTree, hostParentNode(prevTree.el), getNextHostNode(prevTree), instance, parentSuspense, isSVG);4185        if (true) {4186          endMeasure(instance, `patch`);4187        }4188        next.el = nextTree.el;4189        if (originNext === null) {4190          updateHOCHostEl(instance, nextTree.el);4191        }4192        if (u) {4193          queuePostRenderEffect(u, parentSuspense);4194        }4195        if (vnodeHook = next.props && next.props.onVnodeUpdated) {4196          queuePostRenderEffect(() => invokeVNodeHook(vnodeHook, parent, next, vnode), parentSuspense);4197        }4198        if (true) {4199          devtoolsComponentUpdated(instance);4200        }4201        if (true) {4202          popWarningContext();4203        }4204      }4205    };4206    const effect2 = instance.effect = new ReactiveEffect(componentUpdateFn, () => queueJob(instance.update), instance.scope);4207    const update = instance.update = effect2.run.bind(effect2);4208    update.id = instance.uid;4209    toggleRecurse(instance, true);4210    if (true) {4211      effect2.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;4212      effect2.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;4213      update.ownerInstance = instance;4214    }4215    update();4216  };4217  const updateComponentPreRender = (instance, nextVNode, optimized) => {4218    nextVNode.component = instance;4219    const prevProps = instance.vnode.props;4220    instance.vnode = nextVNode;4221    instance.next = null;4222    updateProps(instance, nextVNode.props, prevProps, optimized);4223    updateSlots(instance, nextVNode.children, optimized);4224    pauseTracking();4225    flushPreFlushCbs(void 0, instance.update);4226    resetTracking();4227  };4228  const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized = false) => {4229    const c1 = n1 && n1.children;4230    const prevShapeFlag = n1 ? n1.shapeFlag : 0;4231    const c2 = n2.children;4232    const { patchFlag, shapeFlag } = n2;4233    if (patchFlag > 0) {4234      if (patchFlag & 128) {4235        patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4236        return;4237      } else if (patchFlag & 256) {4238        patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4239        return;4240      }4241    }4242    if (shapeFlag & 8) {4243      if (prevShapeFlag & 16) {4244        unmountChildren(c1, parentComponent, parentSuspense);4245      }4246      if (c2 !== c1) {4247        hostSetElementText(container, c2);4248      }4249    } else {4250      if (prevShapeFlag & 16) {4251        if (shapeFlag & 16) {4252          patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4253        } else {4254          unmountChildren(c1, parentComponent, parentSuspense, true);4255        }4256      } else {4257        if (prevShapeFlag & 8) {4258          hostSetElementText(container, "");4259        }4260        if (shapeFlag & 16) {4261          mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4262        }4263      }4264    }4265  };4266  const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {4267    c1 = c1 || EMPTY_ARR;4268    c2 = c2 || EMPTY_ARR;4269    const oldLength = c1.length;4270    const newLength = c2.length;4271    const commonLength = Math.min(oldLength, newLength);4272    let i;4273    for (i = 0; i < commonLength; i++) {4274      const nextChild = c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]);4275      patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4276    }4277    if (oldLength > newLength) {4278      unmountChildren(c1, parentComponent, parentSuspense, true, false, commonLength);4279    } else {4280      mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, commonLength);4281    }4282  };4283  const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {4284    let i = 0;4285    const l2 = c2.length;4286    let e1 = c1.length - 1;4287    let e2 = l2 - 1;4288    while (i <= e1 && i <= e2) {4289      const n1 = c1[i];4290      const n2 = c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]);4291      if (isSameVNodeType(n1, n2)) {4292        patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4293      } else {4294        break;4295      }4296      i++;4297    }4298    while (i <= e1 && i <= e2) {4299      const n1 = c1[e1];4300      const n2 = c2[e2] = optimized ? cloneIfMounted(c2[e2]) : normalizeVNode(c2[e2]);4301      if (isSameVNodeType(n1, n2)) {4302        patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4303      } else {4304        break;4305      }4306      e1--;4307      e2--;4308    }4309    if (i > e1) {4310      if (i <= e2) {4311        const nextPos = e2 + 1;4312        const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;4313        while (i <= e2) {4314          patch(null, c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]), container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4315          i++;4316        }4317      }4318    } else if (i > e2) {4319      while (i <= e1) {4320        unmount(c1[i], parentComponent, parentSuspense, true);4321        i++;4322      }4323    } else {4324      const s1 = i;4325      const s2 = i;4326      const keyToNewIndexMap = new Map();4327      for (i = s2; i <= e2; i++) {4328        const nextChild = c2[i] = optimized ? cloneIfMounted(c2[i]) : normalizeVNode(c2[i]);4329        if (nextChild.key != null) {4330          if (keyToNewIndexMap.has(nextChild.key)) {4331            warn2(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);4332          }4333          keyToNewIndexMap.set(nextChild.key, i);4334        }4335      }4336      let j;4337      let patched = 0;4338      const toBePatched = e2 - s2 + 1;4339      let moved = false;4340      let maxNewIndexSoFar = 0;4341      const newIndexToOldIndexMap = new Array(toBePatched);4342      for (i = 0; i < toBePatched; i++)4343        newIndexToOldIndexMap[i] = 0;4344      for (i = s1; i <= e1; i++) {4345        const prevChild = c1[i];4346        if (patched >= toBePatched) {4347          unmount(prevChild, parentComponent, parentSuspense, true);4348          continue;4349        }4350        let newIndex;4351        if (prevChild.key != null) {4352          newIndex = keyToNewIndexMap.get(prevChild.key);4353        } else {4354          for (j = s2; j <= e2; j++) {4355            if (newIndexToOldIndexMap[j - s2] === 0 && isSameVNodeType(prevChild, c2[j])) {4356              newIndex = j;4357              break;4358            }4359          }4360        }4361        if (newIndex === void 0) {4362          unmount(prevChild, parentComponent, parentSuspense, true);4363        } else {4364          newIndexToOldIndexMap[newIndex - s2] = i + 1;4365          if (newIndex >= maxNewIndexSoFar) {4366            maxNewIndexSoFar = newIndex;4367          } else {4368            moved = true;4369          }4370          patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4371          patched++;4372        }4373      }4374      const increasingNewIndexSequence = moved ? getSequence(newIndexToOldIndexMap) : EMPTY_ARR;4375      j = increasingNewIndexSequence.length - 1;4376      for (i = toBePatched - 1; i >= 0; i--) {4377        const nextIndex = s2 + i;4378        const nextChild = c2[nextIndex];4379        const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;4380        if (newIndexToOldIndexMap[i] === 0) {4381          patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);4382        } else if (moved) {4383          if (j < 0 || i !== increasingNewIndexSequence[j]) {4384            move(nextChild, container, anchor, 2);4385          } else {4386            j--;4387          }4388        }4389      }4390    }4391  };4392  const move = (vnode, container, anchor, moveType, parentSuspense = null) => {4393    const { el, type, transition, children, shapeFlag } = vnode;4394    if (shapeFlag & 6) {4395      move(vnode.component.subTree, container, anchor, moveType);4396      return;4397    }4398    if (shapeFlag & 128) {4399      vnode.suspense.move(container, anchor, moveType);4400      return;4401    }4402    if (shapeFlag & 64) {4403      type.move(vnode, container, anchor, internals);4404      return;4405    }4406    if (type === Fragment) {4407      hostInsert(el, container, anchor);4408      for (let i = 0; i < children.length; i++) {4409        move(children[i], container, anchor, moveType);4410      }4411      hostInsert(vnode.anchor, container, anchor);4412      return;4413    }4414    if (type === Static) {4415      moveStaticNode(vnode, container, anchor);4416      return;4417    }4418    const needTransition = moveType !== 2 && shapeFlag & 1 && transition;4419    if (needTransition) {4420      if (moveType === 0) {4421        transition.beforeEnter(el);4422        hostInsert(el, container, anchor);4423        queuePostRenderEffect(() => transition.enter(el), parentSuspense);4424      } else {4425        const { leave, delayLeave, afterLeave } = transition;4426        const remove3 = () => hostInsert(el, container, anchor);4427        const performLeave = () => {4428          leave(el, () => {4429            remove3();4430            afterLeave && afterLeave();4431          });4432        };4433        if (delayLeave) {4434          delayLeave(el, remove3, performLeave);4435        } else {4436          performLeave();4437        }4438      }4439    } else {4440      hostInsert(el, container, anchor);4441    }4442  };4443  const unmount = (vnode, parentComponent, parentSuspense, doRemove = false, optimized = false) => {4444    const { type, props, ref: ref2, children, dynamicChildren, shapeFlag, patchFlag, dirs } = vnode;4445    if (ref2 != null) {4446      setRef(ref2, null, parentSuspense, vnode, true);4447    }4448    if (shapeFlag & 256) {4449      parentComponent.ctx.deactivate(vnode);4450      return;4451    }4452    const shouldInvokeDirs = shapeFlag & 1 && dirs;4453    const shouldInvokeVnodeHook = !isAsyncWrapper(vnode);4454    let vnodeHook;4455    if (shouldInvokeVnodeHook && (vnodeHook = props && props.onVnodeBeforeUnmount)) {4456      invokeVNodeHook(vnodeHook, parentComponent, vnode);4457    }4458    if (shapeFlag & 6) {4459      unmountComponent(vnode.component, parentSuspense, doRemove);4460    } else {4461      if (shapeFlag & 128) {4462        vnode.suspense.unmount(parentSuspense, doRemove);4463        return;4464      }4465      if (shouldInvokeDirs) {4466        invokeDirectiveHook(vnode, null, parentComponent, "beforeUnmount");4467      }4468      if (shapeFlag & 64) {4469        vnode.type.remove(vnode, parentComponent, parentSuspense, optimized, internals, doRemove);4470      } else if (dynamicChildren && (type !== Fragment || patchFlag > 0 && patchFlag & 64)) {4471        unmountChildren(dynamicChildren, parentComponent, parentSuspense, false, true);4472      } else if (type === Fragment && patchFlag & (128 | 256) || !optimized && shapeFlag & 16) {4473        unmountChildren(children, parentComponent, parentSuspense);4474      }4475      if (doRemove) {4476        remove2(vnode);4477      }4478    }4479    if (shouldInvokeVnodeHook && (vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) {4480      queuePostRenderEffect(() => {4481        vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);4482        shouldInvokeDirs && invokeDirectiveHook(vnode, null, parentComponent, "unmounted");4483      }, parentSuspense);4484    }4485  };4486  const remove2 = (vnode) => {4487    const { type, el, anchor, transition } = vnode;4488    if (type === Fragment) {4489      removeFragment(el, anchor);4490      return;4491    }4492    if (type === Static) {4493      removeStaticNode(vnode);4494      return;4495    }4496    const performRemove = () => {4497      hostRemove(el);4498      if (transition && !transition.persisted && transition.afterLeave) {4499        transition.afterLeave();4500      }4501    };4502    if (vnode.shapeFlag & 1 && transition && !transition.persisted) {4503      const { leave, delayLeave } = transition;4504      const performLeave = () => leave(el, performRemove);4505      if (delayLeave) {4506        delayLeave(vnode.el, performRemove, performLeave);4507      } else {4508        performLeave();4509      }4510    } else {4511      performRemove();4512    }4513  };4514  const removeFragment = (cur, end) => {4515    let next;4516    while (cur !== end) {4517      next = hostNextSibling(cur);4518      hostRemove(cur);4519      cur = next;4520    }4521    hostRemove(end);4522  };4523  const unmountComponent = (instance, parentSuspense, doRemove) => {4524    if (instance.type.__hmrId) {4525      unregisterHMR(instance);4526    }4527    const { bum, scope, update, subTree, um } = instance;4528    if (bum) {4529      invokeArrayFns(bum);4530    }4531    scope.stop();4532    if (update) {4533      update.active = false;4534      unmount(subTree, instance, parentSuspense, doRemove);4535    }4536    if (um) {4537      queuePostRenderEffect(um, parentSuspense);4538    }4539    queuePostRenderEffect(() => {...

size-check.global.js

Source:size-check.global.js

...2348          reload: tryWrap(reload)2349      };2350  }2351  const map = new Map();2352  function registerHMR(instance) {2353      const id = instance.type.__hmrId;2354      let record = map.get(id);2355      if (!record) {2356          createRecord(id, instance.type);2357          record = map.get(id);2358      }2359      record.instances.add(instance);2360  }2361  function unregisterHMR(instance) {2362      map.get(instance.type.__hmrId).instances.delete(instance);2363  }2364  function createRecord(id, comp) {2365      if (map.has(id)) {2366          return false;2367      }2368      map.set(id, {2369          comp,2370          instances: new Set()2371      });2372      return true;2373  }2374  function rerender(id, newRender) {2375      const record = map.get(id);2376      if (!record)2377          return;2378      // Array.from creates a snapshot which avoids the set being mutated during2379      // updates2380      Array.from(record.instances).forEach(instance => {2381          if (newRender) {2382              instance.render = newRender;2383          }2384          instance.renderCache = [];2385          // this flag forces child components with slot content to update2386          instance.renderUpdated = true;2387          instance.update();2388          instance.renderUpdated = false;2389      });2390  }2391  function reload(id, newComp) {2392      const record = map.get(id);2393      if (!record)2394          return;2395      // 1. Update existing comp definition to match new one2396      const comp = record.comp;2397      Object.assign(comp, newComp);2398      for (const key in comp) {2399          if (!(key in newComp)) {2400              delete comp[key];2401          }2402      }2403      // 2. Mark component dirty. This forces the renderer to replace the component2404      // on patch.2405      comp.__hmrUpdated = true;2406      // Array.from creates a snapshot which avoids the set being mutated during2407      // updates2408      Array.from(record.instances).forEach(instance => {2409          if (instance.parent) {2410              // 3. Force the parent instance to re-render. This will cause all updated2411              // components to be unmounted and re-mounted. Queue the update so that we2412              // don't end up forcing the same parent to re-render multiple times.2413              queueJob(instance.parent.update);2414          }2415          else if (instance.appContext.reload) {2416              // root instance mounted via createApp() has a reload method2417              instance.appContext.reload();2418          }2419          else if (typeof window !== 'undefined') {2420              // root instance inside tree created via raw render(). Force reload.2421              window.location.reload();2422          }2423          else {2424              console.warn('[HMR] Root or manually mounted instance modified. Full reload required.');2425          }2426      });2427      // 4. Make sure to unmark the component after the reload.2428      queuePostFlushCb(() => {2429          comp.__hmrUpdated = false;2430      });2431  }2432  function tryWrap(fn) {2433      return (id, arg) => {2434          try {2435              return fn(id, arg);2436          }2437          catch (e) {2438              console.error(e);2439              console.warn(`[HMR] Something went wrong during Vue component hot-reload. ` +2440                  `Full reload required.`);2441          }2442      };2443  }2444  let supported;2445  let perf;2446  function startMeasure(instance, type) {2447      if (instance.appContext.config.performance && isSupported()) {2448          perf.mark(`vue-${type}-${instance.uid}`);2449      }2450  }2451  function endMeasure(instance, type) {2452      if (instance.appContext.config.performance && isSupported()) {2453          const startTag = `vue-${type}-${instance.uid}`;2454          const endTag = startTag + `:end`;2455          perf.mark(endTag);2456          perf.measure(`<${formatComponentName(instance.type)}> ${type}`, startTag, endTag);2457          perf.clearMarks(startTag);2458          perf.clearMarks(endTag);2459      }2460  }2461  function isSupported() {2462      if (supported !== undefined) {2463          return supported;2464      }2465      if (typeof window !== 'undefined' && window.performance) {2466          supported = true;2467          perf = window.performance;2468      }2469      else {2470          supported = false;2471      }2472      return supported;2473  }2474  function createDevEffectOptions(instance) {2475      return {2476          scheduler: queueJob,2477          onTrack: instance.rtc ? e => invokeArrayFns(instance.rtc, e) : void 0,2478          onTrigger: instance.rtg ? e => invokeArrayFns(instance.rtg, e) : void 02479      };2480  }2481  const queuePostRenderEffect =  queueEffectWithSuspense2482      ;2483  /**2484   * The createRenderer function accepts two generic arguments:2485   * HostNode and HostElement, corresponding to Node and Element types in the2486   * host environment. For example, for runtime-dom, HostNode would be the DOM2487   * `Node` interface and HostElement would be the DOM `Element` interface.2488   *2489   * Custom renderers can pass in the platform specific types like this:2490   *2491   * ``` js2492   * const { render, createApp } = createRenderer<Node, Element>({2493   *   patchProp,2494   *   ...nodeOps2495   * })2496   * ```2497   */2498  function createRenderer(options) {2499      return baseCreateRenderer(options);2500  }2501  // implementation2502  function baseCreateRenderer(options, createHydrationFns) {2503      const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, setScopeId: hostSetScopeId = NOOP, cloneNode: hostCloneNode, insertStaticContent: hostInsertStaticContent, setStaticContent: hostSetStaticContent } = options;2504      // Note: functions inside this closure should use `const xxx = () => {}`2505      // style in order to prevent being inlined by minifiers.2506      const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, optimized = false) => {2507          // patching & not same type, unmount old tree2508          if (n1 && !isSameVNodeType(n1, n2)) {2509              anchor = getNextHostNode(n1);2510              unmount(n1, parentComponent, parentSuspense, true);2511              n1 = null;2512          }2513          const { type, ref, shapeFlag } = n2;2514          switch (type) {2515              case Text:2516                  processText(n1, n2, container, anchor);2517                  break;2518              case Comment:2519                  processCommentNode(n1, n2, container, anchor);2520                  break;2521              case Static:2522                  if (n1 == null) {2523                      mountStaticNode(n2, container, anchor, isSVG);2524                  }2525                  else {2526                      // static nodes are only patched during dev for HMR2527                      n2.el = n1.el;2528                      if (n2.children !== n1.children) {2529                          hostSetStaticContent(n2.el, n2.children);2530                      }2531                  }2532                  break;2533              case Fragment:2534                  processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2535                  break;2536              default:2537                  if (shapeFlag & 1 /* ELEMENT */) {2538                      processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2539                  }2540                  else if (shapeFlag & 6 /* COMPONENT */) {2541                      processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2542                  }2543                  else if (shapeFlag & 64 /* TELEPORT */) {2544                      type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);2545                  }2546                  else if ( shapeFlag & 128 /* SUSPENSE */) {2547                      type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);2548                  }2549                  else {2550                      warn('Invalid VNode type:', type, `(${typeof type})`);2551                  }2552          }2553          // set ref2554          if (ref != null && parentComponent) {2555              const refValue = shapeFlag & 4 /* STATEFUL_COMPONENT */ ? n2.component.proxy : n2.el;2556              setRef(ref, n1 && n1.ref, parentComponent, refValue);2557          }2558      };2559      const processText = (n1, n2, container, anchor) => {2560          if (n1 == null) {2561              hostInsert((n2.el = hostCreateText(n2.children)), container, anchor);2562          }2563          else {2564              const el = (n2.el = n1.el);2565              if (n2.children !== n1.children) {2566                  hostSetText(el, n2.children);2567              }2568          }2569      };2570      const processCommentNode = (n1, n2, container, anchor) => {2571          if (n1 == null) {2572              hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor);2573          }2574          else {2575              // there's no support for dynamic comments2576              n2.el = n1.el;2577          }2578      };2579      const mountStaticNode = (n2, container, anchor, isSVG) => {2580          if (n2.el && hostCloneNode !== undefined) {2581              hostInsert(hostCloneNode(n2.el), container, anchor);2582          }2583          else {2584              // static nodes are only present when used with compiler-dom/runtime-dom2585              // which guarantees presence of hostInsertStaticContent.2586              n2.el = hostInsertStaticContent(n2.children, container, anchor, isSVG);2587          }2588      };2589      const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2590          isSVG = isSVG || n2.type === 'svg';2591          if (n1 == null) {2592              mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2593          }2594          else {2595              patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized);2596          }2597      };2598      const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2599          let el;2600          let vnodeHook;2601          const { type, props, shapeFlag, transition, scopeId, patchFlag, dirs } = vnode;2602          if (vnode.el &&2603              hostCloneNode !== undefined &&2604              patchFlag === -1 /* HOISTED */) {2605              // If a vnode has non-null el, it means it's being reused.2606              // Only static vnodes can be reused, so its mounted DOM nodes should be2607              // exactly the same, and we can simply do a clone here.2608              el = vnode.el = hostCloneNode(vnode.el);2609          }2610          else {2611              el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is);2612              // props2613              if (props) {2614                  for (const key in props) {2615                      if (!isReservedProp(key)) {2616                          hostPatchProp(el, key, null, props[key], isSVG);2617                      }2618                  }2619                  if ((vnodeHook = props.onVnodeBeforeMount)) {2620                      invokeVNodeHook(vnodeHook, parentComponent, vnode);2621                  }2622              }2623              if (dirs) {2624                  invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount');2625              }2626              // scopeId2627              if (scopeId) {2628                  hostSetScopeId(el, scopeId);2629              }2630              const treeOwnerId = parentComponent && parentComponent.type.__scopeId;2631              // vnode's own scopeId and the current patched component's scopeId is2632              // different - this is a slot content node.2633              if (treeOwnerId && treeOwnerId !== scopeId) {2634                  hostSetScopeId(el, treeOwnerId + '-s');2635              }2636              // children2637              if (shapeFlag & 8 /* TEXT_CHILDREN */) {2638                  hostSetElementText(el, vnode.children);2639              }2640              else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {2641                  mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG && type !== 'foreignObject', optimized || !!vnode.dynamicChildren);2642              }2643              if (transition && !transition.persisted) {2644                  transition.beforeEnter(el);2645              }2646          }2647          hostInsert(el, container, anchor);2648          if ((vnodeHook = props && props.onVnodeMounted) ||2649              (transition && !transition.persisted) ||2650              dirs) {2651              queuePostRenderEffect(() => {2652                  vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);2653                  transition && !transition.persisted && transition.enter(el);2654                  dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted');2655              }, parentSuspense);2656          }2657      };2658      const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, optimized, start = 0) => {2659          for (let i = start; i < children.length; i++) {2660              const child = (children[i] = optimized2661                  ? cloneIfMounted(children[i])2662                  : normalizeVNode(children[i]));2663              patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2664          }2665      };2666      const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, optimized) => {2667          const el = (n2.el = n1.el);2668          let { patchFlag, dynamicChildren, dirs } = n2;2669          const oldProps = (n1 && n1.props) || EMPTY_OBJ;2670          const newProps = n2.props || EMPTY_OBJ;2671          let vnodeHook;2672          if ((vnodeHook = newProps.onVnodeBeforeUpdate)) {2673              invokeVNodeHook(vnodeHook, parentComponent, n2, n1);2674          }2675          if (dirs) {2676              invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate');2677          }2678          if ( parentComponent && parentComponent.renderUpdated) {2679              // HMR updated, force full diff2680              patchFlag = 0;2681              optimized = false;2682              dynamicChildren = null;2683          }2684          if (patchFlag > 0) {2685              // the presence of a patchFlag means this element's render code was2686              // generated by the compiler and can take the fast path.2687              // in this path old node and new node are guaranteed to have the same shape2688              // (i.e. at the exact same position in the source template)2689              if (patchFlag & 16 /* FULL_PROPS */) {2690                  // element props contain dynamic keys, full diff needed2691                  patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);2692              }2693              else {2694                  // class2695                  // this flag is matched when the element has dynamic class bindings.2696                  if (patchFlag & 2 /* CLASS */) {2697                      if (oldProps.class !== newProps.class) {2698                          hostPatchProp(el, 'class', null, newProps.class, isSVG);2699                      }2700                  }2701                  // style2702                  // this flag is matched when the element has dynamic style bindings2703                  if (patchFlag & 4 /* STYLE */) {2704                      hostPatchProp(el, 'style', oldProps.style, newProps.style, isSVG);2705                  }2706                  // props2707                  // This flag is matched when the element has dynamic prop/attr bindings2708                  // other than class and style. The keys of dynamic prop/attrs are saved for2709                  // faster iteration.2710                  // Note dynamic keys like :[foo]="bar" will cause this optimization to2711                  // bail out and go through a full diff because we need to unset the old key2712                  if (patchFlag & 8 /* PROPS */) {2713                      // if the flag is present then dynamicProps must be non-null2714                      const propsToUpdate = n2.dynamicProps;2715                      for (let i = 0; i < propsToUpdate.length; i++) {2716                          const key = propsToUpdate[i];2717                          const prev = oldProps[key];2718                          const next = newProps[key];2719                          if (prev !== next) {2720                              hostPatchProp(el, key, prev, next, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);2721                          }2722                      }2723                  }2724              }2725              // text2726              // This flag is matched when the element has only dynamic text children.2727              if (patchFlag & 1 /* TEXT */) {2728                  if (n1.children !== n2.children) {2729                      hostSetElementText(el, n2.children);2730                  }2731              }2732          }2733          else if (!optimized && dynamicChildren == null) {2734              // unoptimized, full diff2735              patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);2736          }2737          const areChildrenSVG = isSVG && n2.type !== 'foreignObject';2738          if (dynamicChildren) {2739              patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG);2740          }2741          else if (!optimized) {2742              // full diff2743              patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG);2744          }2745          if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {2746              queuePostRenderEffect(() => {2747                  vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);2748                  dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated');2749              }, parentSuspense);2750          }2751      };2752      // The fast path for blocks.2753      const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG) => {2754          for (let i = 0; i < newChildren.length; i++) {2755              const oldVNode = oldChildren[i];2756              const newVNode = newChildren[i];2757              // Determine the container (parent element) for the patch.2758              const container = 2759              // - In the case of a Fragment, we need to provide the actual parent2760              // of the Fragment itself so it can move its children.2761              oldVNode.type === Fragment ||2762                  // - In the case of different nodes, there is going to be a replacement2763                  // which also requires the correct parent container2764                  !isSameVNodeType(oldVNode, newVNode) ||2765                  // - In the case of a component, it could contain anything.2766                  oldVNode.shapeFlag & 6 /* COMPONENT */2767                  ? hostParentNode(oldVNode.el)2768                  : // In other cases, the parent container is not actually used so we2769                      // just pass the block element here to avoid a DOM parentNode call.2770                      fallbackContainer;2771              patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, true);2772          }2773      };2774      const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {2775          if (oldProps !== newProps) {2776              for (const key in newProps) {2777                  if (isReservedProp(key))2778                      continue;2779                  const next = newProps[key];2780                  const prev = oldProps[key];2781                  if (next !== prev) {2782                      hostPatchProp(el, key, prev, next, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);2783                  }2784              }2785              if (oldProps !== EMPTY_OBJ) {2786                  for (const key in oldProps) {2787                      if (!isReservedProp(key) && !(key in newProps)) {2788                          hostPatchProp(el, key, oldProps[key], null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);2789                      }2790                  }2791              }2792          }2793      };2794      const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2795          const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''));2796          const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''));2797          let { patchFlag, dynamicChildren } = n2;2798          if (patchFlag > 0) {2799              optimized = true;2800          }2801          if ( parentComponent && parentComponent.renderUpdated) {2802              // HMR updated, force full diff2803              patchFlag = 0;2804              optimized = false;2805              dynamicChildren = null;2806          }2807          if (n1 == null) {2808              hostInsert(fragmentStartAnchor, container, anchor);2809              hostInsert(fragmentEndAnchor, container, anchor);2810              // a fragment can only have array children2811              // since they are either generated by the compiler, or implicitly created2812              // from arrays.2813              mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);2814          }2815          else {2816              if (patchFlag & 64 /* STABLE_FRAGMENT */ && dynamicChildren) {2817                  // a stable fragment (template root or <template v-for>) doesn't need to2818                  // patch children order, but it may contain dynamicChildren.2819                  patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG);2820              }2821              else {2822                  // keyed / unkeyed, or manual fragments.2823                  // for keyed & unkeyed, since they are compiler generated from v-for,2824                  // each child is guaranteed to be a block so the fragment will never2825                  // have dynamicChildren.2826                  patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);2827              }2828          }2829      };2830      const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2831          if (n1 == null) {2832              if (n2.shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) {2833                  parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized);2834              }2835              else {2836                  mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2837              }2838          }2839          else {2840              updateComponent(n1, n2, parentComponent, optimized);2841          }2842      };2843      const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2844          const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense));2845          if ( instance.type.__hmrId) {2846              registerHMR(instance);2847          }2848          {2849              pushWarningContext(initialVNode);2850              startMeasure(instance, `mount`);2851          }2852          // inject renderer internals for keepAlive2853          if (isKeepAlive(initialVNode)) {2854              instance.ctx.renderer = internals;2855          }2856          // resolve props and slots for setup context2857          {2858              startMeasure(instance, `init`);2859          }2860          setupComponent(instance);2861          {2862              endMeasure(instance, `init`);2863          }2864          // setup() is async. This component relies on async logic to be resolved2865          // before proceeding2866          if ( instance.asyncDep) {2867              if (!parentSuspense) {2868                  warn('async setup() is used without a suspense boundary!');2869                  return;2870              }2871              parentSuspense.registerDep(instance, setupRenderEffect);2872              // Give it a placeholder if this is not hydration2873              if (!initialVNode.el) {2874                  const placeholder = (instance.subTree = createVNode(Comment));2875                  processCommentNode(null, placeholder, container, anchor);2876              }2877              return;2878          }2879          setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);2880          {2881              popWarningContext();2882              endMeasure(instance, `mount`);2883          }2884      };2885      const updateComponent = (n1, n2, parentComponent, optimized) => {2886          const instance = (n2.component = n1.component);2887          if (shouldUpdateComponent(n1, n2, parentComponent, optimized)) {2888              if (2889                  instance.asyncDep &&2890                  !instance.asyncResolved) {2891                  // async & still pending - just update props and slots2892                  // since the component's reactive effect for render isn't set-up yet2893                  {2894                      pushWarningContext(n2);2895                  }2896                  updateComponentPreRender(instance, n2, optimized);2897                  {2898                      popWarningContext();2899                  }2900                  return;2901              }2902              else {2903                  // normal update2904                  instance.next = n2;2905                  // in case the child component is also queued, remove it to avoid2906                  // double updating the same child component in the same flush.2907                  invalidateJob(instance.update);2908                  // instance.update is the reactive effect runner.2909                  instance.update();2910              }2911          }2912          else {2913              // no update needed. just copy over properties2914              n2.component = n1.component;2915              n2.el = n1.el;2916          }2917      };2918      const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {2919          // create reactive effect for rendering2920          instance.update = effect(function componentEffect() {2921              if (!instance.isMounted) {2922                  let vnodeHook;2923                  const { el, props } = initialVNode;2924                  const { bm, m, a, parent } = instance;2925                  {2926                      startMeasure(instance, `render`);2927                  }2928                  const subTree = (instance.subTree = renderComponentRoot(instance));2929                  {2930                      endMeasure(instance, `render`);2931                  }2932                  // beforeMount hook2933                  if (bm) {2934                      invokeArrayFns(bm);2935                  }2936                  // onVnodeBeforeMount2937                  if ((vnodeHook = props && props.onVnodeBeforeMount)) {2938                      invokeVNodeHook(vnodeHook, parent, initialVNode);2939                  }2940                  if (el && hydrateNode) {2941                      {2942                          startMeasure(instance, `hydrate`);2943                      }2944                      // vnode has adopted host node - perform hydration instead of mount.2945                      hydrateNode(initialVNode.el, subTree, instance, parentSuspense);2946                      {2947                          endMeasure(instance, `hydrate`);2948                      }2949                  }2950                  else {2951                      {2952                          startMeasure(instance, `patch`);2953                      }2954                      patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);2955                      {2956                          endMeasure(instance, `patch`);2957                      }2958                      initialVNode.el = subTree.el;2959                  }2960                  // mounted hook2961                  if (m) {2962                      queuePostRenderEffect(m, parentSuspense);2963                  }2964                  // onVnodeMounted2965                  if ((vnodeHook = props && props.onVnodeMounted)) {2966                      queuePostRenderEffect(() => {2967                          invokeVNodeHook(vnodeHook, parent, initialVNode);2968                      }, parentSuspense);2969                  }2970                  // activated hook for keep-alive roots.2971                  if (a &&2972                      initialVNode.shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {2973                      queuePostRenderEffect(a, parentSuspense);2974                  }2975                  instance.isMounted = true;2976              }2977              else {2978                  // updateComponent2979                  // This is triggered by mutation of component's own state (next: null)2980                  // OR parent calling processComponent (next: VNode)2981                  let { next, bu, u, parent, vnode } = instance;2982                  let vnodeHook;2983                  {2984                      pushWarningContext(next || instance.vnode);2985                  }2986                  if (next) {2987                      updateComponentPreRender(instance, next, optimized);2988                  }2989                  else {2990                      next = vnode;2991                  }2992                  {2993                      startMeasure(instance, `render`);2994                  }2995                  const nextTree = renderComponentRoot(instance);2996                  {2997                      endMeasure(instance, `render`);2998                  }2999                  const prevTree = instance.subTree;3000                  instance.subTree = nextTree;3001                  next.el = vnode.el;3002                  // beforeUpdate hook3003                  if (bu) {3004                      invokeArrayFns(bu);3005                  }3006                  // onVnodeBeforeUpdate3007                  if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {3008                      invokeVNodeHook(vnodeHook, parent, next, vnode);3009                  }3010                  // reset refs3011                  // only needed if previous patch had refs3012                  if (instance.refs !== EMPTY_OBJ) {3013                      instance.refs = {};3014                  }3015                  {3016                      startMeasure(instance, `patch`);3017                  }3018                  patch(prevTree, nextTree, 3019                  // parent may have changed if it's in a teleport3020                  hostParentNode(prevTree.el), 3021                  // anchor may have changed if it's in a fragment3022                  getNextHostNode(prevTree), instance, parentSuspense, isSVG);3023                  {3024                      endMeasure(instance, `patch`);3025                  }3026                  next.el = nextTree.el;3027                  if (next === null) {3028                      // self-triggered update. In case of HOC, update parent component3029                      // vnode el. HOC is indicated by parent instance's subTree pointing3030                      // to child component's vnode3031                      updateHOCHostEl(instance, nextTree.el);3032                  }3033                  // updated hook3034                  if (u) {3035                      queuePostRenderEffect(u, parentSuspense);3036                  }3037                  // onVnodeUpdated3038                  if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {3039                      queuePostRenderEffect(() => {3040                          invokeVNodeHook(vnodeHook, parent, next, vnode);3041                      }, parentSuspense);3042                  }3043                  {3044                      popWarningContext();3045                  }3046              }3047          },  createDevEffectOptions(instance) );3048      };3049      const updateComponentPreRender = (instance, nextVNode, optimized) => {3050          nextVNode.component = instance;3051          const prevProps = instance.vnode.props;3052          instance.vnode = nextVNode;3053          instance.next = null;3054          updateProps(instance, nextVNode.props, prevProps, optimized);3055          updateSlots(instance, nextVNode.children);3056      };3057      const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) => {3058          const c1 = n1 && n1.children;3059          const prevShapeFlag = n1 ? n1.shapeFlag : 0;3060          const c2 = n2.children;3061          const { patchFlag, shapeFlag } = n2;3062          if (patchFlag === -2 /* BAIL */) {3063              optimized = false;3064          }3065          // fast path3066          if (patchFlag > 0) {3067              if (patchFlag & 128 /* KEYED_FRAGMENT */) {3068                  // this could be either fully-keyed or mixed (some keyed some not)3069                  // presence of patchFlag means children are guaranteed to be arrays3070                  patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3071                  return;3072              }3073              else if (patchFlag & 256 /* UNKEYED_FRAGMENT */) {3074                  // unkeyed3075                  patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3076                  return;3077              }3078          }3079          // children has 3 possibilities: text, array or no children.3080          if (shapeFlag & 8 /* TEXT_CHILDREN */) {3081              // text children fast path3082              if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {3083                  unmountChildren(c1, parentComponent, parentSuspense);3084              }3085              if (c2 !== c1) {3086                  hostSetElementText(container, c2);3087              }3088          }3089          else {3090              if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {3091                  // prev children was array3092                  if (shapeFlag & 16 /* ARRAY_CHILDREN */) {3093                      // two arrays, cannot assume anything, do full diff3094                      patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3095                  }3096                  else {3097                      // no new children, just unmount old3098                      unmountChildren(c1, parentComponent, parentSuspense, true);3099                  }3100              }3101              else {3102                  // prev children was text OR null3103                  // new children is array OR null3104                  if (prevShapeFlag & 8 /* TEXT_CHILDREN */) {3105                      hostSetElementText(container, '');3106                  }3107                  // mount new if array3108                  if (shapeFlag & 16 /* ARRAY_CHILDREN */) {3109                      mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3110                  }3111              }3112          }3113      };3114      const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {3115          c1 = c1 || EMPTY_ARR;3116          c2 = c2 || EMPTY_ARR;3117          const oldLength = c1.length;3118          const newLength = c2.length;3119          const commonLength = Math.min(oldLength, newLength);3120          let i;3121          for (i = 0; i < commonLength; i++) {3122              const nextChild = (c2[i] = optimized3123                  ? cloneIfMounted(c2[i])3124                  : normalizeVNode(c2[i]));3125              patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, optimized);3126          }3127          if (oldLength > newLength) {3128              // remove old3129              unmountChildren(c1, parentComponent, parentSuspense, true, commonLength);3130          }3131          else {3132              // mount new3133              mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, commonLength);3134          }3135      };3136      // can be all-keyed or mixed3137      const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) => {3138          let i = 0;3139          const l2 = c2.length;3140          let e1 = c1.length - 1; // prev ending index3141          let e2 = l2 - 1; // next ending index3142          // 1. sync from start3143          // (a b) c3144          // (a b) d e3145          while (i <= e1 && i <= e2) {3146              const n1 = c1[i];3147              const n2 = (c2[i] = optimized3148                  ? cloneIfMounted(c2[i])3149                  : normalizeVNode(c2[i]));3150              if (isSameVNodeType(n1, n2)) {3151                  patch(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized);3152              }3153              else {3154                  break;3155              }3156              i++;3157          }3158          // 2. sync from end3159          // a (b c)3160          // d e (b c)3161          while (i <= e1 && i <= e2) {3162              const n1 = c1[e1];3163              const n2 = (c2[e2] = optimized3164                  ? cloneIfMounted(c2[e2])3165                  : normalizeVNode(c2[e2]));3166              if (isSameVNodeType(n1, n2)) {3167                  patch(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized);3168              }3169              else {3170                  break;3171              }3172              e1--;3173              e2--;3174          }3175          // 3. common sequence + mount3176          // (a b)3177          // (a b) c3178          // i = 2, e1 = 1, e2 = 23179          // (a b)3180          // c (a b)3181          // i = 0, e1 = -1, e2 = 03182          if (i > e1) {3183              if (i <= e2) {3184                  const nextPos = e2 + 1;3185                  const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;3186                  while (i <= e2) {3187                      patch(null, (c2[i] = optimized3188                          ? cloneIfMounted(c2[i])3189                          : normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG);3190                      i++;3191                  }3192              }3193          }3194          // 4. common sequence + unmount3195          // (a b) c3196          // (a b)3197          // i = 2, e1 = 2, e2 = 13198          // a (b c)3199          // (b c)3200          // i = 0, e1 = 0, e2 = -13201          else if (i > e2) {3202              while (i <= e1) {3203                  unmount(c1[i], parentComponent, parentSuspense, true);3204                  i++;3205              }3206          }3207          // 5. unknown sequence3208          // [i ... e1 + 1]: a b [c d e] f g3209          // [i ... e2 + 1]: a b [e d c h] f g3210          // i = 2, e1 = 4, e2 = 53211          else {3212              const s1 = i; // prev starting index3213              const s2 = i; // next starting index3214              // 5.1 build key:index map for newChildren3215              const keyToNewIndexMap = new Map();3216              for (i = s2; i <= e2; i++) {3217                  const nextChild = (c2[i] = optimized3218                      ? cloneIfMounted(c2[i])3219                      : normalizeVNode(c2[i]));3220                  if (nextChild.key != null) {3221                      if ( keyToNewIndexMap.has(nextChild.key)) {3222                          warn(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);3223                      }3224                      keyToNewIndexMap.set(nextChild.key, i);3225                  }3226              }3227              // 5.2 loop through old children left to be patched and try to patch3228              // matching nodes & remove nodes that are no longer present3229              let j;3230              let patched = 0;3231              const toBePatched = e2 - s2 + 1;3232              let moved = false;3233              // used to track whether any node has moved3234              let maxNewIndexSoFar = 0;3235              // works as Map<newIndex, oldIndex>3236              // Note that oldIndex is offset by +13237              // and oldIndex = 0 is a special value indicating the new node has3238              // no corresponding old node.3239              // used for determining longest stable subsequence3240              const newIndexToOldIndexMap = new Array(toBePatched);3241              for (i = 0; i < toBePatched; i++)3242                  newIndexToOldIndexMap[i] = 0;3243              for (i = s1; i <= e1; i++) {3244                  const prevChild = c1[i];3245                  if (patched >= toBePatched) {3246                      // all new children have been patched so this can only be a removal3247                      unmount(prevChild, parentComponent, parentSuspense, true);3248                      continue;3249                  }3250                  let newIndex;3251                  if (prevChild.key != null) {3252                      newIndex = keyToNewIndexMap.get(prevChild.key);3253                  }3254                  else {3255                      // key-less node, try to locate a key-less node of the same type3256                      for (j = s2; j <= e2; j++) {3257                          if (newIndexToOldIndexMap[j - s2] === 0 &&3258                              isSameVNodeType(prevChild, c2[j])) {3259                              newIndex = j;3260                              break;3261                          }3262                      }3263                  }3264                  if (newIndex === undefined) {3265                      unmount(prevChild, parentComponent, parentSuspense, true);3266                  }3267                  else {3268                      newIndexToOldIndexMap[newIndex - s2] = i + 1;3269                      if (newIndex >= maxNewIndexSoFar) {3270                          maxNewIndexSoFar = newIndex;3271                      }3272                      else {3273                          moved = true;3274                      }3275                      patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, optimized);3276                      patched++;3277                  }3278              }3279              // 5.3 move and mount3280              // generate longest stable subsequence only when nodes have moved3281              const increasingNewIndexSequence = moved3282                  ? getSequence(newIndexToOldIndexMap)3283                  : EMPTY_ARR;3284              j = increasingNewIndexSequence.length - 1;3285              // looping backwards so that we can use last patched node as anchor3286              for (i = toBePatched - 1; i >= 0; i--) {3287                  const nextIndex = s2 + i;3288                  const nextChild = c2[nextIndex];3289                  const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;3290                  if (newIndexToOldIndexMap[i] === 0) {3291                      // mount new3292                      patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG);3293                  }3294                  else if (moved) {3295                      // move if:3296                      // There is no stable subsequence (e.g. a reverse)3297                      // OR current node is not among the stable sequence3298                      if (j < 0 || i !== increasingNewIndexSequence[j]) {3299                          move(nextChild, container, anchor, 2 /* REORDER */);3300                      }3301                      else {3302                          j--;3303                      }3304                  }3305              }3306          }3307      };3308      const move = (vnode, container, anchor, moveType, parentSuspense = null) => {3309          const { el, type, transition, children, shapeFlag } = vnode;3310          if (shapeFlag & 6 /* COMPONENT */) {3311              move(vnode.component.subTree, container, anchor, moveType);3312              return;3313          }3314          if ( shapeFlag & 128 /* SUSPENSE */) {3315              vnode.suspense.move(container, anchor, moveType);3316              return;3317          }3318          if (shapeFlag & 64 /* TELEPORT */) {3319              type.move(vnode, container, anchor, internals);3320              return;3321          }3322          if (type === Fragment) {3323              hostInsert(el, container, anchor);3324              for (let i = 0; i < children.length; i++) {3325                  move(children[i], container, anchor, moveType);3326              }3327              hostInsert(vnode.anchor, container, anchor);3328              return;3329          }3330          // single nodes3331          const needTransition = moveType !== 2 /* REORDER */ &&3332              shapeFlag & 1 /* ELEMENT */ &&3333              transition;3334          if (needTransition) {3335              if (moveType === 0 /* ENTER */) {3336                  transition.beforeEnter(el);3337                  hostInsert(el, container, anchor);3338                  queuePostRenderEffect(() => transition.enter(el), parentSuspense);3339              }3340              else {3341                  const { leave, delayLeave, afterLeave } = transition;3342                  const remove = () => hostInsert(el, container, anchor);3343                  const performLeave = () => {3344                      leave(el, () => {3345                          remove();3346                          afterLeave && afterLeave();3347                      });3348                  };3349                  if (delayLeave) {3350                      delayLeave(el, remove, performLeave);3351                  }3352                  else {3353                      performLeave();3354                  }3355              }3356          }3357          else {3358              hostInsert(el, container, anchor);3359          }3360      };3361      const unmount = (vnode, parentComponent, parentSuspense, doRemove = false) => {3362          const { props, ref, children, dynamicChildren, shapeFlag, dirs } = vnode;3363          const shouldInvokeDirs = shapeFlag & 1 /* ELEMENT */ && dirs;3364          const shouldKeepAlive = shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */;3365          let vnodeHook;3366          // unset ref3367          if (ref != null && parentComponent) {3368              setRef(ref, null, parentComponent, null);3369          }3370          if ((vnodeHook = props && props.onVnodeBeforeUnmount) && !shouldKeepAlive) {3371              invokeVNodeHook(vnodeHook, parentComponent, vnode);3372          }3373          if (shapeFlag & 6 /* COMPONENT */) {3374              if (shouldKeepAlive) {3375                  parentComponent.ctx.deactivate(vnode);3376              }3377              else {3378                  unmountComponent(vnode.component, parentSuspense, doRemove);3379              }3380          }3381          else {3382              if ( shapeFlag & 128 /* SUSPENSE */) {3383                  vnode.suspense.unmount(parentSuspense, doRemove);3384                  return;3385              }3386              if (shouldInvokeDirs) {3387                  invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount');3388              }3389              if (dynamicChildren) {3390                  // fast path for block nodes: only need to unmount dynamic children.3391                  unmountChildren(dynamicChildren, parentComponent, parentSuspense);3392              }3393              else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {3394                  unmountChildren(children, parentComponent, parentSuspense);3395              }3396              // an unmounted teleport should always remove its children3397              if (shapeFlag & 64 /* TELEPORT */) {3398                  vnode.type.remove(vnode, internals);3399              }3400              if (doRemove) {3401                  remove(vnode);3402              }3403          }3404          if (((vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) &&3405              !shouldKeepAlive) {3406              queuePostRenderEffect(() => {3407                  vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);3408                  shouldInvokeDirs &&3409                      invokeDirectiveHook(vnode, null, parentComponent, 'unmounted');3410              }, parentSuspense);3411          }3412      };3413      const remove = vnode => {3414          const { type, el, anchor, transition } = vnode;3415          if (type === Fragment) {3416              removeFragment(el, anchor);3417              return;3418          }3419          const performRemove = () => {3420              hostRemove(el);3421              if (transition && !transition.persisted && transition.afterLeave) {3422                  transition.afterLeave();3423              }3424          };3425          if (vnode.shapeFlag & 1 /* ELEMENT */ &&3426              transition &&3427              !transition.persisted) {3428              const { leave, delayLeave } = transition;3429              const performLeave = () => leave(el, performRemove);3430              if (delayLeave) {3431                  delayLeave(vnode.el, performRemove, performLeave);3432              }3433              else {3434                  performLeave();3435              }3436          }3437          else {3438              performRemove();3439          }3440      };3441      const removeFragment = (cur, end) => {3442          // For fragments, directly remove all contained DOM nodes.3443          // (fragment child nodes cannot have transition)3444          let next;3445          while (cur !== end) {3446              next = hostNextSibling(cur);3447              hostRemove(cur);3448              cur = next;3449          }3450          hostRemove(end);3451      };3452      const unmountComponent = (instance, parentSuspense, doRemove) => {3453          if ( instance.type.__hmrId) {3454              unregisterHMR(instance);3455          }3456          const { bum, effects, update, subTree, um, da, isDeactivated } = instance;3457          // beforeUnmount hook3458          if (bum) {3459              invokeArrayFns(bum);3460          }3461          if (effects) {3462              for (let i = 0; i < effects.length; i++) {3463                  stop(effects[i]);3464              }3465          }3466          // update may be null if a component is unmounted before its async3467          // setup has resolved.3468          if (update) {
...

bundle.esm.js

Source:bundle.esm.js

...2492        reload: tryWrap(reload)2493    };2494}2495const map = new Map();2496function registerHMR(instance) {2497    const id = instance.type.__hmrId;2498    let record = map.get(id);2499    if (!record) {2500        createRecord(id, instance.type);2501        record = map.get(id);2502    }2503    record.add(instance);2504}2505function unregisterHMR(instance) {2506    map.get(instance.type.__hmrId).delete(instance);2507}2508function createRecord(id, comp) {2509    if (map.has(id)) {2510        return false;2511    }2512    map.set(id, new Set());2513    return true;2514}2515function rerender(id, newRender) {2516    const record = map.get(id);2517    if (!record)2518        return;2519    // Array.from creates a snapshot which avoids the set being mutated during2520    // updates2521    Array.from(record).forEach(instance => {2522        if (newRender) {2523            instance.render = newRender;2524        }2525        instance.renderCache = [];2526        // this flag forces child components with slot content to update2527        instance.renderUpdated = true;2528        instance.update();2529        instance.renderUpdated = false;2530    });2531}2532function reload(id, newComp) {2533    const record = map.get(id);2534    if (!record)2535        return;2536    // Array.from creates a snapshot which avoids the set being mutated during2537    // updates2538    Array.from(record).forEach(instance => {2539        const comp = instance.type;2540        if (!comp.__hmrUpdated) {2541            // 1. Update existing comp definition to match new one2542            Object.assign(comp, newComp);2543            for (const key in comp) {2544                if (!(key in newComp)) {2545                    delete comp[key];2546                }2547            }2548            // 2. Mark component dirty. This forces the renderer to replace the component2549            // on patch.2550            comp.__hmrUpdated = true;2551            // 3. Make sure to unmark the component after the reload.2552            queuePostFlushCb(() => {2553                comp.__hmrUpdated = false;2554            });2555        }2556        if (instance.parent) {2557            // 4. Force the parent instance to re-render. This will cause all updated2558            // components to be unmounted and re-mounted. Queue the update so that we2559            // don't end up forcing the same parent to re-render multiple times.2560            queueJob(instance.parent.update);2561        }2562        else if (instance.appContext.reload) {2563            // root instance mounted via createApp() has a reload method2564            instance.appContext.reload();2565        }2566        else if (typeof window !== 'undefined') {2567            // root instance inside tree created via raw render(). Force reload.2568            window.location.reload();2569        }2570        else {2571            console.warn('[HMR] Root or manually mounted instance modified. Full reload required.');2572        }2573    });2574}2575function tryWrap(fn) {2576    return (id, arg) => {2577        try {2578            return fn(id, arg);2579        }2580        catch (e) {2581            console.error(e);2582            console.warn(`[HMR] Something went wrong during Vue component hot-reload. ` +2583                `Full reload required.`);2584        }2585    };2586}2587let supported;2588let perf;2589function startMeasure(instance, type) {2590    if (instance.appContext.config.performance && isSupported()) {2591        perf.mark(`vue-${type}-${instance.uid}`);2592    }2593}2594function endMeasure(instance, type) {2595    if (instance.appContext.config.performance && isSupported()) {2596        const startTag = `vue-${type}-${instance.uid}`;2597        const endTag = startTag + `:end`;2598        perf.mark(endTag);2599        perf.measure(`<${formatComponentName(instance.type)}> ${type}`, startTag, endTag);2600        perf.clearMarks(startTag);2601        perf.clearMarks(endTag);2602    }2603}2604function isSupported() {2605    if (supported !== undefined) {2606        return supported;2607    }2608    if (typeof window !== 'undefined' && window.performance) {2609        supported = true;2610        perf = window.performance;2611    }2612    else {2613        supported = false;2614    }2615    return supported;2616}2617function createDevEffectOptions(instance) {2618    return {2619        scheduler: queueJob,2620        onTrack: instance.rtc ? e => invokeArrayFns(instance.rtc, e) : void 0,2621        onTrigger: instance.rtg ? e => invokeArrayFns(instance.rtg, e) : void 02622    };2623}2624const queuePostRenderEffect =  queueEffectWithSuspense2625    ;2626/**2627 * The createRenderer function accepts two generic arguments:2628 * HostNode and HostElement, corresponding to Node and Element types in the2629 * host environment. For example, for runtime-dom, HostNode would be the DOM2630 * `Node` interface and HostElement would be the DOM `Element` interface.2631 *2632 * Custom renderers can pass in the platform specific types like this:2633 *2634 * ``` js2635 * const { render, createApp } = createRenderer<Node, Element>({2636 *   patchProp,2637 *   ...nodeOps2638 * })2639 * ```2640 */2641function createRenderer(options) {2642    return baseCreateRenderer(options);2643}2644// implementation2645function baseCreateRenderer(options, createHydrationFns) {2646    const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, setScopeId: hostSetScopeId = NOOP, cloneNode: hostCloneNode, insertStaticContent: hostInsertStaticContent, setStaticContent: hostSetStaticContent } = options;2647    // Note: functions inside this closure should use `const xxx = () => {}`2648    // style in order to prevent being inlined by minifiers.2649    const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, optimized = false) => {2650        // patching & not same type, unmount old tree2651        if (n1 && !isSameVNodeType(n1, n2)) {2652            anchor = getNextHostNode(n1);2653            unmount(n1, parentComponent, parentSuspense, true);2654            n1 = null;2655        }2656        if (n2.patchFlag === -2 /* BAIL */) {2657            optimized = false;2658            n2.dynamicChildren = null;2659        }2660        const { type, ref, shapeFlag } = n2;2661        switch (type) {2662            case Text:2663                processText(n1, n2, container, anchor);2664                break;2665            case Comment:2666                processCommentNode(n1, n2, container, anchor);2667                break;2668            case Static:2669                if (n1 == null) {2670                    mountStaticNode(n2, container, anchor, isSVG);2671                }2672                else {2673                    // static nodes are only patched during dev for HMR2674                    n2.el = n1.el;2675                    if (n2.children !== n1.children) {2676                        hostSetStaticContent(n2.el, n2.children);2677                    }2678                }2679                break;2680            case Fragment:2681                processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2682                break;2683            default:2684                if (shapeFlag & 1 /* ELEMENT */) {2685                    processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2686                }2687                else if (shapeFlag & 6 /* COMPONENT */) {2688                    processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2689                }2690                else if (shapeFlag & 64 /* TELEPORT */) {2691                    type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);2692                }2693                else if ( shapeFlag & 128 /* SUSPENSE */) {2694                    type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);2695                }2696                else {2697                    warn('Invalid VNode type:', type, `(${typeof type})`);2698                }2699        }2700        // set ref2701        if (ref != null && parentComponent) {2702            const refValue = shapeFlag & 4 /* STATEFUL_COMPONENT */ ? n2.component.proxy : n2.el;2703            setRef(ref, n1 && n1.ref, parentComponent, refValue);2704        }2705    };2706    const processText = (n1, n2, container, anchor) => {2707        if (n1 == null) {2708            hostInsert((n2.el = hostCreateText(n2.children)), container, anchor);2709        }2710        else {2711            const el = (n2.el = n1.el);2712            if (n2.children !== n1.children) {2713                hostSetText(el, n2.children);2714            }2715        }2716    };2717    const processCommentNode = (n1, n2, container, anchor) => {2718        if (n1 == null) {2719            hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor);2720        }2721        else {2722            // there's no support for dynamic comments2723            n2.el = n1.el;2724        }2725    };2726    const mountStaticNode = (n2, container, anchor, isSVG) => {2727        if (n2.el && hostCloneNode !== undefined) {2728            hostInsert(hostCloneNode(n2.el), container, anchor);2729        }2730        else {2731            // static nodes are only present when used with compiler-dom/runtime-dom2732            // which guarantees presence of hostInsertStaticContent.2733            n2.el = hostInsertStaticContent(n2.children, container, anchor, isSVG);2734        }2735    };2736    const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2737        isSVG = isSVG || n2.type === 'svg';2738        if (n1 == null) {2739            mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2740        }2741        else {2742            patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized);2743        }2744    };2745    const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2746        let el;2747        let vnodeHook;2748        const { type, props, shapeFlag, transition, scopeId, patchFlag, dirs } = vnode;2749        if (vnode.el &&2750            hostCloneNode !== undefined &&2751            patchFlag === -1 /* HOISTED */) {2752            // If a vnode has non-null el, it means it's being reused.2753            // Only static vnodes can be reused, so its mounted DOM nodes should be2754            // exactly the same, and we can simply do a clone here.2755            el = vnode.el = hostCloneNode(vnode.el);2756        }2757        else {2758            el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is);2759            // props2760            if (props) {2761                for (const key in props) {2762                    if (!isReservedProp(key)) {2763                        hostPatchProp(el, key, null, props[key], isSVG);2764                    }2765                }2766                if ((vnodeHook = props.onVnodeBeforeMount)) {2767                    invokeVNodeHook(vnodeHook, parentComponent, vnode);2768                }2769            }2770            if (dirs) {2771                invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount');2772            }2773            // scopeId2774            if (scopeId) {2775                hostSetScopeId(el, scopeId);2776            }2777            const treeOwnerId = parentComponent && parentComponent.type.__scopeId;2778            // vnode's own scopeId and the current patched component's scopeId is2779            // different - this is a slot content node.2780            if (treeOwnerId && treeOwnerId !== scopeId) {2781                hostSetScopeId(el, treeOwnerId + '-s');2782            }2783            // children2784            if (shapeFlag & 8 /* TEXT_CHILDREN */) {2785                hostSetElementText(el, vnode.children);2786            }2787            else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {2788                mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG && type !== 'foreignObject', optimized || !!vnode.dynamicChildren);2789            }2790            if (transition && !transition.persisted) {2791                transition.beforeEnter(el);2792            }2793        }2794        hostInsert(el, container, anchor);2795        if ((vnodeHook = props && props.onVnodeMounted) ||2796            (transition && !transition.persisted) ||2797            dirs) {2798            queuePostRenderEffect(() => {2799                vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);2800                transition && !transition.persisted && transition.enter(el);2801                dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted');2802            }, parentSuspense);2803        }2804    };2805    const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, optimized, start = 0) => {2806        for (let i = start; i < children.length; i++) {2807            const child = (children[i] = optimized2808                ? cloneIfMounted(children[i])2809                : normalizeVNode(children[i]));2810            patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2811        }2812    };2813    const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, optimized) => {2814        const el = (n2.el = n1.el);2815        let { patchFlag, dynamicChildren, dirs } = n2;2816        const oldProps = (n1 && n1.props) || EMPTY_OBJ;2817        const newProps = n2.props || EMPTY_OBJ;2818        let vnodeHook;2819        if ((vnodeHook = newProps.onVnodeBeforeUpdate)) {2820            invokeVNodeHook(vnodeHook, parentComponent, n2, n1);2821        }2822        if (dirs) {2823            invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate');2824        }2825        if ( parentComponent && parentComponent.renderUpdated) {2826            // HMR updated, force full diff2827            patchFlag = 0;2828            optimized = false;2829            dynamicChildren = null;2830        }2831        if (patchFlag > 0) {2832            // the presence of a patchFlag means this element's render code was2833            // generated by the compiler and can take the fast path.2834            // in this path old node and new node are guaranteed to have the same shape2835            // (i.e. at the exact same position in the source template)2836            if (patchFlag & 16 /* FULL_PROPS */) {2837                // element props contain dynamic keys, full diff needed2838                patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);2839            }2840            else {2841                // class2842                // this flag is matched when the element has dynamic class bindings.2843                if (patchFlag & 2 /* CLASS */) {2844                    if (oldProps.class !== newProps.class) {2845                        hostPatchProp(el, 'class', null, newProps.class, isSVG);2846                    }2847                }2848                // style2849                // this flag is matched when the element has dynamic style bindings2850                if (patchFlag & 4 /* STYLE */) {2851                    hostPatchProp(el, 'style', oldProps.style, newProps.style, isSVG);2852                }2853                // props2854                // This flag is matched when the element has dynamic prop/attr bindings2855                // other than class and style. The keys of dynamic prop/attrs are saved for2856                // faster iteration.2857                // Note dynamic keys like :[foo]="bar" will cause this optimization to2858                // bail out and go through a full diff because we need to unset the old key2859                if (patchFlag & 8 /* PROPS */) {2860                    // if the flag is present then dynamicProps must be non-null2861                    const propsToUpdate = n2.dynamicProps;2862                    for (let i = 0; i < propsToUpdate.length; i++) {2863                        const key = propsToUpdate[i];2864                        const prev = oldProps[key];2865                        const next = newProps[key];2866                        if (prev !== next) {2867                            hostPatchProp(el, key, prev, next, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);2868                        }2869                    }2870                }2871            }2872            // text2873            // This flag is matched when the element has only dynamic text children.2874            if (patchFlag & 1 /* TEXT */) {2875                if (n1.children !== n2.children) {2876                    hostSetElementText(el, n2.children);2877                }2878            }2879        }2880        else if (!optimized && dynamicChildren == null) {2881            // unoptimized, full diff2882            patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);2883        }2884        const areChildrenSVG = isSVG && n2.type !== 'foreignObject';2885        if (dynamicChildren) {2886            patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG);2887        }2888        else if (!optimized) {2889            // full diff2890            patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG);2891        }2892        if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {2893            queuePostRenderEffect(() => {2894                vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);2895                dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated');2896            }, parentSuspense);2897        }2898    };2899    // The fast path for blocks.2900    const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG) => {2901        for (let i = 0; i < newChildren.length; i++) {2902            const oldVNode = oldChildren[i];2903            const newVNode = newChildren[i];2904            // Determine the container (parent element) for the patch.2905            const container = 2906            // - In the case of a Fragment, we need to provide the actual parent2907            // of the Fragment itself so it can move its children.2908            oldVNode.type === Fragment ||2909                // - In the case of different nodes, there is going to be a replacement2910                // which also requires the correct parent container2911                !isSameVNodeType(oldVNode, newVNode) ||2912                // - In the case of a component, it could contain anything.2913                oldVNode.shapeFlag & 6 /* COMPONENT */2914                ? hostParentNode(oldVNode.el)2915                : // In other cases, the parent container is not actually used so we2916                    // just pass the block element here to avoid a DOM parentNode call.2917                    fallbackContainer;2918            patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, true);2919        }2920    };2921    const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {2922        if (oldProps !== newProps) {2923            for (const key in newProps) {2924                if (isReservedProp(key))2925                    continue;2926                const next = newProps[key];2927                const prev = oldProps[key];2928                if (next !== prev) {2929                    hostPatchProp(el, key, prev, next, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);2930                }2931            }2932            if (oldProps !== EMPTY_OBJ) {2933                for (const key in oldProps) {2934                    if (!isReservedProp(key) && !(key in newProps)) {2935                        hostPatchProp(el, key, oldProps[key], null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);2936                    }2937                }2938            }2939        }2940    };2941    const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2942        const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''));2943        const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''));2944        let { patchFlag, dynamicChildren } = n2;2945        if (patchFlag > 0) {2946            optimized = true;2947        }2948        if ( parentComponent && parentComponent.renderUpdated) {2949            // HMR updated, force full diff2950            patchFlag = 0;2951            optimized = false;2952            dynamicChildren = null;2953        }2954        if (n1 == null) {2955            hostInsert(fragmentStartAnchor, container, anchor);2956            hostInsert(fragmentEndAnchor, container, anchor);2957            // a fragment can only have array children2958            // since they are either generated by the compiler, or implicitly created2959            // from arrays.2960            mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);2961        }2962        else {2963            if (patchFlag > 0 &&2964                patchFlag & 64 /* STABLE_FRAGMENT */ &&2965                dynamicChildren) {2966                // a stable fragment (template root or <template v-for>) doesn't need to2967                // patch children order, but it may contain dynamicChildren.2968                patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG);2969            }2970            else {2971                // keyed / unkeyed, or manual fragments.2972                // for keyed & unkeyed, since they are compiler generated from v-for,2973                // each child is guaranteed to be a block so the fragment will never2974                // have dynamicChildren.2975                patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);2976            }2977        }2978    };2979    const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2980        if (n1 == null) {2981            if (n2.shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) {2982                parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized);2983            }2984            else {2985                mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2986            }2987        }2988        else {2989            updateComponent(n1, n2, parentComponent, optimized);2990        }2991    };2992    const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2993        const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense));2994        if ( instance.type.__hmrId) {2995            registerHMR(instance);2996        }2997        {2998            pushWarningContext(initialVNode);2999            startMeasure(instance, `mount`);3000        }3001        // inject renderer internals for keepAlive3002        if (isKeepAlive(initialVNode)) {3003            instance.ctx.renderer = internals;3004        }3005        // resolve props and slots for setup context3006        {3007            startMeasure(instance, `init`);3008        }3009        setupComponent(instance);3010        {3011            endMeasure(instance, `init`);3012        }3013        // setup() is async. This component relies on async logic to be resolved3014        // before proceeding3015        if ( instance.asyncDep) {3016            if (!parentSuspense) {3017                warn('async setup() is used without a suspense boundary!');3018                return;3019            }3020            parentSuspense.registerDep(instance, setupRenderEffect);3021            // Give it a placeholder if this is not hydration3022            if (!initialVNode.el) {3023                const placeholder = (instance.subTree = createVNode(Comment));3024                processCommentNode(null, placeholder, container, anchor);3025            }3026            return;3027        }3028        setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);3029        {3030            popWarningContext();3031            endMeasure(instance, `mount`);3032        }3033    };3034    const updateComponent = (n1, n2, parentComponent, optimized) => {3035        const instance = (n2.component = n1.component);3036        if (shouldUpdateComponent(n1, n2, parentComponent, optimized)) {3037            if (3038                instance.asyncDep &&3039                !instance.asyncResolved) {3040                // async & still pending - just update props and slots3041                // since the component's reactive effect for render isn't set-up yet3042                {3043                    pushWarningContext(n2);3044                }3045                updateComponentPreRender(instance, n2, optimized);3046                {3047                    popWarningContext();3048                }3049                return;3050            }3051            else {3052                // normal update3053                instance.next = n2;3054                // in case the child component is also queued, remove it to avoid3055                // double updating the same child component in the same flush.3056                invalidateJob(instance.update);3057                // instance.update is the reactive effect runner.3058                instance.update();3059            }3060        }3061        else {3062            // no update needed. just copy over properties3063            n2.component = n1.component;3064            n2.el = n1.el;3065        }3066    };3067    const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {3068        // create reactive effect for rendering3069        instance.update = effect(function componentEffect() {3070            if (!instance.isMounted) {3071                let vnodeHook;3072                const { el, props } = initialVNode;3073                const { bm, m, a, parent } = instance;3074                {3075                    startMeasure(instance, `render`);3076                }3077                const subTree = (instance.subTree = renderComponentRoot(instance));3078                {3079                    endMeasure(instance, `render`);3080                }3081                // beforeMount hook3082                if (bm) {3083                    invokeArrayFns(bm);3084                }3085                // onVnodeBeforeMount3086                if ((vnodeHook = props && props.onVnodeBeforeMount)) {3087                    invokeVNodeHook(vnodeHook, parent, initialVNode);3088                }3089                if (el && hydrateNode) {3090                    {3091                        startMeasure(instance, `hydrate`);3092                    }3093                    // vnode has adopted host node - perform hydration instead of mount.3094                    hydrateNode(initialVNode.el, subTree, instance, parentSuspense);3095                    {3096                        endMeasure(instance, `hydrate`);3097                    }3098                }3099                else {3100                    {3101                        startMeasure(instance, `patch`);3102                    }3103                    patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);3104                    {3105                        endMeasure(instance, `patch`);3106                    }3107                    initialVNode.el = subTree.el;3108                }3109                // mounted hook3110                if (m) {3111                    queuePostRenderEffect(m, parentSuspense);3112                }3113                // onVnodeMounted3114                if ((vnodeHook = props && props.onVnodeMounted)) {3115                    queuePostRenderEffect(() => {3116                        invokeVNodeHook(vnodeHook, parent, initialVNode);3117                    }, parentSuspense);3118                }3119                // activated hook for keep-alive roots.3120                if (a &&3121                    initialVNode.shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {3122                    queuePostRenderEffect(a, parentSuspense);3123                }3124                instance.isMounted = true;3125            }3126            else {3127                // updateComponent3128                // This is triggered by mutation of component's own state (next: null)3129                // OR parent calling processComponent (next: VNode)3130                let { next, bu, u, parent, vnode } = instance;3131                let vnodeHook;3132                {3133                    pushWarningContext(next || instance.vnode);3134                }3135                if (next) {3136                    updateComponentPreRender(instance, next, optimized);3137                }3138                else {3139                    next = vnode;3140                }3141                {3142                    startMeasure(instance, `render`);3143                }3144                const nextTree = renderComponentRoot(instance);3145                {3146                    endMeasure(instance, `render`);3147                }3148                const prevTree = instance.subTree;3149                instance.subTree = nextTree;3150                next.el = vnode.el;3151                // beforeUpdate hook3152                if (bu) {3153                    invokeArrayFns(bu);3154                }3155                // onVnodeBeforeUpdate3156                if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {3157                    invokeVNodeHook(vnodeHook, parent, next, vnode);3158                }3159                // reset refs3160                // only needed if previous patch had refs3161                if (instance.refs !== EMPTY_OBJ) {3162                    instance.refs = {};3163                }3164                {3165                    startMeasure(instance, `patch`);3166                }3167                patch(prevTree, nextTree, 3168                // parent may have changed if it's in a teleport3169                hostParentNode(prevTree.el), 3170                // anchor may have changed if it's in a fragment3171                getNextHostNode(prevTree), instance, parentSuspense, isSVG);3172                {3173                    endMeasure(instance, `patch`);3174                }3175                next.el = nextTree.el;3176                if (next === null) {3177                    // self-triggered update. In case of HOC, update parent component3178                    // vnode el. HOC is indicated by parent instance's subTree pointing3179                    // to child component's vnode3180                    updateHOCHostEl(instance, nextTree.el);3181                }3182                // updated hook3183                if (u) {3184                    queuePostRenderEffect(u, parentSuspense);3185                }3186                // onVnodeUpdated3187                if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {3188                    queuePostRenderEffect(() => {3189                        invokeVNodeHook(vnodeHook, parent, next, vnode);3190                    }, parentSuspense);3191                }3192                {3193                    popWarningContext();3194                }3195            }3196        },  createDevEffectOptions(instance) );3197    };3198    const updateComponentPreRender = (instance, nextVNode, optimized) => {3199        nextVNode.component = instance;3200        const prevProps = instance.vnode.props;3201        instance.vnode = nextVNode;3202        instance.next = null;3203        updateProps(instance, nextVNode.props, prevProps, optimized);3204        updateSlots(instance, nextVNode.children);3205    };3206    const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) => {3207        const c1 = n1 && n1.children;3208        const prevShapeFlag = n1 ? n1.shapeFlag : 0;3209        const c2 = n2.children;3210        const { patchFlag, shapeFlag } = n2;3211        // fast path3212        if (patchFlag > 0) {3213            if (patchFlag & 128 /* KEYED_FRAGMENT */) {3214                // this could be either fully-keyed or mixed (some keyed some not)3215                // presence of patchFlag means children are guaranteed to be arrays3216                patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3217                return;3218            }3219            else if (patchFlag & 256 /* UNKEYED_FRAGMENT */) {3220                // unkeyed3221                patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3222                return;3223            }3224        }3225        // children has 3 possibilities: text, array or no children.3226        if (shapeFlag & 8 /* TEXT_CHILDREN */) {3227            // text children fast path3228            if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {3229                unmountChildren(c1, parentComponent, parentSuspense);3230            }3231            if (c2 !== c1) {3232                hostSetElementText(container, c2);3233            }3234        }3235        else {3236            if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {3237                // prev children was array3238                if (shapeFlag & 16 /* ARRAY_CHILDREN */) {3239                    // two arrays, cannot assume anything, do full diff3240                    patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3241                }3242                else {3243                    // no new children, just unmount old3244                    unmountChildren(c1, parentComponent, parentSuspense, true);3245                }3246            }3247            else {3248                // prev children was text OR null3249                // new children is array OR null3250                if (prevShapeFlag & 8 /* TEXT_CHILDREN */) {3251                    hostSetElementText(container, '');3252                }3253                // mount new if array3254                if (shapeFlag & 16 /* ARRAY_CHILDREN */) {3255                    mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3256                }3257            }3258        }3259    };3260    const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {3261        c1 = c1 || EMPTY_ARR;3262        c2 = c2 || EMPTY_ARR;3263        const oldLength = c1.length;3264        const newLength = c2.length;3265        const commonLength = Math.min(oldLength, newLength);3266        let i;3267        for (i = 0; i < commonLength; i++) {3268            const nextChild = (c2[i] = optimized3269                ? cloneIfMounted(c2[i])3270                : normalizeVNode(c2[i]));3271            patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, optimized);3272        }3273        if (oldLength > newLength) {3274            // remove old3275            unmountChildren(c1, parentComponent, parentSuspense, true, commonLength);3276        }3277        else {3278            // mount new3279            mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, commonLength);3280        }3281    };3282    // can be all-keyed or mixed3283    const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) => {3284        let i = 0;3285        const l2 = c2.length;3286        let e1 = c1.length - 1; // prev ending index3287        let e2 = l2 - 1; // next ending index3288        // 1. sync from start3289        // (a b) c3290        // (a b) d e3291        while (i <= e1 && i <= e2) {3292            const n1 = c1[i];3293            const n2 = (c2[i] = optimized3294                ? cloneIfMounted(c2[i])3295                : normalizeVNode(c2[i]));3296            if (isSameVNodeType(n1, n2)) {3297                patch(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized);3298            }3299            else {3300                break;3301            }3302            i++;3303        }3304        // 2. sync from end3305        // a (b c)3306        // d e (b c)3307        while (i <= e1 && i <= e2) {3308            const n1 = c1[e1];3309            const n2 = (c2[e2] = optimized3310                ? cloneIfMounted(c2[e2])3311                : normalizeVNode(c2[e2]));3312            if (isSameVNodeType(n1, n2)) {3313                patch(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized);3314            }3315            else {3316                break;3317            }3318            e1--;3319            e2--;3320        }3321        // 3. common sequence + mount3322        // (a b)3323        // (a b) c3324        // i = 2, e1 = 1, e2 = 23325        // (a b)3326        // c (a b)3327        // i = 0, e1 = -1, e2 = 03328        if (i > e1) {3329            if (i <= e2) {3330                const nextPos = e2 + 1;3331                const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;3332                while (i <= e2) {3333                    patch(null, (c2[i] = optimized3334                        ? cloneIfMounted(c2[i])3335                        : normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG);3336                    i++;3337                }3338            }3339        }3340        // 4. common sequence + unmount3341        // (a b) c3342        // (a b)3343        // i = 2, e1 = 2, e2 = 13344        // a (b c)3345        // (b c)3346        // i = 0, e1 = 0, e2 = -13347        else if (i > e2) {3348            while (i <= e1) {3349                unmount(c1[i], parentComponent, parentSuspense, true);3350                i++;3351            }3352        }3353        // 5. unknown sequence3354        // [i ... e1 + 1]: a b [c d e] f g3355        // [i ... e2 + 1]: a b [e d c h] f g3356        // i = 2, e1 = 4, e2 = 53357        else {3358            const s1 = i; // prev starting index3359            const s2 = i; // next starting index3360            // 5.1 build key:index map for newChildren3361            const keyToNewIndexMap = new Map();3362            for (i = s2; i <= e2; i++) {3363                const nextChild = (c2[i] = optimized3364                    ? cloneIfMounted(c2[i])3365                    : normalizeVNode(c2[i]));3366                if (nextChild.key != null) {3367                    if ( keyToNewIndexMap.has(nextChild.key)) {3368                        warn(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);3369                    }3370                    keyToNewIndexMap.set(nextChild.key, i);3371                }3372            }3373            // 5.2 loop through old children left to be patched and try to patch3374            // matching nodes & remove nodes that are no longer present3375            let j;3376            let patched = 0;3377            const toBePatched = e2 - s2 + 1;3378            let moved = false;3379            // used to track whether any node has moved3380            let maxNewIndexSoFar = 0;3381            // works as Map<newIndex, oldIndex>3382            // Note that oldIndex is offset by +13383            // and oldIndex = 0 is a special value indicating the new node has3384            // no corresponding old node.3385            // used for determining longest stable subsequence3386            const newIndexToOldIndexMap = new Array(toBePatched);3387            for (i = 0; i < toBePatched; i++)3388                newIndexToOldIndexMap[i] = 0;3389            for (i = s1; i <= e1; i++) {3390                const prevChild = c1[i];3391                if (patched >= toBePatched) {3392                    // all new children have been patched so this can only be a removal3393                    unmount(prevChild, parentComponent, parentSuspense, true);3394                    continue;3395                }3396                let newIndex;3397                if (prevChild.key != null) {3398                    newIndex = keyToNewIndexMap.get(prevChild.key);3399                }3400                else {3401                    // key-less node, try to locate a key-less node of the same type3402                    for (j = s2; j <= e2; j++) {3403                        if (newIndexToOldIndexMap[j - s2] === 0 &&3404                            isSameVNodeType(prevChild, c2[j])) {3405                            newIndex = j;3406                            break;3407                        }3408                    }3409                }3410                if (newIndex === undefined) {3411                    unmount(prevChild, parentComponent, parentSuspense, true);3412                }3413                else {3414                    newIndexToOldIndexMap[newIndex - s2] = i + 1;3415                    if (newIndex >= maxNewIndexSoFar) {3416                        maxNewIndexSoFar = newIndex;3417                    }3418                    else {3419                        moved = true;3420                    }3421                    patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, optimized);3422                    patched++;3423                }3424            }3425            // 5.3 move and mount3426            // generate longest stable subsequence only when nodes have moved3427            const increasingNewIndexSequence = moved3428                ? getSequence(newIndexToOldIndexMap)3429                : EMPTY_ARR;3430            j = increasingNewIndexSequence.length - 1;3431            // looping backwards so that we can use last patched node as anchor3432            for (i = toBePatched - 1; i >= 0; i--) {3433                const nextIndex = s2 + i;3434                const nextChild = c2[nextIndex];3435                const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;3436                if (newIndexToOldIndexMap[i] === 0) {3437                    // mount new3438                    patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG);3439                }3440                else if (moved) {3441                    // move if:3442                    // There is no stable subsequence (e.g. a reverse)3443                    // OR current node is not among the stable sequence3444                    if (j < 0 || i !== increasingNewIndexSequence[j]) {3445                        move(nextChild, container, anchor, 2 /* REORDER */);3446                    }3447                    else {3448                        j--;3449                    }3450                }3451            }3452        }3453    };3454    const move = (vnode, container, anchor, moveType, parentSuspense = null) => {3455        const { el, type, transition, children, shapeFlag } = vnode;3456        if (shapeFlag & 6 /* COMPONENT */) {3457            move(vnode.component.subTree, container, anchor, moveType);3458            return;3459        }3460        if ( shapeFlag & 128 /* SUSPENSE */) {3461            vnode.suspense.move(container, anchor, moveType);3462            return;3463        }3464        if (shapeFlag & 64 /* TELEPORT */) {3465            type.move(vnode, container, anchor, internals);3466            return;3467        }3468        if (type === Fragment) {3469            hostInsert(el, container, anchor);3470            for (let i = 0; i < children.length; i++) {3471                move(children[i], container, anchor, moveType);3472            }3473            hostInsert(vnode.anchor, container, anchor);3474            return;3475        }3476        // single nodes3477        const needTransition = moveType !== 2 /* REORDER */ &&3478            shapeFlag & 1 /* ELEMENT */ &&3479            transition;3480        if (needTransition) {3481            if (moveType === 0 /* ENTER */) {3482                transition.beforeEnter(el);3483                hostInsert(el, container, anchor);3484                queuePostRenderEffect(() => transition.enter(el), parentSuspense);3485            }3486            else {3487                const { leave, delayLeave, afterLeave } = transition;3488                const remove = () => hostInsert(el, container, anchor);3489                const performLeave = () => {3490                    leave(el, () => {3491                        remove();3492                        afterLeave && afterLeave();3493                    });3494                };3495                if (delayLeave) {3496                    delayLeave(el, remove, performLeave);3497                }3498                else {3499                    performLeave();3500                }3501            }3502        }3503        else {3504            hostInsert(el, container, anchor);3505        }3506    };3507    const unmount = (vnode, parentComponent, parentSuspense, doRemove = false) => {3508        const { props, ref, children, dynamicChildren, shapeFlag, dirs } = vnode;3509        const shouldInvokeDirs = shapeFlag & 1 /* ELEMENT */ && dirs;3510        const shouldKeepAlive = shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */;3511        let vnodeHook;3512        // unset ref3513        if (ref != null && parentComponent) {3514            setRef(ref, null, parentComponent, null);3515        }3516        if ((vnodeHook = props && props.onVnodeBeforeUnmount) && !shouldKeepAlive) {3517            invokeVNodeHook(vnodeHook, parentComponent, vnode);3518        }3519        if (shapeFlag & 6 /* COMPONENT */) {3520            if (shouldKeepAlive) {3521                parentComponent.ctx.deactivate(vnode);3522            }3523            else {3524                unmountComponent(vnode.component, parentSuspense, doRemove);3525            }3526        }3527        else {3528            if ( shapeFlag & 128 /* SUSPENSE */) {3529                vnode.suspense.unmount(parentSuspense, doRemove);3530                return;3531            }3532            if (shouldInvokeDirs) {3533                invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount');3534            }3535            if (dynamicChildren) {3536                // fast path for block nodes: only need to unmount dynamic children.3537                unmountChildren(dynamicChildren, parentComponent, parentSuspense);3538            }3539            else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {3540                unmountChildren(children, parentComponent, parentSuspense);3541            }3542            // an unmounted teleport should always remove its children3543            if (shapeFlag & 64 /* TELEPORT */) {3544                vnode.type.remove(vnode, internals);3545            }3546            if (doRemove) {3547                remove(vnode);3548            }3549        }3550        if (((vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) &&3551            !shouldKeepAlive) {3552            queuePostRenderEffect(() => {3553                vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);3554                shouldInvokeDirs &&3555                    invokeDirectiveHook(vnode, null, parentComponent, 'unmounted');3556            }, parentSuspense);3557        }3558    };3559    const remove = vnode => {3560        const { type, el, anchor, transition } = vnode;3561        if (type === Fragment) {3562            removeFragment(el, anchor);3563            return;3564        }3565        const performRemove = () => {3566            hostRemove(el);3567            if (transition && !transition.persisted && transition.afterLeave) {3568                transition.afterLeave();3569            }3570        };3571        if (vnode.shapeFlag & 1 /* ELEMENT */ &&3572            transition &&3573            !transition.persisted) {3574            const { leave, delayLeave } = transition;3575            const performLeave = () => leave(el, performRemove);3576            if (delayLeave) {3577                delayLeave(vnode.el, performRemove, performLeave);3578            }3579            else {3580                performLeave();3581            }3582        }3583        else {3584            performRemove();3585        }3586    };3587    const removeFragment = (cur, end) => {3588        // For fragments, directly remove all contained DOM nodes.3589        // (fragment child nodes cannot have transition)3590        let next;3591        while (cur !== end) {3592            next = hostNextSibling(cur);3593            hostRemove(cur);3594            cur = next;3595        }3596        hostRemove(end);3597    };3598    const unmountComponent = (instance, parentSuspense, doRemove) => {3599        if ( instance.type.__hmrId) {3600            unregisterHMR(instance);3601        }3602        const { bum, effects, update, subTree, um, da, isDeactivated } = instance;3603        // beforeUnmount hook3604        if (bum) {3605            invokeArrayFns(bum);3606        }3607        if (effects) {3608            for (let i = 0; i < effects.length; i++) {3609                stop(effects[i]);3610            }3611        }3612        // update may be null if a component is unmounted before its async3613        // setup has resolved.3614        if (update) {
...

runtime-core.esm-bundler.js

Source:runtime-core.esm-bundler.js

...1728        reload: tryWrap(reload)1729    };1730}1731const map = new Map();1732function registerHMR(instance) {1733    map.get(instance.type.__hmrId).instances.add(instance);1734}1735function unregisterHMR(instance) {1736    map.get(instance.type.__hmrId).instances.delete(instance);1737}1738function createRecord(id, comp) {1739    if (map.has(id)) {1740        return false;1741    }1742    map.set(id, {1743        comp,1744        instances: new Set()1745    });1746    return true;1747}1748function rerender(id, newRender) {1749    // Array.from creates a snapshot which avoids the set being mutated during1750    // updates1751    Array.from(map.get(id).instances).forEach(instance => {1752        if (newRender) {1753            instance.render = newRender;1754        }1755        instance.renderCache = [];1756        // this flag forces child components with slot content to update1757        instance.renderUpdated = true;1758        instance.update();1759        instance.renderUpdated = false;1760    });1761}1762function reload(id, newComp) {1763    const record = map.get(id);1764    // 1. Update existing comp definition to match new one1765    const comp = record.comp;1766    Object.assign(comp, newComp);1767    for (const key in comp) {1768        if (!(key in newComp)) {1769            delete comp[key];1770        }1771    }1772    // 2. Mark component dirty. This forces the renderer to replace the component1773    // on patch.1774    comp.__hmrUpdated = true;1775    // Array.from creates a snapshot which avoids the set being mutated during1776    // updates1777    Array.from(record.instances).forEach(instance => {1778        if (instance.parent) {1779            // 3. Force the parent instance to re-render. This will cause all updated1780            // components to be unmounted and re-mounted. Queue the update so that we1781            // don't end up forcing the same parent to re-render multiple times.1782            queueJob(instance.parent.update);1783        }1784        else if (instance.appContext.reload) {1785            // root instance mounted via createApp() has a reload method1786            instance.appContext.reload();1787        }1788        else if (typeof window !== 'undefined') {1789            // root instance inside tree created via raw render(). Force reload.1790            window.location.reload();1791        }1792        else {1793            console.warn('[HMR] Root or manually mounted instance modified. Full reload required.');1794        }1795    });1796    // 4. Make sure to unmark the component after the reload.1797    queuePostFlushCb(() => {1798        comp.__hmrUpdated = false;1799    });1800}1801function tryWrap(fn) {1802    return (id, arg) => {1803        try {1804            return fn(id, arg);1805        }1806        catch (e) {1807            console.error(e);1808            console.warn(`[HMR] Something went wrong during Vue component hot-reload. ` +1809                `Full reload required.`);1810        }1811    };1812}1813const __HMR__ =  (process.env.NODE_ENV !== 'production');1814const prodEffectOptions = {1815    scheduler: queueJob1816};1817function createDevEffectOptions(instance) {1818    return {1819        scheduler: queueJob,1820        onTrack: instance.rtc ? e => invokeHooks(instance.rtc, e) : void 0,1821        onTrigger: instance.rtg ? e => invokeHooks(instance.rtg, e) : void 01822    };1823}1824function invokeHooks(hooks, arg) {1825    for (let i = 0; i < hooks.length; i++) {1826        hooks[i](arg);1827    }1828}1829const queuePostRenderEffect =  queueEffectWithSuspense1830    ;1831/**1832 * The createRenderer function accepts two generic arguments:1833 * HostNode and HostElement, corresponding to Node and Element types in the1834 * host environment. For example, for runtime-dom, HostNode would be the DOM1835 * `Node` interface and HostElement would be the DOM `Element` interface.1836 *1837 * Custom renderers can pass in the platform specific types like this:1838 *1839 * ``` js1840 * const { render, createApp } = createRenderer<Node, Element>({1841 *   patchProp,1842 *   ...nodeOps1843 * })1844 * ```1845 */1846function createRenderer(options) {1847    const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, querySelector: hostQuerySelector, setScopeId: hostSetScopeId = NOOP, cloneNode: hostCloneNode, insertStaticContent: hostInsertStaticContent } = options;1848    const internals = {1849        patch,1850        unmount,1851        move,1852        next: getNextHostNode,1853        options1854    };1855    function patch(n1, // null means this is a mount1856    n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, optimized = false) {1857        // patching & not same type, unmount old tree1858        if (n1 != null && !isSameVNodeType(n1, n2)) {1859            anchor = getNextHostNode(n1);1860            unmount(n1, parentComponent, parentSuspense, true);1861            n1 = null;1862        }1863        const { type, shapeFlag } = n2;1864        switch (type) {1865            case Text:1866                processText(n1, n2, container, anchor);1867                break;1868            case Comment:1869                processCommentNode(n1, n2, container, anchor);1870                break;1871            case Static:1872                if (n1 == null) {1873                    mountStaticNode(n2, container, anchor, isSVG);1874                } // static nodes are noop on patch1875                break;1876            case Fragment:1877                processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1878                break;1879            case Portal:1880                processPortal(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1881                break;1882            default:1883                if (shapeFlag & 1 /* ELEMENT */) {1884                    processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1885                }1886                else if (shapeFlag & 6 /* COMPONENT */) {1887                    processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1888                }1889                else if ( shapeFlag & 64 /* SUSPENSE */) {1890                    type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);1891                }1892                else if ((process.env.NODE_ENV !== 'production')) {1893                    warn('Invalid HostVNode type:', type, `(${typeof type})`);1894                }1895        }1896    }1897    function processText(n1, n2, container, anchor) {1898        if (n1 == null) {1899            hostInsert((n2.el = hostCreateText(n2.children)), container, anchor);1900        }1901        else {1902            const el = (n2.el = n1.el);1903            if (n2.children !== n1.children) {1904                hostSetText(el, n2.children);1905            }1906        }1907    }1908    function processCommentNode(n1, n2, container, anchor) {1909        if (n1 == null) {1910            hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor);1911        }1912        else {1913            // there's no support for dynamic comments1914            n2.el = n1.el;1915        }1916    }1917    function mountStaticNode(n2, container, anchor, isSVG) {1918        if (n2.el != null && hostCloneNode !== undefined) {1919            hostInsert(hostCloneNode(n2.el), container, anchor);1920        }1921        else {1922            // static nodes are only present when used with compiler-dom/runtime-dom1923            // which guarantees presence of hostInsertStaticContent.1924            n2.el = hostInsertStaticContent(n2.children, container, anchor, isSVG);1925        }1926    }1927    function processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1928        isSVG = isSVG || n2.type === 'svg';1929        if (n1 == null) {1930            mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1931        }1932        else {1933            patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized);1934        }1935        if (n2.ref !== null && parentComponent !== null) {1936            setRef(n2.ref, n1 && n1.ref, parentComponent, n2.el);1937        }1938    }1939    function mountElement(vnode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {1940        let el;1941        const { type, props, shapeFlag, transition, scopeId, patchFlag } = vnode;1942        if (vnode.el !== null &&1943            hostCloneNode !== undefined &&1944            patchFlag === -1 /* HOISTED */) {1945            // If a vnode has non-null el, it means it's being reused.1946            // Only static vnodes can be reused, so its mounted DOM nodes should be1947            // exactly the same, and we can simply do a clone here.1948            el = vnode.el = hostCloneNode(vnode.el);1949        }1950        else {1951            el = vnode.el = hostCreateElement(vnode.type, isSVG);1952            // props1953            if (props != null) {1954                for (const key in props) {1955                    if (isReservedProp(key))1956                        continue;1957                    hostPatchProp(el, key, props[key], null, isSVG);1958                }1959                if (props.onVnodeBeforeMount != null) {1960                    invokeDirectiveHook(props.onVnodeBeforeMount, parentComponent, vnode);1961                }1962            }1963            // scopeId1964            {1965                if (scopeId !== null) {1966                    hostSetScopeId(el, scopeId);1967                }1968                const treeOwnerId = parentComponent && parentComponent.type.__scopeId;1969                // vnode's own scopeId and the current patched component's scopeId is1970                // different - this is a slot content node.1971                if (treeOwnerId != null && treeOwnerId !== scopeId) {1972                    hostSetScopeId(el, treeOwnerId + '-s');1973                }1974            }1975            // children1976            if (shapeFlag & 8 /* TEXT_CHILDREN */) {1977                hostSetElementText(el, vnode.children);1978            }1979            else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1980                mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG && type !== 'foreignObject', optimized || vnode.dynamicChildren !== null);1981            }1982            if (transition != null && !transition.persisted) {1983                transition.beforeEnter(el);1984            }1985        }1986        hostInsert(el, container, anchor);1987        const vnodeMountedHook = props && props.onVnodeMounted;1988        if (vnodeMountedHook != null ||1989            (transition != null && !transition.persisted)) {1990            queuePostRenderEffect(() => {1991                vnodeMountedHook &&1992                    invokeDirectiveHook(vnodeMountedHook, parentComponent, vnode);1993                transition && !transition.persisted && transition.enter(el);1994            }, parentSuspense);1995        }1996    }1997    function mountChildren(children, container, anchor, parentComponent, parentSuspense, isSVG, optimized, start = 0) {1998        for (let i = start; i < children.length; i++) {1999            const child = (children[i] = optimized2000                ? cloneIfMounted(children[i])2001                : normalizeVNode(children[i]));2002            patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2003        }2004    }2005    function patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized) {2006        const el = (n2.el = n1.el);2007        let { patchFlag, dynamicChildren } = n2;2008        const oldProps = (n1 && n1.props) || EMPTY_OBJ;2009        const newProps = n2.props || EMPTY_OBJ;2010        if (newProps.onVnodeBeforeUpdate != null) {2011            invokeDirectiveHook(newProps.onVnodeBeforeUpdate, parentComponent, n2, n1);2012        }2013        if (__HMR__ && parentComponent && parentComponent.renderUpdated) {2014            // HMR updated, force full diff2015            patchFlag = 0;2016            optimized = false;2017            dynamicChildren = null;2018        }2019        if (patchFlag > 0) {2020            // the presence of a patchFlag means this element's render code was2021            // generated by the compiler and can take the fast path.2022            // in this path old node and new node are guaranteed to have the same shape2023            // (i.e. at the exact same position in the source template)2024            if (patchFlag & 16 /* FULL_PROPS */) {2025                // element props contain dynamic keys, full diff needed2026                patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);2027            }2028            else {2029                // class2030                // this flag is matched when the element has dynamic class bindings.2031                if (patchFlag & 2 /* CLASS */) {2032                    if (oldProps.class !== newProps.class) {2033                        hostPatchProp(el, 'class', newProps.class, null, isSVG);2034                    }2035                }2036                // style2037                // this flag is matched when the element has dynamic style bindings2038                if (patchFlag & 4 /* STYLE */) {2039                    hostPatchProp(el, 'style', newProps.style, oldProps.style, isSVG);2040                }2041                // props2042                // This flag is matched when the element has dynamic prop/attr bindings2043                // other than class and style. The keys of dynamic prop/attrs are saved for2044                // faster iteration.2045                // Note dynamic keys like :[foo]="bar" will cause this optimization to2046                // bail out and go through a full diff because we need to unset the old key2047                if (patchFlag & 8 /* PROPS */) {2048                    // if the flag is present then dynamicProps must be non-null2049                    const propsToUpdate = n2.dynamicProps;2050                    for (let i = 0; i < propsToUpdate.length; i++) {2051                        const key = propsToUpdate[i];2052                        const prev = oldProps[key];2053                        const next = newProps[key];2054                        if (prev !== next) {2055                            hostPatchProp(el, key, next, prev, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);2056                        }2057                    }2058                }2059            }2060            // text2061            // This flag is matched when the element has only dynamic text children.2062            if (patchFlag & 1 /* TEXT */) {2063                if (n1.children !== n2.children) {2064                    hostSetElementText(el, n2.children);2065                }2066            }2067        }2068        else if (!optimized && dynamicChildren == null) {2069            // unoptimized, full diff2070            patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);2071        }2072        const areChildrenSVG = isSVG && n2.type !== 'foreignObject';2073        if (dynamicChildren != null) {2074            patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG);2075        }2076        else if (!optimized) {2077            // full diff2078            patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG);2079        }2080        if (newProps.onVnodeUpdated != null) {2081            queuePostRenderEffect(() => {2082                invokeDirectiveHook(newProps.onVnodeUpdated, parentComponent, n2, n1);2083            }, parentSuspense);2084        }2085    }2086    // The fast path for blocks.2087    function patchBlockChildren(oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG) {2088        for (let i = 0; i < newChildren.length; i++) {2089            const oldVNode = oldChildren[i];2090            const newVNode = newChildren[i];2091            // Determine the container (parent element) for the patch.2092            const container = 2093            // - In the case of a Fragment, we need to provide the actual parent2094            // of the Fragment itself so it can move its children.2095            oldVNode.type === Fragment ||2096                // - In the case of different nodes, there is going to be a replacement2097                // which also requires the correct parent container2098                !isSameVNodeType(oldVNode, newVNode) ||2099                // - In the case of a component, it could contain anything.2100                oldVNode.shapeFlag & 6 /* COMPONENT */2101                ? hostParentNode(oldVNode.el)2102                : // In other cases, the parent container is not actually used so we2103                    // just pass the block element here to avoid a DOM parentNode call.2104                    fallbackContainer;2105            patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, true);2106        }2107    }2108    function patchProps(el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) {2109        if (oldProps !== newProps) {2110            for (const key in newProps) {2111                if (isReservedProp(key))2112                    continue;2113                const next = newProps[key];2114                const prev = oldProps[key];2115                if (next !== prev) {2116                    hostPatchProp(el, key, next, prev, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);2117                }2118            }2119            if (oldProps !== EMPTY_OBJ) {2120                for (const key in oldProps) {2121                    if (!isReservedProp(key) && !(key in newProps)) {2122                        hostPatchProp(el, key, null, null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);2123                    }2124                }2125            }2126        }2127    }2128    let devFragmentID = 0;2129    function processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2130        const showID = (process.env.NODE_ENV !== 'production') && !(process.env.NODE_ENV === 'test');2131        const fragmentStartAnchor = (n2.el = n12132            ? n1.el2133            : hostCreateComment(showID ? `fragment-${devFragmentID}-start` : ''));2134        const fragmentEndAnchor = (n2.anchor = n12135            ? n1.anchor2136            : hostCreateComment(showID ? `fragment-${devFragmentID}-end` : ''));2137        let { patchFlag, dynamicChildren } = n2;2138        if (patchFlag > 0) {2139            optimized = true;2140        }2141        if (__HMR__ && parentComponent && parentComponent.renderUpdated) {2142            // HMR updated, force full diff2143            patchFlag = 0;2144            optimized = false;2145            dynamicChildren = null;2146        }2147        if (n1 == null) {2148            if (showID) {2149                devFragmentID++;2150            }2151            hostInsert(fragmentStartAnchor, container, anchor);2152            hostInsert(fragmentEndAnchor, container, anchor);2153            // a fragment can only have array children2154            // since they are either generated by the compiler, or implicitly created2155            // from arrays.2156            mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);2157        }2158        else {2159            if (patchFlag & 64 /* STABLE_FRAGMENT */ && dynamicChildren != null) {2160                // a stable fragment (template root or <template v-for>) doesn't need to2161                // patch children order, but it may contain dynamicChildren.2162                patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG);2163            }2164            else {2165                // keyed / unkeyed, or manual fragments.2166                // for keyed & unkeyed, since they are compiler generated from v-for,2167                // each child is guaranteed to be a block so the fragment will never2168                // have dynamicChildren.2169                patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);2170            }2171        }2172    }2173    function processPortal(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2174        const targetSelector = n2.props && n2.props.target;2175        const { patchFlag, shapeFlag, children } = n2;2176        if (n1 == null) {2177            if ((process.env.NODE_ENV !== 'production') && isString(targetSelector) && !hostQuerySelector) {2178                warn(`Current renderer does not support string target for Portals. ` +2179                    `(missing querySelector renderer option)`);2180            }2181            const target = (n2.target = isString(targetSelector)2182                ? hostQuerySelector(targetSelector)2183                : targetSelector);2184            if (target != null) {2185                if (shapeFlag & 8 /* TEXT_CHILDREN */) {2186                    hostSetElementText(target, children);2187                }2188                else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {2189                    mountChildren(children, target, null, parentComponent, parentSuspense, isSVG, optimized);2190                }2191            }2192            else if ((process.env.NODE_ENV !== 'production')) {2193                warn('Invalid Portal target on mount:', target, `(${typeof target})`);2194            }2195        }2196        else {2197            // update content2198            const target = (n2.target = n1.target);2199            if (patchFlag === 1 /* TEXT */) {2200                hostSetElementText(target, children);2201            }2202            else if (n2.dynamicChildren) {2203                // fast path when the portal happens to be a block root2204                patchBlockChildren(n1.dynamicChildren, n2.dynamicChildren, container, parentComponent, parentSuspense, isSVG);2205            }2206            else if (!optimized) {2207                patchChildren(n1, n2, target, null, parentComponent, parentSuspense, isSVG);2208            }2209            // target changed2210            if (targetSelector !== (n1.props && n1.props.target)) {2211                const nextTarget = (n2.target = isString(targetSelector)2212                    ? hostQuerySelector(targetSelector)2213                    : targetSelector);2214                if (nextTarget != null) {2215                    // move content2216                    if (shapeFlag & 8 /* TEXT_CHILDREN */) {2217                        hostSetElementText(target, '');2218                        hostSetElementText(nextTarget, children);2219                    }2220                    else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {2221                        for (let i = 0; i < children.length; i++) {2222                            move(children[i], nextTarget, null, 2 /* REORDER */);2223                        }2224                    }2225                }2226                else if ((process.env.NODE_ENV !== 'production')) {2227                    warn('Invalid Portal target on update:', target, `(${typeof target})`);2228                }2229            }2230        }2231        // insert an empty node as the placeholder for the portal2232        processCommentNode(n1, n2, container, anchor);2233    }2234    function processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2235        if (n1 == null) {2236            if (n2.shapeFlag & 256 /* COMPONENT_KEPT_ALIVE */) {2237                parentComponent.sink.activate(n2, container, anchor);2238            }2239            else {2240                mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG);2241            }2242        }2243        else {2244            const instance = (n2.component = n1.component);2245            if (shouldUpdateComponent(n1, n2, parentComponent, optimized)) {2246                if (2247                    instance.asyncDep &&2248                    !instance.asyncResolved) {2249                    // async & still pending - just update props and slots2250                    // since the component's reactive effect for render isn't set-up yet2251                    if ((process.env.NODE_ENV !== 'production')) {2252                        pushWarningContext(n2);2253                    }2254                    updateComponentPreRender(instance, n2);2255                    if ((process.env.NODE_ENV !== 'production')) {2256                        popWarningContext();2257                    }2258                    return;2259                }2260                else {2261                    // normal update2262                    instance.next = n2;2263                    // in case the child component is also queued, remove it to avoid2264                    // double updating the same child component in the same flush.2265                    invalidateJob(instance.update);2266                    // instance.update is the reactive effect runner.2267                    instance.update();2268                }2269            }2270            else {2271                // no update needed. just copy over properties2272                n2.component = n1.component;2273                n2.el = n1.el;2274            }2275        }2276        if (n2.ref !== null && parentComponent !== null) {2277            if ((process.env.NODE_ENV !== 'production') && !(n2.shapeFlag & 4 /* STATEFUL_COMPONENT */)) {2278                pushWarningContext(n2);2279                warn(`Functional components do not support "ref" because they do not ` +2280                    `have instances.`);2281                popWarningContext();2282            }2283            setRef(n2.ref, n1 && n1.ref, parentComponent, n2.component.proxy);2284        }2285    }2286    function mountComponent(initialVNode, container, anchor, parentComponent, parentSuspense, isSVG) {2287        const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent));2288        if (__HMR__ && instance.type.__hmrId != null) {2289            registerHMR(instance);2290        }2291        if ((process.env.NODE_ENV !== 'production')) {2292            pushWarningContext(initialVNode);2293        }2294        // inject renderer internals for keepAlive2295        if (isKeepAlive(initialVNode)) {2296            const sink = instance.sink;2297            sink.renderer = internals;2298            sink.parentSuspense = parentSuspense;2299        }2300        // resolve props and slots for setup context2301        setupComponent(instance, parentSuspense);2302        // setup() is async. This component relies on async logic to be resolved2303        // before proceeding2304        if ( instance.asyncDep) {2305            if (!parentSuspense) {2306                if ((process.env.NODE_ENV !== 'production'))2307                    warn('async setup() is used without a suspense boundary!');2308                return;2309            }2310            parentSuspense.registerDep(instance, setupRenderEffect);2311            // give it a placeholder2312            const placeholder = (instance.subTree = createVNode(Comment));2313            processCommentNode(null, placeholder, container, anchor);2314            initialVNode.el = placeholder.el;2315            return;2316        }2317        setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG);2318        if ((process.env.NODE_ENV !== 'production')) {2319            popWarningContext();2320        }2321    }2322    function setupRenderEffect(instance, parentSuspense, initialVNode, container, anchor, isSVG) {2323        // create reactive effect for rendering2324        instance.update = effect(function componentEffect() {2325            if (!instance.isMounted) {2326                const subTree = (instance.subTree = renderComponentRoot(instance));2327                // beforeMount hook2328                if (instance.bm !== null) {2329                    invokeHooks(instance.bm);2330                }2331                patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);2332                initialVNode.el = subTree.el;2333                // mounted hook2334                if (instance.m !== null) {2335                    queuePostRenderEffect(instance.m, parentSuspense);2336                }2337                // activated hook for keep-alive roots.2338                if (instance.a !== null &&2339                    instance.vnode.shapeFlag & 128 /* COMPONENT_SHOULD_KEEP_ALIVE */) {2340                    queuePostRenderEffect(instance.a, parentSuspense);2341                }2342                instance.isMounted = true;2343            }2344            else {2345                // updateComponent2346                // This is triggered by mutation of component's own state (next: null)2347                // OR parent calling processComponent (next: HostVNode)2348                const { next } = instance;2349                if ((process.env.NODE_ENV !== 'production')) {2350                    pushWarningContext(next || instance.vnode);2351                }2352                if (next !== null) {2353                    updateComponentPreRender(instance, next);2354                }2355                const nextTree = renderComponentRoot(instance);2356                const prevTree = instance.subTree;2357                instance.subTree = nextTree;2358                // beforeUpdate hook2359                if (instance.bu !== null) {2360                    invokeHooks(instance.bu);2361                }2362                // reset refs2363                // only needed if previous patch had refs2364                if (instance.refs !== EMPTY_OBJ) {2365                    instance.refs = {};2366                }2367                patch(prevTree, nextTree, 2368                // parent may have changed if it's in a portal2369                hostParentNode(prevTree.el), 2370                // anchor may have changed if it's in a fragment2371                getNextHostNode(prevTree), instance, parentSuspense, isSVG);2372                instance.vnode.el = nextTree.el;2373                if (next === null) {2374                    // self-triggered update. In case of HOC, update parent component2375                    // vnode el. HOC is indicated by parent instance's subTree pointing2376                    // to child component's vnode2377                    updateHOCHostEl(instance, nextTree.el);2378                }2379                // updated hook2380                if (instance.u !== null) {2381                    queuePostRenderEffect(instance.u, parentSuspense);2382                }2383                if ((process.env.NODE_ENV !== 'production')) {2384                    popWarningContext();2385                }2386            }2387        }, (process.env.NODE_ENV !== 'production') ? createDevEffectOptions(instance) : prodEffectOptions);2388    }2389    function updateComponentPreRender(instance, nextVNode) {2390        nextVNode.component = instance;2391        instance.vnode = nextVNode;2392        instance.next = null;2393        resolveProps(instance, nextVNode.props, nextVNode.type.props);2394        resolveSlots(instance, nextVNode.children);2395    }2396    function patchChildren(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) {2397        const c1 = n1 && n1.children;2398        const prevShapeFlag = n1 ? n1.shapeFlag : 0;2399        const c2 = n2.children;2400        const { patchFlag, shapeFlag } = n2;2401        if (patchFlag === -2 /* BAIL */) {2402            optimized = false;2403        }2404        // fast path2405        if (patchFlag > 0) {2406            if (patchFlag & 128 /* KEYED_FRAGMENT */) {2407                // this could be either fully-keyed or mixed (some keyed some not)2408                // presence of patchFlag means children are guaranteed to be arrays2409                patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2410                return;2411            }2412            else if (patchFlag & 256 /* UNKEYED_FRAGMENT */) {2413                // unkeyed2414                patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2415                return;2416            }2417        }2418        // children has 3 possibilities: text, array or no children.2419        if (shapeFlag & 8 /* TEXT_CHILDREN */) {2420            // text children fast path2421            if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {2422                unmountChildren(c1, parentComponent, parentSuspense);2423            }2424            if (c2 !== c1) {2425                hostSetElementText(container, c2);2426            }2427        }2428        else {2429            if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {2430                // prev children was array2431                if (shapeFlag & 16 /* ARRAY_CHILDREN */) {2432                    // two arrays, cannot assume anything, do full diff2433                    patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2434                }2435                else {2436                    // no new children, just unmount old2437                    unmountChildren(c1, parentComponent, parentSuspense, true);2438                }2439            }2440            else {2441                // prev children was text OR null2442                // new children is array OR null2443                if (prevShapeFlag & 8 /* TEXT_CHILDREN */) {2444                    hostSetElementText(container, '');2445                }2446                // mount new if array2447                if (shapeFlag & 16 /* ARRAY_CHILDREN */) {2448                    mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2449                }2450            }2451        }2452    }2453    function patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {2454        c1 = c1 || EMPTY_ARR;2455        c2 = c2 || EMPTY_ARR;2456        const oldLength = c1.length;2457        const newLength = c2.length;2458        const commonLength = Math.min(oldLength, newLength);2459        let i;2460        for (i = 0; i < commonLength; i++) {2461            const nextChild = (c2[i] = optimized2462                ? cloneIfMounted(c2[i])2463                : normalizeVNode(c2[i]));2464            patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, optimized);2465        }2466        if (oldLength > newLength) {2467            // remove old2468            unmountChildren(c1, parentComponent, parentSuspense, true, commonLength);2469        }2470        else {2471            // mount new2472            mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, commonLength);2473        }2474    }2475    // can be all-keyed or mixed2476    function patchKeyedChildren(c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {2477        let i = 0;2478        const l2 = c2.length;2479        let e1 = c1.length - 1; // prev ending index2480        let e2 = l2 - 1; // next ending index2481        // 1. sync from start2482        // (a b) c2483        // (a b) d e2484        while (i <= e1 && i <= e2) {2485            const n1 = c1[i];2486            const n2 = (c2[i] = optimized2487                ? cloneIfMounted(c2[i])2488                : normalizeVNode(c2[i]));2489            if (isSameVNodeType(n1, n2)) {2490                patch(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized);2491            }2492            else {2493                break;2494            }2495            i++;2496        }2497        // 2. sync from end2498        // a (b c)2499        // d e (b c)2500        while (i <= e1 && i <= e2) {2501            const n1 = c1[e1];2502            const n2 = (c2[e2] = optimized2503                ? cloneIfMounted(c2[e2])2504                : normalizeVNode(c2[e2]));2505            if (isSameVNodeType(n1, n2)) {2506                patch(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized);2507            }2508            else {2509                break;2510            }2511            e1--;2512            e2--;2513        }2514        // 3. common sequence + mount2515        // (a b)2516        // (a b) c2517        // i = 2, e1 = 1, e2 = 22518        // (a b)2519        // c (a b)2520        // i = 0, e1 = -1, e2 = 02521        if (i > e1) {2522            if (i <= e2) {2523                const nextPos = e2 + 1;2524                const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;2525                while (i <= e2) {2526                    patch(null, (c2[i] = optimized2527                        ? cloneIfMounted(c2[i])2528                        : normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG);2529                    i++;2530                }2531            }2532        }2533        // 4. common sequence + unmount2534        // (a b) c2535        // (a b)2536        // i = 2, e1 = 2, e2 = 12537        // a (b c)2538        // (b c)2539        // i = 0, e1 = 0, e2 = -12540        else if (i > e2) {2541            while (i <= e1) {2542                unmount(c1[i], parentComponent, parentSuspense, true);2543                i++;2544            }2545        }2546        // 5. unknown sequence2547        // [i ... e1 + 1]: a b [c d e] f g2548        // [i ... e2 + 1]: a b [e d c h] f g2549        // i = 2, e1 = 4, e2 = 52550        else {2551            const s1 = i; // prev starting index2552            const s2 = i; // next starting index2553            // 5.1 build key:index map for newChildren2554            const keyToNewIndexMap = new Map();2555            for (i = s2; i <= e2; i++) {2556                const nextChild = (c2[i] = optimized2557                    ? cloneIfMounted(c2[i])2558                    : normalizeVNode(c2[i]));2559                if (nextChild.key != null) {2560                    if ((process.env.NODE_ENV !== 'production') && keyToNewIndexMap.has(nextChild.key)) {2561                        warn(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);2562                    }2563                    keyToNewIndexMap.set(nextChild.key, i);2564                }2565            }2566            // 5.2 loop through old children left to be patched and try to patch2567            // matching nodes & remove nodes that are no longer present2568            let j;2569            let patched = 0;2570            const toBePatched = e2 - s2 + 1;2571            let moved = false;2572            // used to track whether any node has moved2573            let maxNewIndexSoFar = 0;2574            // works as Map<newIndex, oldIndex>2575            // Note that oldIndex is offset by +12576            // and oldIndex = 0 is a special value indicating the new node has2577            // no corresponding old node.2578            // used for determining longest stable subsequence2579            const newIndexToOldIndexMap = new Array(toBePatched);2580            for (i = 0; i < toBePatched; i++)2581                newIndexToOldIndexMap[i] = 0;2582            for (i = s1; i <= e1; i++) {2583                const prevChild = c1[i];2584                if (patched >= toBePatched) {2585                    // all new children have been patched so this can only be a removal2586                    unmount(prevChild, parentComponent, parentSuspense, true);2587                    continue;2588                }2589                let newIndex;2590                if (prevChild.key != null) {2591                    newIndex = keyToNewIndexMap.get(prevChild.key);2592                }2593                else {2594                    // key-less node, try to locate a key-less node of the same type2595                    for (j = s2; j <= e2; j++) {2596                        if (newIndexToOldIndexMap[j - s2] === 0 &&2597                            isSameVNodeType(prevChild, c2[j])) {2598                            newIndex = j;2599                            break;2600                        }2601                    }2602                }2603                if (newIndex === undefined) {2604                    unmount(prevChild, parentComponent, parentSuspense, true);2605                }2606                else {2607                    newIndexToOldIndexMap[newIndex - s2] = i + 1;2608                    if (newIndex >= maxNewIndexSoFar) {2609                        maxNewIndexSoFar = newIndex;2610                    }2611                    else {2612                        moved = true;2613                    }2614                    patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, optimized);2615                    patched++;2616                }2617            }2618            // 5.3 move and mount2619            // generate longest stable subsequence only when nodes have moved2620            const increasingNewIndexSequence = moved2621                ? getSequence(newIndexToOldIndexMap)2622                : EMPTY_ARR;2623            j = increasingNewIndexSequence.length - 1;2624            // looping backwards so that we can use last patched node as anchor2625            for (i = toBePatched - 1; i >= 0; i--) {2626                const nextIndex = s2 + i;2627                const nextChild = c2[nextIndex];2628                const anchor = nextIndex + 1 < l22629                    ? c2[nextIndex + 1].el2630                    : parentAnchor;2631                if (newIndexToOldIndexMap[i] === 0) {2632                    // mount new2633                    patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG);2634                }2635                else if (moved) {2636                    // move if:2637                    // There is no stable subsequence (e.g. a reverse)2638                    // OR current node is not among the stable sequence2639                    if (j < 0 || i !== increasingNewIndexSequence[j]) {2640                        move(nextChild, container, anchor, 2 /* REORDER */);2641                    }2642                    else {2643                        j--;2644                    }2645                }2646            }2647        }2648    }2649    function move(vnode, container, anchor, type, parentSuspense = null) {2650        if (vnode.shapeFlag & 6 /* COMPONENT */) {2651            move(vnode.component.subTree, container, anchor, type);2652            return;2653        }2654        if ( vnode.shapeFlag & 64 /* SUSPENSE */) {2655            vnode.suspense.move(container, anchor, type);2656            return;2657        }2658        if (vnode.type === Fragment) {2659            hostInsert(vnode.el, container, anchor);2660            const children = vnode.children;2661            for (let i = 0; i < children.length; i++) {2662                move(children[i], container, anchor, type);2663            }2664            hostInsert(vnode.anchor, container, anchor);2665        }2666        else {2667            // Plain element2668            const { el, transition, shapeFlag } = vnode;2669            const needTransition = type !== 2 /* REORDER */ &&2670                shapeFlag & 1 /* ELEMENT */ &&2671                transition != null;2672            if (needTransition) {2673                if (type === 0 /* ENTER */) {2674                    transition.beforeEnter(el);2675                    hostInsert(el, container, anchor);2676                    queuePostRenderEffect(() => transition.enter(el), parentSuspense);2677                }2678                else {2679                    const { leave, delayLeave, afterLeave } = transition;2680                    const remove = () => hostInsert(el, container, anchor);2681                    const performLeave = () => {2682                        leave(el, () => {2683                            remove();2684                            afterLeave && afterLeave();2685                        });2686                    };2687                    if (delayLeave) {2688                        delayLeave(el, remove, performLeave);2689                    }2690                    else {2691                        performLeave();2692                    }2693                }2694            }2695            else {2696                hostInsert(el, container, anchor);2697            }2698        }2699    }2700    function unmount(vnode, parentComponent, parentSuspense, doRemove) {2701        const { props, ref, children, dynamicChildren, shapeFlag } = vnode;2702        // unset ref2703        if (ref !== null && parentComponent !== null) {2704            setRef(ref, null, parentComponent, null);2705        }2706        if (shapeFlag & 6 /* COMPONENT */) {2707            if (shapeFlag & 128 /* COMPONENT_SHOULD_KEEP_ALIVE */) {2708                parentComponent.sink.deactivate(vnode);2709            }2710            else {2711                unmountComponent(vnode.component, parentSuspense, doRemove);2712            }2713            return;2714        }2715        if ( shapeFlag & 64 /* SUSPENSE */) {2716            vnode.suspense.unmount(parentSuspense, doRemove);2717            return;2718        }2719        if (props != null && props.onVnodeBeforeUnmount != null) {2720            invokeDirectiveHook(props.onVnodeBeforeUnmount, parentComponent, vnode);2721        }2722        if (dynamicChildren != null) {2723            // fast path for block nodes: only need to unmount dynamic children.2724            unmountChildren(dynamicChildren, parentComponent, parentSuspense);2725        }2726        else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {2727            unmountChildren(children, parentComponent, parentSuspense);2728        }2729        if (doRemove) {2730            remove(vnode);2731        }2732        if (props != null && props.onVnodeUnmounted != null) {2733            queuePostRenderEffect(() => {2734                invokeDirectiveHook(props.onVnodeUnmounted, parentComponent, vnode);2735            }, parentSuspense);2736        }2737    }2738    function remove(vnode) {2739        const { type, el, anchor, transition } = vnode;2740        if (type === Fragment) {2741            removeFragment(el, anchor);2742            return;2743        }2744        const performRemove = () => {2745            hostRemove(el);2746            if (transition != null &&2747                !transition.persisted &&2748                transition.afterLeave) {2749                transition.afterLeave();2750            }2751        };2752        if (vnode.shapeFlag & 1 /* ELEMENT */ &&2753            transition != null &&2754            !transition.persisted) {2755            const { leave, delayLeave } = transition;2756            const performLeave = () => leave(el, performRemove);2757            if (delayLeave) {2758                delayLeave(vnode.el, performRemove, performLeave);2759            }2760            else {2761                performLeave();2762            }2763        }2764        else {2765            performRemove();2766        }2767    }2768    function removeFragment(cur, end) {2769        // For fragments, directly remove all contained DOM nodes.2770        // (fragment child nodes cannot have transition)2771        let next;2772        while (cur !== end) {2773            next = hostNextSibling(cur);2774            hostRemove(cur);2775            cur = next;2776        }2777        hostRemove(end);2778    }2779    function unmountComponent(instance, parentSuspense, doRemove) {2780        if (__HMR__ && instance.type.__hmrId != null) {2781            unregisterHMR(instance);2782        }2783        const { bum, effects, update, subTree, um, da, isDeactivated } = instance;2784        // beforeUnmount hook2785        if (bum !== null) {2786            invokeHooks(bum);2787        }2788        if (effects !== null) {2789            for (let i = 0; i < effects.length; i++) {2790                stop(effects[i]);2791            }2792        }2793        // update may be null if a component is unmounted before its async2794        // setup has resolved.2795        if (update !== null) {
...

render.js

Source:render.js

...769        };770                const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {771                    const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense));772                    if ( instance.type.__hmrId) {773                        registerHMR(instance);774                    }775                    {776                        pushWarningContext(initialVNode);777                        startMeasure(instance, `mount`);778                    }779                    // inject renderer internals for keepAlive780                    if (isKeepAlive(initialVNode)) {781                        instance.ctx.renderer = internals;782                    }783                    // resolve props and slots for setup context784                    {785                        startMeasure(instance, `init`);786                    }787                    setupComponent(instance);788                    {789                        endMeasure(instance, `init`);790                    }791                    // setup() is async. This component relies on async logic to be resolved792                    // before proceeding793                    if ( instance.asyncDep) {794                        parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect);795                        // Give it a placeholder if this is not hydration796                        // TODO handle self-defined fallback797                        if (!initialVNode.el) {798                            const placeholder = (instance.subTree = createVNode(Comment));799                            processCommentNode(null, placeholder, container, anchor);800                        }801                        return;802                    }803                    // setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);804                    setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);805                    {806                        popWarningContext();807                        endMeasure(instance, `mount`);808                    }809                };810                    function setupComponent(instance, isSSR = false) {811                        isInSSRComponentSetup = isSSR;812                        const { props, children, shapeFlag } = instance.vnode;813                        const isStateful = shapeFlag & 4 /* STATEFUL_COMPONENT */;814                        initProps(instance, props, isStateful, isSSR);815                        initSlots(instance, children);816                        const setupResult = isStateful817                            ? setupStatefulComponent(instance, isSSR)818                            : undefined;819                        isInSSRComponentSetup = false;820                        return setupResult;821                    }822                        function setupStatefulComponent(instance, isSSR) {823                            const Component = instance.type;824                            {825                                if (Component.name) {826                                    validateComponentName(Component.name, instance.appContext.config);827                                }828                                if (Component.components) {829                                    const names = Object.keys(Component.components);830                                    for (let i = 0; i < names.length; i++) {831                                        validateComponentName(names[i], instance.appContext.config);832                                    }833                                }834                                if (Component.directives) {835                                    const names = Object.keys(Component.directives);836                                    for (let i = 0; i < names.length; i++) {837                                        validateDirectiveName(names[i]);838                                    }839                                }840                            }841                            // 0. create render proxy property access cache842                            instance.accessCache = {};843                            // 1. create public instance / render proxy844                            // also mark it raw so it's never observed845                            instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers);846                            {847                                exposePropsOnRenderContext(instance);848                            }849                            // 2. call setup()850                            const { setup } = Component;851                            if (setup) {852                                const setupContext = (instance.setupContext =853                                    setup.length > 1 ? createSetupContext(instance) : null);854                                currentInstance = instance;855                                pauseTracking();856                                const setupResult = callWithErrorHandling(setup, instance, 0 /* SETUP_FUNCTION */, [ shallowReadonly(instance.props) , setupContext]);857                                resetTracking();858                                currentInstance = null;859                                if (isPromise(setupResult)) {860                                    if (isSSR) {861                                        // return the promise so server-renderer can wait on it862                                        return setupResult.then((resolvedResult) => {863                                            handleSetupResult(instance, resolvedResult);864                                        });865                                    }866                                    else {867                                        // async setup returned Promise.868                                        // bail here and wait for re-entry.869                                        instance.asyncDep = setupResult;870                                    }871                                }872                                else {873                                    handleSetupResult(instance, setupResult);874                                }875                            }876                            else {877                                finishComponentSetup(instance);878                            }879                        }880                            // dev only881                            function exposePropsOnRenderContext(instance) {882                                const { ctx, propsOptions: [propsOptions] } = instance;883                                if (propsOptions) {884                                    Object.keys(propsOptions).forEach(key => {885                                        Object.defineProperty(ctx, key, {886                                            enumerable: true,887                                            configurable: true,888                                            get: () => instance.props[key],889                                            set: NOOP890                                        });891                                    });892                                }893                            }894                            function handleSetupResult(instance, setupResult, isSSR) {895                                if (isFunction(setupResult)) {896                                    // setup returned an inline render function897                                    instance.render = setupResult;898                                }899                                else if (isObject(setupResult)) {900                                    if ( isVNode(setupResult)) {901                                        warn(`setup() should not return VNodes directly - ` +902                                            `return a render function instead.`);903                                    }904                                    // setup returned bindings.905                                    // assuming a render function compiled from template is present.906                                    {907                                        instance.devtoolsRawSetupState = setupResult;908                                    }909                                    instance.setupState = proxyRefs(setupResult);910                                    {911                                        exposeSetupStateOnRenderContext(instance);912                                    }913                                }914                                else if ( setupResult !== undefined) {915                                    warn(`setup() should return an object. Received: ${setupResult === null ? 'null' : typeof setupResult}`);916                                }917                                finishComponentSetup(instance);918                            }919                            function finishComponentSetup(instance, isSSR) {920                                const Component = instance.type;921                                // template / render function normalization922                                if (!instance.render) {923                                    // could be set from setup()924                                    if (compile && Component.template && !Component.render) {925                                        {926                                            startMeasure(instance, `compile`);927                                        }928                                        Component.render = compile(Component.template, {929                                            isCustomElement: instance.appContext.config.isCustomElement,930                                            delimiters: Component.delimiters931                                        });932                                        {933                                            endMeasure(instance, `compile`);934                                        }935                                    }936                                    instance.render = (Component.render || NOOP);937                                    // for runtime-compiled render functions using `with` blocks, the render938                                    // proxy used needs a different `has` handler which is more performant and939                                    // also only allows a whitelist of globals to fallthrough.940                                    if (instance.render._rc) {941                                        instance.withProxy = new Proxy(instance.ctx, RuntimeCompiledPublicInstanceProxyHandlers);942                                    }943                                }944                                // support for 2.x options945                                {946                                    currentInstance = instance;947                                    applyOptions(instance, Component);948                                    currentInstance = null;949                                }950                                // warn missing template/render951                                if ( !Component.render && instance.render === NOOP) {952                                    /* istanbul ignore if */953                                    if (!compile && Component.template) {954                                        warn(`Component provided template option but ` +955                                            `runtime compilation is not supported in this build of Vue.` +956                                            (  ` Use "vue.esm-browser.js" instead.`957                                                    ) /* should not happen */);958                                    }959                                    else {960                                        warn(`Component is missing template or render function.`);961                                    }962                                }963                            }964                                // Return a reactive-copy of the original object, where only the root level965                                // properties are readonly, and does NOT unwrap refs nor recursively convert966                                // returned properties.967                                // This is used for creating the props proxy object for stateful components.968                                function shallowReadonly(target) {969                                    return createReactiveObject(target, true, shallowReadonlyHandlers, readonlyCollectionHandlers);970                                }971                                        const shallowReadonlyHandlers = extend({}, readonlyHandlers, {972                                            get: shallowReadonlyGet973                                        });974                                        const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true);975                                        const readonlyHandlers = {976                                            get: readonlyGet,977                                            set(target, key) {978                                                {979                                                    console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target);980                                                }981                                                return true;982                                            },983                                            deleteProperty(target, key) {984                                                {985                                                    console.warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target);986                                                }987                                                return true;988                                            }989                                        };990                                                function createGetter(isReadonly = false, shallow = false) {991                                                    return function get(target, key, receiver) {992                                                        if (key === "__v_isReactive" /* IS_REACTIVE */) {993                                                            return !isReadonly;994                                                        }995                                                        else if (key === "__v_isReadonly" /* IS_READONLY */) {996                                                            return isReadonly;997                                                        }998                                                        else if (key === "__v_raw" /* RAW */ &&999                                                            receiver === (isReadonly ? readonlyMap : reactiveMap).get(target)) {1000                                                            return target;1001                                                        }1002                                                        const targetIsArray = isArray(target);1003                                                        if (targetIsArray && hasOwn(arrayInstrumentations, key)) {1004                                                            return Reflect.get(arrayInstrumentations, key, receiver);1005                                                        }1006                                                        const res = Reflect.get(target, key, receiver);1007                                                        const keyIsSymbol = isSymbol(key);1008                                                        if (keyIsSymbol1009                                                            ? builtInSymbols.has(key)1010                                                            : key === `__proto__` || key === `__v_isRef`) {1011                                                            return res;1012                                                        }1013                                                        if (!isReadonly) {1014                                                            track(target, "get" /* GET */, key);1015                                                        }1016                                                        if (shallow) {1017                                                            return res;1018                                                        }1019                                                        if (isRef(res)) {1020                                                            // ref unwrapping - does not apply for Array + integer key.1021                                                            const shouldUnwrap = !targetIsArray || !isIntegerKey(key);1022                                                            return shouldUnwrap ? res.value : res;1023                                                        }1024                                                        if (isObject(res)) {1025                                                            // Convert returned value into a proxy as well. we do the isObject check1026                                                            // here to avoid invalid value warning. Also need to lazy access readonly1027                                                            // and reactive here to avoid circular dependency.1028                                                            return isReadonly ? readonly(res) : reactive(res);1029                                                        }1030                                                        return res;1031                                                    };1032                                                }1033                                                        function readonly(target) {1034                                                            return createReactiveObject(target, true, readonlyHandlers, readonlyCollectionHandlers);1035                                                        }1036                                                        function reactive(target) {1037                                                            // if trying to observe a readonly proxy, return the readonly version.1038                                                            if (target && target["__v_isReadonly" /* IS_READONLY */]) {1039                                                                return target;1040                                                            }1041                                                            return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers);1042                                                        }1043                                                        const isObject = (val) => val !== null && typeof val === 'object';1044                                                        function isRef(r) {1045                                                            return Boolean(r && r.__v_isRef === true);1046                                                        }1047                                                        function pauseTracking() {1048                                                            trackStack.push(shouldTrack);1049                                                            shouldTrack = false;1050                                                        }1051                                                        function enableTracking() {1052                                                            trackStack.push(shouldTrack);1053                                                            shouldTrack = true;1054                                                        }1055                                                        function resetTracking() {1056                                                            const last = trackStack.pop();1057                                                            shouldTrack = last === undefined ? true : last;1058                                                        }1059                                                        function track(target, type, key) {1060                                                            if (!shouldTrack || activeEffect === undefined) {1061                                                                return;1062                                                            }1063                                                            let depsMap = targetMap.get(target);1064                                                            if (!depsMap) {1065                                                                targetMap.set(target, (depsMap = new Map()));1066                                                            }1067                                                            let dep = depsMap.get(key);1068                                                            if (!dep) {1069                                                                depsMap.set(key, (dep = new Set()));1070                                                            }1071                                                            if (!dep.has(activeEffect)) {1072                                                                dep.add(activeEffect);1073                                                                activeEffect.deps.push(dep);1074                                                                if ( activeEffect.options.onTrack) {1075                                                                    activeEffect.options.onTrack({1076                                                                        effect: activeEffect,1077                                                                        target,1078                                                                        type,1079                                                                        key1080                                                                    });1081                                                                }1082                                                            }1083                                                        }1084                                                            function effect(fn, options = EMPTY_OBJ) {1085                                                                if (isEffect(fn)) {1086                                                                    fn = fn.raw;1087                                                                }1088                                                                const effect = createReactiveEffect(fn, options);1089                                                                if (!options.lazy) {1090                                                                    effect();1091                                                                }1092                                                                return effect;1093                                                            }1094                                                            function createReactiveEffect(fn, options) {1095                                                                const effect = function reactiveEffect() {1096                                                                    if (!effect.active) {1097                                                                        return options.scheduler ? undefined : fn();1098                                                                    }1099                                                                    if (!effectStack.includes(effect)) {1100                                                                        cleanup(effect);1101                                                                        try {1102                                                                            enableTracking();1103                                                                            effectStack.push(effect);1104                                                                            activeEffect = effect;1105                                                                            return fn();1106                                                                        }1107                                                                        finally {1108                                                                            effectStack.pop();1109                                                                            resetTracking();1110                                                                            activeEffect = effectStack[effectStack.length - 1];1111                                                                        }1112                                                                    }1113                                                                };1114                                                                effect.id = uid++;1115                                                                effect._isEffect = true;1116                                                                effect.active = true;1117                                                                effect.raw = fn;1118                                                                effect.deps = [];1119                                                                effect.options = options;1120                                                                return effect;1121                                                            }1122                                        const readonlyCollectionHandlers = {1123                                            get: createInstrumentationGetter(true, false)1124                                        };1125                                        function createInstrumentationGetter(isReadonly, shallow) {1126                                            const instrumentations = shallow1127                                                ? shallowInstrumentations1128                                                : isReadonly1129                                                    ? readonlyInstrumentations1130                                                    : mutableInstrumentations;1131                                            return (target, key, receiver) => {1132                                                if (key === "__v_isReactive" /* IS_REACTIVE */) {1133                                                    return !isReadonly;1134                                                }1135                                                else if (key === "__v_isReadonly" /* IS_READONLY */) {1136                                                    return isReadonly;1137                                                }1138                                                else if (key === "__v_raw" /* RAW */) {1139                                                    return target;1140                                                }1141                                                return Reflect.get(hasOwn(instrumentations, key) && key in target1142                                                    ? instrumentations1143                                                    : target, key, receiver);1144                                            };1145                                        }1146                                                const shallowInstrumentations = {1147                                                    get(key) {1148                                                        return get$1(this, key, false, true);1149                                                    },1150                                                    get size() {1151                                                        return size(this);1152                                                    },1153                                                    has: has$1,1154                                                    add,1155                                                    set: set$1,1156                                                    delete: deleteEntry,1157                                                    clear,1158                                                    forEach: createForEach(false, true)1159                                                };1160                                                const readonlyInstrumentations = {1161                                                    get(key) {1162                                                        return get$1(this, key, true);1163                                                    },1164                                                    get size() {1165                                                        return size(this, true);1166                                                    },1167                                                    has(key) {1168                                                        return has$1.call(this, key, true);1169                                                    },1170                                                    add: createReadonlyMethod("add" /* ADD */),1171                                                    set: createReadonlyMethod("set" /* SET */),1172                                                    delete: createReadonlyMethod("delete" /* DELETE */),1173                                                    clear: createReadonlyMethod("clear" /* CLEAR */),1174                                                    forEach: createForEach(true, false)1175                                                };1176                                                const mutableInstrumentations = {1177                                                    get(key) {1178                                                        return get$1(this, key);1179                                                    },1180                                                    get size() {1181                                                        return size(this);1182                                                    },1183                                                    has: has$1,1184                                                    add,1185                                                    set: set$1,1186                                                    delete: deleteEntry,1187                                                    clear,1188                                                    forEach: createForEach(false, false)1189                                                };1190                                        function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers) {1191                                            if (!isObject(target)) {1192                                                {1193                                                    console.warn(`value cannot be made reactive: ${String(target)}`);1194                                                }1195                                                return target;1196                                            }1197                                            // target is already a Proxy, return it.1198                                            // exception: calling readonly() on a reactive object1199                                            if (target["__v_raw" /* RAW */] &&1200                                                !(isReadonly && target["__v_isReactive" /* IS_REACTIVE */])) {1201                                                return target;1202                                            }1203                                            // target already has corresponding Proxy1204                                            const proxyMap = isReadonly ? readonlyMap : reactiveMap;1205                                            const existingProxy = proxyMap.get(target);1206                                            if (existingProxy) {1207                                                return existingProxy;1208                                            }1209                                            // only a whitelist of value types can be observed.1210                                            const targetType = getTargetType(target);1211                                            if (targetType === 0 /* INVALID */) {1212                                                return target;1213                                            }1214                                            const proxy = new Proxy(target, targetType === 2 /* COLLECTION */ ? collectionHandlers : baseHandlers);1215                                            proxyMap.set(target, proxy);1216                                            return proxy;1217                                        }1218                                                function getTargetType(value) {1219                                                    return value["__v_skip" /* SKIP */] || !Object.isExtensible(value)1220                                                        ? 0 /* INVALID */1221                                                        : targetTypeMap(toRawType(value));1222                                                }1223                                                function targetTypeMap(rawType) {1224                                                    switch (rawType) {1225                                                        case 'Object':1226                                                        case 'Array':1227                                                            return 1 /* COMMON */;1228                                                        case 'Map':1229                                                        case 'Set':1230                                                        case 'WeakMap':1231                                                        case 'WeakSet':1232                                                            return 2 /* COLLECTION */;1233                                                        default:1234                                                            return 0 /* INVALID */;1235                                                    }1236                                                }1237                                                const toTypeString = (value) => objectToString.call(value);1238                                                const toRawType = (value) => {1239                                                    return toTypeString(value).slice(8, -1);1240                                                };1241                                        const readonlyHandlers = {1242                                            get: readonlyGet,1243                                            set(target, key) {1244                                                {1245                                                    console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target);1246                                                }1247                                                return true;1248                                            },1249                                            deleteProperty(target, key) {1250                                                {1251                                                    console.warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target);1252                                                }1253                                                return true;1254                                            }1255                                        };1256                                const publicPropertiesMap = extend(Object.create(null), {1257                                    $: i => i,1258                                    $el: i => i.vnode.el,1259                                    $data: i => i.data,1260                                    $props: i => ( shallowReadonly(i.props) ),1261                                    $attrs: i => ( shallowReadonly(i.attrs) ),1262                                    $slots: i => ( shallowReadonly(i.slots) ),1263                                    $refs: i => ( shallowReadonly(i.refs) ),1264                                    $parent: i => i.parent && i.parent.proxy,1265                                    $root: i => i.root && i.root.proxy,1266                                    $emit: i => i.emit,1267                                    $options: i => ( resolveMergedOptions(i) ),1268                                    $forceUpdate: i => () => queueJob(i.update),1269                                    $nextTick: () => nextTick,1270                                    $watch: i => ( instanceWatch.bind(i) )1271                                });1272                                const PublicInstanceProxyHandlers = {1273                                    get({ _: instance }, key) {1274                                        const { ctx, setupState, data, props, accessCache, type, appContext } = instance;1275                                        // let @vue/reactivity know it should never observe Vue public instances.1276                                        if (key === "__v_skip" /* SKIP */) {1277                                            return true;1278                                        }1279                                        // data / props / ctx1280                                        // This getter gets called for every property access on the render context1281                                        // during render and is a major hotspot. The most expensive part of this1282                                        // is the multiple hasOwn() calls. It's much faster to do a simple property1283                                        // access on a plain object, so we use an accessCache object (with null1284                                        // prototype) to memoize what access type a key corresponds to.1285                                        let normalizedProps;1286                                        if (key[0] !== '$') {1287                                            const n = accessCache[key];1288                                            if (n !== undefined) {1289                                                switch (n) {1290                                                    case 0 /* SETUP */:1291                                                        return setupState[key];1292                                                    case 1 /* DATA */:1293                                                        return data[key];1294                                                    case 3 /* CONTEXT */:1295                                                        return ctx[key];1296                                                    case 2 /* PROPS */:1297                                                        return props[key];1298                                                    // default: just fallthrough1299                                                }1300                                            }1301                                            else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {1302                                                accessCache[key] = 0 /* SETUP */;1303                                                return setupState[key];1304                                            }1305                                            else if (data !== EMPTY_OBJ && hasOwn(data, key)) {1306                                                accessCache[key] = 1 /* DATA */;1307                                                return data[key];1308                                            }1309                                            else if (1310                                            // only cache other properties when instance has declared (thus stable)1311                                            // props1312                                            (normalizedProps = instance.propsOptions[0]) &&1313                                                hasOwn(normalizedProps, key)) {1314                                                accessCache[key] = 2 /* PROPS */;1315                                                return props[key];1316                                            }1317                                            else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {1318                                                accessCache[key] = 3 /* CONTEXT */;1319                                                return ctx[key];1320                                            }1321                                            else if ( !isInBeforeCreate) {1322                                                accessCache[key] = 4 /* OTHER */;1323                                            }1324                                        }1325                                        const publicGetter = publicPropertiesMap[key];1326                                        let cssModule, globalProperties;1327                                        // public $xxx properties1328                                        if (publicGetter) {1329                                            if (key === '$attrs') {1330                                                track(instance, "get" /* GET */, key);1331                                                markAttrsAccessed();1332                                            }1333                                            return publicGetter(instance);1334                                        }1335                                        else if (1336                                        // css module (injected by vue-loader)1337                                        (cssModule = type.__cssModules) &&1338                                            (cssModule = cssModule[key])) {1339                                            return cssModule;1340                                        }1341                                        else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {1342                                            // user may set custom properties to `this` that start with `$`1343                                            accessCache[key] = 3 /* CONTEXT */;1344                                            return ctx[key];1345                                        }1346                                        else if (1347                                        // global properties1348                                        ((globalProperties = appContext.config.globalProperties),1349                                            hasOwn(globalProperties, key))) {1350                                            return globalProperties[key];1351                                        }1352                                        else if (1353                                            currentRenderingInstance &&1354                                            (!isString(key) ||1355                                                // #1091 avoid internal isRef/isVNode checks on component instance leading1356                                                // to infinite warning loop1357                                                key.indexOf('__v') !== 0)) {1358                                            if (data !== EMPTY_OBJ &&1359                                                (key[0] === '$' || key[0] === '_') &&1360                                                hasOwn(data, key)) {1361                                                warn(`Property ${JSON.stringify(key)} must be accessed via $data because it starts with a reserved ` +1362                                                    `character ("$" or "_") and is not proxied on the render context.`);1363                                            }1364                                            else {1365                                                warn(`Property ${JSON.stringify(key)} was accessed during render ` +1366                                                    `but is not defined on instance.`);1367                                            }1368                                        }1369                                    },1370                                    set({ _: instance }, key, value) {1371                                        const { data, setupState, ctx } = instance;1372                                        if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {1373                                            setupState[key] = value;1374                                        }1375                                        else if (data !== EMPTY_OBJ && hasOwn(data, key)) {1376                                            data[key] = value;1377                                        }1378                                        else if (key in instance.props) {1379                                            1380                                                warn(`Attempting to mutate prop "${key}". Props are readonly.`, instance);1381                                            return false;1382                                        }1383                                        if (key[0] === '$' && key.slice(1) in instance) {1384                                            1385                                                warn(`Attempting to mutate public property "${key}". ` +1386                                                    `Properties starting with $ are reserved and readonly.`, instance);1387                                            return false;1388                                        }1389                                        else {1390                                            if ( key in instance.appContext.config.globalProperties) {1391                                                Object.defineProperty(ctx, key, {1392                                                    enumerable: true,1393                                                    configurable: true,1394                                                    value1395                                                });1396                                            }1397                                            else {1398                                                ctx[key] = value;1399                                            }1400                                        }1401                                        return true;1402                                    },1403                                    has({ _: { data, setupState, accessCache, ctx, appContext, propsOptions } }, key) {1404                                        let normalizedProps;1405                                        return (accessCache[key] !== undefined ||1406                                            (data !== EMPTY_OBJ && hasOwn(data, key)) ||1407                                            (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) ||1408                                            ((normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key)) ||1409                                            hasOwn(ctx, key) ||1410                                            hasOwn(publicPropertiesMap, key) ||1411                                            hasOwn(appContext.config.globalProperties, key));1412                                    }1413                                };1414                                PublicInstanceProxyHandlers.ownKeys = (target) => {1415                                    warn(`Avoid app logic that relies on enumerating keys on a component instance. ` +1416                                        `The keys will be empty in production mode to avoid performance overhead.`);1417                                    return Reflect.ownKeys(target);1418                                };1419                                const RuntimeCompiledPublicInstanceProxyHandlers = extend({}, PublicInstanceProxyHandlers, {1420                                    get(target, key) {1421                                        // fast path for unscopables when using `with` block1422                                        if (key === Symbol.unscopables) {1423                                            return;1424                                        }1425                                        return PublicInstanceProxyHandlers.get(target, key, target);1426                                    },1427                                    has(_, key) {1428                                        const has = key[0] !== '_' && !isGloballyWhitelisted(key);1429                                        if ( !has && PublicInstanceProxyHandlers.has(_, key)) {1430                                            warn(`Property ${JSON.stringify(key)} should not start with _ which is a reserved prefix for Vue internals.`);1431                                        }1432                                        return has;1433                                    }1434                                });1435                            function proxyRefs(objectWithRefs) {1436                                return isReactive(objectWithRefs)1437                                    ? objectWithRefs1438                                    : new Proxy(objectWithRefs, shallowUnwrapHandlers);1439                            }1440                                function unref(ref) {1441                                    return isRef(ref) ? ref.value : ref;1442                                }1443                                const shallowUnwrapHandlers = {1444                                    get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)),1445                                    set: (target, key, value, receiver) => {1446                                        const oldValue = target[key];1447                                        if (isRef(oldValue) && !isRef(value)) {1448                                            oldValue.value = value;1449                                            return true;1450                                        }1451                                        else {1452                                            return Reflect.set(target, key, value, receiver);1453                                        }1454                                    }1455                                };1456                            function toRaw(observed) {1457                                return ((observed && toRaw(observed["__v_raw" /* RAW */])) || observed);1458                            }1459                            // dev only1460                            function exposeSetupStateOnRenderContext(instance) {1461                                const { ctx, setupState } = instance;1462                                Object.keys(toRaw(setupState)).forEach(key => {1463                                    if (key[0] === '$' || key[0] === '_') {1464                                        warn(`setup() return property ${JSON.stringify(key)} should not start with "$" or "_" ` +1465                                            `which are reserved prefixes for Vue internals.`);1466                                        return;1467                                    }1468                                    Object.defineProperty(ctx, key, {1469                                        enumerable: true,1470                                        configurable: true,1471                                        get: () => setupState[key],1472                                        set: NOOP1473                                    });1474                                });1475                            }1476                                    function createAppContext() {1477                                        return {1478                                            app: null,1479                                            config: {1480                                                isNativeTag: NO,1481                                                performance: false,1482                                                globalProperties: {},1483                                                optionMergeStrategies: {},1484                                                isCustomElement: NO,1485                                                errorHandler: undefined,1486                                                warnHandler: undefined1487                                            },1488                                            mixins: [],1489                                            components: {},1490                                            directives: {},1491                                            provides: Object.create(null)1492                                        };1493                                    }1494                                    function callSyncHook(name, options, ctx, globalMixins) {1495                                        callHookFromMixins(name, globalMixins, ctx);1496                                        const { extends: base, mixins } = options;1497                                        if (base) {1498                                            callHookFromExtends(name, base, ctx);1499                                        }1500                                        if (mixins) {1501                                            callHookFromMixins(name, mixins, ctx);1502                                        }1503                                        const selfHook = options[name];1504                                        if (selfHook) {1505                                            selfHook.call(ctx);1506                                        }1507                                    }1508                            function applyOptions(instance, options, deferredData = [], deferredWatch = [], asMixin = false) {1509                                const { 1510                                // composition1511                                mixins, extends: extendsOptions, 1512                                // state1513                                data: dataOptions, computed: computedOptions, methods, watch: watchOptions, provide: provideOptions, inject: injectOptions, 1514                                // assets1515                                components, directives, 1516                                // lifecycle1517                                beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, beforeUnmount, destroyed, unmounted, 1518                                render, renderTracked, renderTriggered, errorCaptured } = options;1519                                const publicThis = instance.proxy;1520                                const ctx = instance.ctx;1521                                const globalMixins = instance.appContext.mixins;1522                                if (asMixin && render && instance.render === NOOP) {1523                                    instance.render = render;1524                                }1525                                // applyOptions is called non-as-mixin once per instance1526                                if (!asMixin) {1527                                    isInBeforeCreate = true;1528                                    callSyncHook('beforeCreate', options, publicThis, globalMixins);1529                                    isInBeforeCreate = false;1530                                    // global mixins are applied first1531                                    applyMixins(instance, globalMixins, deferredData, deferredWatch);1532                                }1533                                // extending a base component...1534                                if (extendsOptions) {1535                                    applyOptions(instance, extendsOptions, deferredData, deferredWatch, true);1536                                }1537                                // local mixins1538                                if (mixins) {1539                                    applyMixins(instance, mixins, deferredData, deferredWatch);1540                                }1541                                const checkDuplicateProperties =  createDuplicateChecker() ;1542                                {1543                                    const [propsOptions] = instance.propsOptions;1544                                    if (propsOptions) {1545                                        for (const key in propsOptions) {1546                                            checkDuplicateProperties("Props" /* PROPS */, key);1547                                        }1548                                    }1549                                }1550                                // options initialization order (to be consistent with Vue 2):1551                                // - props (already done outside of this function)1552                                // - inject1553                                // - methods1554                                // - data (deferred since it relies on `this` access)1555                                // - computed1556                                // - watch (deferred since it relies on `this` access)1557                                if (injectOptions) {1558                                    if (isArray(injectOptions)) {1559                                        for (let i = 0; i < injectOptions.length; i++) {1560                                            const key = injectOptions[i];1561                                            ctx[key] = inject(key);1562                                            {1563                                                checkDuplicateProperties("Inject" /* INJECT */, key);1564                                            }1565                                        }1566                                    }1567                                    else {1568                                        for (const key in injectOptions) {1569                                            const opt = injectOptions[key];1570                                            if (isObject(opt)) {1571                                                ctx[key] = inject(opt.from || key, opt.default, true /* treat default function as factory */);1572                                            }1573                                            else {1574                                                ctx[key] = inject(opt);1575                                            }1576                                            {1577                                                checkDuplicateProperties("Inject" /* INJECT */, key);1578                                            }1579                                        }1580                                    }1581                                }1582                                if (methods) {1583                                    for (const key in methods) {1584                                        const methodHandler = methods[key];1585                                        if (isFunction(methodHandler)) {1586                                            ctx[key] = methodHandler.bind(publicThis);1587                                            {1588                                                checkDuplicateProperties("Methods" /* METHODS */, key);1589                                            }1590                                        }1591                                        else {1592                                            warn(`Method "${key}" has type "${typeof methodHandler}" in the component definition. ` +1593                                                `Did you reference the function correctly?`);1594                                        }1595                                    }1596                                }1597                                if (!asMixin) {1598                                    if (deferredData.length) {1599                                        deferredData.forEach(dataFn => resolveData(instance, dataFn, publicThis));1600                                    }1601                                    if (dataOptions) {1602                                        resolveData(instance, dataOptions, publicThis);1603                                    }1604                                    {1605                                        const rawData = toRaw(instance.data);1606                                        for (const key in rawData) {1607                                            checkDuplicateProperties("Data" /* DATA */, key);1608                                            // expose data on ctx during dev1609                                            if (key[0] !== '$' && key[0] !== '_') {1610                                                Object.defineProperty(ctx, key, {1611                                                    configurable: true,1612                                                    enumerable: true,1613                                                    get: () => rawData[key],1614                                                    set: NOOP1615                                                });1616                                            }1617                                        }1618                                    }1619                                }1620                                else if (dataOptions) {1621                                    deferredData.push(dataOptions);1622                                }1623                                if (computedOptions) {1624                                    for (const key in computedOptions) {1625                                        const opt = computedOptions[key];1626                                        const get = isFunction(opt)1627                                            ? opt.bind(publicThis, publicThis)1628                                            : isFunction(opt.get)1629                                                ? opt.get.bind(publicThis, publicThis)1630                                                : NOOP;1631                                        if ( get === NOOP) {1632                                            warn(`Computed property "${key}" has no getter.`);1633                                        }1634                                        const set = !isFunction(opt) && isFunction(opt.set)1635                                            ? opt.set.bind(publicThis)1636                                            :  () => {1637                                                    warn(`Write operation failed: computed property "${key}" is readonly.`);1638                                                }1639                                                ;1640                                        const c = computed$1({1641                                            get,1642                                            set1643                                        });1644                                        Object.defineProperty(ctx, key, {1645                                            enumerable: true,1646                                            configurable: true,1647                                            get: () => c.value,1648                                            set: v => (c.value = v)1649                                        });1650                                        {1651                                            checkDuplicateProperties("Computed" /* COMPUTED */, key);1652                                        }1653                                    }1654                                }1655                                if (watchOptions) {1656                                    deferredWatch.push(watchOptions);1657                                }1658                                if (!asMixin && deferredWatch.length) {1659                                    deferredWatch.forEach(watchOptions => {1660                                        for (const key in watchOptions) {1661                                            createWatcher(watchOptions[key], ctx, publicThis, key);1662                                        }1663                                    });1664                                }1665                                if (provideOptions) {1666                                    const provides = isFunction(provideOptions)1667                                        ? provideOptions.call(publicThis)1668                                        : provideOptions;1669                                    for (const key in provides) {1670                                        provide(key, provides[key]);1671                                    }1672                                }1673                                // asset options.1674                                // To reduce memory usage, only components with mixins or extends will have1675                                // resolved asset registry attached to instance.1676                                if (asMixin) {1677                                    if (components) {1678                                        extend(instance.components ||1679                                            (instance.components = extend({}, instance.type.components)), components);1680                                    }1681                                    if (directives) {1682                                        extend(instance.directives ||1683                                            (instance.directives = extend({}, instance.type.directives)), directives);1684                                    }1685                                }1686                                // lifecycle options1687                                if (!asMixin) {1688                                    callSyncHook('created', options, publicThis, globalMixins);1689                                }1690                                if (beforeMount) {1691                                    onBeforeMount(beforeMount.bind(publicThis));1692                                }1693                                if (mounted) {1694                                    onMounted(mounted.bind(publicThis));1695                                }1696                                if (beforeUpdate) {1697                                    onBeforeUpdate(beforeUpdate.bind(publicThis));1698                                }1699                                if (updated) {1700                                    onUpdated(updated.bind(publicThis));1701                                }1702                                if (activated) {1703                                    onActivated(activated.bind(publicThis));1704                                }1705                                if (deactivated) {1706                                    onDeactivated(deactivated.bind(publicThis));1707                                }1708                                if (errorCaptured) {1709                                    onErrorCaptured(errorCaptured.bind(publicThis));1710                                }1711                                if (renderTracked) {1712                                    onRenderTracked(renderTracked.bind(publicThis));1713                                }1714                                if (renderTriggered) {1715                                    onRenderTriggered(renderTriggered.bind(publicThis));1716                                }1717                                if ( beforeDestroy) {1718                                    warn(`\`beforeDestroy\` has been renamed to \`beforeUnmount\`.`);1719                                }1720                                if (beforeUnmount) {1721                                    onBeforeUnmount(beforeUnmount.bind(publicThis));1722                                }1723                                if ( destroyed) {1724                                    warn(`\`destroyed\` has been renamed to \`unmounted\`.`);1725                                }1726                                if (unmounted) {1727                                    onUnmounted(unmounted.bind(publicThis));1728                                }1729                            }1730                                function applyMixins(instance, mixins, deferredData, deferredWatch) {1731                                    for (let i = 0; i < mixins.length; i++) {1732                                        applyOptions(instance, mixins[i], deferredData, deferredWatch, true);1733                                    }1734                                }1735                                function createDuplicateChecker() {1736                                    const cache = Object.create(null);1737                                    return (type, key) => {1738                                        if (cache[key]) {1739                                            warn(`${type} property "${key}" is already defined in ${cache[key]}.`);1740                                        }1741                                        else {1742                                            cache[key] = type;1743                                        }1744                                    };1745                                }1746                                function inject(key, defaultValue, treatDefaultAsFactory = false) {1747                                    // fallback to `currentRenderingInstance` so that this can be called in1748                                    // a functional component1749                                    const instance = currentInstance || currentRenderingInstance;1750                                    if (instance) {1751                                        const provides = instance.provides;1752                                        if (key in provides) {1753                                            // TS doesn't allow symbol as index type1754                                            return provides[key];1755                                        }1756                                        else if (arguments.length > 1) {1757                                            return treatDefaultAsFactory && isFunction(defaultValue)1758                                                ? defaultValue()1759                                                : defaultValue;1760                                        }1761                                        else {1762                                            warn(`injection "${String(key)}" not found.`);1763                                        }1764                                    }1765                                    else {1766                                        warn(`inject() can only be used inside setup() or functional components.`);1767                                    }1768                                }1769                                function resolveData(instance, dataFn, publicThis) {1770                                    if ( !isFunction(dataFn)) {1771                                        warn(`The data option must be a function. ` +1772                                            `Plain object usage is no longer supported.`);1773                                    }1774                                    const data = dataFn.call(publicThis, publicThis);1775                                    if ( isPromise(data)) {1776                                        warn(`data() returned a Promise - note data() cannot be async; If you ` +1777                                            `intend to perform data fetching before component renders, use ` +1778                                            `async setup() + <Suspense>.`);1779                                    }1780                                    if (!isObject(data)) {1781                                         warn(`data() should return an object.`);1782                                    }1783                                    else if (instance.data === EMPTY_OBJ) {1784                                        instance.data = reactive(data);1785                                    }1786                                    else {1787                                        // existing data: this is a mixin or extends.1788                                        extend(instance.data, data);1789                                    }1790                                }1791                                class ComputedRefImpl {1792                                    constructor(getter, _setter, isReadonly) {1793                                        this._setter = _setter;1794                                        this._dirty = true;1795                                        this.__v_isRef = true;1796                                        this.effect = effect(getter, {1797                                            lazy: true,1798                                            scheduler: () => {1799                                                if (!this._dirty) {1800                                                    this._dirty = true;1801                                                    trigger(toRaw(this), "set" /* SET */, 'value');1802                                                }1803                                            }1804                                        });1805                                        this["__v_isReadonly" /* IS_READONLY */] = isReadonly;1806                                    }1807                                    get value() {1808                                        if (this._dirty) {1809                                            this._value = this.effect();1810                                            this._dirty = false;1811                                        }1812                                        track(toRaw(this), "get" /* GET */, 'value');1813                                        return this._value;1814                                    }1815                                    set value(newValue) {1816                                        this._setter(newValue);1817                                    }1818                                }1819                                function computed$1(getterOrOptions) {1820                                    const c = computed(getterOrOptions);1821                                    recordInstanceBoundEffect(c.effect);1822                                    return c;1823                                }1824                                function computed(getterOrOptions) {1825                                    let getter;1826                                    let setter;1827                                    if (isFunction(getterOrOptions)) {1828                                        getter = getterOrOptions;1829                                        setter =  () => {1830                                                console.warn('Write operation failed: computed value is readonly');1831                                            }1832                                            ;1833                                    }1834                                    else {1835                                        getter = getterOrOptions.get;1836                                        setter = getterOrOptions.set;1837                                    }1838                                    return new ComputedRefImpl(getter, setter, isFunction(getterOrOptions) || !getterOrOptions.set);1839                                }1840                        function registerHMR(instance) {1841                            const id = instance.type.__hmrId;1842                            let record = map.get(id);1843                            if (!record) {1844                                createRecord(id);1845                                record = map.get(id);1846                            }1847                            record.add(instance);1848                        }1849                        function createRecord(id) {1850                            if (map.has(id)) {1851                                return false;1852                            }1853                            map.set(id, new Set());1854                            return true;...

note.js

Source:note.js

...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) => {1465        if (vnode == null) {1466            if (container._vnode) {1467                unmount(container._vnode, null, null, true);1468            }1469        }1470        else {1471            patch(container._vnode || null, vnode, container);1472        }1473        flushPostFlushCbs();1474        container._vnode = vnode;1475    };1476    const internals = {1477        p: patch,1478        um: unmount,1479        m: move,1480        r: remove,1481        mt: mountComponent,1482        mc: mountChildren,1483        pc: patchChildren,1484        pbc: patchBlockChildren,1485        n: getNextHostNode,1486        o: options1487    };1488    let hydrate;1489    let hydrateNode;1490    if (createHydrationFns) {1491        [hydrate, hydrateNode] = createHydrationFns(internals);1492    }1493    return {1494        render,1495        hydrate,1496        createApp: createAppAPI(render, hydrate)1497    };1498}1499// render.render 62451500const render = (vnode, container) => {1501    if (vnode == null) {1502        if (container._vnode) {1503            unmount(container._vnode, null, null, true);1504        }1505    }1506    else {1507        patch(container._vnode || null, vnode, container);1508    }1509    flushPostFlushCbs();1510    container._vnode = vnode;1511};1512/**1513 * render 62451514 * 1. unmount(container._vnode, null, null, true);1515 * 2. patch(container._vnode || null, vnode, container);1516 * 3. flushPostFlushCbs();1517 */1518 // patch 51101519 const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, optimized = false) => {1520    // patching & not same type, unmount old tree1521    if (n1 && !isSameVNodeType(n1, n2)) {1522        anchor = getNextHostNode(n1);1523        unmount(n1, parentComponent, parentSuspense, true);1524        n1 = null;1525    }1526    if (n2.patchFlag === -2 /* BAIL */) {1527        optimized = false;1528        n2.dynamicChildren = null;1529    }1530    const { type, ref, shapeFlag } = n2;1531    switch (type) {1532        case Text:1533            processText(n1, n2, container, anchor);1534            break;1535        case Comment:1536            processCommentNode(n1, n2, container, anchor);1537            break;1538        case Static:1539            if (n1 == null) {1540                mountStaticNode(n2, container, anchor, isSVG);1541            }1542            else {1543                patchStaticNode(n1, n2, container, isSVG);1544            }1545            break;1546        case Fragment:1547            processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1548            break;1549        default:1550            if (shapeFlag & 1 /* ELEMENT */) {1551                processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1552            }1553            else if (shapeFlag & 6 /* COMPONENT */) {1554                processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1555            }1556            else if (shapeFlag & 64 /* TELEPORT */) {1557                type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);1558            }1559            else if ( shapeFlag & 128 /* SUSPENSE */) {1560                type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);1561            }1562            else {1563                warn('Invalid VNode type:', type, `(${typeof type})`);1564            }1565    }1566    // set ref1567    if (ref != null && parentComponent) {1568        setRef(ref, n1 && n1.ref, parentComponent, parentSuspense, n2);1569    }1570};1571function isSameVNodeType(n1, n2) {1572    if (1573        n2.shapeFlag & 6 /* COMPONENT */ &&1574        hmrDirtyComponents.has(n2.type)) {1575        // HMR only: if the component has been hot-updated, force a reload.1576        return false;1577    }1578    return n1.type === n2.type && n1.key === n2.key;1579}1580const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {1581    if (n1 == null) {1582        if (n2.shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) {1583            parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized);1584        }1585        else {1586            mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);1587        }1588    }1589    else {1590        updateComponent(n1, n2, optimized);1591    }1592};1593const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {1594    const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense));1595    if ( instance.type.__hmrId) {1596        registerHMR(instance);1597    }1598    {1599        pushWarningContext(initialVNode);1600        startMeasure(instance, `mount`);1601    }1602    // inject renderer internals for keepAlive1603    if (isKeepAlive(initialVNode)) {1604        instance.ctx.renderer = internals;1605    }1606    // resolve props and slots for setup context1607    {1608        startMeasure(instance, `init`);1609    }1610    setupComponent(instance);...

createApp.js

Source:createApp.js

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

scroll.js

Source:scroll.js

1/**2 * Restore scroll and scroll to hash3 *4 * - on page load...5 *   - if stored session => restore stored scroll6 *   - if hash => track anchor7 *   - else => nothing (browser's default)8 *9 * - on navigate...10 *   - if pop state (meaning history nav) => restore last scroll11 *   - if hash (direct nav in new tab session) => track anchor12 *   - else (push state) => scroll top13 */14import { pipe } from './util.js'15import { beforeHmr, afterHmr } from './hmr.js'16// history.scrollRestoration = 'manual'17export default (getOptions, hasBeenIdle) => {18  const {19    // max tracking time20    max = 3100,21    // time no change before stable (and stop tracking)22    stableThreshold = 500,23    // time after idle when another scroll will cancel tracking (stop tracking24    // on user interaction)25    cancelableAfter = 100,26  } = {}27  let el28  let trackStart = null29  let canceled = false30  const getCurrent = () => el && { top: el.scrollTop, left: el.scrollLeft }31  const isStickBottom = restore =>32    getOptions().hmrScrollStickBottom &&33    Math.abs(el.scrollHeight - el.clientHeight - restore.top) < 134  const getCurrentWithSticky = () => {35    const scroll = getCurrent()36    if (!scroll) return37    scroll.stickBottom = isStickBottom(scroll)38    return scroll39  }40  const registerCancelOnUserScroll = () => {41    const handleScroll = () => {42      if (hasBeenIdle(cancelableAfter)) {43        canceled = true44      }45    }46    el.addEventListener('scroll', handleScroll)47    return () => el.removeEventListener('scroll', handleScroll)48  }49  const registerTrackScrollState = () => {50    let scrollTimeout51    const saveScroll = () => {52      const scroll = getCurrent()53      history._replaceState({ ...history.state, scroll }, '')54    }55    const handleScroll = () => {56      clearTimeout(scrollTimeout)57      scrollTimeout = setTimeout(saveScroll, 50)58    }59    el.addEventListener('scroll', handleScroll)60    return () => el.removeEventListener('scroll', handleScroll)61  }62  const registerHmr = () => {63    let restore = null64    beforeHmr(() => {65      if (!el) return66      restore = getCurrentWithSticky()67    })68    afterHmr(() => {69      if (!el) return70      trackScroll(restore)71    })72    return () => {}73  }74  const registerSessionUnload = () => {75    const onUnload = e => {76      e.preventDefault()77      const { localStorageKey } = getOptions()78      if (!localStorageKey || !window.sessionStorage) return79      const key = `${localStorageKey}.scroll`80      const scroll = getCurrent()81      if (scroll) {82        sessionStorage.setItem(key, JSON.stringify(scroll))83      } else {84        sessionStorage.removeItem(key)85      }86    }87    window.addEventListener('unload', onUnload)88    return () => {89      removeEventListener('unload', onUnload)90    }91  }92  const restoreSession = () => {93    const { localStorageKey } = getOptions()94    if (!localStorageKey || !window.sessionStorage) return95    const key = `${localStorageKey}.scroll`96    const restore = sessionStorage.getItem(key)97    sessionStorage.setItem(key, null)98    if (restore) {99      trackScroll(JSON.parse(restore))100    }101  }102  const VOID = Symbol('Svench.scroll.VOID')103  const trackScroll = getScroll => {104    if (!getScroll) return105    const start = Date.now()106    let since = null107    let lastValue = VOID108    canceled = false109    trackStart = start110    const isIdle = () => hasBeenIdle(50)111    const track = () => {112      if (canceled) return113      const { top: _top, left, stickBottom = false, value = el.scrollHeight } =114        (typeof getScroll === 'function' ? getScroll() : getScroll) || {}115      const top = stickBottom ? el.scrollHeight : _top116      if (top != null) {117        el.scrollTo({ top, left })118      }119      if (isIdle() && value === lastValue) {120        if (Date.now() - since > stableThreshold) {121          trackStart = null122          return123        }124      } else {125        lastValue = value126        since = Date.now()127      }128      if (isIdle() && Date.now() - hasBeenIdle() - start > max) {129        // give up130        trackStart = null131        return132      }133      requestAnimationFrame(track)134    }135    track()136  }137  const trackAnchor = hash => {138    const name = hash.replace(/^#/, '')139    const offset = 0140    trackScroll(() => {141      const target =142        document.querySelector(`${hash}, a[name="${name}"]`) ||143        document.querySelector(':target')144      if (!target) return145      const top = target.offsetTop - offset146      return { top }147    })148  }149  const navigate = ({ hash, popState }) => () => {150    if (!el) return151    if (popState) {152      trackScroll(popState.scroll)153    } else if (hash) {154      // priority to session restore155      if (trackStart !== null) return156      trackAnchor(hash)157    } else {158      el.scrollTo({ top: 0 })159    }160  }161  let unregisterTargeted162  let initial = true163  const setTarget = target => {164    el = target165    if (initial) {166      initial = false167      restoreSession()168    } else {169      unregisterTargeted()170    }171    unregisterTargeted = pipe(172      () => {173        unregisterTargeted = null174      },175      registerCancelOnUserScroll(),176      registerTrackScrollState()177    )178  }179  const unregisterMain = pipe(registerHmr(), registerSessionUnload())180  const dispose = () => {181    unregisterMain()182    if (unregisterTargeted) unregisterTargeted()183  }184  return { dispose, navigate, setTarget }...

Using AI Code Generation

1const playwright = require('playwright');2const { registerHMR } = require('playwright/lib/server/hmrServer');3(async () => {4  const browser = await playwright.chromium.launch({5  });6  const context = await browser.newContext();7  const page = await context.newPage();8  await registerHMR(page);9})();10const playwright = require('playwright');11const { hmrServer } = require('playwright/lib/server/hmrServer');12const { HMRClient } = require('playwright/lib/server/hmrClient');13(async () => {14  const browserServer = await playwright.chromium.launchServer({15  });16  const browserURL = browserServer.wsEndpoint();17  const hmrServer = await hmrServer(browserURL);18  const { page, browserContext } = await hmrServer.newContext();19  const client = new HMRClient(page);20  await client.enable();21  await client.on('update', ({ url }) => {22    console.log('HMR update', url);23  });24})();25const playwright = require('playwright');26const { hmrServer } = require('playwright/lib/server/hmrServer');27const { HMRClient } = require('playwright/lib/server/hmrClient');28(async () => {29  const browserServer = await playwright.chromium.launchServer({30  });31  const browserURL = browserServer.wsEndpoint();32  const hmrServer = await hmrServer(browserURL);33  const { page, browserContext } = await hmrServer.newContext();34  const client = new HMRClient(page);35  await client.enable();36  await client.on('update', ({ url }) => {37    console.log('HMR update', url);38  });39})();

Using AI Code Generation

1const playwright = require('playwright');2const { registerHMR } = require('playwright/lib/server/hmrServer');3const { chromium } = playwright;4(async () => {5  const browser = await chromium.launch();6  const context = await browser.newContext();7  const page = await context.newPage();8  registerHMR(page, 'test.js', () => {9    console.log('HMR Triggered');10  });11  await browser.close();12})();13  if (module.hot) {14    module.hot.accept();15  }16### `registerHMR(page, filePath, callback)`17Apache-2.0 © [Microsoft](

Using AI Code Generation

1const playwright = require('playwright');2const path = require('path');3const fs = require('fs');4const { registerHMR } = require('playwright/lib/hmr');5const { chromium } = require('playwright');6async function main() {7  const browser = await chromium.launch();8  const context = await browser.newContext();9  const page = await context.newPage();10  await page.waitForSelector('h1');11  await page.click('text=Click me!');12  await page.waitForSelector('text=Hello world!');13  registerHMR(page, path.join(__dirname, 'hmr.js'));14  await new Promise((resolve) => setTimeout(resolve, 2000));15  await page.waitForSelector('text=Hello world!');16  await browser.close();17}18main();19const el = document.getElementById('hello');20el.innerText = 'Hello world!';

Using AI Code Generation

1const { registerHMR } = require('playwright/lib/server/hmr/hmrServer');2registerHMR((event) => {3  if (event.type === 'connected') {4    console.log(`Got connected event`);5  }6  if (event.type === 'reload') {7    console.log(`Got reload event`);8  }9  if (event.type === 'disposed') {10    console.log(`Got disposed event`);11  }12});13const { chromium } = require('playwright');14(async () => {15  const browser = await chromium.connect({16  });17  const page = await browser.newPage();18  await page.waitForTimeout(5000);19  await browser.close();20})();21const { chromium } = require('playwright');22(async () => {23  const browser = await chromium.launch({ headless: false, devtools: true });24  const page = await browser.newPage();25  await page.waitForTimeout(5000);26  await browser.close();27})();28const { chromium } = require('playwright');29(async () => {30  const { browserServer, endpoints } = await chromium.launchServer({ headless: false, devtools: true });31  const wsEndpoint = endpoints[0];32  const browser = await chromium.connect({ wsEndpoint });33  const page = await browser.newPage();34  await page.waitForTimeout(5000);35  await browser.close();36  await browserServer.close();37})();

Using AI Code Generation

1const playwright = require('playwright');2const { registerHMR } = require('@playwright/test/lib/utils/hmrServer');3const browser = await playwright.chromium.launch();4const context = await browser.newContext();5const page = await context.newPage();6await registerHMR(page, (url) => {7  console.log('HMR: ', url);8});9await browser.close();10const webpack = require('webpack');11const path = require('path');12const WebpackDevServer = require('webpack-dev-server');13const webpackHotMiddleware = require('webpack-hot-middleware');14const webpackConfig = require('./webpack.config');15const { port } = webpackConfig.devServer;16const server = new WebpackDevServer(webpack(webpackConfig), {17  before: (app, server) => {18    app.use(19      webpackHotMiddleware(server.compiler, {20      })21    );22  },23});24server.listen(port, 'localhost', () => {25});26const path = require('path');27const HtmlWebpackPlugin = require('html-webpack-plugin');28const webpack = require('webpack');29module.exports = {30  devServer: {31    static: {32      directory: path.join(__dirname, 'dist'),33    },34  },35    new HtmlWebpackPlugin({36    }),37    new webpack.HotModuleReplacementPlugin(),38  output: {39    path: path.resolve(__dirname, 'dist'),40  },41};

Using AI Code Generation

1const { registerHMR } = require('playwright-core/lib/server/hmr/hmrServer');2registerHMR((data) => {3    console.log(data);4});5const { hmrClient } = require('playwright-core/lib/server/hmr/hmrClient');6hmrClient.connect();7hmrClient.on('reload', () => {8    console.log('Reloaded');9});10{ type: 'reload', path: '/home/user/test.js' }11const { hmrClient } = require('playwright-core/lib/server/hmr/hmrClient');12hmrClient.connect();13hmrClient.on('reload', () => {14    console.log('Reloaded');15});16const { HMRServer } = require('playwright-core/lib/server/hmr/hmrServer');17const server = new HMRServer();18server.start();19const { hmrMiddleware } = require('playwright-core/lib/server/hmr/hmrMiddleware');20app.use(hmrMiddleware);

Using AI Code Generation

1const { registerHMR } = require('playwright/lib/server/hmrServer');2registerHMR(module, (source, filename) => {3  if (filename.includes('test.js')) {4    page.reload();5  }6});7const { test, expect } = require('@playwright/test');8test('test', async ({ page }) => {9  await page.click('text=Get started');10  await page.click('text=Docs');11  await page.click('text=API');12  await page.click('text=Test');13  await page.click('text=expect');14  await page.click('text=to be visible');15  await expect(page.locator('text=to be visible').first()).toBeVisible();16});

Using AI Code Generation

1const { registerHMR } = require('playwright/lib/server/hmrServer');2registerHMR(() => {3  console.log('HMR event triggered');4});5const { registerHMR } = require('playwright/lib/server/hmrServer');6registerHMR(() => {7  console.log('HMR event triggered');8});

Using AI Code Generation

1registerHMR(() => {2  console.log("HMR triggered");3}, "test.js");4playwright.registerHMR(() => {5  console.log("HMR triggered");6}, "test.js");7playwright.registerHMR(() => {8  console.log("HMR triggered");9}, "test.js", true);10playwright.registerHMR(() => {11  console.log("HMR triggered");12}, "test.js", true, false);

Using AI Code Generation

1const { registerHMR } = require('playwright-core/lib/server/hmr/hmrServer');2const { chromium } = require('playwright-core');3registerHMR(async (event) => {4  console.log('HMR Event received: ', event);5  if (event.type === 'reload') {6    await browser.close();7    browser = await chromium.launch();8    page = await browser.newPage();9  }10});11(async () => {12  let browser = await chromium.launch();13  let page = await browser.newPage();14})();15{16  "scripts": {17  },18  "dependencies": {19  }20}21const path = require('path');22const HtmlWebpackPlugin = require('html-webpack-plugin');23const { WebpackPluginServe } = require('webpack-plugin-serve');24module.exports = {25  output: {26    path: path.resolve(__dirname, 'dist'),27  },28    new HtmlWebpackPlugin(),29    new WebpackPluginServe({30      static: path.resolve(__dirname, 'dist'),31    }),32};33console.log('Hello World');34console.log("Hello World");

Playwright tutorial

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

Chapters:

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

Run Playwright Internal automation tests on LambdaTest cloud grid

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

View sample repo

View Documentation Sign up Free

›

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

How to use registerHMR method in Playwright Internal

Playwright tutorial

Chapters:

Run Playwright Internal automation tests on LambdaTest cloud grid

Try LambdaTest Now !!

Was this article helpful?