How to use markAttrsAccessed method in Playwright Internal

Best JavaScript code snippet using playwright-internal

runtime-core.cjs.js

Source:runtime-core.cjs.js

...321// dev only flag to track whether $attrs was used during render.322// If $attrs was used during render then the warning for failed attrs323// fallthrough can be suppressed.324let accessedAttrs = false;325function markAttrsAccessed() {326 accessedAttrs = true;327}328function renderComponentRoot(instance) {329 const { type: Component, parent, vnode, proxy, withProxy, props, slots, attrs, emit, renderCache } = instance;330 let result;331 currentRenderingInstance = instance;332 {333 accessedAttrs = false;334 }335 try {336 let fallthroughAttrs;337 if (vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {338 // withProxy is a proxy with a different `has` trap only for339 // runtime-compiled render functions using `with` block.340 const proxyToUse = withProxy || proxy;341 result = normalizeVNode(instance.render.call(proxyToUse, proxyToUse, renderCache));342 fallthroughAttrs = attrs;343 }344 else {345 // functional346 const render = Component;347 // in dev, mark attrs accessed if optional props (attrs === props)348 if (true && attrs === props) {349 markAttrsAccessed();350 }351 result = normalizeVNode(render.length > 1352 ? render(props, true353 ? {354 get attrs() {355 markAttrsAccessed();356 return attrs;357 },358 slots,359 emit360 }361 : { attrs, slots, emit })362 : render(props, null /* we know it doesn't need it */));363 fallthroughAttrs = Component.props ? attrs : getFallthroughAttrs(attrs);364 }365 // attr merging366 // in dev mode, comments are preserved, and it's possible for a template367 // to have comments along side the root element which makes it a fragment368 let root = result;369 let setRoot = undefined;370 if (true) {371 ;372 [root, setRoot] = getChildRoot(result);373 }374 if (Component.inheritAttrs !== false &&375 fallthroughAttrs &&376 Object.keys(fallthroughAttrs).length) {377 if (root.shapeFlag & 1 /* ELEMENT */ ||378 root.shapeFlag & 6 /* COMPONENT */) {379 root = cloneVNode(root, fallthroughAttrs);380 // If the child root node is a compiler optimized vnode, make sure it381 // force update full props to account for the merged attrs.382 if (root.dynamicChildren) {383 root.patchFlag |= 16 /* FULL_PROPS */;384 }385 }386 else if (true && !accessedAttrs && root.type !== Comment) {387 const allAttrs = Object.keys(attrs);388 const eventAttrs = [];389 const extraAttrs = [];390 for (let i = 0, l = allAttrs.length; i < l; i++) {391 const key = allAttrs[i];392 if (shared.isOn(key)) {393 // remove `on`, lowercase first letter to reflect event casing accurately394 eventAttrs.push(key[2].toLowerCase() + key.slice(3));395 }396 else {397 extraAttrs.push(key);398 }399 }400 if (extraAttrs.length) {401 warn(`Extraneous non-props attributes (` +402 `${extraAttrs.join(', ')}) ` +403 `were passed to component but could not be automatically inherited ` +404 `because component renders fragment or text root nodes.`);405 }406 if (eventAttrs.length) {407 warn(`Extraneous non-emits event listeners (` +408 `${eventAttrs.join(', ')}) ` +409 `were passed to component but could not be automatically inherited ` +410 `because component renders fragment or text root nodes. ` +411 `If the listener is intended to be a component custom event listener only, ` +412 `declare it using the "emits" option.`);413 }414 }415 }416 // inherit scopeId417 const parentScopeId = parent && parent.type.__scopeId;418 if (parentScopeId) {419 root = cloneVNode(root, { [parentScopeId]: '' });420 }421 // inherit directives422 if (vnode.dirs) {423 if (true && !isElementRoot(root)) {424 warn(`Runtime directive used on component with non-element root node. ` +425 `The directives will not function as intended.`);426 }427 root.dirs = vnode.dirs;428 }429 // inherit transition data430 if (vnode.transition) {431 if (true && !isElementRoot(root)) {432 warn(`Component inside <Transition> renders non-element root node ` +433 `that cannot be animated.`);434 }435 root.transition = vnode.transition;436 }437 if (true && setRoot) {438 setRoot(root);439 }440 else {441 result = root;442 }443 }444 catch (err) {445 handleError(err, instance, 1 /* RENDER_FUNCTION */);446 result = createVNode(Comment);447 }448 currentRenderingInstance = null;449 return result;450}451const getChildRoot = (vnode) => {452 if (vnode.type !== Fragment) {453 return [vnode, undefined];454 }455 const rawChildren = vnode.children;456 const dynamicChildren = vnode.dynamicChildren;457 const children = rawChildren.filter(child => {458 return !(isVNode(child) && child.type === Comment);459 });460 if (children.length !== 1) {461 return [vnode, undefined];462 }463 const childRoot = children[0];464 const index = rawChildren.indexOf(childRoot);465 const dynamicIndex = dynamicChildren466 ? dynamicChildren.indexOf(childRoot)467 : null;468 const setRoot = (updatedRoot) => {469 rawChildren[index] = updatedRoot;470 if (dynamicIndex !== null)471 dynamicChildren[dynamicIndex] = updatedRoot;472 };473 return [normalizeVNode(childRoot), setRoot];474};475const getFallthroughAttrs = (attrs) => {476 let res;477 for (const key in attrs) {478 if (key === 'class' || key === 'style' || shared.isOn(key)) {479 (res || (res = {}))[key] = attrs[key];480 }481 }482 return res;483};484const isElementRoot = (vnode) => {485 return (vnode.shapeFlag & 6 /* COMPONENT */ ||486 vnode.shapeFlag & 1 /* ELEMENT */ ||487 vnode.type === Comment // potential v-if branch switch488 );489};490function shouldUpdateComponent(prevVNode, nextVNode, parentComponent, optimized) {491 const { props: prevProps, children: prevChildren } = prevVNode;492 const { props: nextProps, children: nextChildren, patchFlag } = nextVNode;493 // Parent component's render function was hot-updated. Since this may have494 // caused the child component's slots content to have changed, we need to495 // force the child to update as well.496 if (497 (prevChildren || nextChildren) &&498 parentComponent &&499 parentComponent.renderUpdated) {500 return true;501 }502 // force child update for runtime directive or transition on component vnode.503 if (nextVNode.dirs || nextVNode.transition) {504 return true;505 }506 if (patchFlag > 0) {507 if (patchFlag & 1024 /* DYNAMIC_SLOTS */) {508 // slot content that references values that might have changed,509 // e.g. in a v-for510 return true;511 }512 if (patchFlag & 16 /* FULL_PROPS */) {513 // presence of this flag indicates props are always non-null514 return hasPropsChanged(prevProps, nextProps);515 }516 else if (patchFlag & 8 /* PROPS */) {517 const dynamicProps = nextVNode.dynamicProps;518 for (let i = 0; i < dynamicProps.length; i++) {519 const key = dynamicProps[i];520 if (nextProps[key] !== prevProps[key]) {521 return true;522 }523 }524 }525 }526 else if (!optimized) {527 // this path is only taken by manually written render functions528 // so presence of any children leads to a forced update529 if (prevChildren || nextChildren) {530 if (!nextChildren || !nextChildren.$stable) {531 return true;532 }533 }534 if (prevProps === nextProps) {535 return false;536 }537 if (!prevProps) {538 return !!nextProps;539 }540 if (!nextProps) {541 return true;542 }543 return hasPropsChanged(prevProps, nextProps);544 }545 return false;546}547function hasPropsChanged(prevProps, nextProps) {548 const nextKeys = Object.keys(nextProps);549 if (nextKeys.length !== Object.keys(prevProps).length) {550 return true;551 }552 for (let i = 0; i < nextKeys.length; i++) {553 const key = nextKeys[i];554 if (nextProps[key] !== prevProps[key]) {555 return true;556 }557 }558 return false;559}560function updateHOCHostEl({ vnode, parent }, el // HostNode561) {562 while (parent && parent.subTree === vnode) {563 (vnode = parent.vnode).el = el;564 parent = parent.parent;565 }566}567const isSuspense = (type) => type.__isSuspense;568// Suspense exposes a component-like API, and is treated like a component569// in the compiler, but internally it's a special built-in type that hooks570// directly into the renderer.571const SuspenseImpl = {572 // In order to make Suspense tree-shakable, we need to avoid importing it573 // directly in the renderer. The renderer checks for the __isSuspense flag574 // on a vnode's type and calls the `process` method, passing in renderer575 // internals.576 __isSuspense: true,577 process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, 578 // platform-specific impl passed from renderer579 rendererInternals) {580 if (n1 == null) {581 mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, rendererInternals);582 }583 else {584 patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized, rendererInternals);585 }586 },587 hydrate: hydrateSuspense588};589// Force-casted public typing for h and TSX props inference590const Suspense = ( SuspenseImpl591 );592function mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, rendererInternals) {593 const { p: patch, o: { createElement } } = rendererInternals;594 const hiddenContainer = createElement('div');595 const suspense = (n2.suspense = createSuspenseBoundary(n2, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, optimized, rendererInternals));596 // start mounting the content subtree in an off-dom container597 patch(null, suspense.subTree, hiddenContainer, null, parentComponent, suspense, isSVG, optimized);598 // now check if we have encountered any async deps599 if (suspense.deps > 0) {600 // mount the fallback tree601 patch(null, suspense.fallbackTree, container, anchor, parentComponent, null, // fallback tree will not have suspense context602 isSVG, optimized);603 n2.el = suspense.fallbackTree.el;604 }605 else {606 // Suspense has no async deps. Just resolve.607 suspense.resolve();608 }609}610function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, optimized, { p: patch }) {611 const suspense = (n2.suspense = n1.suspense);612 suspense.vnode = n2;613 const { content, fallback } = normalizeSuspenseChildren(n2);614 const oldSubTree = suspense.subTree;615 const oldFallbackTree = suspense.fallbackTree;616 if (!suspense.isResolved) {617 patch(oldSubTree, content, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, optimized);618 if (suspense.deps > 0) {619 // still pending. patch the fallback tree.620 patch(oldFallbackTree, fallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context621 isSVG, optimized);622 n2.el = fallback.el;623 }624 // If deps somehow becomes 0 after the patch it means the patch caused an625 // async dep component to unmount and removed its dep. It will cause the626 // suspense to resolve and we don't need to do anything here.627 }628 else {629 // just normal patch inner content as a fragment630 patch(oldSubTree, content, container, anchor, parentComponent, suspense, isSVG, optimized);631 n2.el = content.el;632 }633 suspense.subTree = content;634 suspense.fallbackTree = fallback;635}636let hasWarned = false;637function createSuspenseBoundary(vnode, parent, parentComponent, container, hiddenContainer, anchor, isSVG, optimized, rendererInternals, isHydrating = false) {638 /* istanbul ignore if */639 if ( !hasWarned) {640 hasWarned = true;641 console[console.info ? 'info' : 'log'](`<Suspense> is an experimental feature and its API will likely change.`);642 }643 const { p: patch, m: move, um: unmount, n: next, o: { parentNode } } = rendererInternals;644 const getCurrentTree = () => suspense.isResolved || suspense.isHydrating645 ? suspense.subTree646 : suspense.fallbackTree;647 const { content, fallback } = normalizeSuspenseChildren(vnode);648 const suspense = {649 vnode,650 parent,651 parentComponent,652 isSVG,653 optimized,654 container,655 hiddenContainer,656 anchor,657 deps: 0,658 subTree: content,659 fallbackTree: fallback,660 isHydrating,661 isResolved: false,662 isUnmounted: false,663 effects: [],664 resolve() {665 {666 if (suspense.isResolved) {667 throw new Error(`resolveSuspense() is called on an already resolved suspense boundary.`);668 }669 if (suspense.isUnmounted) {670 throw new Error(`resolveSuspense() is called on an already unmounted suspense boundary.`);671 }672 }673 const { vnode, subTree, fallbackTree, effects, parentComponent, container } = suspense;674 if (suspense.isHydrating) {675 suspense.isHydrating = false;676 }677 else {678 // this is initial anchor on mount679 let { anchor } = suspense;680 // unmount fallback tree681 if (fallbackTree.el) {682 // if the fallback tree was mounted, it may have been moved683 // as part of a parent suspense. get the latest anchor for insertion684 anchor = next(fallbackTree);685 unmount(fallbackTree, parentComponent, suspense, true);686 }687 // move content from off-dom container to actual container688 move(subTree, container, anchor, 0 /* ENTER */);689 }690 const el = (vnode.el = subTree.el);691 // suspense as the root node of a component...692 if (parentComponent && parentComponent.subTree === vnode) {693 parentComponent.vnode.el = el;694 updateHOCHostEl(parentComponent, el);695 }696 // check if there is a pending parent suspense697 let parent = suspense.parent;698 let hasUnresolvedAncestor = false;699 while (parent) {700 if (!parent.isResolved) {701 // found a pending parent suspense, merge buffered post jobs702 // into that parent703 parent.effects.push(...effects);704 hasUnresolvedAncestor = true;705 break;706 }707 parent = parent.parent;708 }709 // no pending parent suspense, flush all jobs710 if (!hasUnresolvedAncestor) {711 queuePostFlushCb(effects);712 }713 suspense.isResolved = true;714 suspense.effects = [];715 // invoke @resolve event716 const onResolve = vnode.props && vnode.props.onResolve;717 if (shared.isFunction(onResolve)) {718 onResolve();719 }720 },721 recede() {722 suspense.isResolved = false;723 const { vnode, subTree, fallbackTree, parentComponent, container, hiddenContainer, isSVG, optimized } = suspense;724 // move content tree back to the off-dom container725 const anchor = next(subTree);726 move(subTree, hiddenContainer, null, 1 /* LEAVE */);727 // remount the fallback tree728 patch(null, fallbackTree, container, anchor, parentComponent, null, // fallback tree will not have suspense context729 isSVG, optimized);730 const el = (vnode.el = fallbackTree.el);731 // suspense as the root node of a component...732 if (parentComponent && parentComponent.subTree === vnode) {733 parentComponent.vnode.el = el;734 updateHOCHostEl(parentComponent, el);735 }736 // invoke @recede event737 const onRecede = vnode.props && vnode.props.onRecede;738 if (shared.isFunction(onRecede)) {739 onRecede();740 }741 },742 move(container, anchor, type) {743 move(getCurrentTree(), container, anchor, type);744 suspense.container = container;745 },746 next() {747 return next(getCurrentTree());748 },749 registerDep(instance, setupRenderEffect) {750 // suspense is already resolved, need to recede.751 // use queueJob so it's handled synchronously after patching the current752 // suspense tree753 if (suspense.isResolved) {754 queueJob(() => {755 suspense.recede();756 });757 }758 const hydratedEl = instance.vnode.el;759 suspense.deps++;760 instance761 .asyncDep.catch(err => {762 handleError(err, instance, 0 /* SETUP_FUNCTION */);763 })764 .then(asyncSetupResult => {765 // retry when the setup() promise resolves.766 // component may have been unmounted before resolve.767 if (instance.isUnmounted || suspense.isUnmounted) {768 return;769 }770 suspense.deps--;771 // retry from this component772 instance.asyncResolved = true;773 const { vnode } = instance;774 {775 pushWarningContext(vnode);776 }777 handleSetupResult(instance, asyncSetupResult, false);778 if (hydratedEl) {779 // vnode may have been replaced if an update happened before the780 // async dep is reoslved.781 vnode.el = hydratedEl;782 }783 setupRenderEffect(instance, vnode, 784 // component may have been moved before resolve.785 // if this is not a hydration, instance.subTree will be the comment786 // placeholder.787 hydratedEl788 ? parentNode(hydratedEl)789 : parentNode(instance.subTree.el), 790 // anchor will not be used if this is hydration, so only need to791 // consider the comment placeholder case.792 hydratedEl ? null : next(instance.subTree), suspense, isSVG, optimized);793 updateHOCHostEl(instance, vnode.el);794 {795 popWarningContext();796 }797 if (suspense.deps === 0) {798 suspense.resolve();799 }800 });801 },802 unmount(parentSuspense, doRemove) {803 suspense.isUnmounted = true;804 unmount(suspense.subTree, parentComponent, parentSuspense, doRemove);805 if (!suspense.isResolved) {806 unmount(suspense.fallbackTree, parentComponent, parentSuspense, doRemove);807 }808 }809 };810 return suspense;811}812function hydrateSuspense(node, vnode, parentComponent, parentSuspense, isSVG, optimized, rendererInternals, hydrateNode) {813 const suspense = (vnode.suspense = createSuspenseBoundary(vnode, parentSuspense, parentComponent, node.parentNode, document.createElement('div'), null, isSVG, optimized, rendererInternals, true /* hydrating */));814 // there are two possible scenarios for server-rendered suspense:815 // - success: ssr content should be fully resolved816 // - failure: ssr content should be the fallback branch.817 // however, on the client we don't really know if it has failed or not818 // attempt to hydrate the DOM assuming it has succeeded, but we still819 // need to construct a suspense boundary first820 const result = hydrateNode(node, suspense.subTree, parentComponent, suspense, optimized);821 if (suspense.deps === 0) {822 suspense.resolve();823 }824 return result;825}826function normalizeSuspenseChildren(vnode) {827 const { shapeFlag, children } = vnode;828 if (shapeFlag & 32 /* SLOTS_CHILDREN */) {829 const { default: d, fallback } = children;830 return {831 content: normalizeVNode(shared.isFunction(d) ? d() : d),832 fallback: normalizeVNode(shared.isFunction(fallback) ? fallback() : fallback)833 };834 }835 else {836 return {837 content: normalizeVNode(children),838 fallback: normalizeVNode(null)839 };840 }841}842function queueEffectWithSuspense(fn, suspense) {843 if (suspense && !suspense.isResolved) {844 if (shared.isArray(fn)) {845 suspense.effects.push(...fn);846 }847 else {848 suspense.effects.push(fn);849 }850 }851 else {852 queuePostFlushCb(fn);853 }854}855/**856 * Wrap a slot function to memoize current rendering instance857 * @internal858 */859function withCtx(fn, ctx = currentRenderingInstance) {860 if (!ctx)861 return fn;862 return function renderFnWithContext() {863 const owner = currentRenderingInstance;864 setCurrentRenderingInstance(ctx);865 const res = fn.apply(null, arguments);866 setCurrentRenderingInstance(owner);867 return res;868 };869}870// SFC scoped style ID management.871let currentScopeId = null;872const scopeIdStack = [];873/**874 * @internal875 */876function pushScopeId(id) {877 scopeIdStack.push((currentScopeId = id));878}879/**880 * @internal881 */882function popScopeId() {883 scopeIdStack.pop();884 currentScopeId = scopeIdStack[scopeIdStack.length - 1] || null;885}886/**887 * @internal888 */889function withScopeId(id) {890 return ((fn) => withCtx(function () {891 pushScopeId(id);892 const res = fn.apply(this, arguments);893 popScopeId();894 return res;895 }));896}897const isTeleport = (type) => type.__isTeleport;898const isTeleportDisabled = (props) => props && (props.disabled || props.disabled === '');899const resolveTarget = (props, select) => {900 const targetSelector = props && props.to;901 if (shared.isString(targetSelector)) {902 if (!select) {903 904 warn(`Current renderer does not support string target for Teleports. ` +905 `(missing querySelector renderer option)`);906 return null;907 }908 else {909 const target = select(targetSelector);910 if (!target) {911 912 warn(`Failed to locate Teleport target with selector "${targetSelector}".`);913 }914 return target;915 }916 }917 else {918 if ( !targetSelector) {919 warn(`Invalid Teleport target: ${targetSelector}`);920 }921 return targetSelector;922 }923};924const TeleportImpl = {925 __isTeleport: true,926 process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals) {927 const { mc: mountChildren, pc: patchChildren, pbc: patchBlockChildren, o: { insert, querySelector, createText, createComment } } = internals;928 const disabled = isTeleportDisabled(n2.props);929 const { shapeFlag, children } = n2;930 if (n1 == null) {931 // insert anchors in the main view932 const placeholder = (n2.el = createComment('teleport start')933 );934 const mainAnchor = (n2.anchor = createComment('teleport end')935 );936 insert(placeholder, container, anchor);937 insert(mainAnchor, container, anchor);938 const target = (n2.target = resolveTarget(n2.props, querySelector));939 const targetAnchor = (n2.targetAnchor = createText(''));940 if (target) {941 insert(targetAnchor, target);942 }943 else {944 warn('Invalid Teleport target on mount:', target, `(${typeof target})`);945 }946 const mount = (container, anchor) => {947 // Teleport *always* has Array children. This is enforced in both the948 // compiler and vnode children normalization.949 if (shapeFlag & 16 /* ARRAY_CHILDREN */) {950 mountChildren(children, container, anchor, parentComponent, parentSuspense, isSVG, optimized);951 }952 };953 if (disabled) {954 mount(container, mainAnchor);955 }956 else if (target) {957 mount(target, targetAnchor);958 }959 }960 else {961 // update content962 n2.el = n1.el;963 const mainAnchor = (n2.anchor = n1.anchor);964 const target = (n2.target = n1.target);965 const targetAnchor = (n2.targetAnchor = n1.targetAnchor);966 const wasDisabled = isTeleportDisabled(n1.props);967 const currentContainer = wasDisabled ? container : target;968 const currentAnchor = wasDisabled ? mainAnchor : targetAnchor;969 if (n2.dynamicChildren) {970 // fast path when the teleport happens to be a block root971 patchBlockChildren(n1.dynamicChildren, n2.dynamicChildren, currentContainer, parentComponent, parentSuspense, isSVG);972 }973 else if (!optimized) {974 patchChildren(n1, n2, currentContainer, currentAnchor, parentComponent, parentSuspense, isSVG);975 }976 if (disabled) {977 if (!wasDisabled) {978 // enabled -> disabled979 // move into main container980 moveTeleport(n2, container, mainAnchor, internals, 1 /* TOGGLE */);981 }982 }983 else {984 // target changed985 if ((n2.props && n2.props.to) !== (n1.props && n1.props.to)) {986 const nextTarget = (n2.target = resolveTarget(n2.props, querySelector));987 if (nextTarget) {988 moveTeleport(n2, nextTarget, null, internals, 0 /* TARGET_CHANGE */);989 }990 else {991 warn('Invalid Teleport target on update:', target, `(${typeof target})`);992 }993 }994 else if (wasDisabled) {995 // disabled -> enabled996 // move into teleport target997 moveTeleport(n2, target, targetAnchor, internals, 1 /* TOGGLE */);998 }999 }1000 }1001 },1002 remove(vnode, { r: remove, o: { remove: hostRemove } }) {1003 const { shapeFlag, children, anchor } = vnode;1004 hostRemove(anchor);1005 if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1006 for (let i = 0; i < children.length; i++) {1007 remove(children[i]);1008 }1009 }1010 },1011 move: moveTeleport,1012 hydrate: hydrateTeleport1013};1014function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }, moveType = 2 /* REORDER */) {1015 // move target anchor if this is a target change.1016 if (moveType === 0 /* TARGET_CHANGE */) {1017 insert(vnode.targetAnchor, container, parentAnchor);1018 }1019 const { el, anchor, shapeFlag, children, props } = vnode;1020 const isReorder = moveType === 2 /* REORDER */;1021 // move main view anchor if this is a re-order.1022 if (isReorder) {1023 insert(el, container, parentAnchor);1024 }1025 // if this is a re-order and teleport is enabled (content is in target)1026 // do not move children. So the opposite is: only move children if this1027 // is not a reorder, or the teleport is disabled1028 if (!isReorder || isTeleportDisabled(props)) {1029 // Teleport has either Array children or no children.1030 if (shapeFlag & 16 /* ARRAY_CHILDREN */) {1031 for (let i = 0; i < children.length; i++) {1032 move(children[i], container, parentAnchor, 2 /* REORDER */);1033 }1034 }1035 }1036 // move main view anchor if this is a re-order.1037 if (isReorder) {1038 insert(anchor, container, parentAnchor);1039 }1040}1041function hydrateTeleport(node, vnode, parentComponent, parentSuspense, optimized, { o: { nextSibling, parentNode, querySelector } }, hydrateChildren) {1042 const target = (vnode.target = resolveTarget(vnode.props, querySelector));1043 if (target) {1044 // if multiple teleports rendered to the same target element, we need to1045 // pick up from where the last teleport finished instead of the first node1046 const targetNode = target._lpa || target.firstChild;1047 if (vnode.shapeFlag & 16 /* ARRAY_CHILDREN */) {1048 if (isTeleportDisabled(vnode.props)) {1049 vnode.anchor = hydrateChildren(nextSibling(node), vnode, parentNode(node), parentComponent, parentSuspense, optimized);1050 vnode.targetAnchor = targetNode;1051 }1052 else {1053 vnode.anchor = nextSibling(node);1054 vnode.targetAnchor = hydrateChildren(targetNode, vnode, target, parentComponent, parentSuspense, optimized);1055 }1056 target._lpa = nextSibling(vnode.targetAnchor);1057 }1058 }1059 return vnode.anchor && nextSibling(vnode.anchor);1060}1061// Force-casted public typing for h and TSX props inference1062const Teleport = TeleportImpl;1063const COMPONENTS = 'components';1064const DIRECTIVES = 'directives';1065/**1066 * @internal1067 */1068function resolveComponent(name) {1069 return resolveAsset(COMPONENTS, name) || name;1070}1071const NULL_DYNAMIC_COMPONENT = Symbol();1072/**1073 * @internal1074 */1075function resolveDynamicComponent(component) {1076 if (shared.isString(component)) {1077 return resolveAsset(COMPONENTS, component, false) || component;1078 }1079 else {1080 // invalid types will fallthrough to createVNode and raise warning1081 return component || NULL_DYNAMIC_COMPONENT;1082 }1083}1084/**1085 * @internal1086 */1087function resolveDirective(name) {1088 return resolveAsset(DIRECTIVES, name);1089}1090function resolveAsset(type, name, warnMissing = true) {1091 const instance = currentRenderingInstance || currentInstance;1092 if (instance) {1093 let camelized, capitalized;1094 const registry = instance[type];1095 let res = registry[name] ||1096 registry[(camelized = shared.camelize(name))] ||1097 registry[(capitalized = shared.capitalize(camelized))];1098 if (!res && type === COMPONENTS) {1099 const self = instance.type;1100 const selfName = self.displayName || self.name;1101 if (selfName &&1102 (selfName === name ||1103 selfName === camelized ||1104 selfName === capitalized)) {1105 res = self;1106 }1107 }1108 {1109 if (res) {1110 // in dev, infer anonymous component's name based on registered name1111 if (type === COMPONENTS &&1112 shared.isObject(res) &&1113 !res.name) {1114 res.name = name;1115 }1116 }1117 else if (warnMissing) {1118 warn(`Failed to resolve ${type.slice(0, -1)}: ${name}`);1119 }1120 }1121 return res;1122 }1123 else {1124 warn(`resolve${shared.capitalize(type.slice(0, -1))} ` +1125 `can only be used in render() or setup().`);1126 }1127}1128const Fragment = Symbol( 'Fragment' );1129const Text = Symbol( 'Text' );1130const Comment = Symbol( 'Comment' );1131const Static = Symbol( 'Static' );1132// Since v-if and v-for are the two possible ways node structure can dynamically1133// change, once we consider v-if branches and each v-for fragment a block, we1134// can divide a template into nested blocks, and within each block the node1135// structure would be stable. This allows us to skip most children diffing1136// and only worry about the dynamic nodes (indicated by patch flags).1137const blockStack = [];1138let currentBlock = null;1139// Open a block.1140// This must be called before `createBlock`. It cannot be part of `createBlock`1141// because the children of the block are evaluated before `createBlock` itself1142// is called. The generated code typically looks like this:1143//1144// function render() {1145// return (openBlock(),createBlock('div', null, [...]))1146// }1147//1148// disableTracking is true when creating a fragment block, since a fragment1149// always diffs its children.1150function openBlock(disableTracking = false) {1151 blockStack.push((currentBlock = disableTracking ? null : []));1152}1153// Whether we should be tracking dynamic child nodes inside a block.1154// Only tracks when this value is > 01155// We are not using a simple boolean because this value may need to be1156// incremented/decremented by nested usage of v-once (see below)1157let shouldTrack = 1;1158/**1159 * Block tracking sometimes needs to be disabled, for example during the1160 * creation of a tree that needs to be cached by v-once. The compiler generates1161 * code like this:1162 *1163 * ``` js1164 * _cache[1] || (1165 * setBlockTracking(-1),1166 * _cache[1] = createVNode(...),1167 * setBlockTracking(1),1168 * _cache[1]1169 * )1170 * ```1171 * @internal1172 */1173function setBlockTracking(value) {1174 shouldTrack += value;1175}1176// Create a block root vnode. Takes the same exact arguments as `createVNode`.1177// A block root keeps track of dynamic nodes within the block in the1178// `dynamicChildren` array.1179function createBlock(type, props, children, patchFlag, dynamicProps) {1180 const vnode = createVNode(type, props, children, patchFlag, dynamicProps, true /* isBlock: prevent a block from tracking itself */);1181 // save current block children on the block vnode1182 vnode.dynamicChildren = currentBlock || shared.EMPTY_ARR;1183 // close block1184 blockStack.pop();1185 currentBlock = blockStack[blockStack.length - 1] || null;1186 // a block is always going to be patched, so track it as a child of its1187 // parent block1188 if (currentBlock) {1189 currentBlock.push(vnode);1190 }1191 return vnode;1192}1193function isVNode(value) {1194 return value ? value._isVNode === true : false;1195}1196function isSameVNodeType(n1, n2) {1197 if (1198 n2.shapeFlag & 6 /* COMPONENT */ &&1199 n2.type.__hmrUpdated) {1200 // HMR only: if the component has been hot-updated, force a reload.1201 return false;1202 }1203 return n1.type === n2.type && n1.key === n2.key;1204}1205let vnodeArgsTransformer;1206/**1207 * Internal API for registering an arguments transform for createVNode1208 * used for creating stubs in the test-utils1209 * @internal1210 */1211function transformVNodeArgs(transformer) {1212 vnodeArgsTransformer = transformer;1213}1214const createVNodeWithArgsTransform = (...args) => {1215 return _createVNode(...(vnodeArgsTransformer1216 ? vnodeArgsTransformer(args, currentRenderingInstance)1217 : args));1218};1219const InternalObjectKey = `__vInternal`;1220const normalizeKey = ({ key }) => key != null ? key : null;1221const normalizeRef = ({ ref }) => (ref != null1222 ? shared.isArray(ref)1223 ? ref1224 : [currentRenderingInstance, ref]1225 : null);1226const createVNode = ( createVNodeWithArgsTransform1227 );1228function _createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) {1229 if (!type || type === NULL_DYNAMIC_COMPONENT) {1230 if ( !type) {1231 warn(`Invalid vnode type when creating vnode: ${type}.`);1232 }1233 type = Comment;1234 }1235 // class component normalization.1236 if (shared.isFunction(type) && '__vccOpts' in type) {1237 type = type.__vccOpts;1238 }1239 // class & style normalization.1240 if (props) {1241 // for reactive or proxy objects, we need to clone it to enable mutation.1242 if (reactivity.isProxy(props) || InternalObjectKey in props) {1243 props = shared.extend({}, props);1244 }1245 let { class: klass, style } = props;1246 if (klass && !shared.isString(klass)) {1247 props.class = shared.normalizeClass(klass);1248 }1249 if (shared.isObject(style)) {1250 // reactive state objects need to be cloned since they are likely to be1251 // mutated1252 if (reactivity.isProxy(style) && !shared.isArray(style)) {1253 style = shared.extend({}, style);1254 }1255 props.style = shared.normalizeStyle(style);1256 }1257 }1258 // encode the vnode type information into a bitmap1259 const shapeFlag = shared.isString(type)1260 ? 1 /* ELEMENT */1261 : isSuspense(type)1262 ? 128 /* SUSPENSE */1263 : isTeleport(type)1264 ? 64 /* TELEPORT */1265 : shared.isObject(type)1266 ? 4 /* STATEFUL_COMPONENT */1267 : shared.isFunction(type)1268 ? 2 /* FUNCTIONAL_COMPONENT */1269 : 0;1270 if ( shapeFlag & 4 /* STATEFUL_COMPONENT */ && reactivity.isProxy(type)) {1271 type = reactivity.toRaw(type);1272 warn(`Vue received a Component which was made a reactive object. This can ` +1273 `lead to unnecessary performance overhead, and should be avoided by ` +1274 `marking the component with \`markRaw\` or using \`shallowRef\` ` +1275 `instead of \`ref\`.`, `\nComponent that was made reactive: `, type);1276 }1277 const vnode = {1278 _isVNode: true,1279 type,1280 props,1281 key: props && normalizeKey(props),1282 ref: props && normalizeRef(props),1283 scopeId: currentScopeId,1284 children: null,1285 component: null,1286 suspense: null,1287 dirs: null,1288 transition: null,1289 el: null,1290 anchor: null,1291 target: null,1292 targetAnchor: null,1293 shapeFlag,1294 patchFlag,1295 dynamicProps,1296 dynamicChildren: null,1297 appContext: null1298 };1299 normalizeChildren(vnode, children);1300 // presence of a patch flag indicates this node needs patching on updates.1301 // component nodes also should always be patched, because even if the1302 // component doesn't need to update, it needs to persist the instance on to1303 // the next vnode so that it can be properly unmounted later.1304 if (shouldTrack > 0 &&1305 !isBlockNode &&1306 currentBlock &&1307 // the EVENTS flag is only for hydration and if it is the only flag, the1308 // vnode should not be considered dynamic due to handler caching.1309 patchFlag !== 32 /* HYDRATE_EVENTS */ &&1310 (patchFlag > 0 ||1311 shapeFlag & 128 /* SUSPENSE */ ||1312 shapeFlag & 4 /* STATEFUL_COMPONENT */ ||1313 shapeFlag & 2 /* FUNCTIONAL_COMPONENT */)) {1314 currentBlock.push(vnode);1315 }1316 return vnode;1317}1318function cloneVNode(vnode, extraProps) {1319 const props = (extraProps1320 ? vnode.props1321 ? mergeProps(vnode.props, extraProps)1322 : shared.extend({}, extraProps)1323 : vnode.props);1324 // This is intentionally NOT using spread or extend to avoid the runtime1325 // key enumeration cost.1326 return {1327 _isVNode: true,1328 type: vnode.type,1329 props,1330 key: props && normalizeKey(props),1331 ref: props && normalizeRef(props),1332 scopeId: vnode.scopeId,1333 children: vnode.children,1334 target: vnode.target,1335 targetAnchor: vnode.targetAnchor,1336 shapeFlag: vnode.shapeFlag,1337 patchFlag: vnode.patchFlag,1338 dynamicProps: vnode.dynamicProps,1339 dynamicChildren: vnode.dynamicChildren,1340 appContext: vnode.appContext,1341 dirs: vnode.dirs,1342 transition: vnode.transition,1343 // These should technically only be non-null on mounted VNodes. However,1344 // they *should* be copied for kept-alive vnodes. So we just always copy1345 // them since them being non-null during a mount doesn't affect the logic as1346 // they will simply be overwritten.1347 component: vnode.component,1348 suspense: vnode.suspense,1349 el: vnode.el,1350 anchor: vnode.anchor1351 };1352}1353/**1354 * @internal1355 */1356function createTextVNode(text = ' ', flag = 0) {1357 return createVNode(Text, null, text, flag);1358}1359/**1360 * @internal1361 */1362function createStaticVNode(content) {1363 return createVNode(Static, null, content);1364}1365/**1366 * @internal1367 */1368function createCommentVNode(text = '', 1369// when used as the v-else branch, the comment node must be created as a1370// block to ensure correct updates.1371asBlock = false) {1372 return asBlock1373 ? (openBlock(), createBlock(Comment, null, text))1374 : createVNode(Comment, null, text);1375}1376function normalizeVNode(child) {1377 if (child == null || typeof child === 'boolean') {1378 // empty placeholder1379 return createVNode(Comment);1380 }1381 else if (shared.isArray(child)) {1382 // fragment1383 return createVNode(Fragment, null, child);1384 }1385 else if (typeof child === 'object') {1386 // already vnode, this should be the most common since compiled templates1387 // always produce all-vnode children arrays1388 return child.el === null ? child : cloneVNode(child);1389 }1390 else {1391 // strings and numbers1392 return createVNode(Text, null, String(child));1393 }1394}1395// optimized normalization for template-compiled render fns1396function cloneIfMounted(child) {1397 return child.el === null ? child : cloneVNode(child);1398}1399function normalizeChildren(vnode, children) {1400 let type = 0;1401 const { shapeFlag } = vnode;1402 if (children == null) {1403 children = null;1404 }1405 else if (shared.isArray(children)) {1406 type = 16 /* ARRAY_CHILDREN */;1407 }1408 else if (typeof children === 'object') {1409 // Normalize slot to plain children1410 if ((shapeFlag & 1 /* ELEMENT */ || shapeFlag & 64 /* TELEPORT */) &&1411 children.default) {1412 normalizeChildren(vnode, children.default());1413 return;1414 }1415 else {1416 type = 32 /* SLOTS_CHILDREN */;1417 if (!children._ && !(InternalObjectKey in children)) {1418 children._ctx = currentRenderingInstance;1419 }1420 }1421 }1422 else if (shared.isFunction(children)) {1423 children = { default: children, _ctx: currentRenderingInstance };1424 type = 32 /* SLOTS_CHILDREN */;1425 }1426 else {1427 children = String(children);1428 // force teleport children to array so it can be moved around1429 if (shapeFlag & 64 /* TELEPORT */) {1430 type = 16 /* ARRAY_CHILDREN */;1431 children = [createTextVNode(children)];1432 }1433 else {1434 type = 8 /* TEXT_CHILDREN */;1435 }1436 }1437 vnode.children = children;1438 vnode.shapeFlag |= type;1439}1440const handlersRE = /^on|^vnode/;1441function mergeProps(...args) {1442 const ret = {};1443 shared.extend(ret, args[0]);1444 for (let i = 1; i < args.length; i++) {1445 const toMerge = args[i];1446 for (const key in toMerge) {1447 if (key === 'class') {1448 if (ret.class !== toMerge.class) {1449 ret.class = shared.normalizeClass([ret.class, toMerge.class]);1450 }1451 }1452 else if (key === 'style') {1453 ret.style = shared.normalizeStyle([ret.style, toMerge.style]);1454 }1455 else if (handlersRE.test(key)) {1456 // on*, vnode*1457 const existing = ret[key];1458 const incoming = toMerge[key];1459 if (existing !== incoming) {1460 ret[key] = existing1461 ? [].concat(existing, toMerge[key])1462 : incoming;1463 }1464 }1465 else {1466 ret[key] = toMerge[key];1467 }1468 }1469 }1470 return ret;1471}1472function emit(instance, event, ...args) {1473 const props = instance.vnode.props || shared.EMPTY_OBJ;1474 {1475 const options = normalizeEmitsOptions(instance.type.emits);1476 if (options) {1477 if (!(event in options)) {1478 const propsOptions = normalizePropsOptions(instance.type.props)[0];1479 if (!propsOptions || !(`on` + shared.capitalize(event) in propsOptions)) {1480 warn(`Component emitted event "${event}" but it is neither declared in ` +1481 `the emits option nor as an "on${shared.capitalize(event)}" prop.`);1482 }1483 }1484 else {1485 const validator = options[event];1486 if (shared.isFunction(validator)) {1487 const isValid = validator(...args);1488 if (!isValid) {1489 warn(`Invalid event arguments: event validation failed for event "${event}".`);1490 }1491 }1492 }1493 }1494 }1495 let handler = props[`on${shared.capitalize(event)}`];1496 // for v-model update:xxx events, also trigger kebab-case equivalent1497 // for props passed via kebab-case1498 if (!handler && event.startsWith('update:')) {1499 event = shared.hyphenate(event);1500 handler = props[`on${shared.capitalize(event)}`];1501 }1502 if (handler) {1503 callWithAsyncErrorHandling(handler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args);1504 }1505}1506function normalizeEmitsOptions(options) {1507 if (!options) {1508 return;1509 }1510 else if (shared.isArray(options)) {1511 if (options._n) {1512 return options._n;1513 }1514 const normalized = {};1515 options.forEach(key => (normalized[key] = null));1516 shared.def(options, '_n', normalized);1517 return normalized;1518 }1519 else {1520 return options;1521 }1522}1523// Check if an incoming prop key is a declared emit event listener.1524// e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are1525// both considered matched listeners.1526function isEmitListener(emits, key) {1527 return (shared.isOn(key) &&1528 (shared.hasOwn((emits = normalizeEmitsOptions(emits)), key[2].toLowerCase() + key.slice(3)) ||1529 shared.hasOwn(emits, key.slice(2))));1530}1531function initProps(instance, rawProps, isStateful, // result of bitwise flag comparison1532isSSR = false) {1533 const props = {};1534 const attrs = {};1535 shared.def(attrs, InternalObjectKey, 1);1536 setFullProps(instance, rawProps, props, attrs);1537 const options = instance.type.props;1538 // validation1539 if ( options && rawProps) {1540 validateProps(props, options);1541 }1542 if (isStateful) {1543 // stateful1544 instance.props = isSSR ? props : reactivity.shallowReactive(props);1545 }1546 else {1547 if (!options) {1548 // functional w/ optional props, props === attrs1549 instance.props = attrs;1550 }1551 else {1552 // functional w/ declared props1553 instance.props = props;1554 }1555 }1556 instance.attrs = attrs;1557}1558function updateProps(instance, rawProps, rawPrevProps, optimized) {1559 const { props, attrs, vnode: { patchFlag } } = instance;1560 const rawOptions = instance.type.props;1561 const rawCurrentProps = reactivity.toRaw(props);1562 const { 0: options } = normalizePropsOptions(rawOptions);1563 if ((optimized || patchFlag > 0) && !(patchFlag & 16 /* FULL_PROPS */)) {1564 if (patchFlag & 8 /* PROPS */) {1565 // Compiler-generated props & no keys change, just set the updated1566 // the props.1567 const propsToUpdate = instance.vnode.dynamicProps;1568 for (let i = 0; i < propsToUpdate.length; i++) {1569 const key = propsToUpdate[i];1570 // PROPS flag guarantees rawProps to be non-null1571 const value = rawProps[key];1572 if (options) {1573 // attr / props separation was done on init and will be consistent1574 // in this code path, so just check if attrs have it.1575 if (shared.hasOwn(attrs, key)) {1576 attrs[key] = value;1577 }1578 else {1579 const camelizedKey = shared.camelize(key);1580 props[camelizedKey] = resolvePropValue(options, rawCurrentProps, camelizedKey, value);1581 }1582 }1583 else {1584 attrs[key] = value;1585 }1586 }1587 }1588 }1589 else {1590 // full props update.1591 setFullProps(instance, rawProps, props, attrs);1592 // in case of dynamic props, check if we need to delete keys from1593 // the props object1594 let kebabKey;1595 for (const key in rawCurrentProps) {1596 if (!rawProps ||1597 (!shared.hasOwn(rawProps, key) &&1598 // it's possible the original props was passed in as kebab-case1599 // and converted to camelCase (#955)1600 ((kebabKey = shared.hyphenate(key)) === key || !shared.hasOwn(rawProps, kebabKey)))) {1601 if (options) {1602 if (rawPrevProps && rawPrevProps[kebabKey] !== undefined) {1603 props[key] = resolvePropValue(options, rawProps || shared.EMPTY_OBJ, key, undefined);1604 }1605 }1606 else {1607 delete props[key];1608 }1609 }1610 }1611 // in the case of functional component w/o props declaration, props and1612 // attrs point to the same object so it should already have been updated.1613 if (attrs !== rawCurrentProps) {1614 for (const key in attrs) {1615 if (!rawProps || !shared.hasOwn(rawProps, key)) {1616 delete attrs[key];1617 }1618 }1619 }1620 }1621 if ( rawOptions && rawProps) {1622 validateProps(props, rawOptions);1623 }1624}1625function setFullProps(instance, rawProps, props, attrs) {1626 const { 0: options, 1: needCastKeys } = normalizePropsOptions(instance.type.props);1627 const emits = instance.type.emits;1628 if (rawProps) {1629 for (const key in rawProps) {1630 const value = rawProps[key];1631 // key, ref are reserved and never passed down1632 if (shared.isReservedProp(key)) {1633 continue;1634 }1635 // prop option names are camelized during normalization, so to support1636 // kebab -> camel conversion here we need to camelize the key.1637 let camelKey;1638 if (options && shared.hasOwn(options, (camelKey = shared.camelize(key)))) {1639 props[camelKey] = value;1640 }1641 else if (!emits || !isEmitListener(emits, key)) {1642 // Any non-declared (either as a prop or an emitted event) props are put1643 // into a separate `attrs` object for spreading. Make sure to preserve1644 // original key casing1645 attrs[key] = value;1646 }1647 }1648 }1649 if (needCastKeys) {1650 const rawCurrentProps = reactivity.toRaw(props);1651 for (let i = 0; i < needCastKeys.length; i++) {1652 const key = needCastKeys[i];1653 props[key] = resolvePropValue(options, rawCurrentProps, key, rawCurrentProps[key]);1654 }1655 }1656}1657function resolvePropValue(options, props, key, value) {1658 const opt = options[key];1659 if (opt != null) {1660 const hasDefault = shared.hasOwn(opt, 'default');1661 // default values1662 if (hasDefault && value === undefined) {1663 const defaultValue = opt.default;1664 value = shared.isFunction(defaultValue) ? defaultValue() : defaultValue;1665 }1666 // boolean casting1667 if (opt[0 /* shouldCast */]) {1668 if (!shared.hasOwn(props, key) && !hasDefault) {1669 value = false;1670 }1671 else if (opt[1 /* shouldCastTrue */] &&1672 (value === '' || value === shared.hyphenate(key))) {1673 value = true;1674 }1675 }1676 }1677 return value;1678}1679function normalizePropsOptions(raw) {1680 if (!raw) {1681 return shared.EMPTY_ARR;1682 }1683 if (raw._n) {1684 return raw._n;1685 }1686 const normalized = {};1687 const needCastKeys = [];1688 if (shared.isArray(raw)) {1689 for (let i = 0; i < raw.length; i++) {1690 if ( !shared.isString(raw[i])) {1691 warn(`props must be strings when using array syntax.`, raw[i]);1692 }1693 const normalizedKey = shared.camelize(raw[i]);1694 if (validatePropName(normalizedKey)) {1695 normalized[normalizedKey] = shared.EMPTY_OBJ;1696 }1697 }1698 }1699 else {1700 if ( !shared.isObject(raw)) {1701 warn(`invalid props options`, raw);1702 }1703 for (const key in raw) {1704 const normalizedKey = shared.camelize(key);1705 if (validatePropName(normalizedKey)) {1706 const opt = raw[key];1707 const prop = (normalized[normalizedKey] =1708 shared.isArray(opt) || shared.isFunction(opt) ? { type: opt } : opt);1709 if (prop) {1710 const booleanIndex = getTypeIndex(Boolean, prop.type);1711 const stringIndex = getTypeIndex(String, prop.type);1712 prop[0 /* shouldCast */] = booleanIndex > -1;1713 prop[1 /* shouldCastTrue */] =1714 stringIndex < 0 || booleanIndex < stringIndex;1715 // if the prop needs boolean casting or default value1716 if (booleanIndex > -1 || shared.hasOwn(prop, 'default')) {1717 needCastKeys.push(normalizedKey);1718 }1719 }1720 }1721 }1722 }1723 const normalizedEntry = [normalized, needCastKeys];1724 shared.def(raw, '_n', normalizedEntry);1725 return normalizedEntry;1726}1727// use function string name to check type constructors1728// so that it works across vms / iframes.1729function getType(ctor) {1730 const match = ctor && ctor.toString().match(/^\s*function (\w+)/);1731 return match ? match[1] : '';1732}1733function isSameType(a, b) {1734 return getType(a) === getType(b);1735}1736function getTypeIndex(type, expectedTypes) {1737 if (shared.isArray(expectedTypes)) {1738 for (let i = 0, len = expectedTypes.length; i < len; i++) {1739 if (isSameType(expectedTypes[i], type)) {1740 return i;1741 }1742 }1743 }1744 else if (shared.isFunction(expectedTypes)) {1745 return isSameType(expectedTypes, type) ? 0 : -1;1746 }1747 return -1;1748}1749function validateProps(props, rawOptions) {1750 const rawValues = reactivity.toRaw(props);1751 const options = normalizePropsOptions(rawOptions)[0];1752 for (const key in options) {1753 let opt = options[key];1754 if (opt == null)1755 continue;1756 validateProp(key, rawValues[key], opt, !shared.hasOwn(rawValues, key));1757 }1758}1759function validatePropName(key) {1760 if (key[0] !== '$') {1761 return true;1762 }1763 else {1764 warn(`Invalid prop name: "${key}" is a reserved property.`);1765 }1766 return false;1767}1768function validateProp(name, value, prop, isAbsent) {1769 const { type, required, validator } = prop;1770 // required!1771 if (required && isAbsent) {1772 warn('Missing required prop: "' + name + '"');1773 return;1774 }1775 // missing but optional1776 if (value == null && !prop.required) {1777 return;1778 }1779 // type check1780 if (type != null && type !== true) {1781 let isValid = false;1782 const types = shared.isArray(type) ? type : [type];1783 const expectedTypes = [];1784 // value is valid as long as one of the specified types match1785 for (let i = 0; i < types.length && !isValid; i++) {1786 const { valid, expectedType } = assertType(value, types[i]);1787 expectedTypes.push(expectedType || '');1788 isValid = valid;1789 }1790 if (!isValid) {1791 warn(getInvalidTypeMessage(name, value, expectedTypes));1792 return;1793 }1794 }1795 // custom validator1796 if (validator && !validator(value)) {1797 warn('Invalid prop: custom validator check failed for prop "' + name + '".');1798 }1799}1800const isSimpleType = /*#__PURE__*/ shared.makeMap('String,Number,Boolean,Function,Symbol');1801function assertType(value, type) {1802 let valid;1803 const expectedType = getType(type);1804 if (isSimpleType(expectedType)) {1805 const t = typeof value;1806 valid = t === expectedType.toLowerCase();1807 // for primitive wrapper objects1808 if (!valid && t === 'object') {1809 valid = value instanceof type;1810 }1811 }1812 else if (expectedType === 'Object') {1813 valid = shared.toRawType(value) === 'Object';1814 }1815 else if (expectedType === 'Array') {1816 valid = shared.isArray(value);1817 }1818 else {1819 valid = value instanceof type;1820 }1821 return {1822 valid,1823 expectedType1824 };1825}1826function getInvalidTypeMessage(name, value, expectedTypes) {1827 let message = `Invalid prop: type check failed for prop "${name}".` +1828 ` Expected ${expectedTypes.map(shared.capitalize).join(', ')}`;1829 const expectedType = expectedTypes[0];1830 const receivedType = shared.toRawType(value);1831 const expectedValue = styleValue(value, expectedType);1832 const receivedValue = styleValue(value, receivedType);1833 // check if we need to specify expected value1834 if (expectedTypes.length === 1 &&1835 isExplicable(expectedType) &&1836 !isBoolean(expectedType, receivedType)) {1837 message += ` with value ${expectedValue}`;1838 }1839 message += `, got ${receivedType} `;1840 // check if we need to specify received value1841 if (isExplicable(receivedType)) {1842 message += `with value ${receivedValue}.`;1843 }1844 return message;1845}1846function styleValue(value, type) {1847 if (type === 'String') {1848 return `"${value}"`;1849 }1850 else if (type === 'Number') {1851 return `${Number(value)}`;1852 }1853 else {1854 return `${value}`;1855 }1856}1857function isExplicable(type) {1858 const explicitTypes = ['string', 'number', 'boolean'];1859 return explicitTypes.some(elem => type.toLowerCase() === elem);1860}1861function isBoolean(...args) {1862 return args.some(elem => elem.toLowerCase() === 'boolean');1863}1864const isInternalKey = (key) => key[0] === '_' || key === '$stable';1865const normalizeSlotValue = (value) => shared.isArray(value)1866 ? value.map(normalizeVNode)1867 : [normalizeVNode(value)];1868const normalizeSlot = (key, rawSlot, ctx) => withCtx((props) => {1869 if ( currentInstance) {1870 warn(`Slot "${key}" invoked outside of the render function: ` +1871 `this will not track dependencies used in the slot. ` +1872 `Invoke the slot function inside the render function instead.`);1873 }1874 return normalizeSlotValue(rawSlot(props));1875}, ctx);1876const normalizeObjectSlots = (rawSlots, slots) => {1877 const ctx = rawSlots._ctx;1878 for (const key in rawSlots) {1879 if (isInternalKey(key))1880 continue;1881 const value = rawSlots[key];1882 if (shared.isFunction(value)) {1883 slots[key] = normalizeSlot(key, value, ctx);1884 }1885 else if (value != null) {1886 {1887 warn(`Non-function value encountered for slot "${key}". ` +1888 `Prefer function slots for better performance.`);1889 }1890 const normalized = normalizeSlotValue(value);1891 slots[key] = () => normalized;1892 }1893 }1894};1895const normalizeVNodeSlots = (instance, children) => {1896 if ( !isKeepAlive(instance.vnode)) {1897 warn(`Non-function value encountered for default slot. ` +1898 `Prefer function slots for better performance.`);1899 }1900 const normalized = normalizeSlotValue(children);1901 instance.slots.default = () => normalized;1902};1903const initSlots = (instance, children) => {1904 if (instance.vnode.shapeFlag & 32 /* SLOTS_CHILDREN */) {1905 if (children._ === 1) {1906 instance.slots = children;1907 }1908 else {1909 normalizeObjectSlots(children, (instance.slots = {}));1910 }1911 }1912 else {1913 instance.slots = {};1914 if (children) {1915 normalizeVNodeSlots(instance, children);1916 }1917 }1918 shared.def(instance.slots, InternalObjectKey, 1);1919};1920const updateSlots = (instance, children) => {1921 const { vnode, slots } = instance;1922 let needDeletionCheck = true;1923 let deletionComparisonTarget = shared.EMPTY_OBJ;1924 if (vnode.shapeFlag & 32 /* SLOTS_CHILDREN */) {1925 if (children._ === 1) {1926 // compiled slots.1927 if (1928 // bail on dynamic slots (v-if, v-for, reference of scope variables)1929 !(vnode.patchFlag & 1024 /* DYNAMIC_SLOTS */) &&1930 // bail on HRM updates1931 !( instance.parent && instance.parent.renderUpdated)) {1932 // compiled AND static.1933 // no need to update, and skip stale slots removal.1934 needDeletionCheck = false;1935 }1936 else {1937 // compiled but dynamic - update slots, but skip normalization.1938 shared.extend(slots, children);1939 }1940 }1941 else {1942 needDeletionCheck = !children.$stable;1943 normalizeObjectSlots(children, slots);1944 }1945 deletionComparisonTarget = children;1946 }1947 else if (children) {1948 // non slot object children (direct value) passed to a component1949 normalizeVNodeSlots(instance, children);1950 deletionComparisonTarget = { default: 1 };1951 }1952 // delete stale slots1953 if (needDeletionCheck) {1954 for (const key in slots) {1955 if (!isInternalKey(key) && !(key in deletionComparisonTarget)) {1956 delete slots[key];1957 }1958 }1959 }1960};1961/**1962Runtime helper for applying directives to a vnode. Example usage:19631964const comp = resolveComponent('comp')1965const foo = resolveDirective('foo')1966const bar = resolveDirective('bar')19671968return withDirectives(h(comp), [1969 [foo, this.x],1970 [bar, this.y]1971])1972*/1973const isBuiltInDirective = /*#__PURE__*/ shared.makeMap('bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text');1974function validateDirectiveName(name) {1975 if (isBuiltInDirective(name)) {1976 warn('Do not use built-in directive ids as custom directive id: ' + name);1977 }1978}1979/**1980 * Adds directives to a VNode.1981 * @internal1982 */1983function withDirectives(vnode, directives) {1984 const internalInstance = currentRenderingInstance;1985 if (internalInstance === null) {1986 warn(`withDirectives can only be used inside render functions.`);1987 return vnode;1988 }1989 const instance = internalInstance.proxy;1990 const bindings = vnode.dirs || (vnode.dirs = []);1991 for (let i = 0; i < directives.length; i++) {1992 let [dir, value, arg, modifiers = shared.EMPTY_OBJ] = directives[i];1993 if (shared.isFunction(dir)) {1994 dir = {1995 mounted: dir,1996 updated: dir1997 };1998 }1999 bindings.push({2000 dir,2001 instance,2002 value,2003 oldValue: void 0,2004 arg,2005 modifiers2006 });2007 }2008 return vnode;2009}2010function invokeDirectiveHook(vnode, prevVNode, instance, name) {2011 const bindings = vnode.dirs;2012 const oldBindings = prevVNode && prevVNode.dirs;2013 for (let i = 0; i < bindings.length; i++) {2014 const binding = bindings[i];2015 if (oldBindings) {2016 binding.oldValue = oldBindings[i].value;2017 }2018 const hook = binding.dir[name];2019 if (hook) {2020 callWithAsyncErrorHandling(hook, instance, 8 /* DIRECTIVE_HOOK */, [2021 vnode.el,2022 binding,2023 vnode,2024 prevVNode2025 ]);2026 }2027 }2028}2029function createAppContext() {2030 return {2031 config: {2032 isNativeTag: shared.NO,2033 devtools: true,2034 performance: false,2035 globalProperties: {},2036 optionMergeStrategies: {},2037 isCustomElement: shared.NO,2038 errorHandler: undefined,2039 warnHandler: undefined2040 },2041 mixins: [],2042 components: {},2043 directives: {},2044 provides: Object.create(null)2045 };2046}2047function createAppAPI(render, hydrate) {2048 return function createApp(rootComponent, rootProps = null) {2049 if (rootProps != null && !shared.isObject(rootProps)) {2050 warn(`root props passed to app.mount() must be an object.`);2051 rootProps = null;2052 }2053 const context = createAppContext();2054 const installedPlugins = new Set();2055 let isMounted = false;2056 const app = {2057 _component: rootComponent,2058 _props: rootProps,2059 _container: null,2060 _context: context,2061 get config() {2062 return context.config;2063 },2064 set config(v) {2065 {2066 warn(`app.config cannot be replaced. Modify individual options instead.`);2067 }2068 },2069 use(plugin, ...options) {2070 if (installedPlugins.has(plugin)) {2071 warn(`Plugin has already been applied to target app.`);2072 }2073 else if (plugin && shared.isFunction(plugin.install)) {2074 installedPlugins.add(plugin);2075 plugin.install(app, ...options);2076 }2077 else if (shared.isFunction(plugin)) {2078 installedPlugins.add(plugin);2079 plugin(app, ...options);2080 }2081 else {2082 warn(`A plugin must either be a function or an object with an "install" ` +2083 `function.`);2084 }2085 return app;2086 },2087 mixin(mixin) {2088 {2089 if (!context.mixins.includes(mixin)) {2090 context.mixins.push(mixin);2091 }2092 else {2093 warn('Mixin has already been applied to target app' +2094 (mixin.name ? `: ${mixin.name}` : ''));2095 }2096 }2097 return app;2098 },2099 component(name, component) {2100 {2101 validateComponentName(name, context.config);2102 }2103 if (!component) {2104 return context.components[name];2105 }2106 if ( context.components[name]) {2107 warn(`Component "${name}" has already been registered in target app.`);2108 }2109 context.components[name] = component;2110 return app;2111 },2112 directive(name, directive) {2113 {2114 validateDirectiveName(name);2115 }2116 if (!directive) {2117 return context.directives[name];2118 }2119 if ( context.directives[name]) {2120 warn(`Directive "${name}" has already been registered in target app.`);2121 }2122 context.directives[name] = directive;2123 return app;2124 },2125 mount(rootContainer, isHydrate) {2126 if (!isMounted) {2127 const vnode = createVNode(rootComponent, rootProps);2128 // store app context on the root VNode.2129 // this will be set on the root instance on initial mount.2130 vnode.appContext = context;2131 // HMR root reload2132 {2133 context.reload = () => {2134 render(cloneVNode(vnode), rootContainer);2135 };2136 }2137 if (isHydrate && hydrate) {2138 hydrate(vnode, rootContainer);2139 }2140 else {2141 render(vnode, rootContainer);2142 }2143 isMounted = true;2144 app._container = rootContainer;2145 return vnode.component.proxy;2146 }2147 else {2148 warn(`App has already been mounted. Create a new app instance instead.`);2149 }2150 },2151 unmount() {2152 if (isMounted) {2153 render(null, app._container);2154 }2155 else {2156 warn(`Cannot unmount an app that is not mounted.`);2157 }2158 },2159 provide(key, value) {2160 if ( key in context.provides) {2161 warn(`App already provides property with key "${key}". ` +2162 `It will be overwritten with the new value.`);2163 }2164 // TypeScript doesn't allow symbols as index type2165 // https://github.com/Microsoft/TypeScript/issues/245872166 context.provides[key] = value;2167 return app;2168 }2169 };2170 return app;2171 };2172}2173// Expose the HMR runtime on the global object2174// This makes it entirely tree-shakable without polluting the exports and makes2175// it easier to be used in toolings like vue-loader2176// Note: for a component to be eligible for HMR it also needs the __hmrId option2177// to be set so that its instances can be registered / removed.2178{2179 const globalObject = typeof global !== 'undefined'2180 ? global2181 : typeof self !== 'undefined'2182 ? self2183 : typeof window !== 'undefined'2184 ? window2185 : {};2186 globalObject.__VUE_HMR_RUNTIME__ = {2187 createRecord: tryWrap(createRecord),2188 rerender: tryWrap(rerender),2189 reload: tryWrap(reload)2190 };2191}2192const map = new Map();2193function registerHMR(instance) {2194 const id = instance.type.__hmrId;2195 let record = map.get(id);2196 if (!record) {2197 createRecord(id, instance.type);2198 record = map.get(id);2199 }2200 record.instances.add(instance);2201}2202function unregisterHMR(instance) {2203 map.get(instance.type.__hmrId).instances.delete(instance);2204}2205function createRecord(id, comp) {2206 if (map.has(id)) {2207 return false;2208 }2209 map.set(id, {2210 comp,2211 instances: new Set()2212 });2213 return true;2214}2215function rerender(id, newRender) {2216 const record = map.get(id);2217 if (!record)2218 return;2219 // Array.from creates a snapshot which avoids the set being mutated during2220 // updates2221 Array.from(record.instances).forEach(instance => {2222 if (newRender) {2223 instance.render = newRender;2224 }2225 instance.renderCache = [];2226 // this flag forces child components with slot content to update2227 instance.renderUpdated = true;2228 instance.update();2229 instance.renderUpdated = false;2230 });2231}2232function reload(id, newComp) {2233 const record = map.get(id);2234 if (!record)2235 return;2236 // 1. Update existing comp definition to match new one2237 const comp = record.comp;2238 Object.assign(comp, newComp);2239 for (const key in comp) {2240 if (!(key in newComp)) {2241 delete comp[key];2242 }2243 }2244 // 2. Mark component dirty. This forces the renderer to replace the component2245 // on patch.2246 comp.__hmrUpdated = true;2247 // Array.from creates a snapshot which avoids the set being mutated during2248 // updates2249 Array.from(record.instances).forEach(instance => {2250 if (instance.parent) {2251 // 3. Force the parent instance to re-render. This will cause all updated2252 // components to be unmounted and re-mounted. Queue the update so that we2253 // don't end up forcing the same parent to re-render multiple times.2254 queueJob(instance.parent.update);2255 }2256 else if (instance.appContext.reload) {2257 // root instance mounted via createApp() has a reload method2258 instance.appContext.reload();2259 }2260 else if (typeof window !== 'undefined') {2261 // root instance inside tree created via raw render(). Force reload.2262 window.location.reload();2263 }2264 else {2265 console.warn('[HMR] Root or manually mounted instance modified. Full reload required.');2266 }2267 });2268 // 4. Make sure to unmark the component after the reload.2269 queuePostFlushCb(() => {2270 comp.__hmrUpdated = false;2271 });2272}2273function tryWrap(fn) {2274 return (id, arg) => {2275 try {2276 return fn(id, arg);2277 }2278 catch (e) {2279 console.error(e);2280 console.warn(`[HMR] Something went wrong during Vue component hot-reload. ` +2281 `Full reload required.`);2282 }2283 };2284}2285let hasMismatch = false;2286const isSVGContainer = (container) => /svg/.test(container.namespaceURI) && container.tagName !== 'foreignObject';2287const isComment = (node) => node.nodeType === 8 /* COMMENT */;2288// Note: hydration is DOM-specific2289// But we have to place it in core due to tight coupling with core - splitting2290// it out creates a ton of unnecessary complexity.2291// Hydration also depends on some renderer internal logic which needs to be2292// passed in via arguments.2293function createHydrationFunctions(rendererInternals) {2294 const { mt: mountComponent, p: patch, o: { patchProp, nextSibling, parentNode, remove, insert, createComment } } = rendererInternals;2295 const hydrate = (vnode, container) => {2296 if ( !container.hasChildNodes()) {2297 warn(`Attempting to hydrate existing markup but container is empty. ` +2298 `Performing full mount instead.`);2299 patch(null, vnode, container);2300 return;2301 }2302 hasMismatch = false;2303 hydrateNode(container.firstChild, vnode, null, null);2304 flushPostFlushCbs();2305 if (hasMismatch && !false) {2306 // this error should show up in production2307 console.error(`Hydration completed but contains mismatches.`);2308 }2309 };2310 const hydrateNode = (node, vnode, parentComponent, parentSuspense, optimized = false) => {2311 const isFragmentStart = isComment(node) && node.data === '[';2312 const onMismatch = () => handleMismtach(node, vnode, parentComponent, parentSuspense, isFragmentStart);2313 const { type, shapeFlag } = vnode;2314 const domType = node.nodeType;2315 vnode.el = node;2316 switch (type) {2317 case Text:2318 if (domType !== 3 /* TEXT */) {2319 return onMismatch();2320 }2321 if (node.data !== vnode.children) {2322 hasMismatch = true;2323 2324 warn(`Hydration text mismatch:` +2325 `\n- Client: ${JSON.stringify(node.data)}` +2326 `\n- Server: ${JSON.stringify(vnode.children)}`);2327 node.data = vnode.children;2328 }2329 return nextSibling(node);2330 case Comment:2331 if (domType !== 8 /* COMMENT */ || isFragmentStart) {2332 return onMismatch();2333 }2334 return nextSibling(node);2335 case Static:2336 if (domType !== 1 /* ELEMENT */) {2337 return onMismatch();2338 }2339 return nextSibling(node);2340 case Fragment:2341 if (!isFragmentStart) {2342 return onMismatch();2343 }2344 return hydrateFragment(node, vnode, parentComponent, parentSuspense, optimized);2345 default:2346 if (shapeFlag & 1 /* ELEMENT */) {2347 if (domType !== 1 /* ELEMENT */ ||2348 vnode.type !== node.tagName.toLowerCase()) {2349 return onMismatch();2350 }2351 return hydrateElement(node, vnode, parentComponent, parentSuspense, optimized);2352 }2353 else if (shapeFlag & 6 /* COMPONENT */) {2354 // when setting up the render effect, if the initial vnode already2355 // has .el set, the component will perform hydration instead of mount2356 // on its sub-tree.2357 const container = parentNode(node);2358 const hydrateComponent = () => {2359 mountComponent(vnode, container, null, parentComponent, parentSuspense, isSVGContainer(container), optimized);2360 };2361 // async component2362 const loadAsync = vnode.type.__asyncLoader;2363 if (loadAsync) {2364 loadAsync().then(hydrateComponent);2365 }2366 else {2367 hydrateComponent();2368 }2369 // component may be async, so in the case of fragments we cannot rely2370 // on component's rendered output to determine the end of the fragment2371 // instead, we do a lookahead to find the end anchor node.2372 return isFragmentStart2373 ? locateClosingAsyncAnchor(node)2374 : nextSibling(node);2375 }2376 else if (shapeFlag & 64 /* TELEPORT */) {2377 if (domType !== 8 /* COMMENT */) {2378 return onMismatch();2379 }2380 return vnode.type.hydrate(node, vnode, parentComponent, parentSuspense, optimized, rendererInternals, hydrateChildren);2381 }2382 else if ( shapeFlag & 128 /* SUSPENSE */) {2383 return vnode.type.hydrate(node, vnode, parentComponent, parentSuspense, isSVGContainer(parentNode(node)), optimized, rendererInternals, hydrateNode);2384 }2385 else {2386 warn('Invalid HostVNode type:', type, `(${typeof type})`);2387 }2388 return null;2389 }2390 };2391 const hydrateElement = (el, vnode, parentComponent, parentSuspense, optimized) => {2392 optimized = optimized || !!vnode.dynamicChildren;2393 const { props, patchFlag, shapeFlag, dirs } = vnode;2394 // skip props & children if this is hoisted static nodes2395 if (patchFlag !== -1 /* HOISTED */) {2396 // props2397 if (props) {2398 if (!optimized ||2399 (patchFlag & 16 /* FULL_PROPS */ ||2400 patchFlag & 32 /* HYDRATE_EVENTS */)) {2401 for (const key in props) {2402 if (!shared.isReservedProp(key) && shared.isOn(key)) {2403 patchProp(el, key, null, props[key]);2404 }2405 }2406 }2407 else if (props.onClick) {2408 // Fast path for click listeners (which is most often) to avoid2409 // iterating through props.2410 patchProp(el, 'onClick', null, props.onClick);2411 }2412 }2413 // vnode / directive hooks2414 let vnodeHooks;2415 if ((vnodeHooks = props && props.onVnodeBeforeMount)) {2416 invokeVNodeHook(vnodeHooks, parentComponent, vnode);2417 }2418 if (dirs) {2419 invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount');2420 }2421 if ((vnodeHooks = props && props.onVnodeMounted) || dirs) {2422 queueEffectWithSuspense(() => {2423 vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode);2424 dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted');2425 }, parentSuspense);2426 }2427 // children2428 if (shapeFlag & 16 /* ARRAY_CHILDREN */ &&2429 // skip if element has innerHTML / textContent2430 !(props && (props.innerHTML || props.textContent))) {2431 let next = hydrateChildren(el.firstChild, vnode, el, parentComponent, parentSuspense, optimized);2432 let hasWarned = false;2433 while (next) {2434 hasMismatch = true;2435 if ( !hasWarned) {2436 warn(`Hydration children mismatch in <${vnode.type}>: ` +2437 `server rendered element contains more child nodes than client vdom.`);2438 hasWarned = true;2439 }2440 // The SSRed DOM contains more nodes than it should. Remove them.2441 const cur = next;2442 next = next.nextSibling;2443 remove(cur);2444 }2445 }2446 else if (shapeFlag & 8 /* TEXT_CHILDREN */) {2447 if (el.textContent !== vnode.children) {2448 hasMismatch = true;2449 2450 warn(`Hydration text content mismatch in <${vnode.type}>:\n` +2451 `- Client: ${el.textContent}\n` +2452 `- Server: ${vnode.children}`);2453 el.textContent = vnode.children;2454 }2455 }2456 }2457 return el.nextSibling;2458 };2459 const hydrateChildren = (node, vnode, container, parentComponent, parentSuspense, optimized) => {2460 optimized = optimized || !!vnode.dynamicChildren;2461 const children = vnode.children;2462 const l = children.length;2463 let hasWarned = false;2464 for (let i = 0; i < l; i++) {2465 const vnode = optimized2466 ? children[i]2467 : (children[i] = normalizeVNode(children[i]));2468 if (node) {2469 node = hydrateNode(node, vnode, parentComponent, parentSuspense, optimized);2470 }2471 else {2472 hasMismatch = true;2473 if ( !hasWarned) {2474 warn(`Hydration children mismatch in <${container.tagName.toLowerCase()}>: ` +2475 `server rendered element contains fewer child nodes than client vdom.`);2476 hasWarned = true;2477 }2478 // the SSRed DOM didn't contain enough nodes. Mount the missing ones.2479 patch(null, vnode, container, null, parentComponent, parentSuspense, isSVGContainer(container));2480 }2481 }2482 return node;2483 };2484 const hydrateFragment = (node, vnode, parentComponent, parentSuspense, optimized) => {2485 const container = parentNode(node);2486 const next = hydrateChildren(nextSibling(node), vnode, container, parentComponent, parentSuspense, optimized);2487 if (next && isComment(next) && next.data === ']') {2488 return nextSibling((vnode.anchor = next));2489 }2490 else {2491 // fragment didn't hydrate successfully, since we didn't get a end anchor2492 // back. This should have led to node/children mismatch warnings.2493 hasMismatch = true;2494 // since the anchor is missing, we need to create one and insert it2495 insert((vnode.anchor = createComment(`]`)), container, next);2496 return next;2497 }2498 };2499 const handleMismtach = (node, vnode, parentComponent, parentSuspense, isFragment) => {2500 hasMismatch = true;2501 2502 warn(`Hydration node mismatch:\n- Client vnode:`, vnode.type, `\n- Server rendered DOM:`, node, node.nodeType === 3 /* TEXT */2503 ? `(text)`2504 : isComment(node) && node.data === '['2505 ? `(start of fragment)`2506 : ``);2507 vnode.el = null;2508 if (isFragment) {2509 // remove excessive fragment nodes2510 const end = locateClosingAsyncAnchor(node);2511 while (true) {2512 const next = nextSibling(node);2513 if (next && next !== end) {2514 remove(next);2515 }2516 else {2517 break;2518 }2519 }2520 }2521 const next = nextSibling(node);2522 const container = parentNode(node);2523 remove(node);2524 patch(null, vnode, container, next, parentComponent, parentSuspense, isSVGContainer(container));2525 return next;2526 };2527 const locateClosingAsyncAnchor = (node) => {2528 let match = 0;2529 while (node) {2530 node = nextSibling(node);2531 if (node && isComment(node)) {2532 if (node.data === '[')2533 match++;2534 if (node.data === ']') {2535 if (match === 0) {2536 return nextSibling(node);2537 }2538 else {2539 match--;2540 }2541 }2542 }2543 }2544 return node;2545 };2546 return [hydrate, hydrateNode];2547}2548let supported;2549let perf;2550function startMeasure(instance, type) {2551 if (instance.appContext.config.performance && isSupported()) {2552 perf.mark(`vue-${type}-${instance.uid}`);2553 }2554}2555function endMeasure(instance, type) {2556 if (instance.appContext.config.performance && isSupported()) {2557 const startTag = `vue-${type}-${instance.uid}`;2558 const endTag = startTag + `:end`;2559 perf.mark(endTag);2560 perf.measure(`<${formatComponentName(instance.type)}> ${type}`, startTag, endTag);2561 perf.clearMarks(startTag);2562 perf.clearMarks(endTag);2563 }2564}2565function isSupported() {2566 if (supported !== undefined) {2567 return supported;2568 }2569 if (typeof window !== 'undefined' && window.performance) {2570 supported = true;2571 perf = window.performance;2572 }2573 else {2574 supported = false;2575 }2576 return supported;2577}2578function createDevEffectOptions(instance) {2579 return {2580 scheduler: queueJob,2581 onTrack: instance.rtc ? e => shared.invokeArrayFns(instance.rtc, e) : void 0,2582 onTrigger: instance.rtg ? e => shared.invokeArrayFns(instance.rtg, e) : void 02583 };2584}2585const queuePostRenderEffect = queueEffectWithSuspense2586 ;2587/**2588 * The createRenderer function accepts two generic arguments:2589 * HostNode and HostElement, corresponding to Node and Element types in the2590 * host environment. For example, for runtime-dom, HostNode would be the DOM2591 * `Node` interface and HostElement would be the DOM `Element` interface.2592 *2593 * Custom renderers can pass in the platform specific types like this:2594 *2595 * ``` js2596 * const { render, createApp } = createRenderer<Node, Element>({2597 * patchProp,2598 * ...nodeOps2599 * })2600 * ```2601 */2602function createRenderer(options) {2603 return baseCreateRenderer(options);2604}2605// Separate API for creating hydration-enabled renderer.2606// Hydration logic is only used when calling this function, making it2607// tree-shakable.2608function createHydrationRenderer(options) {2609 return baseCreateRenderer(options, createHydrationFunctions);2610}2611// implementation2612function baseCreateRenderer(options, createHydrationFns) {2613 const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, setScopeId: hostSetScopeId = shared.NOOP, cloneNode: hostCloneNode, insertStaticContent: hostInsertStaticContent, setStaticContent: hostSetStaticContent } = options;2614 // Note: functions inside this closure should use `const xxx = () => {}`2615 // style in order to prevent being inlined by minifiers.2616 const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, optimized = false) => {2617 // patching & not same type, unmount old tree2618 if (n1 && !isSameVNodeType(n1, n2)) {2619 anchor = getNextHostNode(n1);2620 unmount(n1, parentComponent, parentSuspense, true);2621 n1 = null;2622 }2623 const { type, ref, shapeFlag } = n2;2624 switch (type) {2625 case Text:2626 processText(n1, n2, container, anchor);2627 break;2628 case Comment:2629 processCommentNode(n1, n2, container, anchor);2630 break;2631 case Static:2632 if (n1 == null) {2633 mountStaticNode(n2, container, anchor, isSVG);2634 }2635 else {2636 // static nodes are only patched during dev for HMR2637 n2.el = n1.el;2638 if (n2.children !== n1.children) {2639 hostSetStaticContent(n2.el, n2.children);2640 }2641 }2642 break;2643 case Fragment:2644 processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2645 break;2646 default:2647 if (shapeFlag & 1 /* ELEMENT */) {2648 processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2649 }2650 else if (shapeFlag & 6 /* COMPONENT */) {2651 processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2652 }2653 else if (shapeFlag & 64 /* TELEPORT */) {2654 type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);2655 }2656 else if ( shapeFlag & 128 /* SUSPENSE */) {2657 type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);2658 }2659 else {2660 warn('Invalid VNode type:', type, `(${typeof type})`);2661 }2662 }2663 // set ref2664 if (ref != null && parentComponent) {2665 const refValue = shapeFlag & 4 /* STATEFUL_COMPONENT */ ? n2.component.proxy : n2.el;2666 setRef(ref, n1 && n1.ref, parentComponent, refValue);2667 }2668 };2669 const processText = (n1, n2, container, anchor) => {2670 if (n1 == null) {2671 hostInsert((n2.el = hostCreateText(n2.children)), container, anchor);2672 }2673 else {2674 const el = (n2.el = n1.el);2675 if (n2.children !== n1.children) {2676 hostSetText(el, n2.children);2677 }2678 }2679 };2680 const processCommentNode = (n1, n2, container, anchor) => {2681 if (n1 == null) {2682 hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor);2683 }2684 else {2685 // there's no support for dynamic comments2686 n2.el = n1.el;2687 }2688 };2689 const mountStaticNode = (n2, container, anchor, isSVG) => {2690 if (n2.el && hostCloneNode !== undefined) {2691 hostInsert(hostCloneNode(n2.el), container, anchor);2692 }2693 else {2694 // static nodes are only present when used with compiler-dom/runtime-dom2695 // which guarantees presence of hostInsertStaticContent.2696 n2.el = hostInsertStaticContent(n2.children, container, anchor, isSVG);2697 }2698 };2699 const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2700 isSVG = isSVG || n2.type === 'svg';2701 if (n1 == null) {2702 mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2703 }2704 else {2705 patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized);2706 }2707 };2708 const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2709 let el;2710 let vnodeHook;2711 const { type, props, shapeFlag, transition, scopeId, patchFlag, dirs } = vnode;2712 if (vnode.el &&2713 hostCloneNode !== undefined &&2714 patchFlag === -1 /* HOISTED */) {2715 // If a vnode has non-null el, it means it's being reused.2716 // Only static vnodes can be reused, so its mounted DOM nodes should be2717 // exactly the same, and we can simply do a clone here.2718 el = vnode.el = hostCloneNode(vnode.el);2719 }2720 else {2721 el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is);2722 // props2723 if (props) {2724 for (const key in props) {2725 if (!shared.isReservedProp(key)) {2726 hostPatchProp(el, key, null, props[key], isSVG);2727 }2728 }2729 if ((vnodeHook = props.onVnodeBeforeMount)) {2730 invokeVNodeHook(vnodeHook, parentComponent, vnode);2731 }2732 }2733 if (dirs) {2734 invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount');2735 }2736 // scopeId2737 if (scopeId) {2738 hostSetScopeId(el, scopeId);2739 }2740 const treeOwnerId = parentComponent && parentComponent.type.__scopeId;2741 // vnode's own scopeId and the current patched component's scopeId is2742 // different - this is a slot content node.2743 if (treeOwnerId && treeOwnerId !== scopeId) {2744 hostSetScopeId(el, treeOwnerId + '-s');2745 }2746 // children2747 if (shapeFlag & 8 /* TEXT_CHILDREN */) {2748 hostSetElementText(el, vnode.children);2749 }2750 else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {2751 mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG && type !== 'foreignObject', optimized || !!vnode.dynamicChildren);2752 }2753 if (transition && !transition.persisted) {2754 transition.beforeEnter(el);2755 }2756 }2757 hostInsert(el, container, anchor);2758 if ((vnodeHook = props && props.onVnodeMounted) ||2759 (transition && !transition.persisted) ||2760 dirs) {2761 queuePostRenderEffect(() => {2762 vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);2763 transition && !transition.persisted && transition.enter(el);2764 dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted');2765 }, parentSuspense);2766 }2767 };2768 const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, optimized, start = 0) => {2769 for (let i = start; i < children.length; i++) {2770 const child = (children[i] = optimized2771 ? cloneIfMounted(children[i])2772 : normalizeVNode(children[i]));2773 patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2774 }2775 };2776 const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, optimized) => {2777 const el = (n2.el = n1.el);2778 let { patchFlag, dynamicChildren, dirs } = n2;2779 const oldProps = (n1 && n1.props) || shared.EMPTY_OBJ;2780 const newProps = n2.props || shared.EMPTY_OBJ;2781 let vnodeHook;2782 if ((vnodeHook = newProps.onVnodeBeforeUpdate)) {2783 invokeVNodeHook(vnodeHook, parentComponent, n2, n1);2784 }2785 if (dirs) {2786 invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate');2787 }2788 if ( parentComponent && parentComponent.renderUpdated) {2789 // HMR updated, force full diff2790 patchFlag = 0;2791 optimized = false;2792 dynamicChildren = null;2793 }2794 if (patchFlag > 0) {2795 // the presence of a patchFlag means this element's render code was2796 // generated by the compiler and can take the fast path.2797 // in this path old node and new node are guaranteed to have the same shape2798 // (i.e. at the exact same position in the source template)2799 if (patchFlag & 16 /* FULL_PROPS */) {2800 // element props contain dynamic keys, full diff needed2801 patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);2802 }2803 else {2804 // class2805 // this flag is matched when the element has dynamic class bindings.2806 if (patchFlag & 2 /* CLASS */) {2807 if (oldProps.class !== newProps.class) {2808 hostPatchProp(el, 'class', null, newProps.class, isSVG);2809 }2810 }2811 // style2812 // this flag is matched when the element has dynamic style bindings2813 if (patchFlag & 4 /* STYLE */) {2814 hostPatchProp(el, 'style', oldProps.style, newProps.style, isSVG);2815 }2816 // props2817 // This flag is matched when the element has dynamic prop/attr bindings2818 // other than class and style. The keys of dynamic prop/attrs are saved for2819 // faster iteration.2820 // Note dynamic keys like :[foo]="bar" will cause this optimization to2821 // bail out and go through a full diff because we need to unset the old key2822 if (patchFlag & 8 /* PROPS */) {2823 // if the flag is present then dynamicProps must be non-null2824 const propsToUpdate = n2.dynamicProps;2825 for (let i = 0; i < propsToUpdate.length; i++) {2826 const key = propsToUpdate[i];2827 const prev = oldProps[key];2828 const next = newProps[key];2829 if (prev !== next) {2830 hostPatchProp(el, key, prev, next, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);2831 }2832 }2833 }2834 }2835 // text2836 // This flag is matched when the element has only dynamic text children.2837 if (patchFlag & 1 /* TEXT */) {2838 if (n1.children !== n2.children) {2839 hostSetElementText(el, n2.children);2840 }2841 }2842 }2843 else if (!optimized && dynamicChildren == null) {2844 // unoptimized, full diff2845 patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);2846 }2847 const areChildrenSVG = isSVG && n2.type !== 'foreignObject';2848 if (dynamicChildren) {2849 patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG);2850 }2851 else if (!optimized) {2852 // full diff2853 patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG);2854 }2855 if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {2856 queuePostRenderEffect(() => {2857 vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);2858 dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated');2859 }, parentSuspense);2860 }2861 };2862 // The fast path for blocks.2863 const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG) => {2864 for (let i = 0; i < newChildren.length; i++) {2865 const oldVNode = oldChildren[i];2866 const newVNode = newChildren[i];2867 // Determine the container (parent element) for the patch.2868 const container = 2869 // - In the case of a Fragment, we need to provide the actual parent2870 // of the Fragment itself so it can move its children.2871 oldVNode.type === Fragment ||2872 // - In the case of different nodes, there is going to be a replacement2873 // which also requires the correct parent container2874 !isSameVNodeType(oldVNode, newVNode) ||2875 // - In the case of a component, it could contain anything.2876 oldVNode.shapeFlag & 6 /* COMPONENT */2877 ? hostParentNode(oldVNode.el)2878 : // In other cases, the parent container is not actually used so we2879 // just pass the block element here to avoid a DOM parentNode call.2880 fallbackContainer;2881 patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, true);2882 }2883 };2884 const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {2885 if (oldProps !== newProps) {2886 for (const key in newProps) {2887 if (shared.isReservedProp(key))2888 continue;2889 const next = newProps[key];2890 const prev = oldProps[key];2891 if (next !== prev) {2892 hostPatchProp(el, key, prev, next, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);2893 }2894 }2895 if (oldProps !== shared.EMPTY_OBJ) {2896 for (const key in oldProps) {2897 if (!shared.isReservedProp(key) && !(key in newProps)) {2898 hostPatchProp(el, key, oldProps[key], null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);2899 }2900 }2901 }2902 }2903 };2904 const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2905 const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''));2906 const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''));2907 let { patchFlag, dynamicChildren } = n2;2908 if (patchFlag > 0) {2909 optimized = true;2910 }2911 if ( parentComponent && parentComponent.renderUpdated) {2912 // HMR updated, force full diff2913 patchFlag = 0;2914 optimized = false;2915 dynamicChildren = null;2916 }2917 if (n1 == null) {2918 hostInsert(fragmentStartAnchor, container, anchor);2919 hostInsert(fragmentEndAnchor, container, anchor);2920 // a fragment can only have array children2921 // since they are either generated by the compiler, or implicitly created2922 // from arrays.2923 mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);2924 }2925 else {2926 if (patchFlag & 64 /* STABLE_FRAGMENT */ && dynamicChildren) {2927 // a stable fragment (template root or <template v-for>) doesn't need to2928 // patch children order, but it may contain dynamicChildren.2929 patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG);2930 }2931 else {2932 // keyed / unkeyed, or manual fragments.2933 // for keyed & unkeyed, since they are compiler generated from v-for,2934 // each child is guaranteed to be a block so the fragment will never2935 // have dynamicChildren.2936 patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);2937 }2938 }2939 };2940 const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2941 if (n1 == null) {2942 if (n2.shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) {2943 parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized);2944 }2945 else {2946 mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2947 }2948 }2949 else {2950 updateComponent(n1, n2, parentComponent, optimized);2951 }2952 };2953 const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2954 const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense));2955 if ( instance.type.__hmrId) {2956 registerHMR(instance);2957 }2958 {2959 pushWarningContext(initialVNode);2960 startMeasure(instance, `mount`);2961 }2962 // inject renderer internals for keepAlive2963 if (isKeepAlive(initialVNode)) {2964 instance.ctx.renderer = internals;2965 }2966 // resolve props and slots for setup context2967 {2968 startMeasure(instance, `init`);2969 }2970 setupComponent(instance);2971 {2972 endMeasure(instance, `init`);2973 }2974 // setup() is async. This component relies on async logic to be resolved2975 // before proceeding2976 if ( instance.asyncDep) {2977 if (!parentSuspense) {2978 warn('async setup() is used without a suspense boundary!');2979 return;2980 }2981 parentSuspense.registerDep(instance, setupRenderEffect);2982 // Give it a placeholder if this is not hydration2983 if (!initialVNode.el) {2984 const placeholder = (instance.subTree = createVNode(Comment));2985 processCommentNode(null, placeholder, container, anchor);2986 }2987 return;2988 }2989 setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);2990 {2991 popWarningContext();2992 endMeasure(instance, `mount`);2993 }2994 };2995 const updateComponent = (n1, n2, parentComponent, optimized) => {2996 const instance = (n2.component = n1.component);2997 if (shouldUpdateComponent(n1, n2, parentComponent, optimized)) {2998 if (2999 instance.asyncDep &&3000 !instance.asyncResolved) {3001 // async & still pending - just update props and slots3002 // since the component's reactive effect for render isn't set-up yet3003 {3004 pushWarningContext(n2);3005 }3006 updateComponentPreRender(instance, n2, optimized);3007 {3008 popWarningContext();3009 }3010 return;3011 }3012 else {3013 // normal update3014 instance.next = n2;3015 // in case the child component is also queued, remove it to avoid3016 // double updating the same child component in the same flush.3017 invalidateJob(instance.update);3018 // instance.update is the reactive effect runner.3019 instance.update();3020 }3021 }3022 else {3023 // no update needed. just copy over properties3024 n2.component = n1.component;3025 n2.el = n1.el;3026 }3027 };3028 const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {3029 // create reactive effect for rendering3030 instance.update = reactivity.effect(function componentEffect() {3031 if (!instance.isMounted) {3032 let vnodeHook;3033 const { el, props } = initialVNode;3034 const { bm, m, a, parent } = instance;3035 {3036 startMeasure(instance, `render`);3037 }3038 const subTree = (instance.subTree = renderComponentRoot(instance));3039 {3040 endMeasure(instance, `render`);3041 }3042 // beforeMount hook3043 if (bm) {3044 shared.invokeArrayFns(bm);3045 }3046 // onVnodeBeforeMount3047 if ((vnodeHook = props && props.onVnodeBeforeMount)) {3048 invokeVNodeHook(vnodeHook, parent, initialVNode);3049 }3050 if (el && hydrateNode) {3051 {3052 startMeasure(instance, `hydrate`);3053 }3054 // vnode has adopted host node - perform hydration instead of mount.3055 hydrateNode(initialVNode.el, subTree, instance, parentSuspense);3056 {3057 endMeasure(instance, `hydrate`);3058 }3059 }3060 else {3061 {3062 startMeasure(instance, `patch`);3063 }3064 patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);3065 {3066 endMeasure(instance, `patch`);3067 }3068 initialVNode.el = subTree.el;3069 }3070 // mounted hook3071 if (m) {3072 queuePostRenderEffect(m, parentSuspense);3073 }3074 // onVnodeMounted3075 if ((vnodeHook = props && props.onVnodeMounted)) {3076 queuePostRenderEffect(() => {3077 invokeVNodeHook(vnodeHook, parent, initialVNode);3078 }, parentSuspense);3079 }3080 // activated hook for keep-alive roots.3081 if (a &&3082 initialVNode.shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {3083 queuePostRenderEffect(a, parentSuspense);3084 }3085 instance.isMounted = true;3086 }3087 else {3088 // updateComponent3089 // This is triggered by mutation of component's own state (next: null)3090 // OR parent calling processComponent (next: VNode)3091 let { next, bu, u, parent, vnode } = instance;3092 let vnodeHook;3093 {3094 pushWarningContext(next || instance.vnode);3095 }3096 if (next) {3097 updateComponentPreRender(instance, next, optimized);3098 }3099 else {3100 next = vnode;3101 }3102 {3103 startMeasure(instance, `render`);3104 }3105 const nextTree = renderComponentRoot(instance);3106 {3107 endMeasure(instance, `render`);3108 }3109 const prevTree = instance.subTree;3110 instance.subTree = nextTree;3111 next.el = vnode.el;3112 // beforeUpdate hook3113 if (bu) {3114 shared.invokeArrayFns(bu);3115 }3116 // onVnodeBeforeUpdate3117 if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {3118 invokeVNodeHook(vnodeHook, parent, next, vnode);3119 }3120 // reset refs3121 // only needed if previous patch had refs3122 if (instance.refs !== shared.EMPTY_OBJ) {3123 instance.refs = {};3124 }3125 {3126 startMeasure(instance, `patch`);3127 }3128 patch(prevTree, nextTree, 3129 // parent may have changed if it's in a teleport3130 hostParentNode(prevTree.el), 3131 // anchor may have changed if it's in a fragment3132 getNextHostNode(prevTree), instance, parentSuspense, isSVG);3133 {3134 endMeasure(instance, `patch`);3135 }3136 next.el = nextTree.el;3137 if (next === null) {3138 // self-triggered update. In case of HOC, update parent component3139 // vnode el. HOC is indicated by parent instance's subTree pointing3140 // to child component's vnode3141 updateHOCHostEl(instance, nextTree.el);3142 }3143 // updated hook3144 if (u) {3145 queuePostRenderEffect(u, parentSuspense);3146 }3147 // onVnodeUpdated3148 if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {3149 queuePostRenderEffect(() => {3150 invokeVNodeHook(vnodeHook, parent, next, vnode);3151 }, parentSuspense);3152 }3153 {3154 popWarningContext();3155 }3156 }3157 }, createDevEffectOptions(instance) );3158 };3159 const updateComponentPreRender = (instance, nextVNode, optimized) => {3160 nextVNode.component = instance;3161 const prevProps = instance.vnode.props;3162 instance.vnode = nextVNode;3163 instance.next = null;3164 updateProps(instance, nextVNode.props, prevProps, optimized);3165 updateSlots(instance, nextVNode.children);3166 };3167 const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) => {3168 const c1 = n1 && n1.children;3169 const prevShapeFlag = n1 ? n1.shapeFlag : 0;3170 const c2 = n2.children;3171 const { patchFlag, shapeFlag } = n2;3172 if (patchFlag === -2 /* BAIL */) {3173 optimized = false;3174 }3175 // fast path3176 if (patchFlag > 0) {3177 if (patchFlag & 128 /* KEYED_FRAGMENT */) {3178 // this could be either fully-keyed or mixed (some keyed some not)3179 // presence of patchFlag means children are guaranteed to be arrays3180 patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3181 return;3182 }3183 else if (patchFlag & 256 /* UNKEYED_FRAGMENT */) {3184 // unkeyed3185 patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3186 return;3187 }3188 }3189 // children has 3 possibilities: text, array or no children.3190 if (shapeFlag & 8 /* TEXT_CHILDREN */) {3191 // text children fast path3192 if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {3193 unmountChildren(c1, parentComponent, parentSuspense);3194 }3195 if (c2 !== c1) {3196 hostSetElementText(container, c2);3197 }3198 }3199 else {3200 if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {3201 // prev children was array3202 if (shapeFlag & 16 /* ARRAY_CHILDREN */) {3203 // two arrays, cannot assume anything, do full diff3204 patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3205 }3206 else {3207 // no new children, just unmount old3208 unmountChildren(c1, parentComponent, parentSuspense, true);3209 }3210 }3211 else {3212 // prev children was text OR null3213 // new children is array OR null3214 if (prevShapeFlag & 8 /* TEXT_CHILDREN */) {3215 hostSetElementText(container, '');3216 }3217 // mount new if array3218 if (shapeFlag & 16 /* ARRAY_CHILDREN */) {3219 mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3220 }3221 }3222 }3223 };3224 const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {3225 c1 = c1 || shared.EMPTY_ARR;3226 c2 = c2 || shared.EMPTY_ARR;3227 const oldLength = c1.length;3228 const newLength = c2.length;3229 const commonLength = Math.min(oldLength, newLength);3230 let i;3231 for (i = 0; i < commonLength; i++) {3232 const nextChild = (c2[i] = optimized3233 ? cloneIfMounted(c2[i])3234 : normalizeVNode(c2[i]));3235 patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, optimized);3236 }3237 if (oldLength > newLength) {3238 // remove old3239 unmountChildren(c1, parentComponent, parentSuspense, true, commonLength);3240 }3241 else {3242 // mount new3243 mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, commonLength);3244 }3245 };3246 // can be all-keyed or mixed3247 const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) => {3248 let i = 0;3249 const l2 = c2.length;3250 let e1 = c1.length - 1; // prev ending index3251 let e2 = l2 - 1; // next ending index3252 // 1. sync from start3253 // (a b) c3254 // (a b) d e3255 while (i <= e1 && i <= e2) {3256 const n1 = c1[i];3257 const n2 = (c2[i] = optimized3258 ? cloneIfMounted(c2[i])3259 : normalizeVNode(c2[i]));3260 if (isSameVNodeType(n1, n2)) {3261 patch(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized);3262 }3263 else {3264 break;3265 }3266 i++;3267 }3268 // 2. sync from end3269 // a (b c)3270 // d e (b c)3271 while (i <= e1 && i <= e2) {3272 const n1 = c1[e1];3273 const n2 = (c2[e2] = optimized3274 ? cloneIfMounted(c2[e2])3275 : normalizeVNode(c2[e2]));3276 if (isSameVNodeType(n1, n2)) {3277 patch(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized);3278 }3279 else {3280 break;3281 }3282 e1--;3283 e2--;3284 }3285 // 3. common sequence + mount3286 // (a b)3287 // (a b) c3288 // i = 2, e1 = 1, e2 = 23289 // (a b)3290 // c (a b)3291 // i = 0, e1 = -1, e2 = 03292 if (i > e1) {3293 if (i <= e2) {3294 const nextPos = e2 + 1;3295 const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;3296 while (i <= e2) {3297 patch(null, (c2[i] = optimized3298 ? cloneIfMounted(c2[i])3299 : normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG);3300 i++;3301 }3302 }3303 }3304 // 4. common sequence + unmount3305 // (a b) c3306 // (a b)3307 // i = 2, e1 = 2, e2 = 13308 // a (b c)3309 // (b c)3310 // i = 0, e1 = 0, e2 = -13311 else if (i > e2) {3312 while (i <= e1) {3313 unmount(c1[i], parentComponent, parentSuspense, true);3314 i++;3315 }3316 }3317 // 5. unknown sequence3318 // [i ... e1 + 1]: a b [c d e] f g3319 // [i ... e2 + 1]: a b [e d c h] f g3320 // i = 2, e1 = 4, e2 = 53321 else {3322 const s1 = i; // prev starting index3323 const s2 = i; // next starting index3324 // 5.1 build key:index map for newChildren3325 const keyToNewIndexMap = new Map();3326 for (i = s2; i <= e2; i++) {3327 const nextChild = (c2[i] = optimized3328 ? cloneIfMounted(c2[i])3329 : normalizeVNode(c2[i]));3330 if (nextChild.key != null) {3331 if ( keyToNewIndexMap.has(nextChild.key)) {3332 warn(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);3333 }3334 keyToNewIndexMap.set(nextChild.key, i);3335 }3336 }3337 // 5.2 loop through old children left to be patched and try to patch3338 // matching nodes & remove nodes that are no longer present3339 let j;3340 let patched = 0;3341 const toBePatched = e2 - s2 + 1;3342 let moved = false;3343 // used to track whether any node has moved3344 let maxNewIndexSoFar = 0;3345 // works as Map<newIndex, oldIndex>3346 // Note that oldIndex is offset by +13347 // and oldIndex = 0 is a special value indicating the new node has3348 // no corresponding old node.3349 // used for determining longest stable subsequence3350 const newIndexToOldIndexMap = new Array(toBePatched);3351 for (i = 0; i < toBePatched; i++)3352 newIndexToOldIndexMap[i] = 0;3353 for (i = s1; i <= e1; i++) {3354 const prevChild = c1[i];3355 if (patched >= toBePatched) {3356 // all new children have been patched so this can only be a removal3357 unmount(prevChild, parentComponent, parentSuspense, true);3358 continue;3359 }3360 let newIndex;3361 if (prevChild.key != null) {3362 newIndex = keyToNewIndexMap.get(prevChild.key);3363 }3364 else {3365 // key-less node, try to locate a key-less node of the same type3366 for (j = s2; j <= e2; j++) {3367 if (newIndexToOldIndexMap[j - s2] === 0 &&3368 isSameVNodeType(prevChild, c2[j])) {3369 newIndex = j;3370 break;3371 }3372 }3373 }3374 if (newIndex === undefined) {3375 unmount(prevChild, parentComponent, parentSuspense, true);3376 }3377 else {3378 newIndexToOldIndexMap[newIndex - s2] = i + 1;3379 if (newIndex >= maxNewIndexSoFar) {3380 maxNewIndexSoFar = newIndex;3381 }3382 else {3383 moved = true;3384 }3385 patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, optimized);3386 patched++;3387 }3388 }3389 // 5.3 move and mount3390 // generate longest stable subsequence only when nodes have moved3391 const increasingNewIndexSequence = moved3392 ? getSequence(newIndexToOldIndexMap)3393 : shared.EMPTY_ARR;3394 j = increasingNewIndexSequence.length - 1;3395 // looping backwards so that we can use last patched node as anchor3396 for (i = toBePatched - 1; i >= 0; i--) {3397 const nextIndex = s2 + i;3398 const nextChild = c2[nextIndex];3399 const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;3400 if (newIndexToOldIndexMap[i] === 0) {3401 // mount new3402 patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG);3403 }3404 else if (moved) {3405 // move if:3406 // There is no stable subsequence (e.g. a reverse)3407 // OR current node is not among the stable sequence3408 if (j < 0 || i !== increasingNewIndexSequence[j]) {3409 move(nextChild, container, anchor, 2 /* REORDER */);3410 }3411 else {3412 j--;3413 }3414 }3415 }3416 }3417 };3418 const move = (vnode, container, anchor, moveType, parentSuspense = null) => {3419 const { el, type, transition, children, shapeFlag } = vnode;3420 if (shapeFlag & 6 /* COMPONENT */) {3421 move(vnode.component.subTree, container, anchor, moveType);3422 return;3423 }3424 if ( shapeFlag & 128 /* SUSPENSE */) {3425 vnode.suspense.move(container, anchor, moveType);3426 return;3427 }3428 if (shapeFlag & 64 /* TELEPORT */) {3429 type.move(vnode, container, anchor, internals);3430 return;3431 }3432 if (type === Fragment) {3433 hostInsert(el, container, anchor);3434 for (let i = 0; i < children.length; i++) {3435 move(children[i], container, anchor, moveType);3436 }3437 hostInsert(vnode.anchor, container, anchor);3438 return;3439 }3440 // single nodes3441 const needTransition = moveType !== 2 /* REORDER */ &&3442 shapeFlag & 1 /* ELEMENT */ &&3443 transition;3444 if (needTransition) {3445 if (moveType === 0 /* ENTER */) {3446 transition.beforeEnter(el);3447 hostInsert(el, container, anchor);3448 queuePostRenderEffect(() => transition.enter(el), parentSuspense);3449 }3450 else {3451 const { leave, delayLeave, afterLeave } = transition;3452 const remove = () => hostInsert(el, container, anchor);3453 const performLeave = () => {3454 leave(el, () => {3455 remove();3456 afterLeave && afterLeave();3457 });3458 };3459 if (delayLeave) {3460 delayLeave(el, remove, performLeave);3461 }3462 else {3463 performLeave();3464 }3465 }3466 }3467 else {3468 hostInsert(el, container, anchor);3469 }3470 };3471 const unmount = (vnode, parentComponent, parentSuspense, doRemove = false) => {3472 const { props, ref, children, dynamicChildren, shapeFlag, dirs } = vnode;3473 const shouldInvokeDirs = shapeFlag & 1 /* ELEMENT */ && dirs;3474 const shouldKeepAlive = shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */;3475 let vnodeHook;3476 // unset ref3477 if (ref != null && parentComponent) {3478 setRef(ref, null, parentComponent, null);3479 }3480 if ((vnodeHook = props && props.onVnodeBeforeUnmount) && !shouldKeepAlive) {3481 invokeVNodeHook(vnodeHook, parentComponent, vnode);3482 }3483 if (shapeFlag & 6 /* COMPONENT */) {3484 if (shouldKeepAlive) {3485 parentComponent.ctx.deactivate(vnode);3486 }3487 else {3488 unmountComponent(vnode.component, parentSuspense, doRemove);3489 }3490 }3491 else {3492 if ( shapeFlag & 128 /* SUSPENSE */) {3493 vnode.suspense.unmount(parentSuspense, doRemove);3494 return;3495 }3496 if (shouldInvokeDirs) {3497 invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount');3498 }3499 if (dynamicChildren) {3500 // fast path for block nodes: only need to unmount dynamic children.3501 unmountChildren(dynamicChildren, parentComponent, parentSuspense);3502 }3503 else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {3504 unmountChildren(children, parentComponent, parentSuspense);3505 }3506 // an unmounted teleport should always remove its children3507 if (shapeFlag & 64 /* TELEPORT */) {3508 vnode.type.remove(vnode, internals);3509 }3510 if (doRemove) {3511 remove(vnode);3512 }3513 }3514 if (((vnodeHook = props && props.onVnodeUnmounted) || shouldInvokeDirs) &&3515 !shouldKeepAlive) {3516 queuePostRenderEffect(() => {3517 vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);3518 shouldInvokeDirs &&3519 invokeDirectiveHook(vnode, null, parentComponent, 'unmounted');3520 }, parentSuspense);3521 }3522 };3523 const remove = vnode => {3524 const { type, el, anchor, transition } = vnode;3525 if (type === Fragment) {3526 removeFragment(el, anchor);3527 return;3528 }3529 const performRemove = () => {3530 hostRemove(el);3531 if (transition && !transition.persisted && transition.afterLeave) {3532 transition.afterLeave();3533 }3534 };3535 if (vnode.shapeFlag & 1 /* ELEMENT */ &&3536 transition &&3537 !transition.persisted) {3538 const { leave, delayLeave } = transition;3539 const performLeave = () => leave(el, performRemove);3540 if (delayLeave) {3541 delayLeave(vnode.el, performRemove, performLeave);3542 }3543 else {3544 performLeave();3545 }3546 }3547 else {3548 performRemove();3549 }3550 };3551 const removeFragment = (cur, end) => {3552 // For fragments, directly remove all contained DOM nodes.3553 // (fragment child nodes cannot have transition)3554 let next;3555 while (cur !== end) {3556 next = hostNextSibling(cur);3557 hostRemove(cur);3558 cur = next;3559 }3560 hostRemove(end);3561 };3562 const unmountComponent = (instance, parentSuspense, doRemove) => {3563 if ( instance.type.__hmrId) {3564 unregisterHMR(instance);3565 }3566 const { bum, effects, update, subTree, um, da, isDeactivated } = instance;3567 // beforeUnmount hook3568 if (bum) {3569 shared.invokeArrayFns(bum);3570 }3571 if (effects) {3572 for (let i = 0; i < effects.length; i++) {3573 reactivity.stop(effects[i]);3574 }3575 }3576 // update may be null if a component is unmounted before its async3577 // setup has resolved.3578 if (update) {3579 reactivity.stop(update);3580 unmount(subTree, instance, parentSuspense, doRemove);3581 }3582 // unmounted hook3583 if (um) {3584 queuePostRenderEffect(um, parentSuspense);3585 }3586 // deactivated hook3587 if (da &&3588 !isDeactivated &&3589 instance.vnode.shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {3590 queuePostRenderEffect(da, parentSuspense);3591 }3592 queuePostFlushCb(() => {3593 instance.isUnmounted = true;3594 });3595 // A component with async dep inside a pending suspense is unmounted before3596 // its async dep resolves. This should remove the dep from the suspense, and3597 // cause the suspense to resolve immediately if that was the last dep.3598 if (3599 parentSuspense &&3600 !parentSuspense.isResolved &&3601 !parentSuspense.isUnmounted &&3602 instance.asyncDep &&3603 !instance.asyncResolved) {3604 parentSuspense.deps--;3605 if (parentSuspense.deps === 0) {3606 parentSuspense.resolve();3607 }3608 }3609 };3610 const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, start = 0) => {3611 for (let i = start; i < children.length; i++) {3612 unmount(children[i], parentComponent, parentSuspense, doRemove);3613 }3614 };3615 const getNextHostNode = vnode => {3616 if (vnode.shapeFlag & 6 /* COMPONENT */) {3617 return getNextHostNode(vnode.component.subTree);3618 }3619 if ( vnode.shapeFlag & 128 /* SUSPENSE */) {3620 return vnode.suspense.next();3621 }3622 return hostNextSibling((vnode.anchor || vnode.el));3623 };3624 const setRef = (rawRef, oldRawRef, parent, value) => {3625 const [owner, ref] = rawRef;3626 if ( !owner) {3627 warn(`Missing ref owner context. ref cannot be used on hoisted vnodes. ` +3628 `A vnode with ref must be created inside the render function.`);3629 return;3630 }3631 const oldRef = oldRawRef && oldRawRef[1];3632 const refs = owner.refs === shared.EMPTY_OBJ ? (owner.refs = {}) : owner.refs;3633 const setupState = owner.setupState;3634 // unset old ref3635 if (oldRef != null && oldRef !== ref) {3636 if (shared.isString(oldRef)) {3637 refs[oldRef] = null;3638 if (shared.hasOwn(setupState, oldRef)) {3639 setupState[oldRef] = null;3640 }3641 }3642 else if (reactivity.isRef(oldRef)) {3643 oldRef.value = null;3644 }3645 }3646 if (shared.isString(ref)) {3647 refs[ref] = value;3648 if (shared.hasOwn(setupState, ref)) {3649 setupState[ref] = value;3650 }3651 }3652 else if (reactivity.isRef(ref)) {3653 ref.value = value;3654 }3655 else if (shared.isFunction(ref)) {3656 callWithErrorHandling(ref, parent, 12 /* FUNCTION_REF */, [value, refs]);3657 }3658 else {3659 warn('Invalid template ref type:', value, `(${typeof value})`);3660 }3661 };3662 const render = (vnode, container) => {3663 if (vnode == null) {3664 if (container._vnode) {3665 unmount(container._vnode, null, null, true);3666 }3667 }3668 else {3669 patch(container._vnode || null, vnode, container);3670 }3671 flushPostFlushCbs();3672 container._vnode = vnode;3673 };3674 const internals = {3675 p: patch,3676 um: unmount,3677 m: move,3678 r: remove,3679 mt: mountComponent,3680 mc: mountChildren,3681 pc: patchChildren,3682 pbc: patchBlockChildren,3683 n: getNextHostNode,3684 o: options3685 };3686 let hydrate;3687 let hydrateNode;3688 if (createHydrationFns) {3689 [hydrate, hydrateNode] = createHydrationFns(internals);3690 }3691 return {3692 render,3693 hydrate,3694 createApp: createAppAPI(render, hydrate)3695 };3696}3697function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {3698 callWithAsyncErrorHandling(hook, instance, 7 /* VNODE_HOOK */, [3699 vnode,3700 prevVNode3701 ]);3702}3703// https://en.wikipedia.org/wiki/Longest_increasing_subsequence3704function getSequence(arr) {3705 const p = arr.slice();3706 const result = [0];3707 let i, j, u, v, c;3708 const len = arr.length;3709 for (i = 0; i < len; i++) {3710 const arrI = arr[i];3711 if (arrI !== 0) {3712 j = result[result.length - 1];3713 if (arr[j] < arrI) {3714 p[i] = j;3715 result.push(i);3716 continue;3717 }3718 u = 0;3719 v = result.length - 1;3720 while (u < v) {3721 c = ((u + v) / 2) | 0;3722 if (arr[result[c]] < arrI) {3723 u = c + 1;3724 }3725 else {3726 v = c;3727 }3728 }3729 if (arrI < arr[result[u]]) {3730 if (u > 0) {3731 p[i] = result[u - 1];3732 }3733 result[u] = i;3734 }3735 }3736 }3737 u = result.length;3738 v = result[u - 1];3739 while (u-- > 0) {3740 result[u] = v;3741 v = p[v];3742 }3743 return result;3744}3745function useTransitionState() {3746 const state = {3747 isMounted: false,3748 isLeaving: false,3749 isUnmounting: false,3750 leavingVNodes: new Map()3751 };3752 onMounted(() => {3753 state.isMounted = true;3754 });3755 onBeforeUnmount(() => {3756 state.isUnmounting = true;3757 });3758 return state;3759}3760const BaseTransitionImpl = {3761 name: `BaseTransition`,3762 props: {3763 mode: String,3764 appear: Boolean,3765 persisted: Boolean,3766 // enter3767 onBeforeEnter: Function,3768 onEnter: Function,3769 onAfterEnter: Function,3770 onEnterCancelled: Function,3771 // leave3772 onBeforeLeave: Function,3773 onLeave: Function,3774 onAfterLeave: Function,3775 onLeaveCancelled: Function3776 },3777 setup(props, { slots }) {3778 const instance = getCurrentInstance();3779 const state = useTransitionState();3780 return () => {3781 const children = slots.default && slots.default();3782 if (!children || !children.length) {3783 return;3784 }3785 // warn multiple elements3786 if ( children.length > 1) {3787 warn('<transition> can only be used on a single element or component. Use ' +3788 '<transition-group> for lists.');3789 }3790 // there's no need to track reactivity for these props so use the raw3791 // props for a bit better perf3792 const rawProps = reactivity.toRaw(props);3793 const { mode } = rawProps;3794 // check mode3795 if ( mode && !['in-out', 'out-in', 'default'].includes(mode)) {3796 warn(`invalid <transition> mode: ${mode}`);3797 }3798 // at this point children has a guaranteed length of 1.3799 const child = children[0];3800 if (state.isLeaving) {3801 return emptyPlaceholder(child);3802 }3803 // in the case of <transition><keep-alive/></transition>, we need to3804 // compare the type of the kept-alive children.3805 const innerChild = getKeepAliveChild(child);3806 if (!innerChild) {3807 return emptyPlaceholder(child);3808 }3809 const enterHooks = (innerChild.transition = resolveTransitionHooks(innerChild, rawProps, state, instance));3810 const oldChild = instance.subTree;3811 const oldInnerChild = oldChild && getKeepAliveChild(oldChild);3812 // handle mode3813 if (oldInnerChild &&3814 oldInnerChild.type !== Comment &&3815 !isSameVNodeType(innerChild, oldInnerChild)) {3816 const prevHooks = oldInnerChild.transition;3817 const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance);3818 // update old tree's hooks in case of dynamic transition3819 setTransitionHooks(oldInnerChild, leavingHooks);3820 // switching between different views3821 if (mode === 'out-in') {3822 state.isLeaving = true;3823 // return placeholder node and queue update when leave finishes3824 leavingHooks.afterLeave = () => {3825 state.isLeaving = false;3826 instance.update();3827 };3828 return emptyPlaceholder(child);3829 }3830 else if (mode === 'in-out') {3831 delete prevHooks.delayedLeave;3832 leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {3833 const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild);3834 leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;3835 // early removal callback3836 el._leaveCb = () => {3837 earlyRemove();3838 el._leaveCb = undefined;3839 delete enterHooks.delayedLeave;3840 };3841 enterHooks.delayedLeave = delayedLeave;3842 };3843 }3844 }3845 return child;3846 };3847 }3848};3849// export the public type for h/tsx inference3850// also to avoid inline import() in generated d.ts files3851const BaseTransition = BaseTransitionImpl;3852function getLeavingNodesForType(state, vnode) {3853 const { leavingVNodes } = state;3854 let leavingVNodesCache = leavingVNodes.get(vnode.type);3855 if (!leavingVNodesCache) {3856 leavingVNodesCache = Object.create(null);3857 leavingVNodes.set(vnode.type, leavingVNodesCache);3858 }3859 return leavingVNodesCache;3860}3861// The transition hooks are attached to the vnode as vnode.transition3862// and will be called at appropriate timing in the renderer.3863function resolveTransitionHooks(vnode, { appear, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled }, state, instance) {3864 const key = String(vnode.key);3865 const leavingVNodesCache = getLeavingNodesForType(state, vnode);3866 const callHook = (hook, args) => {3867 hook &&3868 callWithAsyncErrorHandling(hook, instance, 9 /* TRANSITION_HOOK */, args);3869 };3870 const hooks = {3871 persisted,3872 beforeEnter(el) {3873 if (!appear && !state.isMounted) {3874 return;3875 }3876 // for same element (v-show)3877 if (el._leaveCb) {3878 el._leaveCb(true /* cancelled */);3879 }3880 // for toggled element with same key (v-if)3881 const leavingVNode = leavingVNodesCache[key];3882 if (leavingVNode &&3883 isSameVNodeType(vnode, leavingVNode) &&3884 leavingVNode.el._leaveCb) {3885 // force early removal (not cancelled)3886 leavingVNode.el._leaveCb();3887 }3888 callHook(onBeforeEnter, [el]);3889 },3890 enter(el) {3891 if (!appear && !state.isMounted) {3892 return;3893 }3894 let called = false;3895 const afterEnter = (el._enterCb = (cancelled) => {3896 if (called)3897 return;3898 called = true;3899 if (cancelled) {3900 callHook(onEnterCancelled, [el]);3901 }3902 else {3903 callHook(onAfterEnter, [el]);3904 }3905 if (hooks.delayedLeave) {3906 hooks.delayedLeave();3907 }3908 el._enterCb = undefined;3909 });3910 if (onEnter) {3911 onEnter(el, afterEnter);3912 }3913 else {3914 afterEnter();3915 }3916 },3917 leave(el, remove) {3918 const key = String(vnode.key);3919 if (el._enterCb) {3920 el._enterCb(true /* cancelled */);3921 }3922 if (state.isUnmounting) {3923 return remove();3924 }3925 callHook(onBeforeLeave, [el]);3926 let called = false;3927 const afterLeave = (el._leaveCb = (cancelled) => {3928 if (called)3929 return;3930 called = true;3931 remove();3932 if (cancelled) {3933 callHook(onLeaveCancelled, [el]);3934 }3935 else {3936 callHook(onAfterLeave, [el]);3937 }3938 el._leaveCb = undefined;3939 if (leavingVNodesCache[key] === vnode) {3940 delete leavingVNodesCache[key];3941 }3942 });3943 leavingVNodesCache[key] = vnode;3944 if (onLeave) {3945 onLeave(el, afterLeave);3946 }3947 else {3948 afterLeave();3949 }3950 }3951 };3952 return hooks;3953}3954// the placeholder really only handles one special case: KeepAlive3955// in the case of a KeepAlive in a leave phase we need to return a KeepAlive3956// placeholder with empty content to avoid the KeepAlive instance from being3957// unmounted.3958function emptyPlaceholder(vnode) {3959 if (isKeepAlive(vnode)) {3960 vnode = cloneVNode(vnode);3961 vnode.children = null;3962 return vnode;3963 }3964}3965function getKeepAliveChild(vnode) {3966 return isKeepAlive(vnode)3967 ? vnode.children3968 ? vnode.children[0]3969 : undefined3970 : vnode;3971}3972function setTransitionHooks(vnode, hooks) {3973 if (vnode.shapeFlag & 6 /* COMPONENT */ && vnode.component) {3974 setTransitionHooks(vnode.component.subTree, hooks);3975 }3976 else {3977 vnode.transition = hooks;3978 }3979}3980const isKeepAlive = (vnode) => vnode.type.__isKeepAlive;3981const KeepAliveImpl = {3982 name: `KeepAlive`,3983 // Marker for special handling inside the renderer. We are not using a ===3984 // check directly on KeepAlive in the renderer, because importing it directly3985 // would prevent it from being tree-shaken.3986 __isKeepAlive: true,3987 props: {3988 include: [String, RegExp, Array],3989 exclude: [String, RegExp, Array],3990 max: [String, Number]3991 },3992 setup(props, { slots }) {3993 const cache = new Map();3994 const keys = new Set();3995 let current = null;3996 const instance = getCurrentInstance();3997 const parentSuspense = instance.suspense;3998 // KeepAlive communicates with the instantiated renderer via the3999 // ctx where the renderer passes in its internals,4000 // and the KeepAlive instance exposes activate/deactivate implementations.4001 // The whole point of this is to avoid importing KeepAlive directly in the4002 // renderer to facilitate tree-shaking.4003 const sharedContext = instance.ctx;4004 const { renderer: { p: patch, m: move, um: _unmount, o: { createElement } } } = sharedContext;4005 const storageContainer = createElement('div');4006 sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {4007 const child = vnode.component;4008 move(vnode, container, anchor, 0 /* ENTER */, parentSuspense);4009 // in case props have changed4010 patch(child.vnode, vnode, container, anchor, instance, parentSuspense, isSVG, optimized);4011 queuePostRenderEffect(() => {4012 child.isDeactivated = false;4013 if (child.a) {4014 shared.invokeArrayFns(child.a);4015 }4016 }, parentSuspense);4017 };4018 sharedContext.deactivate = (vnode) => {4019 move(vnode, storageContainer, null, 1 /* LEAVE */, parentSuspense);4020 queuePostRenderEffect(() => {4021 const component = vnode.component;4022 if (component.da) {4023 shared.invokeArrayFns(component.da);4024 }4025 component.isDeactivated = true;4026 }, parentSuspense);4027 };4028 function unmount(vnode) {4029 // reset the shapeFlag so it can be properly unmounted4030 vnode.shapeFlag = 4 /* STATEFUL_COMPONENT */;4031 _unmount(vnode, instance, parentSuspense);4032 }4033 function pruneCache(filter) {4034 cache.forEach((vnode, key) => {4035 const name = getName(vnode.type);4036 if (name && (!filter || !filter(name))) {4037 pruneCacheEntry(key);4038 }4039 });4040 }4041 function pruneCacheEntry(key) {4042 const cached = cache.get(key);4043 if (!current || cached.type !== current.type) {4044 unmount(cached);4045 }4046 else if (current) {4047 // current active instance should no longer be kept-alive.4048 // we can't unmount it now but it might be later, so reset its flag now.4049 current.shapeFlag = 4 /* STATEFUL_COMPONENT */;4050 }4051 cache.delete(key);4052 keys.delete(key);4053 }4054 watch(() => [props.include, props.exclude], ([include, exclude]) => {4055 include && pruneCache(name => matches(include, name));4056 exclude && pruneCache(name => matches(exclude, name));4057 });4058 onBeforeUnmount(() => {4059 cache.forEach(unmount);4060 });4061 return () => {4062 if (!slots.default) {4063 return null;4064 }4065 const children = slots.default();4066 let vnode = children[0];4067 if (children.length > 1) {4068 {4069 warn(`KeepAlive should contain exactly one component child.`);4070 }4071 current = null;4072 return children;4073 }4074 else if (!isVNode(vnode) ||4075 !(vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */)) {4076 current = null;4077 return vnode;4078 }4079 const comp = vnode.type;4080 const name = getName(comp);4081 const { include, exclude, max } = props;4082 if ((include && (!name || !matches(include, name))) ||4083 (exclude && name && matches(exclude, name))) {4084 return vnode;4085 }4086 const key = vnode.key == null ? comp : vnode.key;4087 const cachedVNode = cache.get(key);4088 // clone vnode if it's reused because we are going to mutate it4089 if (vnode.el) {4090 vnode = cloneVNode(vnode);4091 }4092 cache.set(key, vnode);4093 if (cachedVNode) {4094 // copy over mounted state4095 vnode.el = cachedVNode.el;4096 vnode.component = cachedVNode.component;4097 if (vnode.transition) {4098 // recursively update transition hooks on subTree4099 setTransitionHooks(vnode, vnode.transition);4100 }4101 // avoid vnode being mounted as fresh4102 vnode.shapeFlag |= 512 /* COMPONENT_KEPT_ALIVE */;4103 // make this key the freshest4104 keys.delete(key);4105 keys.add(key);4106 }4107 else {4108 keys.add(key);4109 // prune oldest entry4110 if (max && keys.size > parseInt(max, 10)) {4111 pruneCacheEntry(Array.from(keys)[0]);4112 }4113 }4114 // avoid vnode being unmounted4115 vnode.shapeFlag |= 256 /* COMPONENT_SHOULD_KEEP_ALIVE */;4116 current = vnode;4117 return vnode;4118 };4119 }4120};4121// export the public type for h/tsx inference4122// also to avoid inline import() in generated d.ts files4123const KeepAlive = KeepAliveImpl;4124function getName(comp) {4125 return comp.displayName || comp.name;4126}4127function matches(pattern, name) {4128 if (shared.isArray(pattern)) {4129 return pattern.some((p) => matches(p, name));4130 }4131 else if (shared.isString(pattern)) {4132 return pattern.split(',').indexOf(name) > -1;4133 }4134 else if (pattern.test) {4135 return pattern.test(name);4136 }4137 /* istanbul ignore next */4138 return false;4139}4140function onActivated(hook, target) {4141 registerKeepAliveHook(hook, "a" /* ACTIVATED */, target);4142}4143function onDeactivated(hook, target) {4144 registerKeepAliveHook(hook, "da" /* DEACTIVATED */, target);4145}4146function registerKeepAliveHook(hook, type, target = currentInstance) {4147 // cache the deactivate branch check wrapper for injected hooks so the same4148 // hook can be properly deduped by the scheduler. "__wdc" stands for "with4149 // deactivation check".4150 const wrappedHook = hook.__wdc ||4151 (hook.__wdc = () => {4152 // only fire the hook if the target instance is NOT in a deactivated branch.4153 let current = target;4154 while (current) {4155 if (current.isDeactivated) {4156 return;4157 }4158 current = current.parent;4159 }4160 hook();4161 });4162 injectHook(type, wrappedHook, target);4163 // In addition to registering it on the target instance, we walk up the parent4164 // chain and register it on all ancestor instances that are keep-alive roots.4165 // This avoids the need to walk the entire component tree when invoking these4166 // hooks, and more importantly, avoids the need to track child components in4167 // arrays.4168 if (target) {4169 let current = target.parent;4170 while (current && current.parent) {4171 if (isKeepAlive(current.parent.vnode)) {4172 injectToKeepAliveRoot(wrappedHook, type, target, current);4173 }4174 current = current.parent;4175 }4176 }4177}4178function injectToKeepAliveRoot(hook, type, target, keepAliveRoot) {4179 injectHook(type, hook, keepAliveRoot, true /* prepend */);4180 onUnmounted(() => {4181 shared.remove(keepAliveRoot[type], hook);4182 }, target);4183}4184function injectHook(type, hook, target = currentInstance, prepend = false) {4185 if (target) {4186 const hooks = target[type] || (target[type] = []);4187 // cache the error handling wrapper for injected hooks so the same hook4188 // can be properly deduped by the scheduler. "__weh" stands for "with error4189 // handling".4190 const wrappedHook = hook.__weh ||4191 (hook.__weh = (...args) => {4192 if (target.isUnmounted) {4193 return;4194 }4195 // disable tracking inside all lifecycle hooks4196 // since they can potentially be called inside effects.4197 reactivity.pauseTracking();4198 // Set currentInstance during hook invocation.4199 // This assumes the hook does not synchronously trigger other hooks, which4200 // can only be false when the user does something really funky.4201 setCurrentInstance(target);4202 const res = callWithAsyncErrorHandling(hook, target, type, args);4203 setCurrentInstance(null);4204 reactivity.resetTracking();4205 return res;4206 });4207 if (prepend) {4208 hooks.unshift(wrappedHook);4209 }4210 else {4211 hooks.push(wrappedHook);4212 }4213 }4214 else {4215 const apiName = `on${shared.capitalize(ErrorTypeStrings[type].replace(/ hook$/, ''))}`;4216 warn(`${apiName} is called when there is no active component instance to be ` +4217 `associated with. ` +4218 `Lifecycle injection APIs can only be used during execution of setup().` +4219 ( ` If you are using async setup(), make sure to register lifecycle ` +4220 `hooks before the first await statement.`4221 ));4222 }4223}4224const createHook = (lifecycle) => (hook, target = currentInstance) => 4225// post-create lifecycle registrations are noops during SSR4226!isInSSRComponentSetup && injectHook(lifecycle, hook, target);4227const onBeforeMount = createHook("bm" /* BEFORE_MOUNT */);4228const onMounted = createHook("m" /* MOUNTED */);4229const onBeforeUpdate = createHook("bu" /* BEFORE_UPDATE */);4230const onUpdated = createHook("u" /* UPDATED */);4231const onBeforeUnmount = createHook("bum" /* BEFORE_UNMOUNT */);4232const onUnmounted = createHook("um" /* UNMOUNTED */);4233const onRenderTriggered = createHook("rtg" /* RENDER_TRIGGERED */);4234const onRenderTracked = createHook("rtc" /* RENDER_TRACKED */);4235const onErrorCaptured = (hook, target = currentInstance) => {4236 injectHook("ec" /* ERROR_CAPTURED */, hook, target);4237};4238const invoke = (fn) => fn();4239// Simple effect.4240function watchEffect(effect, options) {4241 return doWatch(effect, null, options);4242}4243// initial value for watchers to trigger on undefined initial values4244const INITIAL_WATCHER_VALUE = {};4245// implementation4246function watch(source, cb, options) {4247 if ( !shared.isFunction(cb)) {4248 warn(`\`watch(fn, options?)\` signature has been moved to a separate API. ` +4249 `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +4250 `supports \`watch(source, cb, options?) signature.`);4251 }4252 return doWatch(source, cb, options);4253}4254function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = shared.EMPTY_OBJ) {4255 if ( !cb) {4256 if (immediate !== undefined) {4257 warn(`watch() "immediate" option is only respected when using the ` +4258 `watch(source, callback, options?) signature.`);4259 }4260 if (deep !== undefined) {4261 warn(`watch() "deep" option is only respected when using the ` +4262 `watch(source, callback, options?) signature.`);4263 }4264 }4265 const instance = currentInstance;4266 let getter;4267 if (shared.isArray(source)) {4268 getter = () => source.map(s => reactivity.isRef(s)4269 ? s.value4270 : callWithErrorHandling(s, instance, 2 /* WATCH_GETTER */));4271 }4272 else if (reactivity.isRef(source)) {4273 getter = () => source.value;4274 }4275 else if (cb) {4276 // getter with cb4277 getter = () => callWithErrorHandling(source, instance, 2 /* WATCH_GETTER */);4278 }4279 else {4280 // no cb -> simple effect4281 getter = () => {4282 if (instance && instance.isUnmounted) {4283 return;4284 }4285 if (cleanup) {4286 cleanup();4287 }4288 return callWithErrorHandling(source, instance, 3 /* WATCH_CALLBACK */, [onInvalidate]);4289 };4290 }4291 if (cb && deep) {4292 const baseGetter = getter;4293 getter = () => traverse(baseGetter());4294 }4295 let cleanup;4296 const onInvalidate = (fn) => {4297 cleanup = runner.options.onStop = () => {4298 callWithErrorHandling(fn, instance, 4 /* WATCH_CLEANUP */);4299 };4300 };4301 // in SSR there is no need to setup an actual effect, and it should be noop4302 // unless it's eager4303 if ( isInSSRComponentSetup) {4304 if (!cb) {4305 getter();4306 }4307 else if (immediate) {4308 callWithAsyncErrorHandling(cb, instance, 3 /* WATCH_CALLBACK */, [4309 getter(),4310 undefined,4311 onInvalidate4312 ]);4313 }4314 return shared.NOOP;4315 }4316 let oldValue = shared.isArray(source) ? [] : INITIAL_WATCHER_VALUE;4317 const applyCb = cb4318 ? () => {4319 if (instance && instance.isUnmounted) {4320 return;4321 }4322 const newValue = runner();4323 if (deep || shared.hasChanged(newValue, oldValue)) {4324 // cleanup before running cb again4325 if (cleanup) {4326 cleanup();4327 }4328 callWithAsyncErrorHandling(cb, instance, 3 /* WATCH_CALLBACK */, [4329 newValue,4330 // pass undefined as the old value when it's changed for the first time4331 oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,4332 onInvalidate4333 ]);4334 oldValue = newValue;4335 }4336 }4337 : void 0;4338 let scheduler;4339 if (flush === 'sync') {4340 scheduler = invoke;4341 }4342 else if (flush === 'pre') {4343 scheduler = job => {4344 if (!instance || instance.isMounted) {4345 queueJob(job);4346 }4347 else {4348 // with 'pre' option, the first call must happen before4349 // the component is mounted so it is called synchronously.4350 job();4351 }4352 };4353 }4354 else {4355 scheduler = job => queuePostRenderEffect(job, instance && instance.suspense);4356 }4357 const runner = reactivity.effect(getter, {4358 lazy: true,4359 // so it runs before component update effects in pre flush mode4360 computed: true,4361 onTrack,4362 onTrigger,4363 scheduler: applyCb ? () => scheduler(applyCb) : scheduler4364 });4365 recordInstanceBoundEffect(runner);4366 // initial run4367 if (applyCb) {4368 if (immediate) {4369 applyCb();4370 }4371 else {4372 oldValue = runner();4373 }4374 }4375 else {4376 runner();4377 }4378 return () => {4379 reactivity.stop(runner);4380 if (instance) {4381 shared.remove(instance.effects, runner);4382 }4383 };4384}4385// this.$watch4386function instanceWatch(source, cb, options) {4387 const publicThis = this.proxy;4388 const getter = shared.isString(source)4389 ? () => publicThis[source]4390 : source.bind(publicThis);4391 const stop = watch(getter, cb.bind(publicThis), options);4392 onBeforeUnmount(stop, this);4393 return stop;4394}4395function traverse(value, seen = new Set()) {4396 if (!shared.isObject(value) || seen.has(value)) {4397 return value;4398 }4399 seen.add(value);4400 if (shared.isArray(value)) {4401 for (let i = 0; i < value.length; i++) {4402 traverse(value[i], seen);4403 }4404 }4405 else if (value instanceof Map) {4406 value.forEach((v, key) => {4407 // to register mutation dep for existing keys4408 traverse(value.get(key), seen);4409 });4410 }4411 else if (value instanceof Set) {4412 value.forEach(v => {4413 traverse(v, seen);4414 });4415 }4416 else {4417 for (const key in value) {4418 traverse(value[key], seen);4419 }4420 }4421 return value;4422}4423function provide(key, value) {4424 if (!currentInstance) {4425 {4426 warn(`provide() can only be used inside setup().`);4427 }4428 }4429 else {4430 let provides = currentInstance.provides;4431 // by default an instance inherits its parent's provides object4432 // but when it needs to provide values of its own, it creates its4433 // own provides object using parent provides object as prototype.4434 // this way in `inject` we can simply look up injections from direct4435 // parent and let the prototype chain do the work.4436 const parentProvides = currentInstance.parent && currentInstance.parent.provides;4437 if (parentProvides === provides) {4438 provides = currentInstance.provides = Object.create(parentProvides);4439 }4440 // TS doesn't allow symbol as index type4441 provides[key] = value;4442 }4443}4444function inject(key, defaultValue) {4445 // fallback to `currentRenderingInstance` so that this can be called in4446 // a functional component4447 const instance = currentInstance || currentRenderingInstance;4448 if (instance) {4449 const provides = instance.provides;4450 if (key in provides) {4451 // TS doesn't allow symbol as index type4452 return provides[key];4453 }4454 else if (arguments.length > 1) {4455 return defaultValue;4456 }4457 else {4458 warn(`injection "${String(key)}" not found.`);4459 }4460 }4461 else {4462 warn(`inject() can only be used inside setup() or functional components.`);4463 }4464}4465function createDuplicateChecker() {4466 const cache = Object.create(null);4467 return (type, key) => {4468 if (cache[key]) {4469 warn(`${type} property "${key}" is already defined in ${cache[key]}.`);4470 }4471 else {4472 cache[key] = type;4473 }4474 };4475}4476function applyOptions(instance, options, deferredData = [], deferredWatch = [], asMixin = false) {4477 const { 4478 // composition4479 mixins, extends: extendsOptions, 4480 // state4481 props: propsOptions, data: dataOptions, computed: computedOptions, methods, watch: watchOptions, provide: provideOptions, inject: injectOptions, 4482 // assets4483 components, directives, 4484 // lifecycle4485 beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeUnmount, unmounted, renderTracked, renderTriggered, errorCaptured } = options;4486 const publicThis = instance.proxy;4487 const ctx = instance.ctx;4488 const globalMixins = instance.appContext.mixins;4489 // call it only during dev4490 // applyOptions is called non-as-mixin once per instance4491 if (!asMixin) {4492 callSyncHook('beforeCreate', options, publicThis, globalMixins);4493 // global mixins are applied first4494 applyMixins(instance, globalMixins, deferredData, deferredWatch);4495 }4496 // extending a base component...4497 if (extendsOptions) {4498 applyOptions(instance, extendsOptions, deferredData, deferredWatch, true);4499 }4500 // local mixins4501 if (mixins) {4502 applyMixins(instance, mixins, deferredData, deferredWatch);4503 }4504 const checkDuplicateProperties = createDuplicateChecker() ;4505 if ( propsOptions) {4506 for (const key in normalizePropsOptions(propsOptions)[0]) {4507 checkDuplicateProperties("Props" /* PROPS */, key);4508 }4509 }4510 // options initialization order (to be consistent with Vue 2):4511 // - props (already done outside of this function)4512 // - inject4513 // - methods4514 // - data (deferred since it relies on `this` access)4515 // - computed4516 // - watch (deferred since it relies on `this` access)4517 if (injectOptions) {4518 if (shared.isArray(injectOptions)) {4519 for (let i = 0; i < injectOptions.length; i++) {4520 const key = injectOptions[i];4521 ctx[key] = inject(key);4522 {4523 checkDuplicateProperties("Inject" /* INJECT */, key);4524 }4525 }4526 }4527 else {4528 for (const key in injectOptions) {4529 const opt = injectOptions[key];4530 if (shared.isObject(opt)) {4531 ctx[key] = inject(opt.from, opt.default);4532 }4533 else {4534 ctx[key] = inject(opt);4535 }4536 {4537 checkDuplicateProperties("Inject" /* INJECT */, key);4538 }4539 }4540 }4541 }4542 if (methods) {4543 for (const key in methods) {4544 const methodHandler = methods[key];4545 if (shared.isFunction(methodHandler)) {4546 ctx[key] = methodHandler.bind(publicThis);4547 {4548 checkDuplicateProperties("Methods" /* METHODS */, key);4549 }4550 }4551 else {4552 warn(`Method "${key}" has type "${typeof methodHandler}" in the component definition. ` +4553 `Did you reference the function correctly?`);4554 }4555 }4556 }4557 if (dataOptions) {4558 if ( !shared.isFunction(dataOptions)) {4559 warn(`The data option must be a function. ` +4560 `Plain object usage is no longer supported.`);4561 }4562 if (asMixin) {4563 deferredData.push(dataOptions);4564 }4565 else {4566 resolveData(instance, dataOptions, publicThis);4567 }4568 }4569 if (!asMixin) {4570 if (deferredData.length) {4571 deferredData.forEach(dataFn => resolveData(instance, dataFn, publicThis));4572 }4573 {4574 const rawData = reactivity.toRaw(instance.data);4575 for (const key in rawData) {4576 checkDuplicateProperties("Data" /* DATA */, key);4577 // expose data on ctx during dev4578 Object.defineProperty(ctx, key, {4579 configurable: true,4580 enumerable: true,4581 get: () => rawData[key],4582 set: shared.NOOP4583 });4584 }4585 }4586 }4587 if (computedOptions) {4588 for (const key in computedOptions) {4589 const opt = computedOptions[key];4590 const get = shared.isFunction(opt)4591 ? opt.bind(publicThis, publicThis)4592 : shared.isFunction(opt.get)4593 ? opt.get.bind(publicThis, publicThis)4594 : shared.NOOP;4595 if ( get === shared.NOOP) {4596 warn(`Computed property "${key}" has no getter.`);4597 }4598 const set = !shared.isFunction(opt) && shared.isFunction(opt.set)4599 ? opt.set.bind(publicThis)4600 : () => {4601 warn(`Write operation failed: computed property "${key}" is readonly.`);4602 }4603 ;4604 const c = computed({4605 get,4606 set4607 });4608 Object.defineProperty(ctx, key, {4609 enumerable: true,4610 configurable: true,4611 get: () => c.value,4612 set: v => (c.value = v)4613 });4614 {4615 checkDuplicateProperties("Computed" /* COMPUTED */, key);4616 }4617 }4618 }4619 if (watchOptions) {4620 deferredWatch.push(watchOptions);4621 }4622 if (!asMixin && deferredWatch.length) {4623 deferredWatch.forEach(watchOptions => {4624 for (const key in watchOptions) {4625 createWatcher(watchOptions[key], ctx, publicThis, key);4626 }4627 });4628 }4629 if (provideOptions) {4630 const provides = shared.isFunction(provideOptions)4631 ? provideOptions.call(publicThis)4632 : provideOptions;4633 for (const key in provides) {4634 provide(key, provides[key]);4635 }4636 }4637 // asset options4638 if (components) {4639 shared.extend(instance.components, components);4640 }4641 if (directives) {4642 shared.extend(instance.directives, directives);4643 }4644 // lifecycle options4645 if (!asMixin) {4646 callSyncHook('created', options, publicThis, globalMixins);4647 }4648 if (beforeMount) {4649 onBeforeMount(beforeMount.bind(publicThis));4650 }4651 if (mounted) {4652 onMounted(mounted.bind(publicThis));4653 }4654 if (beforeUpdate) {4655 onBeforeUpdate(beforeUpdate.bind(publicThis));4656 }4657 if (updated) {4658 onUpdated(updated.bind(publicThis));4659 }4660 if (activated) {4661 onActivated(activated.bind(publicThis));4662 }4663 if (deactivated) {4664 onDeactivated(deactivated.bind(publicThis));4665 }4666 if (errorCaptured) {4667 onErrorCaptured(errorCaptured.bind(publicThis));4668 }4669 if (renderTracked) {4670 onRenderTracked(renderTracked.bind(publicThis));4671 }4672 if (renderTriggered) {4673 onRenderTriggered(renderTriggered.bind(publicThis));4674 }4675 if (beforeUnmount) {4676 onBeforeUnmount(beforeUnmount.bind(publicThis));4677 }4678 if (unmounted) {4679 onUnmounted(unmounted.bind(publicThis));4680 }4681}4682function callSyncHook(name, options, ctx, globalMixins) {4683 callHookFromMixins(name, globalMixins, ctx);4684 const baseHook = options.extends && options.extends[name];4685 if (baseHook) {4686 baseHook.call(ctx);4687 }4688 const mixins = options.mixins;4689 if (mixins) {4690 callHookFromMixins(name, mixins, ctx);4691 }4692 const selfHook = options[name];4693 if (selfHook) {4694 selfHook.call(ctx);4695 }4696}4697function callHookFromMixins(name, mixins, ctx) {4698 for (let i = 0; i < mixins.length; i++) {4699 const fn = mixins[i][name];4700 if (fn) {4701 fn.call(ctx);4702 }4703 }4704}4705function applyMixins(instance, mixins, deferredData, deferredWatch) {4706 for (let i = 0; i < mixins.length; i++) {4707 applyOptions(instance, mixins[i], deferredData, deferredWatch, true);4708 }4709}4710function resolveData(instance, dataFn, publicThis) {4711 const data = dataFn.call(publicThis, publicThis);4712 if ( shared.isPromise(data)) {4713 warn(`data() returned a Promise - note data() cannot be async; If you ` +4714 `intend to perform data fetching before component renders, use ` +4715 `async setup() + <Suspense>.`);4716 }4717 if (!shared.isObject(data)) {4718 warn(`data() should return an object.`);4719 }4720 else if (instance.data === shared.EMPTY_OBJ) {4721 instance.data = reactivity.reactive(data);4722 }4723 else {4724 // existing data: this is a mixin or extends.4725 shared.extend(instance.data, data);4726 }4727}4728function createWatcher(raw, ctx, publicThis, key) {4729 const getter = () => publicThis[key];4730 if (shared.isString(raw)) {4731 const handler = ctx[raw];4732 if (shared.isFunction(handler)) {4733 watch(getter, handler);4734 }4735 else {4736 warn(`Invalid watch handler specified by key "${raw}"`, handler);4737 }4738 }4739 else if (shared.isFunction(raw)) {4740 watch(getter, raw.bind(publicThis));4741 }4742 else if (shared.isObject(raw)) {4743 if (shared.isArray(raw)) {4744 raw.forEach(r => createWatcher(r, ctx, publicThis, key));4745 }4746 else {4747 watch(getter, raw.handler.bind(publicThis), raw);4748 }4749 }4750 else {4751 warn(`Invalid watch option: "${key}"`);4752 }4753}4754function resolveMergedOptions(instance) {4755 const raw = instance.type;4756 const { __merged, mixins, extends: extendsOptions } = raw;4757 if (__merged)4758 return __merged;4759 const globalMixins = instance.appContext.mixins;4760 if (!globalMixins.length && !mixins && !extendsOptions)4761 return raw;4762 const options = {};4763 globalMixins.forEach(m => mergeOptions(options, m, instance));4764 extendsOptions && mergeOptions(options, extendsOptions, instance);4765 mixins && mixins.forEach(m => mergeOptions(options, m, instance));4766 mergeOptions(options, raw, instance);4767 return (raw.__merged = options);4768}4769function mergeOptions(to, from, instance) {4770 const strats = instance.appContext.config.optionMergeStrategies;4771 for (const key in from) {4772 const strat = strats && strats[key];4773 if (strat) {4774 to[key] = strat(to[key], from[key], instance.proxy, key);4775 }4776 else if (!shared.hasOwn(to, key)) {4777 to[key] = from[key];4778 }4779 }4780}4781const publicPropertiesMap = {4782 $: i => i,4783 $el: i => i.vnode.el,4784 $data: i => i.data,4785 $props: i => ( reactivity.shallowReadonly(i.props) ),4786 $attrs: i => ( reactivity.shallowReadonly(i.attrs) ),4787 $slots: i => ( reactivity.shallowReadonly(i.slots) ),4788 $refs: i => ( reactivity.shallowReadonly(i.refs) ),4789 $parent: i => i.parent && i.parent.proxy,4790 $root: i => i.root && i.root.proxy,4791 $emit: i => i.emit,4792 $options: i => ( resolveMergedOptions(i) ),4793 $forceUpdate: i => () => queueJob(i.update),4794 $nextTick: () => nextTick,4795 $watch: i => instanceWatch.bind(i) 4796};4797const PublicInstanceProxyHandlers = {4798 get({ _: instance }, key) {4799 const { ctx, setupState, data, props, accessCache, type, appContext } = instance;4800 // data / props / ctx4801 // This getter gets called for every property access on the render context4802 // during render and is a major hotspot. The most expensive part of this4803 // is the multiple hasOwn() calls. It's much faster to do a simple property4804 // access on a plain object, so we use an accessCache object (with null4805 // prototype) to memoize what access type a key corresponds to.4806 if (key[0] !== '$') {4807 const n = accessCache[key];4808 if (n !== undefined) {4809 switch (n) {4810 case 0 /* SETUP */:4811 return setupState[key];4812 case 1 /* DATA */:4813 return data[key];4814 case 3 /* CONTEXT */:4815 return ctx[key];4816 case 2 /* PROPS */:4817 return props[key];4818 // default: just fallthrough4819 }4820 }4821 else if (setupState !== shared.EMPTY_OBJ && shared.hasOwn(setupState, key)) {4822 accessCache[key] = 0 /* SETUP */;4823 return setupState[key];4824 }4825 else if (data !== shared.EMPTY_OBJ && shared.hasOwn(data, key)) {4826 accessCache[key] = 1 /* DATA */;4827 return data[key];4828 }4829 else if (4830 // only cache other properties when instance has declared (thus stable)4831 // props4832 type.props &&4833 shared.hasOwn(normalizePropsOptions(type.props)[0], key)) {4834 accessCache[key] = 2 /* PROPS */;4835 return props[key];4836 }4837 else if (ctx !== shared.EMPTY_OBJ && shared.hasOwn(ctx, key)) {4838 accessCache[key] = 3 /* CONTEXT */;4839 return ctx[key];4840 }4841 else {4842 accessCache[key] = 4 /* OTHER */;4843 }4844 }4845 const publicGetter = publicPropertiesMap[key];4846 let cssModule, globalProperties;4847 // public $xxx properties4848 if (publicGetter) {4849 if ( key === '$attrs') {4850 markAttrsAccessed();4851 }4852 return publicGetter(instance);4853 }4854 else if (4855 // css module (injected by vue-loader)4856 (cssModule = type.__cssModules) &&4857 (cssModule = cssModule[key])) {4858 return cssModule;4859 }4860 else if (ctx !== shared.EMPTY_OBJ && shared.hasOwn(ctx, key)) {4861 // user may set custom properties to `this` that start with `$`4862 accessCache[key] = 3 /* CONTEXT */;4863 return ctx[key];4864 }4865 else if (4866 // global properties4867 ((globalProperties = appContext.config.globalProperties),4868 shared.hasOwn(globalProperties, key))) {4869 return globalProperties[key];4870 }4871 else if ( currentRenderingInstance) {4872 warn(`Property ${JSON.stringify(key)} was accessed during render ` +4873 `but is not defined on instance.`);4874 }4875 },4876 set({ _: instance }, key, value) {4877 const { data, setupState, ctx } = instance;4878 if (setupState !== shared.EMPTY_OBJ && shared.hasOwn(setupState, key)) {4879 setupState[key] = value;4880 }4881 else if (data !== shared.EMPTY_OBJ && shared.hasOwn(data, key)) {4882 data[key] = value;4883 }4884 else if (key in instance.props) {4885 4886 warn(`Attempting to mutate prop "${key}". Props are readonly.`, instance);4887 return false;4888 }4889 if (key[0] === '$' && key.slice(1) in instance) {4890 4891 warn(`Attempting to mutate public property "${key}". ` +4892 `Properties starting with $ are reserved and readonly.`, instance);4893 return false;4894 }4895 else {4896 if ( key in instance.appContext.config.globalProperties) {4897 Object.defineProperty(ctx, key, {4898 enumerable: true,4899 configurable: true,4900 value4901 });4902 }4903 else {4904 ctx[key] = value;4905 }4906 }4907 return true;4908 },4909 has({ _: { data, setupState, accessCache, ctx, type, appContext } }, key) {4910 return (accessCache[key] !== undefined ||4911 (data !== shared.EMPTY_OBJ && shared.hasOwn(data, key)) ||4912 (setupState !== shared.EMPTY_OBJ && shared.hasOwn(setupState, key)) ||4913 (type.props && shared.hasOwn(normalizePropsOptions(type.props)[0], key)) ||4914 shared.hasOwn(ctx, key) ||4915 shared.hasOwn(publicPropertiesMap, key) ||4916 shared.hasOwn(appContext.config.globalProperties, key));4917 }4918};4919{4920 PublicInstanceProxyHandlers.ownKeys = (target) => {4921 warn(`Avoid app logic that relies on enumerating keys on a component instance. ` +4922 `The keys will be empty in production mode to avoid performance overhead.`);4923 return Reflect.ownKeys(target);4924 };4925}4926const RuntimeCompiledPublicInstanceProxyHandlers = {4927 ...PublicInstanceProxyHandlers,4928 get(target, key) {4929 // fast path for unscopables when using `with` block4930 if (key === Symbol.unscopables) {4931 return;4932 }4933 return PublicInstanceProxyHandlers.get(target, key, target);4934 },4935 has(_, key) {4936 return key[0] !== '_' && !shared.isGloballyWhitelisted(key);4937 }4938};4939// In dev mode, the proxy target exposes the same properties as seen on `this`4940// for easier console inspection. In prod mode it will be an empty object so4941// these properties definitions can be skipped.4942function createRenderContext(instance) {4943 const target = {};4944 // expose internal instance for proxy handlers4945 Object.defineProperty(target, `_`, {4946 configurable: true,4947 enumerable: false,4948 get: () => instance4949 });4950 // expose public properties4951 Object.keys(publicPropertiesMap).forEach(key => {4952 Object.defineProperty(target, key, {4953 configurable: true,4954 enumerable: false,4955 get: () => publicPropertiesMap[key](instance),4956 // intercepted by the proxy so no need for implementation,4957 // but needed to prevent set errors4958 set: shared.NOOP4959 });4960 });4961 // expose global properties4962 const { globalProperties } = instance.appContext.config;4963 Object.keys(globalProperties).forEach(key => {4964 Object.defineProperty(target, key, {4965 configurable: true,4966 enumerable: false,4967 get: () => globalProperties[key],4968 set: shared.NOOP4969 });4970 });4971 return target;4972}4973// dev only4974function exposePropsOnRenderContext(instance) {4975 const { ctx, type: { props: propsOptions } } = instance;4976 if (propsOptions) {4977 Object.keys(normalizePropsOptions(propsOptions)[0]).forEach(key => {4978 Object.defineProperty(ctx, key, {4979 enumerable: true,4980 configurable: true,4981 get: () => instance.props[key],4982 set: shared.NOOP4983 });4984 });4985 }4986}4987// dev only4988function exposeSetupStateOnRenderContext(instance) {4989 const { ctx, setupState } = instance;4990 Object.keys(reactivity.toRaw(setupState)).forEach(key => {4991 Object.defineProperty(ctx, key, {4992 enumerable: true,4993 configurable: true,4994 get: () => setupState[key],4995 set: shared.NOOP4996 });4997 });4998}4999const emptyAppContext = createAppContext();5000let uid = 0;5001function createComponentInstance(vnode, parent, suspense) {5002 // inherit parent app context - or - if root, adopt from root vnode5003 const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext;5004 const instance = {5005 uid: uid++,5006 vnode,5007 parent,5008 appContext,5009 type: vnode.type,5010 root: null,5011 next: null,5012 subTree: null,5013 update: null,5014 render: null,5015 proxy: null,5016 withProxy: null,5017 effects: null,5018 provides: parent ? parent.provides : Object.create(appContext.provides),5019 accessCache: null,5020 renderCache: [],5021 // state5022 ctx: shared.EMPTY_OBJ,5023 data: shared.EMPTY_OBJ,5024 props: shared.EMPTY_OBJ,5025 attrs: shared.EMPTY_OBJ,5026 slots: shared.EMPTY_OBJ,5027 refs: shared.EMPTY_OBJ,5028 setupState: shared.EMPTY_OBJ,5029 setupContext: null,5030 // per-instance asset storage (mutable during options resolution)5031 components: Object.create(appContext.components),5032 directives: Object.create(appContext.directives),5033 // suspense related5034 suspense,5035 asyncDep: null,5036 asyncResolved: false,5037 // lifecycle hooks5038 // not using enums here because it results in computed properties5039 isMounted: false,5040 isUnmounted: false,5041 isDeactivated: false,5042 bc: null,5043 c: null,5044 bm: null,5045 m: null,5046 bu: null,5047 u: null,5048 um: null,5049 bum: null,5050 da: null,5051 a: null,5052 rtg: null,5053 rtc: null,5054 ec: null,5055 emit: null // to be set immediately5056 };5057 {5058 instance.ctx = createRenderContext(instance);5059 }5060 instance.root = parent ? parent.root : instance;5061 instance.emit = emit.bind(null, instance);5062 return instance;5063}5064let currentInstance = null;5065const getCurrentInstance = () => currentInstance || currentRenderingInstance;5066const setCurrentInstance = (instance) => {5067 currentInstance = instance;5068};5069const isBuiltInTag = /*#__PURE__*/ shared.makeMap('slot,component');5070function validateComponentName(name, config) {5071 const appIsNativeTag = config.isNativeTag || shared.NO;5072 if (isBuiltInTag(name) || appIsNativeTag(name)) {5073 warn('Do not use built-in or reserved HTML elements as component id: ' + name);5074 }5075}5076let isInSSRComponentSetup = false;5077function setupComponent(instance, isSSR = false) {5078 isInSSRComponentSetup = isSSR;5079 const { props, children, shapeFlag } = instance.vnode;5080 const isStateful = shapeFlag & 4 /* STATEFUL_COMPONENT */;5081 initProps(instance, props, isStateful, isSSR);5082 initSlots(instance, children);5083 const setupResult = isStateful5084 ? setupStatefulComponent(instance, isSSR)5085 : undefined;5086 isInSSRComponentSetup = false;5087 return setupResult;5088}5089function setupStatefulComponent(instance, isSSR) {5090 const Component = instance.type;5091 {5092 if (Component.name) {5093 validateComponentName(Component.name, instance.appContext.config);5094 }5095 if (Component.components) {5096 const names = Object.keys(Component.components);5097 for (let i = 0; i < names.length; i++) {5098 validateComponentName(names[i], instance.appContext.config);5099 }5100 }5101 if (Component.directives) {5102 const names = Object.keys(Component.directives);5103 for (let i = 0; i < names.length; i++) {5104 validateDirectiveName(names[i]);5105 }5106 }5107 }5108 // 0. create render proxy property access cache5109 instance.accessCache = {};5110 // 1. create public instance / render proxy5111 instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers);5112 {5113 exposePropsOnRenderContext(instance);5114 }5115 // 2. call setup()5116 const { setup } = Component;5117 if (setup) {5118 const setupContext = (instance.setupContext =5119 setup.length > 1 ? createSetupContext(instance) : null);5120 currentInstance = instance;5121 reactivity.pauseTracking();5122 const setupResult = callWithErrorHandling(setup, instance, 0 /* SETUP_FUNCTION */, [ reactivity.shallowReadonly(instance.props) , setupContext]);5123 reactivity.resetTracking();5124 currentInstance = null;5125 if (shared.isPromise(setupResult)) {5126 if (isSSR) {5127 // return the promise so server-renderer can wait on it5128 return setupResult.then((resolvedResult) => {5129 handleSetupResult(instance, resolvedResult, isSSR);5130 });5131 }5132 else {5133 // async setup returned Promise.5134 // bail here and wait for re-entry.5135 instance.asyncDep = setupResult;5136 }5137 }5138 else {5139 handleSetupResult(instance, setupResult, isSSR);5140 }5141 }5142 else {5143 finishComponentSetup(instance, isSSR);5144 }5145}5146function handleSetupResult(instance, setupResult, isSSR) {5147 if (shared.isFunction(setupResult)) {5148 // setup returned an inline render function5149 instance.render = setupResult;5150 }5151 else if (shared.isObject(setupResult)) {5152 if ( isVNode(setupResult)) {5153 warn(`setup() should not return VNodes directly - ` +5154 `return a render function instead.`);5155 }5156 // setup returned bindings.5157 // assuming a render function compiled from template is present.5158 instance.setupState = reactivity.reactive(setupResult);5159 {5160 exposeSetupStateOnRenderContext(instance);5161 }5162 }5163 else if ( setupResult !== undefined) {5164 warn(`setup() should return an object. Received: ${setupResult === null ? 'null' : typeof setupResult}`);5165 }5166 finishComponentSetup(instance, isSSR);5167}5168let compile;5169/**5170 * For runtime-dom to register the compiler.5171 * Note the exported method uses any to avoid d.ts relying on the compiler types.5172 * @internal5173 */5174function registerRuntimeCompiler(_compile) {5175 compile = _compile;5176}5177function finishComponentSetup(instance, isSSR) {5178 const Component = instance.type;5179 // template / render function normalization5180 if ( isSSR) {5181 if (Component.render) {5182 instance.render = Component.render;5183 }5184 }5185 else if (!instance.render) {5186 if (compile && Component.template && !Component.render) {5187 {5188 startMeasure(instance, `compile`);5189 }5190 Component.render = compile(Component.template, {5191 isCustomElement: instance.appContext.config.isCustomElement || shared.NO5192 });5193 {5194 endMeasure(instance, `compile`);5195 }5196 Component.render._rc = true;5197 }5198 if ( !Component.render) {5199 /* istanbul ignore if */5200 if (!compile && Component.template) {5201 warn(`Component provided template option but ` +5202 `runtime compilation is not supported in this build of Vue.` +5203 ( ``) /* should not happen */);5204 }5205 else {5206 warn(`Component is missing template or render function.`);5207 }5208 }5209 instance.render = (Component.render || shared.NOOP);5210 // for runtime-compiled render functions using `with` blocks, the render5211 // proxy used needs a different `has` handler which is more performant and5212 // also only allows a whitelist of globals to fallthrough.5213 if (instance.render._rc) {5214 instance.withProxy = new Proxy(instance.ctx, RuntimeCompiledPublicInstanceProxyHandlers);5215 }5216 }5217 // support for 2.x options5218 {5219 currentInstance = instance;5220 applyOptions(instance, Component);5221 currentInstance = null;5222 }5223}5224const attrHandlers = {5225 get: (target, key) => {5226 {5227 markAttrsAccessed();5228 }5229 return target[key];5230 },5231 set: () => {5232 warn(`setupContext.attrs is readonly.`);5233 return false;5234 },5235 deleteProperty: () => {5236 warn(`setupContext.attrs is readonly.`);5237 return false;5238 }5239};5240function createSetupContext(instance) {5241 { ...

main.js

Source:main.js

...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(() => {4540 instance.isUnmounted = true;4541 }, parentSuspense);4542 if (parentSuspense && parentSuspense.pendingBranch && !parentSuspense.isUnmounted && instance.asyncDep && !instance.asyncResolved && instance.suspenseId === parentSuspense.pendingId) {4543 parentSuspense.deps--;4544 if (parentSuspense.deps === 0) {4545 parentSuspense.resolve();4546 }4547 }4548 if (true) {4549 devtoolsComponentRemoved(instance);4550 }4551 };4552 const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, optimized = false, start = 0) => {4553 for (let i = start; i < children.length; i++) {4554 unmount(children[i], parentComponent, parentSuspense, doRemove, optimized);4555 }4556 };4557 const getNextHostNode = (vnode) => {4558 if (vnode.shapeFlag & 6) {4559 return getNextHostNode(vnode.component.subTree);4560 }4561 if (vnode.shapeFlag & 128) {4562 return vnode.suspense.next();4563 }4564 return hostNextSibling(vnode.anchor || vnode.el);4565 };4566 const render3 = (vnode, container, isSVG) => {4567 if (vnode == null) {4568 if (container._vnode) {4569 unmount(container._vnode, null, null, true);4570 }4571 } else {4572 patch(container._vnode || null, vnode, container, null, null, null, isSVG);4573 }4574 flushPostFlushCbs();4575 container._vnode = vnode;4576 };4577 const internals = {4578 p: patch,4579 um: unmount,4580 m: move,4581 r: remove2,4582 mt: mountComponent,4583 mc: mountChildren,4584 pc: patchChildren,4585 pbc: patchBlockChildren,4586 n: getNextHostNode,4587 o: options4588 };4589 let hydrate;4590 let hydrateNode;4591 if (createHydrationFns) {4592 [hydrate, hydrateNode] = createHydrationFns(internals);4593 }4594 return {4595 render: render3,4596 hydrate,4597 createApp: createAppAPI(render3, hydrate)4598 };4599}4600function toggleRecurse({ effect: effect2, update }, allowed) {4601 effect2.allowRecurse = update.allowRecurse = allowed;4602}4603function traverseStaticChildren(n1, n2, shallow = false) {4604 const ch1 = n1.children;4605 const ch2 = n2.children;4606 if (isArray(ch1) && isArray(ch2)) {4607 for (let i = 0; i < ch1.length; i++) {4608 const c1 = ch1[i];4609 let c2 = ch2[i];4610 if (c2.shapeFlag & 1 && !c2.dynamicChildren) {4611 if (c2.patchFlag <= 0 || c2.patchFlag === 32) {4612 c2 = ch2[i] = cloneIfMounted(ch2[i]);4613 c2.el = c1.el;4614 }4615 if (!shallow)4616 traverseStaticChildren(c1, c2);4617 }4618 if (c2.type === Comment && !c2.el) {4619 c2.el = c1.el;4620 }4621 }4622 }4623}4624function getSequence(arr) {4625 const p2 = arr.slice();4626 const result = [0];4627 let i, j, u, v, c;4628 const len = arr.length;4629 for (i = 0; i < len; i++) {4630 const arrI = arr[i];4631 if (arrI !== 0) {4632 j = result[result.length - 1];4633 if (arr[j] < arrI) {4634 p2[i] = j;4635 result.push(i);4636 continue;4637 }4638 u = 0;4639 v = result.length - 1;4640 while (u < v) {4641 c = u + v >> 1;4642 if (arr[result[c]] < arrI) {4643 u = c + 1;4644 } else {4645 v = c;4646 }4647 }4648 if (arrI < arr[result[u]]) {4649 if (u > 0) {4650 p2[i] = result[u - 1];4651 }4652 result[u] = i;4653 }4654 }4655 }4656 u = result.length;4657 v = result[u - 1];4658 while (u-- > 0) {4659 result[u] = v;4660 v = p2[v];4661 }4662 return result;4663}4664var isTeleport = (type) => type.__isTeleport;4665var NULL_DYNAMIC_COMPONENT = Symbol();4666var Fragment = Symbol(true ? "Fragment" : void 0);4667var Text = Symbol(true ? "Text" : void 0);4668var Comment = Symbol(true ? "Comment" : void 0);4669var Static = Symbol(true ? "Static" : void 0);4670var blockStack = [];4671var currentBlock = null;4672function openBlock(disableTracking = false) {4673 blockStack.push(currentBlock = disableTracking ? null : []);4674}4675function closeBlock() {4676 blockStack.pop();4677 currentBlock = blockStack[blockStack.length - 1] || null;4678}4679var isBlockTreeEnabled = 1;4680function setBlockTracking(value) {4681 isBlockTreeEnabled += value;4682}4683function setupBlock(vnode) {4684 vnode.dynamicChildren = isBlockTreeEnabled > 0 ? currentBlock || EMPTY_ARR : null;4685 closeBlock();4686 if (isBlockTreeEnabled > 0 && currentBlock) {4687 currentBlock.push(vnode);4688 }4689 return vnode;4690}4691function createElementBlock(type, props, children, patchFlag, dynamicProps, shapeFlag) {4692 return setupBlock(createBaseVNode(type, props, children, patchFlag, dynamicProps, shapeFlag, true));4693}4694function createBlock(type, props, children, patchFlag, dynamicProps) {4695 return setupBlock(createVNode(type, props, children, patchFlag, dynamicProps, true));4696}4697function isVNode(value) {4698 return value ? value.__v_isVNode === true : false;4699}4700function isSameVNodeType(n1, n2) {4701 if (n2.shapeFlag & 6 && hmrDirtyComponents.has(n2.type)) {4702 return false;4703 }4704 return n1.type === n2.type && n1.key === n2.key;4705}4706var vnodeArgsTransformer;4707var createVNodeWithArgsTransform = (...args) => {4708 return _createVNode(...vnodeArgsTransformer ? vnodeArgsTransformer(args, currentRenderingInstance) : args);4709};4710var InternalObjectKey = `__vInternal`;4711var normalizeKey = ({ key }) => key != null ? key : null;4712var normalizeRef = ({ ref: ref2, ref_key, ref_for }) => {4713 return ref2 != null ? isString(ref2) || isRef(ref2) || isFunction(ref2) ? { i: currentRenderingInstance, r: ref2, k: ref_key, f: !!ref_for } : ref2 : null;4714};4715function createBaseVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, shapeFlag = type === Fragment ? 0 : 1, isBlockNode = false, needFullChildrenNormalization = false) {4716 const vnode = {4717 __v_isVNode: true,4718 __v_skip: true,4719 type,4720 props,4721 key: props && normalizeKey(props),4722 ref: props && normalizeRef(props),4723 scopeId: currentScopeId,4724 slotScopeIds: null,4725 children,4726 component: null,4727 suspense: null,4728 ssContent: null,4729 ssFallback: null,4730 dirs: null,4731 transition: null,4732 el: null,4733 anchor: null,4734 target: null,4735 targetAnchor: null,4736 staticCount: 0,4737 shapeFlag,4738 patchFlag,4739 dynamicProps,4740 dynamicChildren: null,4741 appContext: null4742 };4743 if (needFullChildrenNormalization) {4744 normalizeChildren(vnode, children);4745 if (shapeFlag & 128) {4746 type.normalize(vnode);4747 }4748 } else if (children) {4749 vnode.shapeFlag |= isString(children) ? 8 : 16;4750 }4751 if (vnode.key !== vnode.key) {4752 warn2(`VNode created with invalid key (NaN). VNode type:`, vnode.type);4753 }4754 if (isBlockTreeEnabled > 0 && !isBlockNode && currentBlock && (vnode.patchFlag > 0 || shapeFlag & 6) && vnode.patchFlag !== 32) {4755 currentBlock.push(vnode);4756 }4757 return vnode;4758}4759var createVNode = true ? createVNodeWithArgsTransform : _createVNode;4760function _createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) {4761 if (!type || type === NULL_DYNAMIC_COMPONENT) {4762 if (!type) {4763 warn2(`Invalid vnode type when creating vnode: ${type}.`);4764 }4765 type = Comment;4766 }4767 if (isVNode(type)) {4768 const cloned = cloneVNode(type, props, true);4769 if (children) {4770 normalizeChildren(cloned, children);4771 }4772 return cloned;4773 }4774 if (isClassComponent(type)) {4775 type = type.__vccOpts;4776 }4777 if (props) {4778 props = guardReactiveProps(props);4779 let { class: klass, style } = props;4780 if (klass && !isString(klass)) {4781 props.class = normalizeClass(klass);4782 }4783 if (isObject(style)) {4784 if (isProxy(style) && !isArray(style)) {4785 style = extend({}, style);4786 }4787 props.style = normalizeStyle(style);4788 }4789 }4790 const shapeFlag = isString(type) ? 1 : isSuspense(type) ? 128 : isTeleport(type) ? 64 : isObject(type) ? 4 : isFunction(type) ? 2 : 0;4791 if (shapeFlag & 4 && isProxy(type)) {4792 type = toRaw(type);4793 warn2(`Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with \`markRaw\` or using \`shallowRef\` instead of \`ref\`.`, `4794Component that was made reactive: `, type);4795 }4796 return createBaseVNode(type, props, children, patchFlag, dynamicProps, shapeFlag, isBlockNode, true);4797}4798function guardReactiveProps(props) {4799 if (!props)4800 return null;4801 return isProxy(props) || InternalObjectKey in props ? extend({}, props) : props;4802}4803function cloneVNode(vnode, extraProps, mergeRef = false) {4804 const { props, ref: ref2, patchFlag, children } = vnode;4805 const mergedProps = extraProps ? mergeProps(props || {}, extraProps) : props;4806 const cloned = {4807 __v_isVNode: true,4808 __v_skip: true,4809 type: vnode.type,4810 props: mergedProps,4811 key: mergedProps && normalizeKey(mergedProps),4812 ref: extraProps && extraProps.ref ? mergeRef && ref2 ? isArray(ref2) ? ref2.concat(normalizeRef(extraProps)) : [ref2, normalizeRef(extraProps)] : normalizeRef(extraProps) : ref2,4813 scopeId: vnode.scopeId,4814 slotScopeIds: vnode.slotScopeIds,4815 children: patchFlag === -1 && isArray(children) ? children.map(deepCloneVNode) : children,4816 target: vnode.target,4817 targetAnchor: vnode.targetAnchor,4818 staticCount: vnode.staticCount,4819 shapeFlag: vnode.shapeFlag,4820 patchFlag: extraProps && vnode.type !== Fragment ? patchFlag === -1 ? 16 : patchFlag | 16 : patchFlag,4821 dynamicProps: vnode.dynamicProps,4822 dynamicChildren: vnode.dynamicChildren,4823 appContext: vnode.appContext,4824 dirs: vnode.dirs,4825 transition: vnode.transition,4826 component: vnode.component,4827 suspense: vnode.suspense,4828 ssContent: vnode.ssContent && cloneVNode(vnode.ssContent),4829 ssFallback: vnode.ssFallback && cloneVNode(vnode.ssFallback),4830 el: vnode.el,4831 anchor: vnode.anchor4832 };4833 return cloned;4834}4835function deepCloneVNode(vnode) {4836 const cloned = cloneVNode(vnode);4837 if (isArray(vnode.children)) {4838 cloned.children = vnode.children.map(deepCloneVNode);4839 }4840 return cloned;4841}4842function createTextVNode(text = " ", flag = 0) {4843 return createVNode(Text, null, text, flag);4844}4845function normalizeVNode(child) {4846 if (child == null || typeof child === "boolean") {4847 return createVNode(Comment);4848 } else if (isArray(child)) {4849 return createVNode(Fragment, null, child.slice());4850 } else if (typeof child === "object") {4851 return cloneIfMounted(child);4852 } else {4853 return createVNode(Text, null, String(child));4854 }4855}4856function cloneIfMounted(child) {4857 return child.el === null || child.memo ? child : cloneVNode(child);4858}4859function normalizeChildren(vnode, children) {4860 let type = 0;4861 const { shapeFlag } = vnode;4862 if (children == null) {4863 children = null;4864 } else if (isArray(children)) {4865 type = 16;4866 } else if (typeof children === "object") {4867 if (shapeFlag & (1 | 64)) {4868 const slot = children.default;4869 if (slot) {4870 slot._c && (slot._d = false);4871 normalizeChildren(vnode, slot());4872 slot._c && (slot._d = true);4873 }4874 return;4875 } else {4876 type = 32;4877 const slotFlag = children._;4878 if (!slotFlag && !(InternalObjectKey in children)) {4879 children._ctx = currentRenderingInstance;4880 } else if (slotFlag === 3 && currentRenderingInstance) {4881 if (currentRenderingInstance.slots._ === 1) {4882 children._ = 1;4883 } else {4884 children._ = 2;4885 vnode.patchFlag |= 1024;4886 }4887 }4888 }4889 } else if (isFunction(children)) {4890 children = { default: children, _ctx: currentRenderingInstance };4891 type = 32;4892 } else {4893 children = String(children);4894 if (shapeFlag & 64) {4895 type = 16;4896 children = [createTextVNode(children)];4897 } else {4898 type = 8;4899 }4900 }4901 vnode.children = children;4902 vnode.shapeFlag |= type;4903}4904function mergeProps(...args) {4905 const ret = {};4906 for (let i = 0; i < args.length; i++) {4907 const toMerge = args[i];4908 for (const key in toMerge) {4909 if (key === "class") {4910 if (ret.class !== toMerge.class) {4911 ret.class = normalizeClass([ret.class, toMerge.class]);4912 }4913 } else if (key === "style") {4914 ret.style = normalizeStyle([ret.style, toMerge.style]);4915 } else if (isOn(key)) {4916 const existing = ret[key];4917 const incoming = toMerge[key];4918 if (incoming && existing !== incoming && !(isArray(existing) && existing.includes(incoming))) {4919 ret[key] = existing ? [].concat(existing, incoming) : incoming;4920 }4921 } else if (key !== "") {4922 ret[key] = toMerge[key];4923 }4924 }4925 }4926 return ret;4927}4928function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {4929 callWithAsyncErrorHandling(hook, instance, 7, [4930 vnode,4931 prevVNode4932 ]);4933}4934function renderList(source, renderItem, cache, index) {4935 let ret;4936 const cached = cache && cache[index];4937 if (isArray(source) || isString(source)) {4938 ret = new Array(source.length);4939 for (let i = 0, l = source.length; i < l; i++) {4940 ret[i] = renderItem(source[i], i, void 0, cached && cached[i]);4941 }4942 } else if (typeof source === "number") {4943 if (!Number.isInteger(source)) {4944 warn2(`The v-for range expect an integer value but got ${source}.`);4945 return [];4946 }4947 ret = new Array(source);4948 for (let i = 0; i < source; i++) {4949 ret[i] = renderItem(i + 1, i, void 0, cached && cached[i]);4950 }4951 } else if (isObject(source)) {4952 if (source[Symbol.iterator]) {4953 ret = Array.from(source, (item, i) => renderItem(item, i, void 0, cached && cached[i]));4954 } else {4955 const keys = Object.keys(source);4956 ret = new Array(keys.length);4957 for (let i = 0, l = keys.length; i < l; i++) {4958 const key = keys[i];4959 ret[i] = renderItem(source[key], key, i, cached && cached[i]);4960 }4961 }4962 } else {4963 ret = [];4964 }4965 if (cache) {4966 cache[index] = ret;4967 }4968 return ret;4969}4970var getPublicInstance = (i) => {4971 if (!i)4972 return null;4973 if (isStatefulComponent(i))4974 return getExposeProxy(i) || i.proxy;4975 return getPublicInstance(i.parent);4976};4977var publicPropertiesMap = extend(Object.create(null), {4978 $: (i) => i,4979 $el: (i) => i.vnode.el,4980 $data: (i) => i.data,4981 $props: (i) => true ? shallowReadonly(i.props) : i.props,4982 $attrs: (i) => true ? shallowReadonly(i.attrs) : i.attrs,4983 $slots: (i) => true ? shallowReadonly(i.slots) : i.slots,4984 $refs: (i) => true ? shallowReadonly(i.refs) : i.refs,4985 $parent: (i) => getPublicInstance(i.parent),4986 $root: (i) => getPublicInstance(i.root),4987 $emit: (i) => i.emit,4988 $options: (i) => true ? resolveMergedOptions(i) : i.type,4989 $forceUpdate: (i) => () => queueJob(i.update),4990 $nextTick: (i) => nextTick.bind(i.proxy),4991 $watch: (i) => true ? instanceWatch.bind(i) : NOOP4992});4993var PublicInstanceProxyHandlers = {4994 get({ _: instance }, key) {4995 const { ctx, setupState, data, props, accessCache, type, appContext } = instance;4996 if (key === "__isVue") {4997 return true;4998 }4999 if (setupState !== EMPTY_OBJ && setupState.__isScriptSetup && hasOwn(setupState, key)) {5000 return setupState[key];5001 }5002 let normalizedProps;5003 if (key[0] !== "$") {5004 const n = accessCache[key];5005 if (n !== void 0) {5006 switch (n) {5007 case 1:5008 return setupState[key];5009 case 2:5010 return data[key];5011 case 4:5012 return ctx[key];5013 case 3:5014 return props[key];5015 }5016 } else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {5017 accessCache[key] = 1;5018 return setupState[key];5019 } else if (data !== EMPTY_OBJ && hasOwn(data, key)) {5020 accessCache[key] = 2;5021 return data[key];5022 } else if ((normalizedProps = instance.propsOptions[0]) && hasOwn(normalizedProps, key)) {5023 accessCache[key] = 3;5024 return props[key];5025 } else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {5026 accessCache[key] = 4;5027 return ctx[key];5028 } else if (shouldCacheAccess) {5029 accessCache[key] = 0;5030 }5031 }5032 const publicGetter = publicPropertiesMap[key];5033 let cssModule, globalProperties;5034 if (publicGetter) {5035 if (key === "$attrs") {5036 track(instance, "get", key);5037 markAttrsAccessed();5038 }5039 return publicGetter(instance);5040 } else if ((cssModule = type.__cssModules) && (cssModule = cssModule[key])) {5041 return cssModule;5042 } else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {5043 accessCache[key] = 4;5044 return ctx[key];5045 } else if (globalProperties = appContext.config.globalProperties, hasOwn(globalProperties, key)) {5046 {5047 return globalProperties[key];5048 }5049 } else if (currentRenderingInstance && (!isString(key) || key.indexOf("__v") !== 0)) {5050 if (data !== EMPTY_OBJ && (key[0] === "$" || key[0] === "_") && hasOwn(data, key)) {5051 warn2(`Property ${JSON.stringify(key)} must be accessed via $data because it starts with a reserved character ("$" or "_") and is not proxied on the render context.`);5052 } else if (instance === currentRenderingInstance) {5053 warn2(`Property ${JSON.stringify(key)} was accessed during render but is not defined on instance.`);5054 }5055 }5056 },5057 set({ _: instance }, key, value) {5058 const { data, setupState, ctx } = instance;5059 if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {5060 setupState[key] = value;5061 return true;5062 } else if (data !== EMPTY_OBJ && hasOwn(data, key)) {5063 data[key] = value;5064 return true;5065 } else if (hasOwn(instance.props, key)) {5066 warn2(`Attempting to mutate prop "${key}". Props are readonly.`, instance);5067 return false;5068 }5069 if (key[0] === "$" && key.slice(1) in instance) {5070 warn2(`Attempting to mutate public property "${key}". Properties starting with $ are reserved and readonly.`, instance);5071 return false;5072 } else {5073 if (key in instance.appContext.config.globalProperties) {5074 Object.defineProperty(ctx, key, {5075 enumerable: true,5076 configurable: true,5077 value5078 });5079 } else {5080 ctx[key] = value;5081 }5082 }5083 return true;5084 },5085 has({ _: { data, setupState, accessCache, ctx, appContext, propsOptions } }, key) {5086 let normalizedProps;5087 return !!accessCache[key] || data !== EMPTY_OBJ && hasOwn(data, key) || setupState !== EMPTY_OBJ && hasOwn(setupState, key) || (normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key) || hasOwn(ctx, key) || hasOwn(publicPropertiesMap, key) || hasOwn(appContext.config.globalProperties, key);5088 },5089 defineProperty(target, key, descriptor) {5090 if (descriptor.get != null) {5091 this.set(target, key, descriptor.get(), null);5092 } else if (descriptor.value != null) {5093 this.set(target, key, descriptor.value, null);5094 }5095 return Reflect.defineProperty(target, key, descriptor);5096 }5097};5098if (true) {5099 PublicInstanceProxyHandlers.ownKeys = (target) => {5100 warn2(`Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.`);5101 return Reflect.ownKeys(target);5102 };5103}5104function createDevRenderContext(instance) {5105 const target = {};5106 Object.defineProperty(target, `_`, {5107 configurable: true,5108 enumerable: false,5109 get: () => instance5110 });5111 Object.keys(publicPropertiesMap).forEach((key) => {5112 Object.defineProperty(target, key, {5113 configurable: true,5114 enumerable: false,5115 get: () => publicPropertiesMap[key](instance),5116 set: NOOP5117 });5118 });5119 return target;5120}5121function exposePropsOnRenderContext(instance) {5122 const { ctx, propsOptions: [propsOptions] } = instance;5123 if (propsOptions) {5124 Object.keys(propsOptions).forEach((key) => {5125 Object.defineProperty(ctx, key, {5126 enumerable: true,5127 configurable: true,5128 get: () => instance.props[key],5129 set: NOOP5130 });5131 });5132 }5133}5134function exposeSetupStateOnRenderContext(instance) {5135 const { ctx, setupState } = instance;5136 Object.keys(toRaw(setupState)).forEach((key) => {5137 if (!setupState.__isScriptSetup) {5138 if (key[0] === "$" || key[0] === "_") {5139 warn2(`setup() return property ${JSON.stringify(key)} should not start with "$" or "_" which are reserved prefixes for Vue internals.`);5140 return;5141 }5142 Object.defineProperty(ctx, key, {5143 enumerable: true,5144 configurable: true,5145 get: () => setupState[key],5146 set: NOOP5147 });5148 }5149 });5150}5151var emptyAppContext = createAppContext();5152var uid$1 = 0;5153function createComponentInstance(vnode, parent, suspense) {5154 const type = vnode.type;5155 const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext;5156 const instance = {5157 uid: uid$1++,5158 vnode,5159 type,5160 parent,5161 appContext,5162 root: null,5163 next: null,5164 subTree: null,5165 effect: null,5166 update: null,5167 scope: new EffectScope(true),5168 render: null,5169 proxy: null,5170 exposed: null,5171 exposeProxy: null,5172 withProxy: null,5173 provides: parent ? parent.provides : Object.create(appContext.provides),5174 accessCache: null,5175 renderCache: [],5176 components: null,5177 directives: null,5178 propsOptions: normalizePropsOptions(type, appContext),5179 emitsOptions: normalizeEmitsOptions(type, appContext),5180 emit: null,5181 emitted: null,5182 propsDefaults: EMPTY_OBJ,5183 inheritAttrs: type.inheritAttrs,5184 ctx: EMPTY_OBJ,5185 data: EMPTY_OBJ,5186 props: EMPTY_OBJ,5187 attrs: EMPTY_OBJ,5188 slots: EMPTY_OBJ,5189 refs: EMPTY_OBJ,5190 setupState: EMPTY_OBJ,5191 setupContext: null,5192 suspense,5193 suspenseId: suspense ? suspense.pendingId : 0,5194 asyncDep: null,5195 asyncResolved: false,5196 isMounted: false,5197 isUnmounted: false,5198 isDeactivated: false,5199 bc: null,5200 c: null,5201 bm: null,5202 m: null,5203 bu: null,5204 u: null,5205 um: null,5206 bum: null,5207 da: null,5208 a: null,5209 rtg: null,5210 rtc: null,5211 ec: null,5212 sp: null5213 };5214 if (true) {5215 instance.ctx = createDevRenderContext(instance);5216 } else {5217 instance.ctx = { _: instance };5218 }5219 instance.root = parent ? parent.root : instance;5220 instance.emit = emit$1.bind(null, instance);5221 if (vnode.ce) {5222 vnode.ce(instance);5223 }5224 return instance;5225}5226var currentInstance = null;5227var getCurrentInstance = () => currentInstance || currentRenderingInstance;5228var setCurrentInstance = (instance) => {5229 currentInstance = instance;5230 instance.scope.on();5231};5232var unsetCurrentInstance = () => {5233 currentInstance && currentInstance.scope.off();5234 currentInstance = null;5235};5236var isBuiltInTag = /* @__PURE__ */ makeMap("slot,component");5237function validateComponentName(name, config) {5238 const appIsNativeTag = config.isNativeTag || NO;5239 if (isBuiltInTag(name) || appIsNativeTag(name)) {5240 warn2("Do not use built-in or reserved HTML elements as component id: " + name);5241 }5242}5243function isStatefulComponent(instance) {5244 return instance.vnode.shapeFlag & 4;5245}5246var isInSSRComponentSetup = false;5247function setupComponent(instance, isSSR = false) {5248 isInSSRComponentSetup = isSSR;5249 const { props, children } = instance.vnode;5250 const isStateful = isStatefulComponent(instance);5251 initProps(instance, props, isStateful, isSSR);5252 initSlots(instance, children);5253 const setupResult = isStateful ? setupStatefulComponent(instance, isSSR) : void 0;5254 isInSSRComponentSetup = false;5255 return setupResult;5256}5257function setupStatefulComponent(instance, isSSR) {5258 const Component = instance.type;5259 if (true) {5260 if (Component.name) {5261 validateComponentName(Component.name, instance.appContext.config);5262 }5263 if (Component.components) {5264 const names = Object.keys(Component.components);5265 for (let i = 0; i < names.length; i++) {5266 validateComponentName(names[i], instance.appContext.config);5267 }5268 }5269 if (Component.directives) {5270 const names = Object.keys(Component.directives);5271 for (let i = 0; i < names.length; i++) {5272 validateDirectiveName(names[i]);5273 }5274 }5275 if (Component.compilerOptions && isRuntimeOnly()) {5276 warn2(`"compilerOptions" is only supported when using a build of Vue that includes the runtime compiler. Since you are using a runtime-only build, the options should be passed via your build tool config instead.`);5277 }5278 }5279 instance.accessCache = Object.create(null);5280 instance.proxy = markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers));5281 if (true) {5282 exposePropsOnRenderContext(instance);5283 }5284 const { setup } = Component;5285 if (setup) {5286 const setupContext = instance.setupContext = setup.length > 1 ? createSetupContext(instance) : null;5287 setCurrentInstance(instance);5288 pauseTracking();5289 const setupResult = callWithErrorHandling(setup, instance, 0, [true ? shallowReadonly(instance.props) : instance.props, setupContext]);5290 resetTracking();5291 unsetCurrentInstance();5292 if (isPromise(setupResult)) {5293 setupResult.then(unsetCurrentInstance, unsetCurrentInstance);5294 if (isSSR) {5295 return setupResult.then((resolvedResult) => {5296 handleSetupResult(instance, resolvedResult, isSSR);5297 }).catch((e) => {5298 handleError(e, instance, 0);5299 });5300 } else {5301 instance.asyncDep = setupResult;5302 }5303 } else {5304 handleSetupResult(instance, setupResult, isSSR);5305 }5306 } else {5307 finishComponentSetup(instance, isSSR);5308 }5309}5310function handleSetupResult(instance, setupResult, isSSR) {5311 if (isFunction(setupResult)) {5312 if (instance.type.__ssrInlineRender) {5313 instance.ssrRender = setupResult;5314 } else {5315 instance.render = setupResult;5316 }5317 } else if (isObject(setupResult)) {5318 if (isVNode(setupResult)) {5319 warn2(`setup() should not return VNodes directly - return a render function instead.`);5320 }5321 if (true) {5322 instance.devtoolsRawSetupState = setupResult;5323 }5324 instance.setupState = proxyRefs(setupResult);5325 if (true) {5326 exposeSetupStateOnRenderContext(instance);5327 }5328 } else if (setupResult !== void 0) {5329 warn2(`setup() should return an object. Received: ${setupResult === null ? "null" : typeof setupResult}`);5330 }5331 finishComponentSetup(instance, isSSR);5332}5333var compile;5334var installWithProxy;5335var isRuntimeOnly = () => !compile;5336function finishComponentSetup(instance, isSSR, skipOptions) {5337 const Component = instance.type;5338 if (!instance.render) {5339 if (!isSSR && compile && !Component.render) {5340 const template = Component.template;5341 if (template) {5342 if (true) {5343 startMeasure(instance, `compile`);5344 }5345 const { isCustomElement, compilerOptions } = instance.appContext.config;5346 const { delimiters, compilerOptions: componentCompilerOptions } = Component;5347 const finalCompilerOptions = extend(extend({5348 isCustomElement,5349 delimiters5350 }, compilerOptions), componentCompilerOptions);5351 Component.render = compile(template, finalCompilerOptions);5352 if (true) {5353 endMeasure(instance, `compile`);5354 }5355 }5356 }5357 instance.render = Component.render || NOOP;5358 if (installWithProxy) {5359 installWithProxy(instance);5360 }5361 }5362 if (true) {5363 setCurrentInstance(instance);5364 pauseTracking();5365 applyOptions(instance);5366 resetTracking();5367 unsetCurrentInstance();5368 }5369 if (!Component.render && instance.render === NOOP && !isSSR) {5370 if (!compile && Component.template) {5371 warn2(`Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".`);5372 } else {5373 warn2(`Component is missing template or render function.`);5374 }5375 }5376}5377function createAttrsProxy(instance) {5378 return new Proxy(instance.attrs, true ? {5379 get(target, key) {5380 markAttrsAccessed();5381 track(instance, "get", "$attrs");5382 return target[key];5383 },5384 set() {5385 warn2(`setupContext.attrs is readonly.`);5386 return false;5387 },5388 deleteProperty() {5389 warn2(`setupContext.attrs is readonly.`);5390 return false;5391 }5392 } : {5393 get(target, key) {5394 track(instance, "get", "$attrs");...

size-check.global.js

Source:size-check.global.js

...1127 // dev only flag to track whether $attrs was used during render.1128 // If $attrs was used during render then the warning for failed attrs1129 // fallthrough can be suppressed.1130 let accessedAttrs = false;1131 function markAttrsAccessed() {1132 accessedAttrs = true;1133 }1134 function renderComponentRoot(instance) {1135 const { type: Component, parent, vnode, proxy, withProxy, props, slots, attrs, emit, renderCache } = instance;1136 let result;1137 currentRenderingInstance = instance;1138 {1139 accessedAttrs = false;1140 }1141 try {1142 let fallthroughAttrs;1143 if (vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {1144 // withProxy is a proxy with a different `has` trap only for1145 // runtime-compiled render functions using `with` block.1146 const proxyToUse = withProxy || proxy;1147 result = normalizeVNode(instance.render.call(proxyToUse, proxyToUse, renderCache));1148 fallthroughAttrs = attrs;1149 }1150 else {1151 // functional1152 const render = Component;1153 // in dev, mark attrs accessed if optional props (attrs === props)1154 if (true && attrs === props) {1155 markAttrsAccessed();1156 }1157 result = normalizeVNode(render.length > 11158 ? render(props, true1159 ? {1160 get attrs() {1161 markAttrsAccessed();1162 return attrs;1163 },1164 slots,1165 emit1166 }1167 : { attrs, slots, emit })1168 : render(props, null /* we know it doesn't need it */));1169 fallthroughAttrs = Component.props ? attrs : getFallthroughAttrs(attrs);1170 }1171 // attr merging1172 // in dev mode, comments are preserved, and it's possible for a template1173 // to have comments along side the root element which makes it a fragment1174 let root = result;1175 let setRoot = undefined;1176 if (true) {1177 ;1178 [root, setRoot] = getChildRoot(result);1179 }1180 if (Component.inheritAttrs !== false &&1181 fallthroughAttrs &&1182 Object.keys(fallthroughAttrs).length) {1183 if (root.shapeFlag & 1 /* ELEMENT */ ||1184 root.shapeFlag & 6 /* COMPONENT */) {1185 root = cloneVNode(root, fallthroughAttrs);1186 // If the child root node is a compiler optimized vnode, make sure it1187 // force update full props to account for the merged attrs.1188 if (root.dynamicChildren) {1189 root.patchFlag |= 16 /* FULL_PROPS */;1190 }1191 }1192 else if (true && !accessedAttrs && root.type !== Comment) {1193 const allAttrs = Object.keys(attrs);1194 const eventAttrs = [];1195 const extraAttrs = [];1196 for (let i = 0, l = allAttrs.length; i < l; i++) {1197 const key = allAttrs[i];1198 if (isOn(key)) {1199 // remove `on`, lowercase first letter to reflect event casing accurately1200 eventAttrs.push(key[2].toLowerCase() + key.slice(3));1201 }1202 else {1203 extraAttrs.push(key);1204 }1205 }1206 if (extraAttrs.length) {1207 warn(`Extraneous non-props attributes (` +1208 `${extraAttrs.join(', ')}) ` +1209 `were passed to component but could not be automatically inherited ` +1210 `because component renders fragment or text root nodes.`);1211 }1212 if (eventAttrs.length) {1213 warn(`Extraneous non-emits event listeners (` +1214 `${eventAttrs.join(', ')}) ` +1215 `were passed to component but could not be automatically inherited ` +1216 `because component renders fragment or text root nodes. ` +1217 `If the listener is intended to be a component custom event listener only, ` +1218 `declare it using the "emits" option.`);1219 }1220 }1221 }1222 // inherit scopeId1223 const parentScopeId = parent && parent.type.__scopeId;1224 if (parentScopeId) {1225 root = cloneVNode(root, { [parentScopeId]: '' });1226 }1227 // inherit directives1228 if (vnode.dirs) {1229 if (true && !isElementRoot(root)) {1230 warn(`Runtime directive used on component with non-element root node. ` +1231 `The directives will not function as intended.`);1232 }1233 root.dirs = vnode.dirs;1234 }1235 // inherit transition data1236 if (vnode.transition) {1237 if (true && !isElementRoot(root)) {1238 warn(`Component inside <Transition> renders non-element root node ` +1239 `that cannot be animated.`);1240 }1241 root.transition = vnode.transition;1242 }1243 if (true && setRoot) {1244 setRoot(root);1245 }1246 else {1247 result = root;1248 }1249 }1250 catch (err) {1251 handleError(err, instance, 1 /* RENDER_FUNCTION */);1252 result = createVNode(Comment);1253 }1254 currentRenderingInstance = null;1255 return result;1256 }1257 const getChildRoot = (vnode) => {1258 if (vnode.type !== Fragment) {1259 return [vnode, undefined];1260 }1261 const rawChildren = vnode.children;1262 const dynamicChildren = vnode.dynamicChildren;1263 const children = rawChildren.filter(child => {1264 return !(isVNode(child) && child.type === Comment);1265 });1266 if (children.length !== 1) {1267 return [vnode, undefined];1268 }1269 const childRoot = children[0];1270 const index = rawChildren.indexOf(childRoot);1271 const dynamicIndex = dynamicChildren1272 ? dynamicChildren.indexOf(childRoot)1273 : null;1274 const setRoot = (updatedRoot) => {1275 rawChildren[index] = updatedRoot;1276 if (dynamicIndex !== null)1277 dynamicChildren[dynamicIndex] = updatedRoot;1278 };1279 return [normalizeVNode(childRoot), setRoot];1280 };1281 const getFallthroughAttrs = (attrs) => {1282 let res;1283 for (const key in attrs) {1284 if (key === 'class' || key === 'style' || isOn(key)) {1285 (res || (res = {}))[key] = attrs[key];1286 }1287 }1288 return res;1289 };1290 const isElementRoot = (vnode) => {1291 return (vnode.shapeFlag & 6 /* COMPONENT */ ||1292 vnode.shapeFlag & 1 /* ELEMENT */ ||1293 vnode.type === Comment // potential v-if branch switch1294 );1295 };1296 function shouldUpdateComponent(prevVNode, nextVNode, parentComponent, optimized) {1297 const { props: prevProps, children: prevChildren } = prevVNode;1298 const { props: nextProps, children: nextChildren, patchFlag } = nextVNode;1299 // Parent component's render function was hot-updated. Since this may have1300 // caused the child component's slots content to have changed, we need to1301 // force the child to update as well.1302 if (1303 (prevChildren || nextChildren) &&1304 parentComponent &&1305 parentComponent.renderUpdated) {1306 return true;1307 }1308 // force child update for runtime directive or transition on component vnode.1309 if (nextVNode.dirs || nextVNode.transition) {1310 return true;1311 }1312 if (patchFlag > 0) {1313 if (patchFlag & 1024 /* DYNAMIC_SLOTS */) {1314 // slot content that references values that might have changed,1315 // e.g. in a v-for1316 return true;1317 }1318 if (patchFlag & 16 /* FULL_PROPS */) {1319 // presence of this flag indicates props are always non-null1320 return hasPropsChanged(prevProps, nextProps);1321 }1322 else if (patchFlag & 8 /* PROPS */) {1323 const dynamicProps = nextVNode.dynamicProps;1324 for (let i = 0; i < dynamicProps.length; i++) {1325 const key = dynamicProps[i];1326 if (nextProps[key] !== prevProps[key]) {1327 return true;1328 }1329 }1330 }1331 }1332 else if (!optimized) {1333 // this path is only taken by manually written render functions1334 // so presence of any children leads to a forced update1335 if (prevChildren || nextChildren) {1336 if (!nextChildren || !nextChildren.$stable) {1337 return true;1338 }1339 }1340 if (prevProps === nextProps) {1341 return false;1342 }1343 if (!prevProps) {1344 return !!nextProps;1345 }1346 if (!nextProps) {1347 return true;1348 }1349 return hasPropsChanged(prevProps, nextProps);1350 }1351 return false;1352 }1353 function hasPropsChanged(prevProps, nextProps) {1354 const nextKeys = Object.keys(nextProps);1355 if (nextKeys.length !== Object.keys(prevProps).length) {1356 return true;1357 }1358 for (let i = 0; i < nextKeys.length; i++) {1359 const key = nextKeys[i];1360 if (nextProps[key] !== prevProps[key]) {1361 return true;1362 }1363 }1364 return false;1365 }1366 function updateHOCHostEl({ vnode, parent }, el // HostNode1367 ) {1368 while (parent && parent.subTree === vnode) {1369 (vnode = parent.vnode).el = el;1370 parent = parent.parent;1371 }1372 }1373 const isSuspense = (type) => type.__isSuspense;1374 function queueEffectWithSuspense(fn, suspense) {1375 if (suspense && !suspense.isResolved) {1376 if (isArray(fn)) {1377 suspense.effects.push(...fn);1378 }1379 else {1380 suspense.effects.push(fn);1381 }1382 }1383 else {1384 queuePostFlushCb(fn);1385 }1386 }1387 /**1388 * Wrap a slot function to memoize current rendering instance1389 * @internal1390 */1391 function withCtx(fn, ctx = currentRenderingInstance) {1392 if (!ctx)1393 return fn;1394 return function renderFnWithContext() {1395 const owner = currentRenderingInstance;1396 setCurrentRenderingInstance(ctx);1397 const res = fn.apply(null, arguments);1398 setCurrentRenderingInstance(owner);1399 return res;1400 };1401 }1402 // SFC scoped style ID management.1403 let currentScopeId = null;1404 const isTeleport = (type) => type.__isTeleport;1405 const NULL_DYNAMIC_COMPONENT = Symbol();1406 const Fragment = Symbol( 'Fragment' );1407 const Text = Symbol( 'Text' );1408 const Comment = Symbol( 'Comment' );1409 const Static = Symbol( 'Static' );1410 let currentBlock = null;1411 function isVNode(value) {1412 return value ? value._isVNode === true : false;1413 }1414 function isSameVNodeType(n1, n2) {1415 if (1416 n2.shapeFlag & 6 /* COMPONENT */ &&1417 n2.type.__hmrUpdated) {1418 // HMR only: if the component has been hot-updated, force a reload.1419 return false;1420 }1421 return n1.type === n2.type && n1.key === n2.key;1422 }1423 const createVNodeWithArgsTransform = (...args) => {1424 return _createVNode(...( args));1425 };1426 const InternalObjectKey = `__vInternal`;1427 const normalizeKey = ({ key }) => key != null ? key : null;1428 const normalizeRef = ({ ref }) => (ref != null1429 ? isArray(ref)1430 ? ref1431 : [currentRenderingInstance, ref]1432 : null);1433 const createVNode = ( createVNodeWithArgsTransform1434 );1435 function _createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) {1436 if (!type || type === NULL_DYNAMIC_COMPONENT) {1437 if ( !type) {1438 warn(`Invalid vnode type when creating vnode: ${type}.`);1439 }1440 type = Comment;1441 }1442 // class component normalization.1443 if (isFunction(type) && '__vccOpts' in type) {1444 type = type.__vccOpts;1445 }1446 // class & style normalization.1447 if (props) {1448 // for reactive or proxy objects, we need to clone it to enable mutation.1449 if (isProxy(props) || InternalObjectKey in props) {1450 props = extend({}, props);1451 }1452 let { class: klass, style } = props;1453 if (klass && !isString(klass)) {1454 props.class = normalizeClass(klass);1455 }1456 if (isObject(style)) {1457 // reactive state objects need to be cloned since they are likely to be1458 // mutated1459 if (isProxy(style) && !isArray(style)) {1460 style = extend({}, style);1461 }1462 props.style = normalizeStyle(style);1463 }1464 }1465 // encode the vnode type information into a bitmap1466 const shapeFlag = isString(type)1467 ? 1 /* ELEMENT */1468 : isSuspense(type)1469 ? 128 /* SUSPENSE */1470 : isTeleport(type)1471 ? 64 /* TELEPORT */1472 : isObject(type)1473 ? 4 /* STATEFUL_COMPONENT */1474 : isFunction(type)1475 ? 2 /* FUNCTIONAL_COMPONENT */1476 : 0;1477 if ( shapeFlag & 4 /* STATEFUL_COMPONENT */ && isProxy(type)) {1478 type = toRaw(type);1479 warn(`Vue received a Component which was made a reactive object. This can ` +1480 `lead to unnecessary performance overhead, and should be avoided by ` +1481 `marking the component with \`markRaw\` or using \`shallowRef\` ` +1482 `instead of \`ref\`.`, `\nComponent that was made reactive: `, type);1483 }1484 const vnode = {1485 _isVNode: true,1486 type,1487 props,1488 key: props && normalizeKey(props),1489 ref: props && normalizeRef(props),1490 scopeId: currentScopeId,1491 children: null,1492 component: null,1493 suspense: null,1494 dirs: null,1495 transition: null,1496 el: null,1497 anchor: null,1498 target: null,1499 targetAnchor: null,1500 shapeFlag,1501 patchFlag,1502 dynamicProps,1503 dynamicChildren: null,1504 appContext: null1505 };1506 normalizeChildren(vnode, children);1507 // presence of a patch flag indicates this node needs patching on updates.1508 // component nodes also should always be patched, because even if the1509 // component doesn't need to update, it needs to persist the instance on to1510 // the next vnode so that it can be properly unmounted later.1511 if (1512 !isBlockNode &&1513 currentBlock &&1514 // the EVENTS flag is only for hydration and if it is the only flag, the1515 // vnode should not be considered dynamic due to handler caching.1516 patchFlag !== 32 /* HYDRATE_EVENTS */ &&1517 (patchFlag > 0 ||1518 shapeFlag & 128 /* SUSPENSE */ ||1519 shapeFlag & 4 /* STATEFUL_COMPONENT */ ||1520 shapeFlag & 2 /* FUNCTIONAL_COMPONENT */)) {1521 currentBlock.push(vnode);1522 }1523 return vnode;1524 }1525 function cloneVNode(vnode, extraProps) {1526 const props = (extraProps1527 ? vnode.props1528 ? mergeProps(vnode.props, extraProps)1529 : extend({}, extraProps)1530 : vnode.props);1531 // This is intentionally NOT using spread or extend to avoid the runtime1532 // key enumeration cost.1533 return {1534 _isVNode: true,1535 type: vnode.type,1536 props,1537 key: props && normalizeKey(props),1538 ref: props && normalizeRef(props),1539 scopeId: vnode.scopeId,1540 children: vnode.children,1541 target: vnode.target,1542 targetAnchor: vnode.targetAnchor,1543 shapeFlag: vnode.shapeFlag,1544 patchFlag: vnode.patchFlag,1545 dynamicProps: vnode.dynamicProps,1546 dynamicChildren: vnode.dynamicChildren,1547 appContext: vnode.appContext,1548 dirs: vnode.dirs,1549 transition: vnode.transition,1550 // These should technically only be non-null on mounted VNodes. However,1551 // they *should* be copied for kept-alive vnodes. So we just always copy1552 // them since them being non-null during a mount doesn't affect the logic as1553 // they will simply be overwritten.1554 component: vnode.component,1555 suspense: vnode.suspense,1556 el: vnode.el,1557 anchor: vnode.anchor1558 };1559 }1560 /**1561 * @internal1562 */1563 function createTextVNode(text = ' ', flag = 0) {1564 return createVNode(Text, null, text, flag);1565 }1566 function normalizeVNode(child) {1567 if (child == null || typeof child === 'boolean') {1568 // empty placeholder1569 return createVNode(Comment);1570 }1571 else if (isArray(child)) {1572 // fragment1573 return createVNode(Fragment, null, child);1574 }1575 else if (typeof child === 'object') {1576 // already vnode, this should be the most common since compiled templates1577 // always produce all-vnode children arrays1578 return child.el === null ? child : cloneVNode(child);1579 }1580 else {1581 // strings and numbers1582 return createVNode(Text, null, String(child));1583 }1584 }1585 // optimized normalization for template-compiled render fns1586 function cloneIfMounted(child) {1587 return child.el === null ? child : cloneVNode(child);1588 }1589 function normalizeChildren(vnode, children) {1590 let type = 0;1591 const { shapeFlag } = vnode;1592 if (children == null) {1593 children = null;1594 }1595 else if (isArray(children)) {1596 type = 16 /* ARRAY_CHILDREN */;1597 }1598 else if (typeof children === 'object') {1599 // Normalize slot to plain children1600 if ((shapeFlag & 1 /* ELEMENT */ || shapeFlag & 64 /* TELEPORT */) &&1601 children.default) {1602 normalizeChildren(vnode, children.default());1603 return;1604 }1605 else {1606 type = 32 /* SLOTS_CHILDREN */;1607 if (!children._ && !(InternalObjectKey in children)) {1608 children._ctx = currentRenderingInstance;1609 }1610 }1611 }1612 else if (isFunction(children)) {1613 children = { default: children, _ctx: currentRenderingInstance };1614 type = 32 /* SLOTS_CHILDREN */;1615 }1616 else {1617 children = String(children);1618 // force teleport children to array so it can be moved around1619 if (shapeFlag & 64 /* TELEPORT */) {1620 type = 16 /* ARRAY_CHILDREN */;1621 children = [createTextVNode(children)];1622 }1623 else {1624 type = 8 /* TEXT_CHILDREN */;1625 }1626 }1627 vnode.children = children;1628 vnode.shapeFlag |= type;1629 }1630 const handlersRE = /^on|^vnode/;1631 function mergeProps(...args) {1632 const ret = {};1633 extend(ret, args[0]);1634 for (let i = 1; i < args.length; i++) {1635 const toMerge = args[i];1636 for (const key in toMerge) {1637 if (key === 'class') {1638 if (ret.class !== toMerge.class) {1639 ret.class = normalizeClass([ret.class, toMerge.class]);1640 }1641 }1642 else if (key === 'style') {1643 ret.style = normalizeStyle([ret.style, toMerge.style]);1644 }1645 else if (handlersRE.test(key)) {1646 // on*, vnode*1647 const existing = ret[key];1648 const incoming = toMerge[key];1649 if (existing !== incoming) {1650 ret[key] = existing1651 ? [].concat(existing, toMerge[key])1652 : incoming;1653 }1654 }1655 else {1656 ret[key] = toMerge[key];1657 }1658 }1659 }1660 return ret;1661 }1662 function emit(instance, event, ...args) {1663 const props = instance.vnode.props || EMPTY_OBJ;1664 {1665 const options = normalizeEmitsOptions(instance.type.emits);1666 if (options) {1667 if (!(event in options)) {1668 const propsOptions = normalizePropsOptions(instance.type.props)[0];1669 if (!propsOptions || !(`on` + capitalize(event) in propsOptions)) {1670 warn(`Component emitted event "${event}" but it is neither declared in ` +1671 `the emits option nor as an "on${capitalize(event)}" prop.`);1672 }1673 }1674 else {1675 const validator = options[event];1676 if (isFunction(validator)) {1677 const isValid = validator(...args);1678 if (!isValid) {1679 warn(`Invalid event arguments: event validation failed for event "${event}".`);1680 }1681 }1682 }1683 }1684 }1685 let handler = props[`on${capitalize(event)}`];1686 // for v-model update:xxx events, also trigger kebab-case equivalent1687 // for props passed via kebab-case1688 if (!handler && event.startsWith('update:')) {1689 event = hyphenate(event);1690 handler = props[`on${capitalize(event)}`];1691 }1692 if (handler) {1693 callWithAsyncErrorHandling(handler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args);1694 }1695 }1696 function normalizeEmitsOptions(options) {1697 if (!options) {1698 return;1699 }1700 else if (isArray(options)) {1701 if (options._n) {1702 return options._n;1703 }1704 const normalized = {};1705 options.forEach(key => (normalized[key] = null));1706 def(options, '_n', normalized);1707 return normalized;1708 }1709 else {1710 return options;1711 }1712 }1713 // Check if an incoming prop key is a declared emit event listener.1714 // e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are1715 // both considered matched listeners.1716 function isEmitListener(emits, key) {1717 return (isOn(key) &&1718 (hasOwn((emits = normalizeEmitsOptions(emits)), key[2].toLowerCase() + key.slice(3)) ||1719 hasOwn(emits, key.slice(2))));1720 }1721 function initProps(instance, rawProps, isStateful, // result of bitwise flag comparison1722 isSSR = false) {1723 const props = {};1724 const attrs = {};1725 def(attrs, InternalObjectKey, 1);1726 setFullProps(instance, rawProps, props, attrs);1727 const options = instance.type.props;1728 // validation1729 if ( options && rawProps) {1730 validateProps(props, options);1731 }1732 if (isStateful) {1733 // stateful1734 instance.props = isSSR ? props : shallowReactive(props);1735 }1736 else {1737 if (!options) {1738 // functional w/ optional props, props === attrs1739 instance.props = attrs;1740 }1741 else {1742 // functional w/ declared props1743 instance.props = props;1744 }1745 }1746 instance.attrs = attrs;1747 }1748 function updateProps(instance, rawProps, rawPrevProps, optimized) {1749 const { props, attrs, vnode: { patchFlag } } = instance;1750 const rawOptions = instance.type.props;1751 const rawCurrentProps = toRaw(props);1752 const { 0: options } = normalizePropsOptions(rawOptions);1753 if ((optimized || patchFlag > 0) && !(patchFlag & 16 /* FULL_PROPS */)) {1754 if (patchFlag & 8 /* PROPS */) {1755 // Compiler-generated props & no keys change, just set the updated1756 // the props.1757 const propsToUpdate = instance.vnode.dynamicProps;1758 for (let i = 0; i < propsToUpdate.length; i++) {1759 const key = propsToUpdate[i];1760 // PROPS flag guarantees rawProps to be non-null1761 const value = rawProps[key];1762 if (options) {1763 // attr / props separation was done on init and will be consistent1764 // in this code path, so just check if attrs have it.1765 if (hasOwn(attrs, key)) {1766 attrs[key] = value;1767 }1768 else {1769 const camelizedKey = camelize(key);1770 props[camelizedKey] = resolvePropValue(options, rawCurrentProps, camelizedKey, value);1771 }1772 }1773 else {1774 attrs[key] = value;1775 }1776 }1777 }1778 }1779 else {1780 // full props update.1781 setFullProps(instance, rawProps, props, attrs);1782 // in case of dynamic props, check if we need to delete keys from1783 // the props object1784 let kebabKey;1785 for (const key in rawCurrentProps) {1786 if (!rawProps ||1787 (!hasOwn(rawProps, key) &&1788 // it's possible the original props was passed in as kebab-case1789 // and converted to camelCase (#955)1790 ((kebabKey = hyphenate(key)) === key || !hasOwn(rawProps, kebabKey)))) {1791 if (options) {1792 if (rawPrevProps && rawPrevProps[kebabKey] !== undefined) {1793 props[key] = resolvePropValue(options, rawProps || EMPTY_OBJ, key, undefined);1794 }1795 }1796 else {1797 delete props[key];1798 }1799 }1800 }1801 // in the case of functional component w/o props declaration, props and1802 // attrs point to the same object so it should already have been updated.1803 if (attrs !== rawCurrentProps) {1804 for (const key in attrs) {1805 if (!rawProps || !hasOwn(rawProps, key)) {1806 delete attrs[key];1807 }1808 }1809 }1810 }1811 if ( rawOptions && rawProps) {1812 validateProps(props, rawOptions);1813 }1814 }1815 function setFullProps(instance, rawProps, props, attrs) {1816 const { 0: options, 1: needCastKeys } = normalizePropsOptions(instance.type.props);1817 const emits = instance.type.emits;1818 if (rawProps) {1819 for (const key in rawProps) {1820 const value = rawProps[key];1821 // key, ref are reserved and never passed down1822 if (isReservedProp(key)) {1823 continue;1824 }1825 // prop option names are camelized during normalization, so to support1826 // kebab -> camel conversion here we need to camelize the key.1827 let camelKey;1828 if (options && hasOwn(options, (camelKey = camelize(key)))) {1829 props[camelKey] = value;1830 }1831 else if (!emits || !isEmitListener(emits, key)) {1832 // Any non-declared (either as a prop or an emitted event) props are put1833 // into a separate `attrs` object for spreading. Make sure to preserve1834 // original key casing1835 attrs[key] = value;1836 }1837 }1838 }1839 if (needCastKeys) {1840 const rawCurrentProps = toRaw(props);1841 for (let i = 0; i < needCastKeys.length; i++) {1842 const key = needCastKeys[i];1843 props[key] = resolvePropValue(options, rawCurrentProps, key, rawCurrentProps[key]);1844 }1845 }1846 }1847 function resolvePropValue(options, props, key, value) {1848 const opt = options[key];1849 if (opt != null) {1850 const hasDefault = hasOwn(opt, 'default');1851 // default values1852 if (hasDefault && value === undefined) {1853 const defaultValue = opt.default;1854 value = isFunction(defaultValue) ? defaultValue() : defaultValue;1855 }1856 // boolean casting1857 if (opt[0 /* shouldCast */]) {1858 if (!hasOwn(props, key) && !hasDefault) {1859 value = false;1860 }1861 else if (opt[1 /* shouldCastTrue */] &&1862 (value === '' || value === hyphenate(key))) {1863 value = true;1864 }1865 }1866 }1867 return value;1868 }1869 function normalizePropsOptions(raw) {1870 if (!raw) {1871 return EMPTY_ARR;1872 }1873 if (raw._n) {1874 return raw._n;1875 }1876 const normalized = {};1877 const needCastKeys = [];1878 if (isArray(raw)) {1879 for (let i = 0; i < raw.length; i++) {1880 if ( !isString(raw[i])) {1881 warn(`props must be strings when using array syntax.`, raw[i]);1882 }1883 const normalizedKey = camelize(raw[i]);1884 if (validatePropName(normalizedKey)) {1885 normalized[normalizedKey] = EMPTY_OBJ;1886 }1887 }1888 }1889 else {1890 if ( !isObject(raw)) {1891 warn(`invalid props options`, raw);1892 }1893 for (const key in raw) {1894 const normalizedKey = camelize(key);1895 if (validatePropName(normalizedKey)) {1896 const opt = raw[key];1897 const prop = (normalized[normalizedKey] =1898 isArray(opt) || isFunction(opt) ? { type: opt } : opt);1899 if (prop) {1900 const booleanIndex = getTypeIndex(Boolean, prop.type);1901 const stringIndex = getTypeIndex(String, prop.type);1902 prop[0 /* shouldCast */] = booleanIndex > -1;1903 prop[1 /* shouldCastTrue */] =1904 stringIndex < 0 || booleanIndex < stringIndex;1905 // if the prop needs boolean casting or default value1906 if (booleanIndex > -1 || hasOwn(prop, 'default')) {1907 needCastKeys.push(normalizedKey);1908 }1909 }1910 }1911 }1912 }1913 const normalizedEntry = [normalized, needCastKeys];1914 def(raw, '_n', normalizedEntry);1915 return normalizedEntry;1916 }1917 // use function string name to check type constructors1918 // so that it works across vms / iframes.1919 function getType(ctor) {1920 const match = ctor && ctor.toString().match(/^\s*function (\w+)/);1921 return match ? match[1] : '';1922 }1923 function isSameType(a, b) {1924 return getType(a) === getType(b);1925 }1926 function getTypeIndex(type, expectedTypes) {1927 if (isArray(expectedTypes)) {1928 for (let i = 0, len = expectedTypes.length; i < len; i++) {1929 if (isSameType(expectedTypes[i], type)) {1930 return i;1931 }1932 }1933 }1934 else if (isFunction(expectedTypes)) {1935 return isSameType(expectedTypes, type) ? 0 : -1;1936 }1937 return -1;1938 }1939 function validateProps(props, rawOptions) {1940 const rawValues = toRaw(props);1941 const options = normalizePropsOptions(rawOptions)[0];1942 for (const key in options) {1943 let opt = options[key];1944 if (opt == null)1945 continue;1946 validateProp(key, rawValues[key], opt, !hasOwn(rawValues, key));1947 }1948 }1949 function validatePropName(key) {1950 if (key[0] !== '$') {1951 return true;1952 }1953 else {1954 warn(`Invalid prop name: "${key}" is a reserved property.`);1955 }1956 return false;1957 }1958 function validateProp(name, value, prop, isAbsent) {1959 const { type, required, validator } = prop;1960 // required!1961 if (required && isAbsent) {1962 warn('Missing required prop: "' + name + '"');1963 return;1964 }1965 // missing but optional1966 if (value == null && !prop.required) {1967 return;1968 }1969 // type check1970 if (type != null && type !== true) {1971 let isValid = false;1972 const types = isArray(type) ? type : [type];1973 const expectedTypes = [];1974 // value is valid as long as one of the specified types match1975 for (let i = 0; i < types.length && !isValid; i++) {1976 const { valid, expectedType } = assertType(value, types[i]);1977 expectedTypes.push(expectedType || '');1978 isValid = valid;1979 }1980 if (!isValid) {1981 warn(getInvalidTypeMessage(name, value, expectedTypes));1982 return;1983 }1984 }1985 // custom validator1986 if (validator && !validator(value)) {1987 warn('Invalid prop: custom validator check failed for prop "' + name + '".');1988 }1989 }1990 const isSimpleType = /*#__PURE__*/ makeMap('String,Number,Boolean,Function,Symbol');1991 function assertType(value, type) {1992 let valid;1993 const expectedType = getType(type);1994 if (isSimpleType(expectedType)) {1995 const t = typeof value;1996 valid = t === expectedType.toLowerCase();1997 // for primitive wrapper objects1998 if (!valid && t === 'object') {1999 valid = value instanceof type;2000 }2001 }2002 else if (expectedType === 'Object') {2003 valid = toRawType(value) === 'Object';2004 }2005 else if (expectedType === 'Array') {2006 valid = isArray(value);2007 }2008 else {2009 valid = value instanceof type;2010 }2011 return {2012 valid,2013 expectedType2014 };2015 }2016 function getInvalidTypeMessage(name, value, expectedTypes) {2017 let message = `Invalid prop: type check failed for prop "${name}".` +2018 ` Expected ${expectedTypes.map(capitalize).join(', ')}`;2019 const expectedType = expectedTypes[0];2020 const receivedType = toRawType(value);2021 const expectedValue = styleValue(value, expectedType);2022 const receivedValue = styleValue(value, receivedType);2023 // check if we need to specify expected value2024 if (expectedTypes.length === 1 &&2025 isExplicable(expectedType) &&2026 !isBoolean(expectedType, receivedType)) {2027 message += ` with value ${expectedValue}`;2028 }2029 message += `, got ${receivedType} `;2030 // check if we need to specify received value2031 if (isExplicable(receivedType)) {2032 message += `with value ${receivedValue}.`;2033 }2034 return message;2035 }2036 function styleValue(value, type) {2037 if (type === 'String') {2038 return `"${value}"`;2039 }2040 else if (type === 'Number') {2041 return `${Number(value)}`;2042 }2043 else {2044 return `${value}`;2045 }2046 }2047 function isExplicable(type) {2048 const explicitTypes = ['string', 'number', 'boolean'];2049 return explicitTypes.some(elem => type.toLowerCase() === elem);2050 }2051 function isBoolean(...args) {2052 return args.some(elem => elem.toLowerCase() === 'boolean');2053 }2054 const isInternalKey = (key) => key[0] === '_' || key === '$stable';2055 const normalizeSlotValue = (value) => isArray(value)2056 ? value.map(normalizeVNode)2057 : [normalizeVNode(value)];2058 const normalizeSlot = (key, rawSlot, ctx) => withCtx((props) => {2059 if ( currentInstance) {2060 warn(`Slot "${key}" invoked outside of the render function: ` +2061 `this will not track dependencies used in the slot. ` +2062 `Invoke the slot function inside the render function instead.`);2063 }2064 return normalizeSlotValue(rawSlot(props));2065 }, ctx);2066 const normalizeObjectSlots = (rawSlots, slots) => {2067 const ctx = rawSlots._ctx;2068 for (const key in rawSlots) {2069 if (isInternalKey(key))2070 continue;2071 const value = rawSlots[key];2072 if (isFunction(value)) {2073 slots[key] = normalizeSlot(key, value, ctx);2074 }2075 else if (value != null) {2076 {2077 warn(`Non-function value encountered for slot "${key}". ` +2078 `Prefer function slots for better performance.`);2079 }2080 const normalized = normalizeSlotValue(value);2081 slots[key] = () => normalized;2082 }2083 }2084 };2085 const normalizeVNodeSlots = (instance, children) => {2086 if ( !isKeepAlive(instance.vnode)) {2087 warn(`Non-function value encountered for default slot. ` +2088 `Prefer function slots for better performance.`);2089 }2090 const normalized = normalizeSlotValue(children);2091 instance.slots.default = () => normalized;2092 };2093 const initSlots = (instance, children) => {2094 if (instance.vnode.shapeFlag & 32 /* SLOTS_CHILDREN */) {2095 if (children._ === 1) {2096 instance.slots = children;2097 }2098 else {2099 normalizeObjectSlots(children, (instance.slots = {}));2100 }2101 }2102 else {2103 instance.slots = {};2104 if (children) {2105 normalizeVNodeSlots(instance, children);2106 }2107 }2108 def(instance.slots, InternalObjectKey, 1);2109 };2110 const updateSlots = (instance, children) => {2111 const { vnode, slots } = instance;2112 let needDeletionCheck = true;2113 let deletionComparisonTarget = EMPTY_OBJ;2114 if (vnode.shapeFlag & 32 /* SLOTS_CHILDREN */) {2115 if (children._ === 1) {2116 // compiled slots.2117 if (2118 // bail on dynamic slots (v-if, v-for, reference of scope variables)2119 !(vnode.patchFlag & 1024 /* DYNAMIC_SLOTS */) &&2120 // bail on HRM updates2121 !( instance.parent && instance.parent.renderUpdated)) {2122 // compiled AND static.2123 // no need to update, and skip stale slots removal.2124 needDeletionCheck = false;2125 }2126 else {2127 // compiled but dynamic - update slots, but skip normalization.2128 extend(slots, children);2129 }2130 }2131 else {2132 needDeletionCheck = !children.$stable;2133 normalizeObjectSlots(children, slots);2134 }2135 deletionComparisonTarget = children;2136 }2137 else if (children) {2138 // non slot object children (direct value) passed to a component2139 normalizeVNodeSlots(instance, children);2140 deletionComparisonTarget = { default: 1 };2141 }2142 // delete stale slots2143 if (needDeletionCheck) {2144 for (const key in slots) {2145 if (!isInternalKey(key) && !(key in deletionComparisonTarget)) {2146 delete slots[key];2147 }2148 }2149 }2150 };2151 /**2152 Runtime helper for applying directives to a vnode. Example usage:21532154 const comp = resolveComponent('comp')2155 const foo = resolveDirective('foo')2156 const bar = resolveDirective('bar')21572158 return withDirectives(h(comp), [2159 [foo, this.x],2160 [bar, this.y]2161 ])2162 */2163 const isBuiltInDirective = /*#__PURE__*/ makeMap('bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text');2164 function validateDirectiveName(name) {2165 if (isBuiltInDirective(name)) {2166 warn('Do not use built-in directive ids as custom directive id: ' + name);2167 }2168 }2169 function invokeDirectiveHook(vnode, prevVNode, instance, name) {2170 const bindings = vnode.dirs;2171 const oldBindings = prevVNode && prevVNode.dirs;2172 for (let i = 0; i < bindings.length; i++) {2173 const binding = bindings[i];2174 if (oldBindings) {2175 binding.oldValue = oldBindings[i].value;2176 }2177 const hook = binding.dir[name];2178 if (hook) {2179 callWithAsyncErrorHandling(hook, instance, 8 /* DIRECTIVE_HOOK */, [2180 vnode.el,2181 binding,2182 vnode,2183 prevVNode2184 ]);2185 }2186 }2187 }2188 function createAppContext() {2189 return {2190 config: {2191 isNativeTag: NO,2192 devtools: true,2193 performance: false,2194 globalProperties: {},2195 optionMergeStrategies: {},2196 isCustomElement: NO,2197 errorHandler: undefined,2198 warnHandler: undefined2199 },2200 mixins: [],2201 components: {},2202 directives: {},2203 provides: Object.create(null)2204 };2205 }2206 function createAppAPI(render, hydrate) {2207 return function createApp(rootComponent, rootProps = null) {2208 if (rootProps != null && !isObject(rootProps)) {2209 warn(`root props passed to app.mount() must be an object.`);2210 rootProps = null;2211 }2212 const context = createAppContext();2213 const installedPlugins = new Set();2214 let isMounted = false;2215 const app = {2216 _component: rootComponent,2217 _props: rootProps,2218 _container: null,2219 _context: context,2220 get config() {2221 return context.config;2222 },2223 set config(v) {2224 {2225 warn(`app.config cannot be replaced. Modify individual options instead.`);2226 }2227 },2228 use(plugin, ...options) {2229 if (installedPlugins.has(plugin)) {2230 warn(`Plugin has already been applied to target app.`);2231 }2232 else if (plugin && isFunction(plugin.install)) {2233 installedPlugins.add(plugin);2234 plugin.install(app, ...options);2235 }2236 else if (isFunction(plugin)) {2237 installedPlugins.add(plugin);2238 plugin(app, ...options);2239 }2240 else {2241 warn(`A plugin must either be a function or an object with an "install" ` +2242 `function.`);2243 }2244 return app;2245 },2246 mixin(mixin) {2247 {2248 if (!context.mixins.includes(mixin)) {2249 context.mixins.push(mixin);2250 }2251 else {2252 warn('Mixin has already been applied to target app' +2253 (mixin.name ? `: ${mixin.name}` : ''));2254 }2255 }2256 return app;2257 },2258 component(name, component) {2259 {2260 validateComponentName(name, context.config);2261 }2262 if (!component) {2263 return context.components[name];2264 }2265 if ( context.components[name]) {2266 warn(`Component "${name}" has already been registered in target app.`);2267 }2268 context.components[name] = component;2269 return app;2270 },2271 directive(name, directive) {2272 {2273 validateDirectiveName(name);2274 }2275 if (!directive) {2276 return context.directives[name];2277 }2278 if ( context.directives[name]) {2279 warn(`Directive "${name}" has already been registered in target app.`);2280 }2281 context.directives[name] = directive;2282 return app;2283 },2284 mount(rootContainer, isHydrate) {2285 if (!isMounted) {2286 const vnode = createVNode(rootComponent, rootProps);2287 // store app context on the root VNode.2288 // this will be set on the root instance on initial mount.2289 vnode.appContext = context;2290 // HMR root reload2291 {2292 context.reload = () => {2293 render(cloneVNode(vnode), rootContainer);2294 };2295 }2296 if (isHydrate && hydrate) {2297 hydrate(vnode, rootContainer);2298 }2299 else {2300 render(vnode, rootContainer);2301 }2302 isMounted = true;2303 app._container = rootContainer;2304 return vnode.component.proxy;2305 }2306 else {2307 warn(`App has already been mounted. Create a new app instance instead.`);2308 }2309 },2310 unmount() {2311 if (isMounted) {2312 render(null, app._container);2313 }2314 else {2315 warn(`Cannot unmount an app that is not mounted.`);2316 }2317 },2318 provide(key, value) {2319 if ( key in context.provides) {2320 warn(`App already provides property with key "${key}". ` +2321 `It will be overwritten with the new value.`);2322 }2323 // TypeScript doesn't allow symbols as index type2324 // https://github.com/Microsoft/TypeScript/issues/245872325 context.provides[key] = value;2326 return app;2327 }2328 };2329 return app;2330 };2331 }2332 // Expose the HMR runtime on the global object2333 // This makes it entirely tree-shakable without polluting the exports and makes2334 // it easier to be used in toolings like vue-loader2335 // Note: for a component to be eligible for HMR it also needs the __hmrId option2336 // to be set so that its instances can be registered / removed.2337 {2338 const globalObject = typeof global !== 'undefined'2339 ? global2340 : typeof self !== 'undefined'2341 ? self2342 : typeof window !== 'undefined'2343 ? window2344 : {};2345 globalObject.__VUE_HMR_RUNTIME__ = {2346 createRecord: tryWrap(createRecord),2347 rerender: tryWrap(rerender),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) {3469 stop(update);3470 unmount(subTree, instance, parentSuspense, doRemove);3471 }3472 // unmounted hook3473 if (um) {3474 queuePostRenderEffect(um, parentSuspense);3475 }3476 // deactivated hook3477 if (da &&3478 !isDeactivated &&3479 instance.vnode.shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {3480 queuePostRenderEffect(da, parentSuspense);3481 }3482 queuePostFlushCb(() => {3483 instance.isUnmounted = true;3484 });3485 // A component with async dep inside a pending suspense is unmounted before3486 // its async dep resolves. This should remove the dep from the suspense, and3487 // cause the suspense to resolve immediately if that was the last dep.3488 if (3489 parentSuspense &&3490 !parentSuspense.isResolved &&3491 !parentSuspense.isUnmounted &&3492 instance.asyncDep &&3493 !instance.asyncResolved) {3494 parentSuspense.deps--;3495 if (parentSuspense.deps === 0) {3496 parentSuspense.resolve();3497 }3498 }3499 };3500 const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, start = 0) => {3501 for (let i = start; i < children.length; i++) {3502 unmount(children[i], parentComponent, parentSuspense, doRemove);3503 }3504 };3505 const getNextHostNode = vnode => {3506 if (vnode.shapeFlag & 6 /* COMPONENT */) {3507 return getNextHostNode(vnode.component.subTree);3508 }3509 if ( vnode.shapeFlag & 128 /* SUSPENSE */) {3510 return vnode.suspense.next();3511 }3512 return hostNextSibling((vnode.anchor || vnode.el));3513 };3514 const setRef = (rawRef, oldRawRef, parent, value) => {3515 const [owner, ref] = rawRef;3516 if ( !owner) {3517 warn(`Missing ref owner context. ref cannot be used on hoisted vnodes. ` +3518 `A vnode with ref must be created inside the render function.`);3519 return;3520 }3521 const oldRef = oldRawRef && oldRawRef[1];3522 const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs;3523 const setupState = owner.setupState;3524 // unset old ref3525 if (oldRef != null && oldRef !== ref) {3526 if (isString(oldRef)) {3527 refs[oldRef] = null;3528 if (hasOwn(setupState, oldRef)) {3529 setupState[oldRef] = null;3530 }3531 }3532 else if (isRef(oldRef)) {3533 oldRef.value = null;3534 }3535 }3536 if (isString(ref)) {3537 refs[ref] = value;3538 if (hasOwn(setupState, ref)) {3539 setupState[ref] = value;3540 }3541 }3542 else if (isRef(ref)) {3543 ref.value = value;3544 }3545 else if (isFunction(ref)) {3546 callWithErrorHandling(ref, parent, 12 /* FUNCTION_REF */, [value, refs]);3547 }3548 else {3549 warn('Invalid template ref type:', value, `(${typeof value})`);3550 }3551 };3552 const render = (vnode, container) => {3553 if (vnode == null) {3554 if (container._vnode) {3555 unmount(container._vnode, null, null, true);3556 }3557 }3558 else {3559 patch(container._vnode || null, vnode, container);3560 }3561 flushPostFlushCbs();3562 container._vnode = vnode;3563 };3564 const internals = {3565 p: patch,3566 um: unmount,3567 m: move,3568 r: remove,3569 mt: mountComponent,3570 mc: mountChildren,3571 pc: patchChildren,3572 pbc: patchBlockChildren,3573 n: getNextHostNode,3574 o: options3575 };3576 let hydrate;3577 let hydrateNode;3578 if (createHydrationFns) {3579 [hydrate, hydrateNode] = createHydrationFns(internals);3580 }3581 return {3582 render,3583 hydrate,3584 createApp: createAppAPI(render, hydrate)3585 };3586 }3587 function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {3588 callWithAsyncErrorHandling(hook, instance, 7 /* VNODE_HOOK */, [3589 vnode,3590 prevVNode3591 ]);3592 }3593 // https://en.wikipedia.org/wiki/Longest_increasing_subsequence3594 function getSequence(arr) {3595 const p = arr.slice();3596 const result = [0];3597 let i, j, u, v, c;3598 const len = arr.length;3599 for (i = 0; i < len; i++) {3600 const arrI = arr[i];3601 if (arrI !== 0) {3602 j = result[result.length - 1];3603 if (arr[j] < arrI) {3604 p[i] = j;3605 result.push(i);3606 continue;3607 }3608 u = 0;3609 v = result.length - 1;3610 while (u < v) {3611 c = ((u + v) / 2) | 0;3612 if (arr[result[c]] < arrI) {3613 u = c + 1;3614 }3615 else {3616 v = c;3617 }3618 }3619 if (arrI < arr[result[u]]) {3620 if (u > 0) {3621 p[i] = result[u - 1];3622 }3623 result[u] = i;3624 }3625 }3626 }3627 u = result.length;3628 v = result[u - 1];3629 while (u-- > 0) {3630 result[u] = v;3631 v = p[v];3632 }3633 return result;3634 }3635 const isKeepAlive = (vnode) => vnode.type.__isKeepAlive;3636 function onActivated(hook, target) {3637 registerKeepAliveHook(hook, "a" /* ACTIVATED */, target);3638 }3639 function onDeactivated(hook, target) {3640 registerKeepAliveHook(hook, "da" /* DEACTIVATED */, target);3641 }3642 function registerKeepAliveHook(hook, type, target = currentInstance) {3643 // cache the deactivate branch check wrapper for injected hooks so the same3644 // hook can be properly deduped by the scheduler. "__wdc" stands for "with3645 // deactivation check".3646 const wrappedHook = hook.__wdc ||3647 (hook.__wdc = () => {3648 // only fire the hook if the target instance is NOT in a deactivated branch.3649 let current = target;3650 while (current) {3651 if (current.isDeactivated) {3652 return;3653 }3654 current = current.parent;3655 }3656 hook();3657 });3658 injectHook(type, wrappedHook, target);3659 // In addition to registering it on the target instance, we walk up the parent3660 // chain and register it on all ancestor instances that are keep-alive roots.3661 // This avoids the need to walk the entire component tree when invoking these3662 // hooks, and more importantly, avoids the need to track child components in3663 // arrays.3664 if (target) {3665 let current = target.parent;3666 while (current && current.parent) {3667 if (isKeepAlive(current.parent.vnode)) {3668 injectToKeepAliveRoot(wrappedHook, type, target, current);3669 }3670 current = current.parent;3671 }3672 }3673 }3674 function injectToKeepAliveRoot(hook, type, target, keepAliveRoot) {3675 injectHook(type, hook, keepAliveRoot, true /* prepend */);3676 onUnmounted(() => {3677 remove(keepAliveRoot[type], hook);3678 }, target);3679 }3680 function injectHook(type, hook, target = currentInstance, prepend = false) {3681 if (target) {3682 const hooks = target[type] || (target[type] = []);3683 // cache the error handling wrapper for injected hooks so the same hook3684 // can be properly deduped by the scheduler. "__weh" stands for "with error3685 // handling".3686 const wrappedHook = hook.__weh ||3687 (hook.__weh = (...args) => {3688 if (target.isUnmounted) {3689 return;3690 }3691 // disable tracking inside all lifecycle hooks3692 // since they can potentially be called inside effects.3693 pauseTracking();3694 // Set currentInstance during hook invocation.3695 // This assumes the hook does not synchronously trigger other hooks, which3696 // can only be false when the user does something really funky.3697 setCurrentInstance(target);3698 const res = callWithAsyncErrorHandling(hook, target, type, args);3699 setCurrentInstance(null);3700 resetTracking();3701 return res;3702 });3703 if (prepend) {3704 hooks.unshift(wrappedHook);3705 }3706 else {3707 hooks.push(wrappedHook);3708 }3709 }3710 else {3711 const apiName = `on${capitalize(ErrorTypeStrings[type].replace(/ hook$/, ''))}`;3712 warn(`${apiName} is called when there is no active component instance to be ` +3713 `associated with. ` +3714 `Lifecycle injection APIs can only be used during execution of setup().` +3715 ( ` If you are using async setup(), make sure to register lifecycle ` +3716 `hooks before the first await statement.`3717 ));3718 }3719 }3720 const createHook = (lifecycle) => (hook, target = currentInstance) => 3721 // post-create lifecycle registrations are noops during SSR3722 !isInSSRComponentSetup && injectHook(lifecycle, hook, target);3723 const onBeforeMount = createHook("bm" /* BEFORE_MOUNT */);3724 const onMounted = createHook("m" /* MOUNTED */);3725 const onBeforeUpdate = createHook("bu" /* BEFORE_UPDATE */);3726 const onUpdated = createHook("u" /* UPDATED */);3727 const onBeforeUnmount = createHook("bum" /* BEFORE_UNMOUNT */);3728 const onUnmounted = createHook("um" /* UNMOUNTED */);3729 const onRenderTriggered = createHook("rtg" /* RENDER_TRIGGERED */);3730 const onRenderTracked = createHook("rtc" /* RENDER_TRACKED */);3731 const onErrorCaptured = (hook, target = currentInstance) => {3732 injectHook("ec" /* ERROR_CAPTURED */, hook, target);3733 };3734 const invoke = (fn) => fn();3735 // initial value for watchers to trigger on undefined initial values3736 const INITIAL_WATCHER_VALUE = {};3737 // implementation3738 function watch(source, cb, options) {3739 if ( !isFunction(cb)) {3740 warn(`\`watch(fn, options?)\` signature has been moved to a separate API. ` +3741 `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +3742 `supports \`watch(source, cb, options?) signature.`);3743 }3744 return doWatch(source, cb, options);3745 }3746 function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ) {3747 if ( !cb) {3748 if (immediate !== undefined) {3749 warn(`watch() "immediate" option is only respected when using the ` +3750 `watch(source, callback, options?) signature.`);3751 }3752 if (deep !== undefined) {3753 warn(`watch() "deep" option is only respected when using the ` +3754 `watch(source, callback, options?) signature.`);3755 }3756 }3757 const instance = currentInstance;3758 let getter;3759 if (isArray(source)) {3760 getter = () => source.map(s => isRef(s)3761 ? s.value3762 : callWithErrorHandling(s, instance, 2 /* WATCH_GETTER */));3763 }3764 else if (isRef(source)) {3765 getter = () => source.value;3766 }3767 else if (cb) {3768 // getter with cb3769 getter = () => callWithErrorHandling(source, instance, 2 /* WATCH_GETTER */);3770 }3771 else {3772 // no cb -> simple effect3773 getter = () => {3774 if (instance && instance.isUnmounted) {3775 return;3776 }3777 if (cleanup) {3778 cleanup();3779 }3780 return callWithErrorHandling(source, instance, 3 /* WATCH_CALLBACK */, [onInvalidate]);3781 };3782 }3783 if (cb && deep) {3784 const baseGetter = getter;3785 getter = () => traverse(baseGetter());3786 }3787 let cleanup;3788 const onInvalidate = (fn) => {3789 cleanup = runner.options.onStop = () => {3790 callWithErrorHandling(fn, instance, 4 /* WATCH_CLEANUP */);3791 };3792 };3793 let oldValue = isArray(source) ? [] : INITIAL_WATCHER_VALUE;3794 const applyCb = cb3795 ? () => {3796 if (instance && instance.isUnmounted) {3797 return;3798 }3799 const newValue = runner();3800 if (deep || hasChanged(newValue, oldValue)) {3801 // cleanup before running cb again3802 if (cleanup) {3803 cleanup();3804 }3805 callWithAsyncErrorHandling(cb, instance, 3 /* WATCH_CALLBACK */, [3806 newValue,3807 // pass undefined as the old value when it's changed for the first time3808 oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,3809 onInvalidate3810 ]);3811 oldValue = newValue;3812 }3813 }3814 : void 0;3815 let scheduler;3816 if (flush === 'sync') {3817 scheduler = invoke;3818 }3819 else if (flush === 'pre') {3820 scheduler = job => {3821 if (!instance || instance.isMounted) {3822 queueJob(job);3823 }3824 else {3825 // with 'pre' option, the first call must happen before3826 // the component is mounted so it is called synchronously.3827 job();3828 }3829 };3830 }3831 else {3832 scheduler = job => queuePostRenderEffect(job, instance && instance.suspense);3833 }3834 const runner = effect(getter, {3835 lazy: true,3836 // so it runs before component update effects in pre flush mode3837 computed: true,3838 onTrack,3839 onTrigger,3840 scheduler: applyCb ? () => scheduler(applyCb) : scheduler3841 });3842 recordInstanceBoundEffect(runner);3843 // initial run3844 if (applyCb) {3845 if (immediate) {3846 applyCb();3847 }3848 else {3849 oldValue = runner();3850 }3851 }3852 else {3853 runner();3854 }3855 return () => {3856 stop(runner);3857 if (instance) {3858 remove(instance.effects, runner);3859 }3860 };3861 }3862 // this.$watch3863 function instanceWatch(source, cb, options) {3864 const publicThis = this.proxy;3865 const getter = isString(source)3866 ? () => publicThis[source]3867 : source.bind(publicThis);3868 const stop = watch(getter, cb.bind(publicThis), options);3869 onBeforeUnmount(stop, this);3870 return stop;3871 }3872 function traverse(value, seen = new Set()) {3873 if (!isObject(value) || seen.has(value)) {3874 return value;3875 }3876 seen.add(value);3877 if (isArray(value)) {3878 for (let i = 0; i < value.length; i++) {3879 traverse(value[i], seen);3880 }3881 }3882 else if (value instanceof Map) {3883 value.forEach((v, key) => {3884 // to register mutation dep for existing keys3885 traverse(value.get(key), seen);3886 });3887 }3888 else if (value instanceof Set) {3889 value.forEach(v => {3890 traverse(v, seen);3891 });3892 }3893 else {3894 for (const key in value) {3895 traverse(value[key], seen);3896 }3897 }3898 return value;3899 }3900 function provide(key, value) {3901 if (!currentInstance) {3902 {3903 warn(`provide() can only be used inside setup().`);3904 }3905 }3906 else {3907 let provides = currentInstance.provides;3908 // by default an instance inherits its parent's provides object3909 // but when it needs to provide values of its own, it creates its3910 // own provides object using parent provides object as prototype.3911 // this way in `inject` we can simply look up injections from direct3912 // parent and let the prototype chain do the work.3913 const parentProvides = currentInstance.parent && currentInstance.parent.provides;3914 if (parentProvides === provides) {3915 provides = currentInstance.provides = Object.create(parentProvides);3916 }3917 // TS doesn't allow symbol as index type3918 provides[key] = value;3919 }3920 }3921 function inject(key, defaultValue) {3922 // fallback to `currentRenderingInstance` so that this can be called in3923 // a functional component3924 const instance = currentInstance || currentRenderingInstance;3925 if (instance) {3926 const provides = instance.provides;3927 if (key in provides) {3928 // TS doesn't allow symbol as index type3929 return provides[key];3930 }3931 else if (arguments.length > 1) {3932 return defaultValue;3933 }3934 else {3935 warn(`injection "${String(key)}" not found.`);3936 }3937 }3938 else {3939 warn(`inject() can only be used inside setup() or functional components.`);3940 }3941 }3942 function createDuplicateChecker() {3943 const cache = Object.create(null);3944 return (type, key) => {3945 if (cache[key]) {3946 warn(`${type} property "${key}" is already defined in ${cache[key]}.`);3947 }3948 else {3949 cache[key] = type;3950 }3951 };3952 }3953 function applyOptions(instance, options, deferredData = [], deferredWatch = [], asMixin = false) {3954 const { 3955 // composition3956 mixins, extends: extendsOptions, 3957 // state3958 props: propsOptions, data: dataOptions, computed: computedOptions, methods, watch: watchOptions, provide: provideOptions, inject: injectOptions, 3959 // assets3960 components, directives, 3961 // lifecycle3962 beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeUnmount, unmounted, renderTracked, renderTriggered, errorCaptured } = options;3963 const publicThis = instance.proxy;3964 const ctx = instance.ctx;3965 const globalMixins = instance.appContext.mixins;3966 // call it only during dev3967 // applyOptions is called non-as-mixin once per instance3968 if (!asMixin) {3969 callSyncHook('beforeCreate', options, publicThis, globalMixins);3970 // global mixins are applied first3971 applyMixins(instance, globalMixins, deferredData, deferredWatch);3972 }3973 // extending a base component...3974 if (extendsOptions) {3975 applyOptions(instance, extendsOptions, deferredData, deferredWatch, true);3976 }3977 // local mixins3978 if (mixins) {3979 applyMixins(instance, mixins, deferredData, deferredWatch);3980 }3981 const checkDuplicateProperties = createDuplicateChecker() ;3982 if ( propsOptions) {3983 for (const key in normalizePropsOptions(propsOptions)[0]) {3984 checkDuplicateProperties("Props" /* PROPS */, key);3985 }3986 }3987 // options initialization order (to be consistent with Vue 2):3988 // - props (already done outside of this function)3989 // - inject3990 // - methods3991 // - data (deferred since it relies on `this` access)3992 // - computed3993 // - watch (deferred since it relies on `this` access)3994 if (injectOptions) {3995 if (isArray(injectOptions)) {3996 for (let i = 0; i < injectOptions.length; i++) {3997 const key = injectOptions[i];3998 ctx[key] = inject(key);3999 {4000 checkDuplicateProperties("Inject" /* INJECT */, key);4001 }4002 }4003 }4004 else {4005 for (const key in injectOptions) {4006 const opt = injectOptions[key];4007 if (isObject(opt)) {4008 ctx[key] = inject(opt.from, opt.default);4009 }4010 else {4011 ctx[key] = inject(opt);4012 }4013 {4014 checkDuplicateProperties("Inject" /* INJECT */, key);4015 }4016 }4017 }4018 }4019 if (methods) {4020 for (const key in methods) {4021 const methodHandler = methods[key];4022 if (isFunction(methodHandler)) {4023 ctx[key] = methodHandler.bind(publicThis);4024 {4025 checkDuplicateProperties("Methods" /* METHODS */, key);4026 }4027 }4028 else {4029 warn(`Method "${key}" has type "${typeof methodHandler}" in the component definition. ` +4030 `Did you reference the function correctly?`);4031 }4032 }4033 }4034 if (dataOptions) {4035 if ( !isFunction(dataOptions)) {4036 warn(`The data option must be a function. ` +4037 `Plain object usage is no longer supported.`);4038 }4039 if (asMixin) {4040 deferredData.push(dataOptions);4041 }4042 else {4043 resolveData(instance, dataOptions, publicThis);4044 }4045 }4046 if (!asMixin) {4047 if (deferredData.length) {4048 deferredData.forEach(dataFn => resolveData(instance, dataFn, publicThis));4049 }4050 {4051 const rawData = toRaw(instance.data);4052 for (const key in rawData) {4053 checkDuplicateProperties("Data" /* DATA */, key);4054 // expose data on ctx during dev4055 Object.defineProperty(ctx, key, {4056 configurable: true,4057 enumerable: true,4058 get: () => rawData[key],4059 set: NOOP4060 });4061 }4062 }4063 }4064 if (computedOptions) {4065 for (const key in computedOptions) {4066 const opt = computedOptions[key];4067 const get = isFunction(opt)4068 ? opt.bind(publicThis, publicThis)4069 : isFunction(opt.get)4070 ? opt.get.bind(publicThis, publicThis)4071 : NOOP;4072 if ( get === NOOP) {4073 warn(`Computed property "${key}" has no getter.`);4074 }4075 const set = !isFunction(opt) && isFunction(opt.set)4076 ? opt.set.bind(publicThis)4077 : () => {4078 warn(`Write operation failed: computed property "${key}" is readonly.`);4079 }4080 ;4081 const c = computed$1({4082 get,4083 set4084 });4085 Object.defineProperty(ctx, key, {4086 enumerable: true,4087 configurable: true,4088 get: () => c.value,4089 set: v => (c.value = v)4090 });4091 {4092 checkDuplicateProperties("Computed" /* COMPUTED */, key);4093 }4094 }4095 }4096 if (watchOptions) {4097 deferredWatch.push(watchOptions);4098 }4099 if (!asMixin && deferredWatch.length) {4100 deferredWatch.forEach(watchOptions => {4101 for (const key in watchOptions) {4102 createWatcher(watchOptions[key], ctx, publicThis, key);4103 }4104 });4105 }4106 if (provideOptions) {4107 const provides = isFunction(provideOptions)4108 ? provideOptions.call(publicThis)4109 : provideOptions;4110 for (const key in provides) {4111 provide(key, provides[key]);4112 }4113 }4114 // asset options4115 if (components) {4116 extend(instance.components, components);4117 }4118 if (directives) {4119 extend(instance.directives, directives);4120 }4121 // lifecycle options4122 if (!asMixin) {4123 callSyncHook('created', options, publicThis, globalMixins);4124 }4125 if (beforeMount) {4126 onBeforeMount(beforeMount.bind(publicThis));4127 }4128 if (mounted) {4129 onMounted(mounted.bind(publicThis));4130 }4131 if (beforeUpdate) {4132 onBeforeUpdate(beforeUpdate.bind(publicThis));4133 }4134 if (updated) {4135 onUpdated(updated.bind(publicThis));4136 }4137 if (activated) {4138 onActivated(activated.bind(publicThis));4139 }4140 if (deactivated) {4141 onDeactivated(deactivated.bind(publicThis));4142 }4143 if (errorCaptured) {4144 onErrorCaptured(errorCaptured.bind(publicThis));4145 }4146 if (renderTracked) {4147 onRenderTracked(renderTracked.bind(publicThis));4148 }4149 if (renderTriggered) {4150 onRenderTriggered(renderTriggered.bind(publicThis));4151 }4152 if (beforeUnmount) {4153 onBeforeUnmount(beforeUnmount.bind(publicThis));4154 }4155 if (unmounted) {4156 onUnmounted(unmounted.bind(publicThis));4157 }4158 }4159 function callSyncHook(name, options, ctx, globalMixins) {4160 callHookFromMixins(name, globalMixins, ctx);4161 const baseHook = options.extends && options.extends[name];4162 if (baseHook) {4163 baseHook.call(ctx);4164 }4165 const mixins = options.mixins;4166 if (mixins) {4167 callHookFromMixins(name, mixins, ctx);4168 }4169 const selfHook = options[name];4170 if (selfHook) {4171 selfHook.call(ctx);4172 }4173 }4174 function callHookFromMixins(name, mixins, ctx) {4175 for (let i = 0; i < mixins.length; i++) {4176 const fn = mixins[i][name];4177 if (fn) {4178 fn.call(ctx);4179 }4180 }4181 }4182 function applyMixins(instance, mixins, deferredData, deferredWatch) {4183 for (let i = 0; i < mixins.length; i++) {4184 applyOptions(instance, mixins[i], deferredData, deferredWatch, true);4185 }4186 }4187 function resolveData(instance, dataFn, publicThis) {4188 const data = dataFn.call(publicThis, publicThis);4189 if ( isPromise(data)) {4190 warn(`data() returned a Promise - note data() cannot be async; If you ` +4191 `intend to perform data fetching before component renders, use ` +4192 `async setup() + <Suspense>.`);4193 }4194 if (!isObject(data)) {4195 warn(`data() should return an object.`);4196 }4197 else if (instance.data === EMPTY_OBJ) {4198 instance.data = reactive(data);4199 }4200 else {4201 // existing data: this is a mixin or extends.4202 extend(instance.data, data);4203 }4204 }4205 function createWatcher(raw, ctx, publicThis, key) {4206 const getter = () => publicThis[key];4207 if (isString(raw)) {4208 const handler = ctx[raw];4209 if (isFunction(handler)) {4210 watch(getter, handler);4211 }4212 else {4213 warn(`Invalid watch handler specified by key "${raw}"`, handler);4214 }4215 }4216 else if (isFunction(raw)) {4217 watch(getter, raw.bind(publicThis));4218 }4219 else if (isObject(raw)) {4220 if (isArray(raw)) {4221 raw.forEach(r => createWatcher(r, ctx, publicThis, key));4222 }4223 else {4224 watch(getter, raw.handler.bind(publicThis), raw);4225 }4226 }4227 else {4228 warn(`Invalid watch option: "${key}"`);4229 }4230 }4231 function resolveMergedOptions(instance) {4232 const raw = instance.type;4233 const { __merged, mixins, extends: extendsOptions } = raw;4234 if (__merged)4235 return __merged;4236 const globalMixins = instance.appContext.mixins;4237 if (!globalMixins.length && !mixins && !extendsOptions)4238 return raw;4239 const options = {};4240 globalMixins.forEach(m => mergeOptions(options, m, instance));4241 extendsOptions && mergeOptions(options, extendsOptions, instance);4242 mixins && mixins.forEach(m => mergeOptions(options, m, instance));4243 mergeOptions(options, raw, instance);4244 return (raw.__merged = options);4245 }4246 function mergeOptions(to, from, instance) {4247 const strats = instance.appContext.config.optionMergeStrategies;4248 for (const key in from) {4249 const strat = strats && strats[key];4250 if (strat) {4251 to[key] = strat(to[key], from[key], instance.proxy, key);4252 }4253 else if (!hasOwn(to, key)) {4254 to[key] = from[key];4255 }4256 }4257 }4258 const publicPropertiesMap = {4259 $: i => i,4260 $el: i => i.vnode.el,4261 $data: i => i.data,4262 $props: i => ( shallowReadonly(i.props) ),4263 $attrs: i => ( shallowReadonly(i.attrs) ),4264 $slots: i => ( shallowReadonly(i.slots) ),4265 $refs: i => ( shallowReadonly(i.refs) ),4266 $parent: i => i.parent && i.parent.proxy,4267 $root: i => i.root && i.root.proxy,4268 $emit: i => i.emit,4269 $options: i => ( resolveMergedOptions(i) ),4270 $forceUpdate: i => () => queueJob(i.update),4271 $nextTick: () => nextTick,4272 $watch: i => instanceWatch.bind(i) 4273 };4274 const PublicInstanceProxyHandlers = {4275 get({ _: instance }, key) {4276 const { ctx, setupState, data, props, accessCache, type, appContext } = instance;4277 // data / props / ctx4278 // This getter gets called for every property access on the render context4279 // during render and is a major hotspot. The most expensive part of this4280 // is the multiple hasOwn() calls. It's much faster to do a simple property4281 // access on a plain object, so we use an accessCache object (with null4282 // prototype) to memoize what access type a key corresponds to.4283 if (key[0] !== '$') {4284 const n = accessCache[key];4285 if (n !== undefined) {4286 switch (n) {4287 case 0 /* SETUP */:4288 return setupState[key];4289 case 1 /* DATA */:4290 return data[key];4291 case 3 /* CONTEXT */:4292 return ctx[key];4293 case 2 /* PROPS */:4294 return props[key];4295 // default: just fallthrough4296 }4297 }4298 else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {4299 accessCache[key] = 0 /* SETUP */;4300 return setupState[key];4301 }4302 else if (data !== EMPTY_OBJ && hasOwn(data, key)) {4303 accessCache[key] = 1 /* DATA */;4304 return data[key];4305 }4306 else if (4307 // only cache other properties when instance has declared (thus stable)4308 // props4309 type.props &&4310 hasOwn(normalizePropsOptions(type.props)[0], key)) {4311 accessCache[key] = 2 /* PROPS */;4312 return props[key];4313 }4314 else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {4315 accessCache[key] = 3 /* CONTEXT */;4316 return ctx[key];4317 }4318 else {4319 accessCache[key] = 4 /* OTHER */;4320 }4321 }4322 const publicGetter = publicPropertiesMap[key];4323 let cssModule, globalProperties;4324 // public $xxx properties4325 if (publicGetter) {4326 if ( key === '$attrs') {4327 markAttrsAccessed();4328 }4329 return publicGetter(instance);4330 }4331 else if (4332 // css module (injected by vue-loader)4333 (cssModule = type.__cssModules) &&4334 (cssModule = cssModule[key])) {4335 return cssModule;4336 }4337 else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {4338 // user may set custom properties to `this` that start with `$`4339 accessCache[key] = 3 /* CONTEXT */;4340 return ctx[key];4341 }4342 else if (4343 // global properties4344 ((globalProperties = appContext.config.globalProperties),4345 hasOwn(globalProperties, key))) {4346 return globalProperties[key];4347 }4348 else if ( currentRenderingInstance) {4349 warn(`Property ${JSON.stringify(key)} was accessed during render ` +4350 `but is not defined on instance.`);4351 }4352 },4353 set({ _: instance }, key, value) {4354 const { data, setupState, ctx } = instance;4355 if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {4356 setupState[key] = value;4357 }4358 else if (data !== EMPTY_OBJ && hasOwn(data, key)) {4359 data[key] = value;4360 }4361 else if (key in instance.props) {4362 4363 warn(`Attempting to mutate prop "${key}". Props are readonly.`, instance);4364 return false;4365 }4366 if (key[0] === '$' && key.slice(1) in instance) {4367 4368 warn(`Attempting to mutate public property "${key}". ` +4369 `Properties starting with $ are reserved and readonly.`, instance);4370 return false;4371 }4372 else {4373 if ( key in instance.appContext.config.globalProperties) {4374 Object.defineProperty(ctx, key, {4375 enumerable: true,4376 configurable: true,4377 value4378 });4379 }4380 else {4381 ctx[key] = value;4382 }4383 }4384 return true;4385 },4386 has({ _: { data, setupState, accessCache, ctx, type, appContext } }, key) {4387 return (accessCache[key] !== undefined ||4388 (data !== EMPTY_OBJ && hasOwn(data, key)) ||4389 (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) ||4390 (type.props && hasOwn(normalizePropsOptions(type.props)[0], key)) ||4391 hasOwn(ctx, key) ||4392 hasOwn(publicPropertiesMap, key) ||4393 hasOwn(appContext.config.globalProperties, key));4394 }4395 };4396 {4397 PublicInstanceProxyHandlers.ownKeys = (target) => {4398 warn(`Avoid app logic that relies on enumerating keys on a component instance. ` +4399 `The keys will be empty in production mode to avoid performance overhead.`);4400 return Reflect.ownKeys(target);4401 };4402 }4403 const RuntimeCompiledPublicInstanceProxyHandlers = {4404 ...PublicInstanceProxyHandlers,4405 get(target, key) {4406 // fast path for unscopables when using `with` block4407 if (key === Symbol.unscopables) {4408 return;4409 }4410 return PublicInstanceProxyHandlers.get(target, key, target);4411 },4412 has(_, key) {4413 return key[0] !== '_' && !isGloballyWhitelisted(key);4414 }4415 };4416 // In dev mode, the proxy target exposes the same properties as seen on `this`4417 // for easier console inspection. In prod mode it will be an empty object so4418 // these properties definitions can be skipped.4419 function createRenderContext(instance) {4420 const target = {};4421 // expose internal instance for proxy handlers4422 Object.defineProperty(target, `_`, {4423 configurable: true,4424 enumerable: false,4425 get: () => instance4426 });4427 // expose public properties4428 Object.keys(publicPropertiesMap).forEach(key => {4429 Object.defineProperty(target, key, {4430 configurable: true,4431 enumerable: false,4432 get: () => publicPropertiesMap[key](instance),4433 // intercepted by the proxy so no need for implementation,4434 // but needed to prevent set errors4435 set: NOOP4436 });4437 });4438 // expose global properties4439 const { globalProperties } = instance.appContext.config;4440 Object.keys(globalProperties).forEach(key => {4441 Object.defineProperty(target, key, {4442 configurable: true,4443 enumerable: false,4444 get: () => globalProperties[key],4445 set: NOOP4446 });4447 });4448 return target;4449 }4450 // dev only4451 function exposePropsOnRenderContext(instance) {4452 const { ctx, type: { props: propsOptions } } = instance;4453 if (propsOptions) {4454 Object.keys(normalizePropsOptions(propsOptions)[0]).forEach(key => {4455 Object.defineProperty(ctx, key, {4456 enumerable: true,4457 configurable: true,4458 get: () => instance.props[key],4459 set: NOOP4460 });4461 });4462 }4463 }4464 // dev only4465 function exposeSetupStateOnRenderContext(instance) {4466 const { ctx, setupState } = instance;4467 Object.keys(toRaw(setupState)).forEach(key => {4468 Object.defineProperty(ctx, key, {4469 enumerable: true,4470 configurable: true,4471 get: () => setupState[key],4472 set: NOOP4473 });4474 });4475 }4476 const emptyAppContext = createAppContext();4477 let uid$1 = 0;4478 function createComponentInstance(vnode, parent, suspense) {4479 // inherit parent app context - or - if root, adopt from root vnode4480 const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext;4481 const instance = {4482 uid: uid$1++,4483 vnode,4484 parent,4485 appContext,4486 type: vnode.type,4487 root: null,4488 next: null,4489 subTree: null,4490 update: null,4491 render: null,4492 proxy: null,4493 withProxy: null,4494 effects: null,4495 provides: parent ? parent.provides : Object.create(appContext.provides),4496 accessCache: null,4497 renderCache: [],4498 // state4499 ctx: EMPTY_OBJ,4500 data: EMPTY_OBJ,4501 props: EMPTY_OBJ,4502 attrs: EMPTY_OBJ,4503 slots: EMPTY_OBJ,4504 refs: EMPTY_OBJ,4505 setupState: EMPTY_OBJ,4506 setupContext: null,4507 // per-instance asset storage (mutable during options resolution)4508 components: Object.create(appContext.components),4509 directives: Object.create(appContext.directives),4510 // suspense related4511 suspense,4512 asyncDep: null,4513 asyncResolved: false,4514 // lifecycle hooks4515 // not using enums here because it results in computed properties4516 isMounted: false,4517 isUnmounted: false,4518 isDeactivated: false,4519 bc: null,4520 c: null,4521 bm: null,4522 m: null,4523 bu: null,4524 u: null,4525 um: null,4526 bum: null,4527 da: null,4528 a: null,4529 rtg: null,4530 rtc: null,4531 ec: null,4532 emit: null // to be set immediately4533 };4534 {4535 instance.ctx = createRenderContext(instance);4536 }4537 instance.root = parent ? parent.root : instance;4538 instance.emit = emit.bind(null, instance);4539 return instance;4540 }4541 let currentInstance = null;4542 const setCurrentInstance = (instance) => {4543 currentInstance = instance;4544 };4545 const isBuiltInTag = /*#__PURE__*/ makeMap('slot,component');4546 function validateComponentName(name, config) {4547 const appIsNativeTag = config.isNativeTag || NO;4548 if (isBuiltInTag(name) || appIsNativeTag(name)) {4549 warn('Do not use built-in or reserved HTML elements as component id: ' + name);4550 }4551 }4552 let isInSSRComponentSetup = false;4553 function setupComponent(instance, isSSR = false) {4554 isInSSRComponentSetup = isSSR;4555 const { props, children, shapeFlag } = instance.vnode;4556 const isStateful = shapeFlag & 4 /* STATEFUL_COMPONENT */;4557 initProps(instance, props, isStateful, isSSR);4558 initSlots(instance, children);4559 const setupResult = isStateful4560 ? setupStatefulComponent(instance, isSSR)4561 : undefined;4562 isInSSRComponentSetup = false;4563 return setupResult;4564 }4565 function setupStatefulComponent(instance, isSSR) {4566 const Component = instance.type;4567 {4568 if (Component.name) {4569 validateComponentName(Component.name, instance.appContext.config);4570 }4571 if (Component.components) {4572 const names = Object.keys(Component.components);4573 for (let i = 0; i < names.length; i++) {4574 validateComponentName(names[i], instance.appContext.config);4575 }4576 }4577 if (Component.directives) {4578 const names = Object.keys(Component.directives);4579 for (let i = 0; i < names.length; i++) {4580 validateDirectiveName(names[i]);4581 }4582 }4583 }4584 // 0. create render proxy property access cache4585 instance.accessCache = {};4586 // 1. create public instance / render proxy4587 instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers);4588 {4589 exposePropsOnRenderContext(instance);4590 }4591 // 2. call setup()4592 const { setup } = Component;4593 if (setup) {4594 const setupContext = (instance.setupContext =4595 setup.length > 1 ? createSetupContext(instance) : null);4596 currentInstance = instance;4597 pauseTracking();4598 const setupResult = callWithErrorHandling(setup, instance, 0 /* SETUP_FUNCTION */, [ shallowReadonly(instance.props) , setupContext]);4599 resetTracking();4600 currentInstance = null;4601 if (isPromise(setupResult)) {4602 if (isSSR) {4603 // return the promise so server-renderer can wait on it4604 return setupResult.then((resolvedResult) => {4605 handleSetupResult(instance, resolvedResult);4606 });4607 }4608 else {4609 // async setup returned Promise.4610 // bail here and wait for re-entry.4611 instance.asyncDep = setupResult;4612 }4613 }4614 else {4615 handleSetupResult(instance, setupResult);4616 }4617 }4618 else {4619 finishComponentSetup(instance);4620 }4621 }4622 function handleSetupResult(instance, setupResult, isSSR) {4623 if (isFunction(setupResult)) {4624 // setup returned an inline render function4625 instance.render = setupResult;4626 }4627 else if (isObject(setupResult)) {4628 if ( isVNode(setupResult)) {4629 warn(`setup() should not return VNodes directly - ` +4630 `return a render function instead.`);4631 }4632 // setup returned bindings.4633 // assuming a render function compiled from template is present.4634 instance.setupState = reactive(setupResult);4635 {4636 exposeSetupStateOnRenderContext(instance);4637 }4638 }4639 else if ( setupResult !== undefined) {4640 warn(`setup() should return an object. Received: ${setupResult === null ? 'null' : typeof setupResult}`);4641 }4642 finishComponentSetup(instance);4643 }4644 function finishComponentSetup(instance, isSSR) {4645 const Component = instance.type;4646 // template / render function normalization4647 if (!instance.render) {4648 if ( !Component.render) {4649 /* istanbul ignore if */4650 if ( Component.template) {4651 warn(`Component provided template option but ` +4652 `runtime compilation is not supported in this build of Vue.` +4653 ( ` Use "vue.global.js" instead.`4654 ) /* should not happen */);4655 }4656 else {4657 warn(`Component is missing template or render function.`);4658 }4659 }4660 instance.render = (Component.render || NOOP);4661 // for runtime-compiled render functions using `with` blocks, the render4662 // proxy used needs a different `has` handler which is more performant and4663 // also only allows a whitelist of globals to fallthrough.4664 if (instance.render._rc) {4665 instance.withProxy = new Proxy(instance.ctx, RuntimeCompiledPublicInstanceProxyHandlers);4666 }4667 }4668 // support for 2.x options4669 {4670 currentInstance = instance;4671 applyOptions(instance, Component);4672 currentInstance = null;4673 }4674 }4675 const attrHandlers = {4676 get: (target, key) => {4677 {4678 markAttrsAccessed();4679 }4680 return target[key];4681 },4682 set: () => {4683 warn(`setupContext.attrs is readonly.`);4684 return false;4685 },4686 deleteProperty: () => {4687 warn(`setupContext.attrs is readonly.`);4688 return false;4689 }4690 };4691 function createSetupContext(instance) {4692 { ...

bundle.esm.js

Source:bundle.esm.js

...1196// dev only flag to track whether $attrs was used during render.1197// If $attrs was used during render then the warning for failed attrs1198// fallthrough can be suppressed.1199let accessedAttrs = false;1200function markAttrsAccessed() {1201 accessedAttrs = true;1202}1203function renderComponentRoot(instance) {1204 const { type: Component, parent, vnode, proxy, withProxy, props, slots, attrs, emit, renderCache } = instance;1205 let result;1206 currentRenderingInstance = instance;1207 {1208 accessedAttrs = false;1209 }1210 try {1211 let fallthroughAttrs;1212 if (vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {1213 // withProxy is a proxy with a different `has` trap only for1214 // runtime-compiled render functions using `with` block.1215 const proxyToUse = withProxy || proxy;1216 result = normalizeVNode(instance.render.call(proxyToUse, proxyToUse, renderCache));1217 fallthroughAttrs = attrs;1218 }1219 else {1220 // functional1221 const render = Component;1222 // in dev, mark attrs accessed if optional props (attrs === props)1223 if (true && attrs === props) {1224 markAttrsAccessed();1225 }1226 result = normalizeVNode(render.length > 11227 ? render(props, true1228 ? {1229 get attrs() {1230 markAttrsAccessed();1231 return attrs;1232 },1233 slots,1234 emit1235 }1236 : { attrs, slots, emit })1237 : render(props, null /* we know it doesn't need it */));1238 fallthroughAttrs = Component.props ? attrs : getFallthroughAttrs(attrs);1239 }1240 // attr merging1241 // in dev mode, comments are preserved, and it's possible for a template1242 // to have comments along side the root element which makes it a fragment1243 let root = result;1244 let setRoot = undefined;1245 if (true) {1246 ;1247 [root, setRoot] = getChildRoot(result);1248 }1249 if (Component.inheritAttrs !== false &&1250 fallthroughAttrs &&1251 Object.keys(fallthroughAttrs).length) {1252 if (root.shapeFlag & 1 /* ELEMENT */ ||1253 root.shapeFlag & 6 /* COMPONENT */) {1254 root = cloneVNode(root, fallthroughAttrs);1255 }1256 else if (true && !accessedAttrs && root.type !== Comment) {1257 const allAttrs = Object.keys(attrs);1258 const eventAttrs = [];1259 const extraAttrs = [];1260 for (let i = 0, l = allAttrs.length; i < l; i++) {1261 const key = allAttrs[i];1262 if (isOn(key)) {1263 // remove `on`, lowercase first letter to reflect event casing accurately1264 eventAttrs.push(key[2].toLowerCase() + key.slice(3));1265 }1266 else {1267 extraAttrs.push(key);1268 }1269 }1270 if (extraAttrs.length) {1271 warn(`Extraneous non-props attributes (` +1272 `${extraAttrs.join(', ')}) ` +1273 `were passed to component but could not be automatically inherited ` +1274 `because component renders fragment or text root nodes.`);1275 }1276 if (eventAttrs.length) {1277 warn(`Extraneous non-emits event listeners (` +1278 `${eventAttrs.join(', ')}) ` +1279 `were passed to component but could not be automatically inherited ` +1280 `because component renders fragment or text root nodes. ` +1281 `If the listener is intended to be a component custom event listener only, ` +1282 `declare it using the "emits" option.`);1283 }1284 }1285 }1286 // inherit scopeId1287 const parentScopeId = parent && parent.type.__scopeId;1288 if (parentScopeId) {1289 root = cloneVNode(root, { [parentScopeId]: '' });1290 }1291 // inherit directives1292 if (vnode.dirs) {1293 if (true && !isElementRoot(root)) {1294 warn(`Runtime directive used on component with non-element root node. ` +1295 `The directives will not function as intended.`);1296 }1297 root.dirs = vnode.dirs;1298 }1299 // inherit transition data1300 if (vnode.transition) {1301 if (true && !isElementRoot(root)) {1302 warn(`Component inside <Transition> renders non-element root node ` +1303 `that cannot be animated.`);1304 }1305 root.transition = vnode.transition;1306 }1307 if (true && setRoot) {1308 setRoot(root);1309 }1310 else {1311 result = root;1312 }1313 }1314 catch (err) {1315 handleError(err, instance, 1 /* RENDER_FUNCTION */);1316 result = createVNode(Comment);1317 }1318 currentRenderingInstance = null;1319 return result;1320}1321const getChildRoot = (vnode) => {1322 if (vnode.type !== Fragment) {1323 return [vnode, undefined];1324 }1325 const rawChildren = vnode.children;1326 const dynamicChildren = vnode.dynamicChildren;1327 const children = rawChildren.filter(child => {1328 return !(isVNode(child) && child.type === Comment);1329 });1330 if (children.length !== 1) {1331 return [vnode, undefined];1332 }1333 const childRoot = children[0];1334 const index = rawChildren.indexOf(childRoot);1335 const dynamicIndex = dynamicChildren1336 ? dynamicChildren.indexOf(childRoot)1337 : null;1338 const setRoot = (updatedRoot) => {1339 rawChildren[index] = updatedRoot;1340 if (dynamicIndex !== null)1341 dynamicChildren[dynamicIndex] = updatedRoot;1342 };1343 return [normalizeVNode(childRoot), setRoot];1344};1345const getFallthroughAttrs = (attrs) => {1346 let res;1347 for (const key in attrs) {1348 if (key === 'class' || key === 'style' || isOn(key)) {1349 (res || (res = {}))[key] = attrs[key];1350 }1351 }1352 return res;1353};1354const isElementRoot = (vnode) => {1355 return (vnode.shapeFlag & 6 /* COMPONENT */ ||1356 vnode.shapeFlag & 1 /* ELEMENT */ ||1357 vnode.type === Comment // potential v-if branch switch1358 );1359};1360function shouldUpdateComponent(prevVNode, nextVNode, parentComponent, optimized) {1361 const { props: prevProps, children: prevChildren } = prevVNode;1362 const { props: nextProps, children: nextChildren, patchFlag } = nextVNode;1363 // Parent component's render function was hot-updated. Since this may have1364 // caused the child component's slots content to have changed, we need to1365 // force the child to update as well.1366 if (1367 (prevChildren || nextChildren) &&1368 parentComponent &&1369 parentComponent.renderUpdated) {1370 return true;1371 }1372 // force child update for runtime directive or transition on component vnode.1373 if (nextVNode.dirs || nextVNode.transition) {1374 return true;1375 }1376 if (patchFlag > 0) {1377 if (patchFlag & 1024 /* DYNAMIC_SLOTS */) {1378 // slot content that references values that might have changed,1379 // e.g. in a v-for1380 return true;1381 }1382 if (patchFlag & 16 /* FULL_PROPS */) {1383 // presence of this flag indicates props are always non-null1384 return hasPropsChanged(prevProps, nextProps);1385 }1386 else if (patchFlag & 8 /* PROPS */) {1387 const dynamicProps = nextVNode.dynamicProps;1388 for (let i = 0; i < dynamicProps.length; i++) {1389 const key = dynamicProps[i];1390 if (nextProps[key] !== prevProps[key]) {1391 return true;1392 }1393 }1394 }1395 }1396 else if (!optimized) {1397 // this path is only taken by manually written render functions1398 // so presence of any children leads to a forced update1399 if (prevChildren || nextChildren) {1400 if (!nextChildren || !nextChildren.$stable) {1401 return true;1402 }1403 }1404 if (prevProps === nextProps) {1405 return false;1406 }1407 if (!prevProps) {1408 return !!nextProps;1409 }1410 if (!nextProps) {1411 return true;1412 }1413 return hasPropsChanged(prevProps, nextProps);1414 }1415 return false;1416}1417function hasPropsChanged(prevProps, nextProps) {1418 const nextKeys = Object.keys(nextProps);1419 if (nextKeys.length !== Object.keys(prevProps).length) {1420 return true;1421 }1422 for (let i = 0; i < nextKeys.length; i++) {1423 const key = nextKeys[i];1424 if (nextProps[key] !== prevProps[key]) {1425 return true;1426 }1427 }1428 return false;1429}1430function updateHOCHostEl({ vnode, parent }, el // HostNode1431) {1432 while (parent && parent.subTree === vnode) {1433 (vnode = parent.vnode).el = el;1434 parent = parent.parent;1435 }1436}1437const isSuspense = (type) => type.__isSuspense;1438function queueEffectWithSuspense(fn, suspense) {1439 if (suspense && !suspense.isResolved) {1440 if (isArray(fn)) {1441 suspense.effects.push(...fn);1442 }1443 else {1444 suspense.effects.push(fn);1445 }1446 }1447 else {1448 queuePostFlushCb(fn);1449 }1450}1451/**1452 * Wrap a slot function to memoize current rendering instance1453 * @internal1454 */1455function withCtx(fn, ctx = currentRenderingInstance) {1456 if (!ctx)1457 return fn;1458 return function renderFnWithContext() {1459 const owner = currentRenderingInstance;1460 setCurrentRenderingInstance(ctx);1461 const res = fn.apply(null, arguments);1462 setCurrentRenderingInstance(owner);1463 return res;1464 };1465}1466// SFC scoped style ID management.1467let currentScopeId = null;1468const scopeIdStack = [];1469/**1470 * @internal1471 */1472function pushScopeId(id) {1473 scopeIdStack.push((currentScopeId = id));1474}1475/**1476 * @internal1477 */1478function popScopeId() {1479 scopeIdStack.pop();1480 currentScopeId = scopeIdStack[scopeIdStack.length - 1] || null;1481}1482/**1483 * @internal1484 */1485function withScopeId(id) {1486 return ((fn) => withCtx(function () {1487 pushScopeId(id);1488 const res = fn.apply(this, arguments);1489 popScopeId();1490 return res;1491 }));1492}1493const isTeleport = (type) => type.__isTeleport;1494const NULL_DYNAMIC_COMPONENT = Symbol();1495const Fragment = Symbol( 'Fragment' );1496const Text = Symbol( 'Text' );1497const Comment = Symbol( 'Comment' );1498const Static = Symbol( 'Static' );1499// Since v-if and v-for are the two possible ways node structure can dynamically1500// change, once we consider v-if branches and each v-for fragment a block, we1501// can divide a template into nested blocks, and within each block the node1502// structure would be stable. This allows us to skip most children diffing1503// and only worry about the dynamic nodes (indicated by patch flags).1504const blockStack = [];1505let currentBlock = null;1506/**1507 * Open a block.1508 * This must be called before `createBlock`. It cannot be part of `createBlock`1509 * because the children of the block are evaluated before `createBlock` itself1510 * is called. The generated code typically looks like this:1511 *1512 * ```js1513 * function render() {1514 * return (openBlock(),createBlock('div', null, [...]))1515 * }1516 * ```1517 * disableTracking is true when creating a fragment block, since a fragment1518 * always diffs its children.1519 *1520 * @internal1521 */1522function openBlock(disableTracking = false) {1523 blockStack.push((currentBlock = disableTracking ? null : []));1524}1525/**1526 * Create a block root vnode. Takes the same exact arguments as `createVNode`.1527 * A block root keeps track of dynamic nodes within the block in the1528 * `dynamicChildren` array.1529 *1530 * @internal1531 */1532function createBlock(type, props, children, patchFlag, dynamicProps) {1533 const vnode = createVNode(type, props, children, patchFlag, dynamicProps, true /* isBlock: prevent a block from tracking itself */);1534 // save current block children on the block vnode1535 vnode.dynamicChildren = currentBlock || EMPTY_ARR;1536 // close block1537 blockStack.pop();1538 currentBlock = blockStack[blockStack.length - 1] || null;1539 // a block is always going to be patched, so track it as a child of its1540 // parent block1541 if (currentBlock) {1542 currentBlock.push(vnode);1543 }1544 return vnode;1545}1546function isVNode(value) {1547 return value ? value.__v_isVNode === true : false;1548}1549function isSameVNodeType(n1, n2) {1550 if (1551 n2.shapeFlag & 6 /* COMPONENT */ &&1552 n2.type.__hmrUpdated) {1553 // HMR only: if the component has been hot-updated, force a reload.1554 return false;1555 }1556 return n1.type === n2.type && n1.key === n2.key;1557}1558const createVNodeWithArgsTransform = (...args) => {1559 return _createVNode(...( args));1560};1561const InternalObjectKey = `__vInternal`;1562const normalizeKey = ({ key }) => key != null ? key : null;1563const normalizeRef = ({ ref }) => (ref != null1564 ? isArray(ref)1565 ? ref1566 : [currentRenderingInstance, ref]1567 : null);1568const createVNode = ( createVNodeWithArgsTransform1569 );1570function _createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) {1571 if (!type || type === NULL_DYNAMIC_COMPONENT) {1572 if ( !type) {1573 warn(`Invalid vnode type when creating vnode: ${type}.`);1574 }1575 type = Comment;1576 }1577 // class component normalization.1578 if (isFunction(type) && '__vccOpts' in type) {1579 type = type.__vccOpts;1580 }1581 // class & style normalization.1582 if (props) {1583 // for reactive or proxy objects, we need to clone it to enable mutation.1584 if (isProxy(props) || InternalObjectKey in props) {1585 props = extend({}, props);1586 }1587 let { class: klass, style } = props;1588 if (klass && !isString(klass)) {1589 props.class = normalizeClass(klass);1590 }1591 if (isObject(style)) {1592 // reactive state objects need to be cloned since they are likely to be1593 // mutated1594 if (isProxy(style) && !isArray(style)) {1595 style = extend({}, style);1596 }1597 props.style = normalizeStyle(style);1598 }1599 }1600 // encode the vnode type information into a bitmap1601 const shapeFlag = isString(type)1602 ? 1 /* ELEMENT */1603 : isSuspense(type)1604 ? 128 /* SUSPENSE */1605 : isTeleport(type)1606 ? 64 /* TELEPORT */1607 : isObject(type)1608 ? 4 /* STATEFUL_COMPONENT */1609 : isFunction(type)1610 ? 2 /* FUNCTIONAL_COMPONENT */1611 : 0;1612 if ( shapeFlag & 4 /* STATEFUL_COMPONENT */ && isProxy(type)) {1613 type = toRaw(type);1614 warn(`Vue received a Component which was made a reactive object. This can ` +1615 `lead to unnecessary performance overhead, and should be avoided by ` +1616 `marking the component with \`markRaw\` or using \`shallowRef\` ` +1617 `instead of \`ref\`.`, `\nComponent that was made reactive: `, type);1618 }1619 const vnode = {1620 __v_isVNode: true,1621 __v_skip: true,1622 type,1623 props,1624 key: props && normalizeKey(props),1625 ref: props && normalizeRef(props),1626 scopeId: currentScopeId,1627 children: null,1628 component: null,1629 suspense: null,1630 dirs: null,1631 transition: null,1632 el: null,1633 anchor: null,1634 target: null,1635 targetAnchor: null,1636 shapeFlag,1637 patchFlag,1638 dynamicProps,1639 dynamicChildren: null,1640 appContext: null1641 };1642 normalizeChildren(vnode, children);1643 // presence of a patch flag indicates this node needs patching on updates.1644 // component nodes also should always be patched, because even if the1645 // component doesn't need to update, it needs to persist the instance on to1646 // the next vnode so that it can be properly unmounted later.1647 if (1648 !isBlockNode &&1649 currentBlock &&1650 // the EVENTS flag is only for hydration and if it is the only flag, the1651 // vnode should not be considered dynamic due to handler caching.1652 patchFlag !== 32 /* HYDRATE_EVENTS */ &&1653 (patchFlag > 0 ||1654 shapeFlag & 128 /* SUSPENSE */ ||1655 shapeFlag & 64 /* TELEPORT */ ||1656 shapeFlag & 4 /* STATEFUL_COMPONENT */ ||1657 shapeFlag & 2 /* FUNCTIONAL_COMPONENT */)) {1658 currentBlock.push(vnode);1659 }1660 return vnode;1661}1662function cloneVNode(vnode, extraProps) {1663 const props = (extraProps1664 ? vnode.props1665 ? mergeProps(vnode.props, extraProps)1666 : extend({}, extraProps)1667 : vnode.props);1668 // This is intentionally NOT using spread or extend to avoid the runtime1669 // key enumeration cost.1670 return {1671 __v_isVNode: true,1672 __v_skip: true,1673 type: vnode.type,1674 props,1675 key: props && normalizeKey(props),1676 ref: props && normalizeRef(props),1677 scopeId: vnode.scopeId,1678 children: vnode.children,1679 target: vnode.target,1680 targetAnchor: vnode.targetAnchor,1681 shapeFlag: vnode.shapeFlag,1682 // if the vnode is cloned with extra props, we can no longer assume its1683 // existing patch flag to be reliable and need to bail out of optimized mode.1684 // however we don't want block nodes to de-opt their children, so if the1685 // vnode is a block node, we only add the FULL_PROPS flag to it.1686 patchFlag: extraProps1687 ? vnode.dynamicChildren1688 ? vnode.patchFlag | 16 /* FULL_PROPS */1689 : -2 /* BAIL */1690 : vnode.patchFlag,1691 dynamicProps: vnode.dynamicProps,1692 dynamicChildren: vnode.dynamicChildren,1693 appContext: vnode.appContext,1694 dirs: vnode.dirs,1695 transition: vnode.transition,1696 // These should technically only be non-null on mounted VNodes. However,1697 // they *should* be copied for kept-alive vnodes. So we just always copy1698 // them since them being non-null during a mount doesn't affect the logic as1699 // they will simply be overwritten.1700 component: vnode.component,1701 suspense: vnode.suspense,1702 el: vnode.el,1703 anchor: vnode.anchor1704 };1705}1706/**1707 * @internal1708 */1709function createTextVNode(text = ' ', flag = 0) {1710 return createVNode(Text, null, text, flag);1711}1712function normalizeVNode(child) {1713 if (child == null || typeof child === 'boolean') {1714 // empty placeholder1715 return createVNode(Comment);1716 }1717 else if (isArray(child)) {1718 // fragment1719 return createVNode(Fragment, null, child);1720 }1721 else if (typeof child === 'object') {1722 // already vnode, this should be the most common since compiled templates1723 // always produce all-vnode children arrays1724 return child.el === null ? child : cloneVNode(child);1725 }1726 else {1727 // strings and numbers1728 return createVNode(Text, null, String(child));1729 }1730}1731// optimized normalization for template-compiled render fns1732function cloneIfMounted(child) {1733 return child.el === null ? child : cloneVNode(child);1734}1735function normalizeChildren(vnode, children) {1736 let type = 0;1737 const { shapeFlag } = vnode;1738 if (children == null) {1739 children = null;1740 }1741 else if (isArray(children)) {1742 type = 16 /* ARRAY_CHILDREN */;1743 }1744 else if (typeof children === 'object') {1745 // Normalize slot to plain children1746 if ((shapeFlag & 1 /* ELEMENT */ || shapeFlag & 64 /* TELEPORT */) &&1747 children.default) {1748 normalizeChildren(vnode, children.default());1749 return;1750 }1751 else {1752 type = 32 /* SLOTS_CHILDREN */;1753 if (!children._ && !(InternalObjectKey in children)) {1754 children._ctx = currentRenderingInstance;1755 }1756 }1757 }1758 else if (isFunction(children)) {1759 children = { default: children, _ctx: currentRenderingInstance };1760 type = 32 /* SLOTS_CHILDREN */;1761 }1762 else {1763 children = String(children);1764 // force teleport children to array so it can be moved around1765 if (shapeFlag & 64 /* TELEPORT */) {1766 type = 16 /* ARRAY_CHILDREN */;1767 children = [createTextVNode(children)];1768 }1769 else {1770 type = 8 /* TEXT_CHILDREN */;1771 }1772 }1773 vnode.children = children;1774 vnode.shapeFlag |= type;1775}1776const handlersRE = /^on|^vnode/;1777function mergeProps(...args) {1778 const ret = {};1779 extend(ret, args[0]);1780 for (let i = 1; i < args.length; i++) {1781 const toMerge = args[i];1782 for (const key in toMerge) {1783 if (key === 'class') {1784 if (ret.class !== toMerge.class) {1785 ret.class = normalizeClass([ret.class, toMerge.class]);1786 }1787 }1788 else if (key === 'style') {1789 ret.style = normalizeStyle([ret.style, toMerge.style]);1790 }1791 else if (handlersRE.test(key)) {1792 // on*, vnode*1793 const existing = ret[key];1794 const incoming = toMerge[key];1795 if (existing !== incoming) {1796 ret[key] = existing1797 ? [].concat(existing, toMerge[key])1798 : incoming;1799 }1800 }1801 else {1802 ret[key] = toMerge[key];1803 }1804 }1805 }1806 return ret;1807}1808function emit(instance, event, ...args) {1809 const props = instance.vnode.props || EMPTY_OBJ;1810 {1811 const options = normalizeEmitsOptions(instance.type.emits);1812 if (options) {1813 if (!(event in options)) {1814 const propsOptions = normalizePropsOptions(instance.type.props)[0];1815 if (!propsOptions || !(`on` + capitalize(event) in propsOptions)) {1816 warn(`Component emitted event "${event}" but it is neither declared in ` +1817 `the emits option nor as an "on${capitalize(event)}" prop.`);1818 }1819 }1820 else {1821 const validator = options[event];1822 if (isFunction(validator)) {1823 const isValid = validator(...args);1824 if (!isValid) {1825 warn(`Invalid event arguments: event validation failed for event "${event}".`);1826 }1827 }1828 }1829 }1830 }1831 let handler = props[`on${capitalize(event)}`];1832 // for v-model update:xxx events, also trigger kebab-case equivalent1833 // for props passed via kebab-case1834 if (!handler && event.startsWith('update:')) {1835 event = hyphenate(event);1836 handler = props[`on${capitalize(event)}`];1837 }1838 if (handler) {1839 callWithAsyncErrorHandling(handler, instance, 6 /* COMPONENT_EVENT_HANDLER */, args);1840 }1841}1842function normalizeEmitsOptions(options) {1843 if (!options) {1844 return;1845 }1846 else if (isArray(options)) {1847 if (options._n) {1848 return options._n;1849 }1850 const normalized = {};1851 options.forEach(key => (normalized[key] = null));1852 def(options, '_n', normalized);1853 return normalized;1854 }1855 else {1856 return options;1857 }1858}1859// Check if an incoming prop key is a declared emit event listener.1860// e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are1861// both considered matched listeners.1862function isEmitListener(emits, key) {1863 return (isOn(key) &&1864 (hasOwn((emits = normalizeEmitsOptions(emits)), key[2].toLowerCase() + key.slice(3)) ||1865 hasOwn(emits, key.slice(2))));1866}1867function initProps(instance, rawProps, isStateful, // result of bitwise flag comparison1868isSSR = false) {1869 const props = {};1870 const attrs = {};1871 def(attrs, InternalObjectKey, 1);1872 setFullProps(instance, rawProps, props, attrs);1873 const options = instance.type.props;1874 // validation1875 if ( options && rawProps) {1876 validateProps(props, options);1877 }1878 if (isStateful) {1879 // stateful1880 instance.props = isSSR ? props : shallowReactive(props);1881 }1882 else {1883 if (!options) {1884 // functional w/ optional props, props === attrs1885 instance.props = attrs;1886 }1887 else {1888 // functional w/ declared props1889 instance.props = props;1890 }1891 }1892 instance.attrs = attrs;1893}1894function updateProps(instance, rawProps, rawPrevProps, optimized) {1895 const { props, attrs, vnode: { patchFlag } } = instance;1896 const rawOptions = instance.type.props;1897 const rawCurrentProps = toRaw(props);1898 const { 0: options } = normalizePropsOptions(rawOptions);1899 if ((optimized || patchFlag > 0) && !(patchFlag & 16 /* FULL_PROPS */)) {1900 if (patchFlag & 8 /* PROPS */) {1901 // Compiler-generated props & no keys change, just set the updated1902 // the props.1903 const propsToUpdate = instance.vnode.dynamicProps;1904 for (let i = 0; i < propsToUpdate.length; i++) {1905 const key = propsToUpdate[i];1906 // PROPS flag guarantees rawProps to be non-null1907 const value = rawProps[key];1908 if (options) {1909 // attr / props separation was done on init and will be consistent1910 // in this code path, so just check if attrs have it.1911 if (hasOwn(attrs, key)) {1912 attrs[key] = value;1913 }1914 else {1915 const camelizedKey = camelize(key);1916 props[camelizedKey] = resolvePropValue(options, rawCurrentProps, camelizedKey, value);1917 }1918 }1919 else {1920 attrs[key] = value;1921 }1922 }1923 }1924 }1925 else {1926 // full props update.1927 setFullProps(instance, rawProps, props, attrs);1928 // in case of dynamic props, check if we need to delete keys from1929 // the props object1930 let kebabKey;1931 for (const key in rawCurrentProps) {1932 if (!rawProps ||1933 (!hasOwn(rawProps, key) &&1934 // it's possible the original props was passed in as kebab-case1935 // and converted to camelCase (#955)1936 ((kebabKey = hyphenate(key)) === key || !hasOwn(rawProps, kebabKey)))) {1937 if (options) {1938 if (rawPrevProps && rawPrevProps[kebabKey] !== undefined) {1939 props[key] = resolvePropValue(options, rawProps || EMPTY_OBJ, key, undefined);1940 }1941 }1942 else {1943 delete props[key];1944 }1945 }1946 }1947 // in the case of functional component w/o props declaration, props and1948 // attrs point to the same object so it should already have been updated.1949 if (attrs !== rawCurrentProps) {1950 for (const key in attrs) {1951 if (!rawProps || !hasOwn(rawProps, key)) {1952 delete attrs[key];1953 }1954 }1955 }1956 }1957 if ( rawOptions && rawProps) {1958 validateProps(props, rawOptions);1959 }1960}1961function setFullProps(instance, rawProps, props, attrs) {1962 const { 0: options, 1: needCastKeys } = normalizePropsOptions(instance.type.props);1963 const emits = instance.type.emits;1964 if (rawProps) {1965 for (const key in rawProps) {1966 const value = rawProps[key];1967 // key, ref are reserved and never passed down1968 if (isReservedProp(key)) {1969 continue;1970 }1971 // prop option names are camelized during normalization, so to support1972 // kebab -> camel conversion here we need to camelize the key.1973 let camelKey;1974 if (options && hasOwn(options, (camelKey = camelize(key)))) {1975 props[camelKey] = value;1976 }1977 else if (!emits || !isEmitListener(emits, key)) {1978 // Any non-declared (either as a prop or an emitted event) props are put1979 // into a separate `attrs` object for spreading. Make sure to preserve1980 // original key casing1981 attrs[key] = value;1982 }1983 }1984 }1985 if (needCastKeys) {1986 const rawCurrentProps = toRaw(props);1987 for (let i = 0; i < needCastKeys.length; i++) {1988 const key = needCastKeys[i];1989 props[key] = resolvePropValue(options, rawCurrentProps, key, rawCurrentProps[key]);1990 }1991 }1992}1993function resolvePropValue(options, props, key, value) {1994 const opt = options[key];1995 if (opt != null) {1996 const hasDefault = hasOwn(opt, 'default');1997 // default values1998 if (hasDefault && value === undefined) {1999 const defaultValue = opt.default;2000 value = isFunction(defaultValue) ? defaultValue() : defaultValue;2001 }2002 // boolean casting2003 if (opt[0 /* shouldCast */]) {2004 if (!hasOwn(props, key) && !hasDefault) {2005 value = false;2006 }2007 else if (opt[1 /* shouldCastTrue */] &&2008 (value === '' || value === hyphenate(key))) {2009 value = true;2010 }2011 }2012 }2013 return value;2014}2015function normalizePropsOptions(raw) {2016 if (!raw) {2017 return EMPTY_ARR;2018 }2019 if (raw._n) {2020 return raw._n;2021 }2022 const normalized = {};2023 const needCastKeys = [];2024 if (isArray(raw)) {2025 for (let i = 0; i < raw.length; i++) {2026 if ( !isString(raw[i])) {2027 warn(`props must be strings when using array syntax.`, raw[i]);2028 }2029 const normalizedKey = camelize(raw[i]);2030 if (validatePropName(normalizedKey)) {2031 normalized[normalizedKey] = EMPTY_OBJ;2032 }2033 }2034 }2035 else {2036 if ( !isObject(raw)) {2037 warn(`invalid props options`, raw);2038 }2039 for (const key in raw) {2040 const normalizedKey = camelize(key);2041 if (validatePropName(normalizedKey)) {2042 const opt = raw[key];2043 const prop = (normalized[normalizedKey] =2044 isArray(opt) || isFunction(opt) ? { type: opt } : opt);2045 if (prop) {2046 const booleanIndex = getTypeIndex(Boolean, prop.type);2047 const stringIndex = getTypeIndex(String, prop.type);2048 prop[0 /* shouldCast */] = booleanIndex > -1;2049 prop[1 /* shouldCastTrue */] =2050 stringIndex < 0 || booleanIndex < stringIndex;2051 // if the prop needs boolean casting or default value2052 if (booleanIndex > -1 || hasOwn(prop, 'default')) {2053 needCastKeys.push(normalizedKey);2054 }2055 }2056 }2057 }2058 }2059 const normalizedEntry = [normalized, needCastKeys];2060 def(raw, '_n', normalizedEntry);2061 return normalizedEntry;2062}2063// use function string name to check type constructors2064// so that it works across vms / iframes.2065function getType(ctor) {2066 const match = ctor && ctor.toString().match(/^\s*function (\w+)/);2067 return match ? match[1] : '';2068}2069function isSameType(a, b) {2070 return getType(a) === getType(b);2071}2072function getTypeIndex(type, expectedTypes) {2073 if (isArray(expectedTypes)) {2074 for (let i = 0, len = expectedTypes.length; i < len; i++) {2075 if (isSameType(expectedTypes[i], type)) {2076 return i;2077 }2078 }2079 }2080 else if (isFunction(expectedTypes)) {2081 return isSameType(expectedTypes, type) ? 0 : -1;2082 }2083 return -1;2084}2085function validateProps(props, rawOptions) {2086 const rawValues = toRaw(props);2087 const options = normalizePropsOptions(rawOptions)[0];2088 for (const key in options) {2089 let opt = options[key];2090 if (opt == null)2091 continue;2092 validateProp(key, rawValues[key], opt, !hasOwn(rawValues, key));2093 }2094}2095function validatePropName(key) {2096 if (key[0] !== '$') {2097 return true;2098 }2099 else {2100 warn(`Invalid prop name: "${key}" is a reserved property.`);2101 }2102 return false;2103}2104function validateProp(name, value, prop, isAbsent) {2105 const { type, required, validator } = prop;2106 // required!2107 if (required && isAbsent) {2108 warn('Missing required prop: "' + name + '"');2109 return;2110 }2111 // missing but optional2112 if (value == null && !prop.required) {2113 return;2114 }2115 // type check2116 if (type != null && type !== true) {2117 let isValid = false;2118 const types = isArray(type) ? type : [type];2119 const expectedTypes = [];2120 // value is valid as long as one of the specified types match2121 for (let i = 0; i < types.length && !isValid; i++) {2122 const { valid, expectedType } = assertType(value, types[i]);2123 expectedTypes.push(expectedType || '');2124 isValid = valid;2125 }2126 if (!isValid) {2127 warn(getInvalidTypeMessage(name, value, expectedTypes));2128 return;2129 }2130 }2131 // custom validator2132 if (validator && !validator(value)) {2133 warn('Invalid prop: custom validator check failed for prop "' + name + '".');2134 }2135}2136const isSimpleType = /*#__PURE__*/ makeMap('String,Number,Boolean,Function,Symbol');2137function assertType(value, type) {2138 let valid;2139 const expectedType = getType(type);2140 if (isSimpleType(expectedType)) {2141 const t = typeof value;2142 valid = t === expectedType.toLowerCase();2143 // for primitive wrapper objects2144 if (!valid && t === 'object') {2145 valid = value instanceof type;2146 }2147 }2148 else if (expectedType === 'Object') {2149 valid = toRawType(value) === 'Object';2150 }2151 else if (expectedType === 'Array') {2152 valid = isArray(value);2153 }2154 else {2155 valid = value instanceof type;2156 }2157 return {2158 valid,2159 expectedType2160 };2161}2162function getInvalidTypeMessage(name, value, expectedTypes) {2163 let message = `Invalid prop: type check failed for prop "${name}".` +2164 ` Expected ${expectedTypes.map(capitalize).join(', ')}`;2165 const expectedType = expectedTypes[0];2166 const receivedType = toRawType(value);2167 const expectedValue = styleValue(value, expectedType);2168 const receivedValue = styleValue(value, receivedType);2169 // check if we need to specify expected value2170 if (expectedTypes.length === 1 &&2171 isExplicable(expectedType) &&2172 !isBoolean(expectedType, receivedType)) {2173 message += ` with value ${expectedValue}`;2174 }2175 message += `, got ${receivedType} `;2176 // check if we need to specify received value2177 if (isExplicable(receivedType)) {2178 message += `with value ${receivedValue}.`;2179 }2180 return message;2181}2182function styleValue(value, type) {2183 if (type === 'String') {2184 return `"${value}"`;2185 }2186 else if (type === 'Number') {2187 return `${Number(value)}`;2188 }2189 else {2190 return `${value}`;2191 }2192}2193function isExplicable(type) {2194 const explicitTypes = ['string', 'number', 'boolean'];2195 return explicitTypes.some(elem => type.toLowerCase() === elem);2196}2197function isBoolean(...args) {2198 return args.some(elem => elem.toLowerCase() === 'boolean');2199}2200const isInternalKey = (key) => key[0] === '_' || key === '$stable';2201const normalizeSlotValue = (value) => isArray(value)2202 ? value.map(normalizeVNode)2203 : [normalizeVNode(value)];2204const normalizeSlot = (key, rawSlot, ctx) => withCtx((props) => {2205 if ( currentInstance) {2206 warn(`Slot "${key}" invoked outside of the render function: ` +2207 `this will not track dependencies used in the slot. ` +2208 `Invoke the slot function inside the render function instead.`);2209 }2210 return normalizeSlotValue(rawSlot(props));2211}, ctx);2212const normalizeObjectSlots = (rawSlots, slots) => {2213 const ctx = rawSlots._ctx;2214 for (const key in rawSlots) {2215 if (isInternalKey(key))2216 continue;2217 const value = rawSlots[key];2218 if (isFunction(value)) {2219 slots[key] = normalizeSlot(key, value, ctx);2220 }2221 else if (value != null) {2222 {2223 warn(`Non-function value encountered for slot "${key}". ` +2224 `Prefer function slots for better performance.`);2225 }2226 const normalized = normalizeSlotValue(value);2227 slots[key] = () => normalized;2228 }2229 }2230};2231const normalizeVNodeSlots = (instance, children) => {2232 if ( !isKeepAlive(instance.vnode)) {2233 warn(`Non-function value encountered for default slot. ` +2234 `Prefer function slots for better performance.`);2235 }2236 const normalized = normalizeSlotValue(children);2237 instance.slots.default = () => normalized;2238};2239const initSlots = (instance, children) => {2240 if (instance.vnode.shapeFlag & 32 /* SLOTS_CHILDREN */) {2241 if (children._ === 1) {2242 instance.slots = children;2243 }2244 else {2245 normalizeObjectSlots(children, (instance.slots = {}));2246 }2247 }2248 else {2249 instance.slots = {};2250 if (children) {2251 normalizeVNodeSlots(instance, children);2252 }2253 }2254 def(instance.slots, InternalObjectKey, 1);2255};2256const updateSlots = (instance, children) => {2257 const { vnode, slots } = instance;2258 let needDeletionCheck = true;2259 let deletionComparisonTarget = EMPTY_OBJ;2260 if (vnode.shapeFlag & 32 /* SLOTS_CHILDREN */) {2261 if (children._ === 1) {2262 // compiled slots.2263 if (2264 // bail on dynamic slots (v-if, v-for, reference of scope variables)2265 !(vnode.patchFlag & 1024 /* DYNAMIC_SLOTS */) &&2266 // bail on HRM updates2267 !( instance.parent && instance.parent.renderUpdated)) {2268 // compiled AND static.2269 // no need to update, and skip stale slots removal.2270 needDeletionCheck = false;2271 }2272 else {2273 // compiled but dynamic - update slots, but skip normalization.2274 extend(slots, children);2275 }2276 }2277 else {2278 needDeletionCheck = !children.$stable;2279 normalizeObjectSlots(children, slots);2280 }2281 deletionComparisonTarget = children;2282 }2283 else if (children) {2284 // non slot object children (direct value) passed to a component2285 normalizeVNodeSlots(instance, children);2286 deletionComparisonTarget = { default: 1 };2287 }2288 // delete stale slots2289 if (needDeletionCheck) {2290 for (const key in slots) {2291 if (!isInternalKey(key) && !(key in deletionComparisonTarget)) {2292 delete slots[key];2293 }2294 }2295 }2296};2297/**2298Runtime helper for applying directives to a vnode. Example usage:2299const comp = resolveComponent('comp')2300const foo = resolveDirective('foo')2301const bar = resolveDirective('bar')2302return withDirectives(h(comp), [2303 [foo, this.x],2304 [bar, this.y]2305])2306*/2307const isBuiltInDirective = /*#__PURE__*/ makeMap('bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text');2308function validateDirectiveName(name) {2309 if (isBuiltInDirective(name)) {2310 warn('Do not use built-in directive ids as custom directive id: ' + name);2311 }2312}2313function invokeDirectiveHook(vnode, prevVNode, instance, name) {2314 const bindings = vnode.dirs;2315 const oldBindings = prevVNode && prevVNode.dirs;2316 for (let i = 0; i < bindings.length; i++) {2317 const binding = bindings[i];2318 if (oldBindings) {2319 binding.oldValue = oldBindings[i].value;2320 }2321 const hook = binding.dir[name];2322 if (hook) {2323 callWithAsyncErrorHandling(hook, instance, 8 /* DIRECTIVE_HOOK */, [2324 vnode.el,2325 binding,2326 vnode,2327 prevVNode2328 ]);2329 }2330 }2331}2332function createAppContext() {2333 return {2334 config: {2335 isNativeTag: NO,2336 devtools: true,2337 performance: false,2338 globalProperties: {},2339 optionMergeStrategies: {},2340 isCustomElement: NO,2341 errorHandler: undefined,2342 warnHandler: undefined2343 },2344 mixins: [],2345 components: {},2346 directives: {},2347 provides: Object.create(null)2348 };2349}2350function createAppAPI(render, hydrate) {2351 return function createApp(rootComponent, rootProps = null) {2352 if (rootProps != null && !isObject(rootProps)) {2353 warn(`root props passed to app.mount() must be an object.`);2354 rootProps = null;2355 }2356 const context = createAppContext();2357 const installedPlugins = new Set();2358 let isMounted = false;2359 const app = {2360 _component: rootComponent,2361 _props: rootProps,2362 _container: null,2363 _context: context,2364 get config() {2365 return context.config;2366 },2367 set config(v) {2368 {2369 warn(`app.config cannot be replaced. Modify individual options instead.`);2370 }2371 },2372 use(plugin, ...options) {2373 if (installedPlugins.has(plugin)) {2374 warn(`Plugin has already been applied to target app.`);2375 }2376 else if (plugin && isFunction(plugin.install)) {2377 installedPlugins.add(plugin);2378 plugin.install(app, ...options);2379 }2380 else if (isFunction(plugin)) {2381 installedPlugins.add(plugin);2382 plugin(app, ...options);2383 }2384 else {2385 warn(`A plugin must either be a function or an object with an "install" ` +2386 `function.`);2387 }2388 return app;2389 },2390 mixin(mixin) {2391 {2392 if (!context.mixins.includes(mixin)) {2393 context.mixins.push(mixin);2394 }2395 else {2396 warn('Mixin has already been applied to target app' +2397 (mixin.name ? `: ${mixin.name}` : ''));2398 }2399 }2400 return app;2401 },2402 component(name, component) {2403 {2404 validateComponentName(name, context.config);2405 }2406 if (!component) {2407 return context.components[name];2408 }2409 if ( context.components[name]) {2410 warn(`Component "${name}" has already been registered in target app.`);2411 }2412 context.components[name] = component;2413 return app;2414 },2415 directive(name, directive) {2416 {2417 validateDirectiveName(name);2418 }2419 if (!directive) {2420 return context.directives[name];2421 }2422 if ( context.directives[name]) {2423 warn(`Directive "${name}" has already been registered in target app.`);2424 }2425 context.directives[name] = directive;2426 return app;2427 },2428 mount(rootContainer, isHydrate) {2429 if (!isMounted) {2430 const vnode = createVNode(rootComponent, rootProps);2431 // store app context on the root VNode.2432 // this will be set on the root instance on initial mount.2433 vnode.appContext = context;2434 // HMR root reload2435 {2436 context.reload = () => {2437 render(cloneVNode(vnode), rootContainer);2438 };2439 }2440 if (isHydrate && hydrate) {2441 hydrate(vnode, rootContainer);2442 }2443 else {2444 render(vnode, rootContainer);2445 }2446 isMounted = true;2447 app._container = rootContainer;2448 return vnode.component.proxy;2449 }2450 else {2451 warn(`App has already been mounted. Create a new app instance instead.`);2452 }2453 },2454 unmount() {2455 if (isMounted) {2456 render(null, app._container);2457 }2458 else {2459 warn(`Cannot unmount an app that is not mounted.`);2460 }2461 },2462 provide(key, value) {2463 if ( key in context.provides) {2464 warn(`App already provides property with key "${String(key)}". ` +2465 `It will be overwritten with the new value.`);2466 }2467 // TypeScript doesn't allow symbols as index type2468 // https://github.com/Microsoft/TypeScript/issues/245872469 context.provides[key] = value;2470 return app;2471 }2472 };2473 return app;2474 };2475}2476// Expose the HMR runtime on the global object2477// This makes it entirely tree-shakable without polluting the exports and makes2478// it easier to be used in toolings like vue-loader2479// Note: for a component to be eligible for HMR it also needs the __hmrId option2480// to be set so that its instances can be registered / removed.2481{2482 const globalObject = typeof global !== 'undefined'2483 ? global2484 : typeof self !== 'undefined'2485 ? self2486 : typeof window !== 'undefined'2487 ? window2488 : {};2489 globalObject.__VUE_HMR_RUNTIME__ = {2490 createRecord: tryWrap(createRecord),2491 rerender: tryWrap(rerender),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) {3615 stop(update);3616 unmount(subTree, instance, parentSuspense, doRemove);3617 }3618 // unmounted hook3619 if (um) {3620 queuePostRenderEffect(um, parentSuspense);3621 }3622 // deactivated hook3623 if (da &&3624 !isDeactivated &&3625 instance.vnode.shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {3626 queuePostRenderEffect(da, parentSuspense);3627 }3628 queuePostRenderEffect(() => {3629 instance.isUnmounted = true;3630 }, parentSuspense);3631 // A component with async dep inside a pending suspense is unmounted before3632 // its async dep resolves. This should remove the dep from the suspense, and3633 // cause the suspense to resolve immediately if that was the last dep.3634 if (3635 parentSuspense &&3636 !parentSuspense.isResolved &&3637 !parentSuspense.isUnmounted &&3638 instance.asyncDep &&3639 !instance.asyncResolved) {3640 parentSuspense.deps--;3641 if (parentSuspense.deps === 0) {3642 parentSuspense.resolve();3643 }3644 }3645 };3646 const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, start = 0) => {3647 for (let i = start; i < children.length; i++) {3648 unmount(children[i], parentComponent, parentSuspense, doRemove);3649 }3650 };3651 const getNextHostNode = vnode => {3652 if (vnode.shapeFlag & 6 /* COMPONENT */) {3653 return getNextHostNode(vnode.component.subTree);3654 }3655 if ( vnode.shapeFlag & 128 /* SUSPENSE */) {3656 return vnode.suspense.next();3657 }3658 return hostNextSibling((vnode.anchor || vnode.el));3659 };3660 const setRef = (rawRef, oldRawRef, parent, value) => {3661 const [owner, ref] = rawRef;3662 if ( !owner) {3663 warn(`Missing ref owner context. ref cannot be used on hoisted vnodes. ` +3664 `A vnode with ref must be created inside the render function.`);3665 return;3666 }3667 const oldRef = oldRawRef && oldRawRef[1];3668 const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs;3669 const setupState = owner.setupState;3670 // unset old ref3671 if (oldRef != null && oldRef !== ref) {3672 if (isString(oldRef)) {3673 refs[oldRef] = null;3674 if (hasOwn(setupState, oldRef)) {3675 setupState[oldRef] = null;3676 }3677 }3678 else if (isRef(oldRef)) {3679 oldRef.value = null;3680 }3681 }3682 if (isString(ref)) {3683 refs[ref] = value;3684 if (hasOwn(setupState, ref)) {3685 setupState[ref] = value;3686 }3687 }3688 else if (isRef(ref)) {3689 ref.value = value;3690 }3691 else if (isFunction(ref)) {3692 callWithErrorHandling(ref, parent, 12 /* FUNCTION_REF */, [value, refs]);3693 }3694 else {3695 warn('Invalid template ref type:', value, `(${typeof value})`);3696 }3697 };3698 const render = (vnode, container) => {3699 if (vnode == null) {3700 if (container._vnode) {3701 unmount(container._vnode, null, null, true);3702 }3703 }3704 else {3705 patch(container._vnode || null, vnode, container);3706 }3707 flushPostFlushCbs();3708 container._vnode = vnode;3709 };3710 const internals = {3711 p: patch,3712 um: unmount,3713 m: move,3714 r: remove,3715 mt: mountComponent,3716 mc: mountChildren,3717 pc: patchChildren,3718 pbc: patchBlockChildren,3719 n: getNextHostNode,3720 o: options3721 };3722 let hydrate;3723 let hydrateNode;3724 if (createHydrationFns) {3725 [hydrate, hydrateNode] = createHydrationFns(internals);3726 }3727 return {3728 render,3729 hydrate,3730 createApp: createAppAPI(render, hydrate)3731 };3732}3733function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {3734 callWithAsyncErrorHandling(hook, instance, 7 /* VNODE_HOOK */, [3735 vnode,3736 prevVNode3737 ]);3738}3739// https://en.wikipedia.org/wiki/Longest_increasing_subsequence3740function getSequence(arr) {3741 const p = arr.slice();3742 const result = [0];3743 let i, j, u, v, c;3744 const len = arr.length;3745 for (i = 0; i < len; i++) {3746 const arrI = arr[i];3747 if (arrI !== 0) {3748 j = result[result.length - 1];3749 if (arr[j] < arrI) {3750 p[i] = j;3751 result.push(i);3752 continue;3753 }3754 u = 0;3755 v = result.length - 1;3756 while (u < v) {3757 c = ((u + v) / 2) | 0;3758 if (arr[result[c]] < arrI) {3759 u = c + 1;3760 }3761 else {3762 v = c;3763 }3764 }3765 if (arrI < arr[result[u]]) {3766 if (u > 0) {3767 p[i] = result[u - 1];3768 }3769 result[u] = i;3770 }3771 }3772 }3773 u = result.length;3774 v = result[u - 1];3775 while (u-- > 0) {3776 result[u] = v;3777 v = p[v];3778 }3779 return result;3780}3781const isKeepAlive = (vnode) => vnode.type.__isKeepAlive;3782function onActivated(hook, target) {3783 registerKeepAliveHook(hook, "a" /* ACTIVATED */, target);3784}3785function onDeactivated(hook, target) {3786 registerKeepAliveHook(hook, "da" /* DEACTIVATED */, target);3787}3788function registerKeepAliveHook(hook, type, target = currentInstance) {3789 // cache the deactivate branch check wrapper for injected hooks so the same3790 // hook can be properly deduped by the scheduler. "__wdc" stands for "with3791 // deactivation check".3792 const wrappedHook = hook.__wdc ||3793 (hook.__wdc = () => {3794 // only fire the hook if the target instance is NOT in a deactivated branch.3795 let current = target;3796 while (current) {3797 if (current.isDeactivated) {3798 return;3799 }3800 current = current.parent;3801 }3802 hook();3803 });3804 injectHook(type, wrappedHook, target);3805 // In addition to registering it on the target instance, we walk up the parent3806 // chain and register it on all ancestor instances that are keep-alive roots.3807 // This avoids the need to walk the entire component tree when invoking these3808 // hooks, and more importantly, avoids the need to track child components in3809 // arrays.3810 if (target) {3811 let current = target.parent;3812 while (current && current.parent) {3813 if (isKeepAlive(current.parent.vnode)) {3814 injectToKeepAliveRoot(wrappedHook, type, target, current);3815 }3816 current = current.parent;3817 }3818 }3819}3820function injectToKeepAliveRoot(hook, type, target, keepAliveRoot) {3821 injectHook(type, hook, keepAliveRoot, true /* prepend */);3822 onUnmounted(() => {3823 remove(keepAliveRoot[type], hook);3824 }, target);3825}3826function injectHook(type, hook, target = currentInstance, prepend = false) {3827 if (target) {3828 const hooks = target[type] || (target[type] = []);3829 // cache the error handling wrapper for injected hooks so the same hook3830 // can be properly deduped by the scheduler. "__weh" stands for "with error3831 // handling".3832 const wrappedHook = hook.__weh ||3833 (hook.__weh = (...args) => {3834 if (target.isUnmounted) {3835 return;3836 }3837 // disable tracking inside all lifecycle hooks3838 // since they can potentially be called inside effects.3839 pauseTracking();3840 // Set currentInstance during hook invocation.3841 // This assumes the hook does not synchronously trigger other hooks, which3842 // can only be false when the user does something really funky.3843 setCurrentInstance(target);3844 const res = callWithAsyncErrorHandling(hook, target, type, args);3845 setCurrentInstance(null);3846 resetTracking();3847 return res;3848 });3849 if (prepend) {3850 hooks.unshift(wrappedHook);3851 }3852 else {3853 hooks.push(wrappedHook);3854 }3855 }3856 else {3857 const apiName = `on${capitalize(ErrorTypeStrings[type].replace(/ hook$/, ''))}`;3858 warn(`${apiName} is called when there is no active component instance to be ` +3859 `associated with. ` +3860 `Lifecycle injection APIs can only be used during execution of setup().` +3861 ( ` If you are using async setup(), make sure to register lifecycle ` +3862 `hooks before the first await statement.`3863 ));3864 }3865}3866const createHook = (lifecycle) => (hook, target = currentInstance) => 3867// post-create lifecycle registrations are noops during SSR3868!isInSSRComponentSetup && injectHook(lifecycle, hook, target);3869const onBeforeMount = createHook("bm" /* BEFORE_MOUNT */);3870const onMounted = createHook("m" /* MOUNTED */);3871const onBeforeUpdate = createHook("bu" /* BEFORE_UPDATE */);3872const onUpdated = createHook("u" /* UPDATED */);3873const onBeforeUnmount = createHook("bum" /* BEFORE_UNMOUNT */);3874const onUnmounted = createHook("um" /* UNMOUNTED */);3875const onRenderTriggered = createHook("rtg" /* RENDER_TRIGGERED */);3876const onRenderTracked = createHook("rtc" /* RENDER_TRACKED */);3877const onErrorCaptured = (hook, target = currentInstance) => {3878 injectHook("ec" /* ERROR_CAPTURED */, hook, target);3879};3880const invoke = (fn) => fn();3881// initial value for watchers to trigger on undefined initial values3882const INITIAL_WATCHER_VALUE = {};3883// implementation3884function watch(source, cb, options) {3885 if ( !isFunction(cb)) {3886 warn(`\`watch(fn, options?)\` signature has been moved to a separate API. ` +3887 `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +3888 `supports \`watch(source, cb, options?) signature.`);3889 }3890 return doWatch(source, cb, options);3891}3892function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ) {3893 if ( !cb) {3894 if (immediate !== undefined) {3895 warn(`watch() "immediate" option is only respected when using the ` +3896 `watch(source, callback, options?) signature.`);3897 }3898 if (deep !== undefined) {3899 warn(`watch() "deep" option is only respected when using the ` +3900 `watch(source, callback, options?) signature.`);3901 }3902 }3903 const instance = currentInstance;3904 let getter;3905 if (isArray(source)) {3906 getter = () => source.map(s => isRef(s)3907 ? s.value3908 : callWithErrorHandling(s, instance, 2 /* WATCH_GETTER */));3909 }3910 else if (isRef(source)) {3911 getter = () => source.value;3912 }3913 else if (isReactive(source)) {3914 getter = () => source;3915 deep = true;3916 }3917 else if (isFunction(source)) {3918 if (cb) {3919 // getter with cb3920 getter = () => callWithErrorHandling(source, instance, 2 /* WATCH_GETTER */);3921 }3922 else {3923 // no cb -> simple effect3924 getter = () => {3925 if (instance && instance.isUnmounted) {3926 return;3927 }3928 if (cleanup) {3929 cleanup();3930 }3931 return callWithErrorHandling(source, instance, 3 /* WATCH_CALLBACK */, [onInvalidate]);3932 };3933 }3934 }3935 else {3936 getter = NOOP;3937 3938 warn(`Invalid watch source: `, source, `A watch source can only be a getter/effect function, a ref, ` +3939 `a reactive object, or an array of these types.`);3940 }3941 if (cb && deep) {3942 const baseGetter = getter;3943 getter = () => traverse(baseGetter());3944 }3945 let cleanup;3946 const onInvalidate = (fn) => {3947 cleanup = runner.options.onStop = () => {3948 callWithErrorHandling(fn, instance, 4 /* WATCH_CLEANUP */);3949 };3950 };3951 let oldValue = isArray(source) ? [] : INITIAL_WATCHER_VALUE;3952 const applyCb = cb3953 ? () => {3954 if (instance && instance.isUnmounted) {3955 return;3956 }3957 const newValue = runner();3958 if (deep || hasChanged(newValue, oldValue)) {3959 // cleanup before running cb again3960 if (cleanup) {3961 cleanup();3962 }3963 callWithAsyncErrorHandling(cb, instance, 3 /* WATCH_CALLBACK */, [3964 newValue,3965 // pass undefined as the old value when it's changed for the first time3966 oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,3967 onInvalidate3968 ]);3969 oldValue = newValue;3970 }3971 }3972 : void 0;3973 let scheduler;3974 if (flush === 'sync') {3975 scheduler = invoke;3976 }3977 else if (flush === 'pre') {3978 scheduler = job => {3979 if (!instance || instance.isMounted) {3980 queueJob(job);3981 }3982 else {3983 // with 'pre' option, the first call must happen before3984 // the component is mounted so it is called synchronously.3985 job();3986 }3987 };3988 }3989 else {3990 scheduler = job => queuePostRenderEffect(job, instance && instance.suspense);3991 }3992 const runner = effect(getter, {3993 lazy: true,3994 // so it runs before component update effects in pre flush mode3995 computed: true,3996 onTrack,3997 onTrigger,3998 scheduler: applyCb ? () => scheduler(applyCb) : scheduler3999 });4000 recordInstanceBoundEffect(runner);4001 // initial run4002 if (applyCb) {4003 if (immediate) {4004 applyCb();4005 }4006 else {4007 oldValue = runner();4008 }4009 }4010 else {4011 runner();4012 }4013 return () => {4014 stop(runner);4015 if (instance) {4016 remove(instance.effects, runner);4017 }4018 };4019}4020// this.$watch4021function instanceWatch(source, cb, options) {4022 const publicThis = this.proxy;4023 const getter = isString(source)4024 ? () => publicThis[source]4025 : source.bind(publicThis);4026 const stop = watch(getter, cb.bind(publicThis), options);4027 onBeforeUnmount(stop, this);4028 return stop;4029}4030function traverse(value, seen = new Set()) {4031 if (!isObject(value) || seen.has(value)) {4032 return value;4033 }4034 seen.add(value);4035 if (isArray(value)) {4036 for (let i = 0; i < value.length; i++) {4037 traverse(value[i], seen);4038 }4039 }4040 else if (value instanceof Map) {4041 value.forEach((v, key) => {4042 // to register mutation dep for existing keys4043 traverse(value.get(key), seen);4044 });4045 }4046 else if (value instanceof Set) {4047 value.forEach(v => {4048 traverse(v, seen);4049 });4050 }4051 else {4052 for (const key in value) {4053 traverse(value[key], seen);4054 }4055 }4056 return value;4057}4058function provide(key, value) {4059 if (!currentInstance) {4060 {4061 warn(`provide() can only be used inside setup().`);4062 }4063 }4064 else {4065 let provides = currentInstance.provides;4066 // by default an instance inherits its parent's provides object4067 // but when it needs to provide values of its own, it creates its4068 // own provides object using parent provides object as prototype.4069 // this way in `inject` we can simply look up injections from direct4070 // parent and let the prototype chain do the work.4071 const parentProvides = currentInstance.parent && currentInstance.parent.provides;4072 if (parentProvides === provides) {4073 provides = currentInstance.provides = Object.create(parentProvides);4074 }4075 // TS doesn't allow symbol as index type4076 provides[key] = value;4077 }4078}4079function inject(key, defaultValue) {4080 // fallback to `currentRenderingInstance` so that this can be called in4081 // a functional component4082 const instance = currentInstance || currentRenderingInstance;4083 if (instance) {4084 const provides = instance.provides;4085 if (key in provides) {4086 // TS doesn't allow symbol as index type4087 return provides[key];4088 }4089 else if (arguments.length > 1) {4090 return defaultValue;4091 }4092 else {4093 warn(`injection "${String(key)}" not found.`);4094 }4095 }4096 else {4097 warn(`inject() can only be used inside setup() or functional components.`);4098 }4099}4100function createDuplicateChecker() {4101 const cache = Object.create(null);4102 return (type, key) => {4103 if (cache[key]) {4104 warn(`${type} property "${key}" is already defined in ${cache[key]}.`);4105 }4106 else {4107 cache[key] = type;4108 }4109 };4110}4111function applyOptions(instance, options, deferredData = [], deferredWatch = [], asMixin = false) {4112 const { 4113 // composition4114 mixins, extends: extendsOptions, 4115 // state4116 props: propsOptions, data: dataOptions, computed: computedOptions, methods, watch: watchOptions, provide: provideOptions, inject: injectOptions, 4117 // assets4118 components, directives, 4119 // lifecycle4120 beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeUnmount, unmounted, renderTracked, renderTriggered, errorCaptured } = options;4121 const publicThis = instance.proxy;4122 const ctx = instance.ctx;4123 const globalMixins = instance.appContext.mixins;4124 // call it only during dev4125 // applyOptions is called non-as-mixin once per instance4126 if (!asMixin) {4127 callSyncHook('beforeCreate', options, publicThis, globalMixins);4128 // global mixins are applied first4129 applyMixins(instance, globalMixins, deferredData, deferredWatch);4130 }4131 // extending a base component...4132 if (extendsOptions) {4133 applyOptions(instance, extendsOptions, deferredData, deferredWatch, true);4134 }4135 // local mixins4136 if (mixins) {4137 applyMixins(instance, mixins, deferredData, deferredWatch);4138 }4139 const checkDuplicateProperties = createDuplicateChecker() ;4140 if ( propsOptions) {4141 for (const key in normalizePropsOptions(propsOptions)[0]) {4142 checkDuplicateProperties("Props" /* PROPS */, key);4143 }4144 }4145 // options initialization order (to be consistent with Vue 2):4146 // - props (already done outside of this function)4147 // - inject4148 // - methods4149 // - data (deferred since it relies on `this` access)4150 // - computed4151 // - watch (deferred since it relies on `this` access)4152 if (injectOptions) {4153 if (isArray(injectOptions)) {4154 for (let i = 0; i < injectOptions.length; i++) {4155 const key = injectOptions[i];4156 ctx[key] = inject(key);4157 {4158 checkDuplicateProperties("Inject" /* INJECT */, key);4159 }4160 }4161 }4162 else {4163 for (const key in injectOptions) {4164 const opt = injectOptions[key];4165 if (isObject(opt)) {4166 ctx[key] = inject(opt.from, opt.default);4167 }4168 else {4169 ctx[key] = inject(opt);4170 }4171 {4172 checkDuplicateProperties("Inject" /* INJECT */, key);4173 }4174 }4175 }4176 }4177 if (methods) {4178 for (const key in methods) {4179 const methodHandler = methods[key];4180 if (isFunction(methodHandler)) {4181 ctx[key] = methodHandler.bind(publicThis);4182 {4183 checkDuplicateProperties("Methods" /* METHODS */, key);4184 }4185 }4186 else {4187 warn(`Method "${key}" has type "${typeof methodHandler}" in the component definition. ` +4188 `Did you reference the function correctly?`);4189 }4190 }4191 }4192 if (dataOptions) {4193 if ( !isFunction(dataOptions)) {4194 warn(`The data option must be a function. ` +4195 `Plain object usage is no longer supported.`);4196 }4197 if (asMixin) {4198 deferredData.push(dataOptions);4199 }4200 else {4201 resolveData(instance, dataOptions, publicThis);4202 }4203 }4204 if (!asMixin) {4205 if (deferredData.length) {4206 deferredData.forEach(dataFn => resolveData(instance, dataFn, publicThis));4207 }4208 {4209 const rawData = toRaw(instance.data);4210 for (const key in rawData) {4211 checkDuplicateProperties("Data" /* DATA */, key);4212 // expose data on ctx during dev4213 if (key[0] !== '$' && key[0] !== '_') {4214 Object.defineProperty(ctx, key, {4215 configurable: true,4216 enumerable: true,4217 get: () => rawData[key],4218 set: NOOP4219 });4220 }4221 }4222 }4223 }4224 if (computedOptions) {4225 for (const key in computedOptions) {4226 const opt = computedOptions[key];4227 const get = isFunction(opt)4228 ? opt.bind(publicThis, publicThis)4229 : isFunction(opt.get)4230 ? opt.get.bind(publicThis, publicThis)4231 : NOOP;4232 if ( get === NOOP) {4233 warn(`Computed property "${key}" has no getter.`);4234 }4235 const set = !isFunction(opt) && isFunction(opt.set)4236 ? opt.set.bind(publicThis)4237 : () => {4238 warn(`Write operation failed: computed property "${key}" is readonly.`);4239 }4240 ;4241 const c = computed$1({4242 get,4243 set4244 });4245 Object.defineProperty(ctx, key, {4246 enumerable: true,4247 configurable: true,4248 get: () => c.value,4249 set: v => (c.value = v)4250 });4251 {4252 checkDuplicateProperties("Computed" /* COMPUTED */, key);4253 }4254 }4255 }4256 if (watchOptions) {4257 deferredWatch.push(watchOptions);4258 }4259 if (!asMixin && deferredWatch.length) {4260 deferredWatch.forEach(watchOptions => {4261 for (const key in watchOptions) {4262 createWatcher(watchOptions[key], ctx, publicThis, key);4263 }4264 });4265 }4266 if (provideOptions) {4267 const provides = isFunction(provideOptions)4268 ? provideOptions.call(publicThis)4269 : provideOptions;4270 for (const key in provides) {4271 provide(key, provides[key]);4272 }4273 }4274 // asset options4275 if (components) {4276 extend(instance.components, components);4277 }4278 if (directives) {4279 extend(instance.directives, directives);4280 }4281 // lifecycle options4282 if (!asMixin) {4283 callSyncHook('created', options, publicThis, globalMixins);4284 }4285 if (beforeMount) {4286 onBeforeMount(beforeMount.bind(publicThis));4287 }4288 if (mounted) {4289 onMounted(mounted.bind(publicThis));4290 }4291 if (beforeUpdate) {4292 onBeforeUpdate(beforeUpdate.bind(publicThis));4293 }4294 if (updated) {4295 onUpdated(updated.bind(publicThis));4296 }4297 if (activated) {4298 onActivated(activated.bind(publicThis));4299 }4300 if (deactivated) {4301 onDeactivated(deactivated.bind(publicThis));4302 }4303 if (errorCaptured) {4304 onErrorCaptured(errorCaptured.bind(publicThis));4305 }4306 if (renderTracked) {4307 onRenderTracked(renderTracked.bind(publicThis));4308 }4309 if (renderTriggered) {4310 onRenderTriggered(renderTriggered.bind(publicThis));4311 }4312 if (beforeUnmount) {4313 onBeforeUnmount(beforeUnmount.bind(publicThis));4314 }4315 if (unmounted) {4316 onUnmounted(unmounted.bind(publicThis));4317 }4318}4319function callSyncHook(name, options, ctx, globalMixins) {4320 callHookFromMixins(name, globalMixins, ctx);4321 const baseHook = options.extends && options.extends[name];4322 if (baseHook) {4323 baseHook.call(ctx);4324 }4325 const mixins = options.mixins;4326 if (mixins) {4327 callHookFromMixins(name, mixins, ctx);4328 }4329 const selfHook = options[name];4330 if (selfHook) {4331 selfHook.call(ctx);4332 }4333}4334function callHookFromMixins(name, mixins, ctx) {4335 for (let i = 0; i < mixins.length; i++) {4336 const fn = mixins[i][name];4337 if (fn) {4338 fn.call(ctx);4339 }4340 }4341}4342function applyMixins(instance, mixins, deferredData, deferredWatch) {4343 for (let i = 0; i < mixins.length; i++) {4344 applyOptions(instance, mixins[i], deferredData, deferredWatch, true);4345 }4346}4347function resolveData(instance, dataFn, publicThis) {4348 const data = dataFn.call(publicThis, publicThis);4349 if ( isPromise(data)) {4350 warn(`data() returned a Promise - note data() cannot be async; If you ` +4351 `intend to perform data fetching before component renders, use ` +4352 `async setup() + <Suspense>.`);4353 }4354 if (!isObject(data)) {4355 warn(`data() should return an object.`);4356 }4357 else if (instance.data === EMPTY_OBJ) {4358 instance.data = reactive(data);4359 }4360 else {4361 // existing data: this is a mixin or extends.4362 extend(instance.data, data);4363 }4364}4365function createWatcher(raw, ctx, publicThis, key) {4366 const getter = () => publicThis[key];4367 if (isString(raw)) {4368 const handler = ctx[raw];4369 if (isFunction(handler)) {4370 watch(getter, handler);4371 }4372 else {4373 warn(`Invalid watch handler specified by key "${raw}"`, handler);4374 }4375 }4376 else if (isFunction(raw)) {4377 watch(getter, raw.bind(publicThis));4378 }4379 else if (isObject(raw)) {4380 if (isArray(raw)) {4381 raw.forEach(r => createWatcher(r, ctx, publicThis, key));4382 }4383 else {4384 watch(getter, raw.handler.bind(publicThis), raw);4385 }4386 }4387 else {4388 warn(`Invalid watch option: "${key}"`);4389 }4390}4391function resolveMergedOptions(instance) {4392 const raw = instance.type;4393 const { __merged, mixins, extends: extendsOptions } = raw;4394 if (__merged)4395 return __merged;4396 const globalMixins = instance.appContext.mixins;4397 if (!globalMixins.length && !mixins && !extendsOptions)4398 return raw;4399 const options = {};4400 globalMixins.forEach(m => mergeOptions(options, m, instance));4401 extendsOptions && mergeOptions(options, extendsOptions, instance);4402 mixins && mixins.forEach(m => mergeOptions(options, m, instance));4403 mergeOptions(options, raw, instance);4404 return (raw.__merged = options);4405}4406function mergeOptions(to, from, instance) {4407 const strats = instance.appContext.config.optionMergeStrategies;4408 for (const key in from) {4409 const strat = strats && strats[key];4410 if (strat) {4411 to[key] = strat(to[key], from[key], instance.proxy, key);4412 }4413 else if (!hasOwn(to, key)) {4414 to[key] = from[key];4415 }4416 }4417}4418const publicPropertiesMap = {4419 $: i => i,4420 $el: i => i.vnode.el,4421 $data: i => i.data,4422 $props: i => ( shallowReadonly(i.props) ),4423 $attrs: i => ( shallowReadonly(i.attrs) ),4424 $slots: i => ( shallowReadonly(i.slots) ),4425 $refs: i => ( shallowReadonly(i.refs) ),4426 $parent: i => i.parent && i.parent.proxy,4427 $root: i => i.root && i.root.proxy,4428 $emit: i => i.emit,4429 $options: i => ( resolveMergedOptions(i) ),4430 $forceUpdate: i => () => queueJob(i.update),4431 $nextTick: () => nextTick,4432 $watch: i => instanceWatch.bind(i) 4433};4434const PublicInstanceProxyHandlers = {4435 get({ _: instance }, key) {4436 const { ctx, setupState, data, props, accessCache, type, appContext } = instance;4437 // let @vue/reatvitiy know it should never observe Vue public instances.4438 if (key === "__v_skip" /* skip */) {4439 return true;4440 }4441 // data / props / ctx4442 // This getter gets called for every property access on the render context4443 // during render and is a major hotspot. The most expensive part of this4444 // is the multiple hasOwn() calls. It's much faster to do a simple property4445 // access on a plain object, so we use an accessCache object (with null4446 // prototype) to memoize what access type a key corresponds to.4447 if (key[0] !== '$') {4448 const n = accessCache[key];4449 if (n !== undefined) {4450 switch (n) {4451 case 0 /* SETUP */:4452 return setupState[key];4453 case 1 /* DATA */:4454 return data[key];4455 case 3 /* CONTEXT */:4456 return ctx[key];4457 case 2 /* PROPS */:4458 return props[key];4459 // default: just fallthrough4460 }4461 }4462 else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {4463 accessCache[key] = 0 /* SETUP */;4464 return setupState[key];4465 }4466 else if (data !== EMPTY_OBJ && hasOwn(data, key)) {4467 accessCache[key] = 1 /* DATA */;4468 return data[key];4469 }4470 else if (4471 // only cache other properties when instance has declared (thus stable)4472 // props4473 type.props &&4474 hasOwn(normalizePropsOptions(type.props)[0], key)) {4475 accessCache[key] = 2 /* PROPS */;4476 return props[key];4477 }4478 else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {4479 accessCache[key] = 3 /* CONTEXT */;4480 return ctx[key];4481 }4482 else {4483 accessCache[key] = 4 /* OTHER */;4484 }4485 }4486 const publicGetter = publicPropertiesMap[key];4487 let cssModule, globalProperties;4488 // public $xxx properties4489 if (publicGetter) {4490 if ( key === '$attrs') {4491 markAttrsAccessed();4492 }4493 return publicGetter(instance);4494 }4495 else if (4496 // css module (injected by vue-loader)4497 (cssModule = type.__cssModules) &&4498 (cssModule = cssModule[key])) {4499 return cssModule;4500 }4501 else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {4502 // user may set custom properties to `this` that start with `$`4503 accessCache[key] = 3 /* CONTEXT */;4504 return ctx[key];4505 }4506 else if (4507 // global properties4508 ((globalProperties = appContext.config.globalProperties),4509 hasOwn(globalProperties, key))) {4510 return globalProperties[key];4511 }4512 else if (4513 currentRenderingInstance &&4514 // #1091 avoid internal isRef/isVNode checks on component instance leading4515 // to infinite warning loop4516 key.indexOf('__v') !== 0) {4517 if (data !== EMPTY_OBJ && key[0] === '$' && hasOwn(data, key)) {4518 warn(`Property ${JSON.stringify(key)} must be accessed via $data because it starts with a reserved ` +4519 `character and is not proxied on the render context.`);4520 }4521 else {4522 warn(`Property ${JSON.stringify(key)} was accessed during render ` +4523 `but is not defined on instance.`);4524 }4525 }4526 },4527 set({ _: instance }, key, value) {4528 const { data, setupState, ctx } = instance;4529 if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {4530 setupState[key] = value;4531 }4532 else if (data !== EMPTY_OBJ && hasOwn(data, key)) {4533 data[key] = value;4534 }4535 else if (key in instance.props) {4536 4537 warn(`Attempting to mutate prop "${key}". Props are readonly.`, instance);4538 return false;4539 }4540 if (key[0] === '$' && key.slice(1) in instance) {4541 4542 warn(`Attempting to mutate public property "${key}". ` +4543 `Properties starting with $ are reserved and readonly.`, instance);4544 return false;4545 }4546 else {4547 if ( key in instance.appContext.config.globalProperties) {4548 Object.defineProperty(ctx, key, {4549 enumerable: true,4550 configurable: true,4551 value4552 });4553 }4554 else {4555 ctx[key] = value;4556 }4557 }4558 return true;4559 },4560 has({ _: { data, setupState, accessCache, ctx, type, appContext } }, key) {4561 return (accessCache[key] !== undefined ||4562 (data !== EMPTY_OBJ && hasOwn(data, key)) ||4563 (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) ||4564 (type.props && hasOwn(normalizePropsOptions(type.props)[0], key)) ||4565 hasOwn(ctx, key) ||4566 hasOwn(publicPropertiesMap, key) ||4567 hasOwn(appContext.config.globalProperties, key));4568 }4569};4570{4571 PublicInstanceProxyHandlers.ownKeys = (target) => {4572 warn(`Avoid app logic that relies on enumerating keys on a component instance. ` +4573 `The keys will be empty in production mode to avoid performance overhead.`);4574 return Reflect.ownKeys(target);4575 };4576}4577const RuntimeCompiledPublicInstanceProxyHandlers = {4578 ...PublicInstanceProxyHandlers,4579 get(target, key) {4580 // fast path for unscopables when using `with` block4581 if (key === Symbol.unscopables) {4582 return;4583 }4584 return PublicInstanceProxyHandlers.get(target, key, target);4585 },4586 has(_, key) {4587 const has = key[0] !== '_' && !isGloballyWhitelisted(key);4588 if ( !has && PublicInstanceProxyHandlers.has(_, key)) {4589 warn(`Property ${JSON.stringify(key)} should not start with _ which is a reserved prefix for Vue internals.`);4590 }4591 return has;4592 }4593};4594// In dev mode, the proxy target exposes the same properties as seen on `this`4595// for easier console inspection. In prod mode it will be an empty object so4596// these properties definitions can be skipped.4597function createRenderContext(instance) {4598 const target = {};4599 // expose internal instance for proxy handlers4600 Object.defineProperty(target, `_`, {4601 configurable: true,4602 enumerable: false,4603 get: () => instance4604 });4605 // expose public properties4606 Object.keys(publicPropertiesMap).forEach(key => {4607 Object.defineProperty(target, key, {4608 configurable: true,4609 enumerable: false,4610 get: () => publicPropertiesMap[key](instance),4611 // intercepted by the proxy so no need for implementation,4612 // but needed to prevent set errors4613 set: NOOP4614 });4615 });4616 // expose global properties4617 const { globalProperties } = instance.appContext.config;4618 Object.keys(globalProperties).forEach(key => {4619 Object.defineProperty(target, key, {4620 configurable: true,4621 enumerable: false,4622 get: () => globalProperties[key],4623 set: NOOP4624 });4625 });4626 return target;4627}4628// dev only4629function exposePropsOnRenderContext(instance) {4630 const { ctx, type: { props: propsOptions } } = instance;4631 if (propsOptions) {4632 Object.keys(normalizePropsOptions(propsOptions)[0]).forEach(key => {4633 Object.defineProperty(ctx, key, {4634 enumerable: true,4635 configurable: true,4636 get: () => instance.props[key],4637 set: NOOP4638 });4639 });4640 }4641}4642// dev only4643function exposeSetupStateOnRenderContext(instance) {4644 const { ctx, setupState } = instance;4645 Object.keys(toRaw(setupState)).forEach(key => {4646 Object.defineProperty(ctx, key, {4647 enumerable: true,4648 configurable: true,4649 get: () => setupState[key],4650 set: NOOP4651 });4652 });4653}4654const emptyAppContext = createAppContext();4655let uid$1 = 0;4656function createComponentInstance(vnode, parent, suspense) {4657 // inherit parent app context - or - if root, adopt from root vnode4658 const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext;4659 const instance = {4660 uid: uid$1++,4661 vnode,4662 parent,4663 appContext,4664 type: vnode.type,4665 root: null,4666 next: null,4667 subTree: null,4668 update: null,4669 render: null,4670 proxy: null,4671 withProxy: null,4672 effects: null,4673 provides: parent ? parent.provides : Object.create(appContext.provides),4674 accessCache: null,4675 renderCache: [],4676 // state4677 ctx: EMPTY_OBJ,4678 data: EMPTY_OBJ,4679 props: EMPTY_OBJ,4680 attrs: EMPTY_OBJ,4681 slots: EMPTY_OBJ,4682 refs: EMPTY_OBJ,4683 setupState: EMPTY_OBJ,4684 setupContext: null,4685 // per-instance asset storage (mutable during options resolution)4686 components: Object.create(appContext.components),4687 directives: Object.create(appContext.directives),4688 // suspense related4689 suspense,4690 asyncDep: null,4691 asyncResolved: false,4692 // lifecycle hooks4693 // not using enums here because it results in computed properties4694 isMounted: false,4695 isUnmounted: false,4696 isDeactivated: false,4697 bc: null,4698 c: null,4699 bm: null,4700 m: null,4701 bu: null,4702 u: null,4703 um: null,4704 bum: null,4705 da: null,4706 a: null,4707 rtg: null,4708 rtc: null,4709 ec: null,4710 emit: null // to be set immediately4711 };4712 {4713 instance.ctx = createRenderContext(instance);4714 }4715 instance.root = parent ? parent.root : instance;4716 instance.emit = emit.bind(null, instance);4717 return instance;4718}4719let currentInstance = null;4720const setCurrentInstance = (instance) => {4721 currentInstance = instance;4722};4723const isBuiltInTag = /*#__PURE__*/ makeMap('slot,component');4724function validateComponentName(name, config) {4725 const appIsNativeTag = config.isNativeTag || NO;4726 if (isBuiltInTag(name) || appIsNativeTag(name)) {4727 warn('Do not use built-in or reserved HTML elements as component id: ' + name);4728 }4729}4730let isInSSRComponentSetup = false;4731function setupComponent(instance, isSSR = false) {4732 isInSSRComponentSetup = isSSR;4733 const { props, children, shapeFlag } = instance.vnode;4734 const isStateful = shapeFlag & 4 /* STATEFUL_COMPONENT */;4735 initProps(instance, props, isStateful, isSSR);4736 initSlots(instance, children);4737 const setupResult = isStateful4738 ? setupStatefulComponent(instance, isSSR)4739 : undefined;4740 isInSSRComponentSetup = false;4741 return setupResult;4742}4743function setupStatefulComponent(instance, isSSR) {4744 const Component = instance.type;4745 {4746 if (Component.name) {4747 validateComponentName(Component.name, instance.appContext.config);4748 }4749 if (Component.components) {4750 const names = Object.keys(Component.components);4751 for (let i = 0; i < names.length; i++) {4752 validateComponentName(names[i], instance.appContext.config);4753 }4754 }4755 if (Component.directives) {4756 const names = Object.keys(Component.directives);4757 for (let i = 0; i < names.length; i++) {4758 validateDirectiveName(names[i]);4759 }4760 }4761 }4762 // 0. create render proxy property access cache4763 instance.accessCache = {};4764 // 1. create public instance / render proxy4765 // also mark it raw so it's never observed4766 instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers);4767 {4768 exposePropsOnRenderContext(instance);4769 }4770 // 2. call setup()4771 const { setup } = Component;4772 if (setup) {4773 const setupContext = (instance.setupContext =4774 setup.length > 1 ? createSetupContext(instance) : null);4775 currentInstance = instance;4776 pauseTracking();4777 const setupResult = callWithErrorHandling(setup, instance, 0 /* SETUP_FUNCTION */, [ shallowReadonly(instance.props) , setupContext]);4778 resetTracking();4779 currentInstance = null;4780 if (isPromise(setupResult)) {4781 if (isSSR) {4782 // return the promise so server-renderer can wait on it4783 return setupResult.then((resolvedResult) => {4784 handleSetupResult(instance, resolvedResult);4785 });4786 }4787 else {4788 // async setup returned Promise.4789 // bail here and wait for re-entry.4790 instance.asyncDep = setupResult;4791 }4792 }4793 else {4794 handleSetupResult(instance, setupResult);4795 }4796 }4797 else {4798 finishComponentSetup(instance);4799 }4800}4801function handleSetupResult(instance, setupResult, isSSR) {4802 if (isFunction(setupResult)) {4803 // setup returned an inline render function4804 instance.render = setupResult;4805 }4806 else if (isObject(setupResult)) {4807 if ( isVNode(setupResult)) {4808 warn(`setup() should not return VNodes directly - ` +4809 `return a render function instead.`);4810 }4811 // setup returned bindings.4812 // assuming a render function compiled from template is present.4813 instance.setupState = reactive(setupResult);4814 {4815 exposeSetupStateOnRenderContext(instance);4816 }4817 }4818 else if ( setupResult !== undefined) {4819 warn(`setup() should return an object. Received: ${setupResult === null ? 'null' : typeof setupResult}`);4820 }4821 finishComponentSetup(instance);4822}4823function finishComponentSetup(instance, isSSR) {4824 const Component = instance.type;4825 // template / render function normalization4826 if (!instance.render) {4827 if ( !Component.render) {4828 /* istanbul ignore if */4829 if ( Component.template) {4830 warn(`Component provided template option but ` +4831 `runtime compilation is not supported in this build of Vue.` +4832 ( ` Use "vue.esm-browser.js" instead.`4833 ) /* should not happen */);4834 }4835 else {4836 warn(`Component is missing template or render function.`);4837 }4838 }4839 instance.render = (Component.render || NOOP);4840 // for runtime-compiled render functions using `with` blocks, the render4841 // proxy used needs a different `has` handler which is more performant and4842 // also only allows a whitelist of globals to fallthrough.4843 if (instance.render._rc) {4844 instance.withProxy = new Proxy(instance.ctx, RuntimeCompiledPublicInstanceProxyHandlers);4845 }4846 }4847 // support for 2.x options4848 {4849 currentInstance = instance;4850 applyOptions(instance, Component);4851 currentInstance = null;4852 }4853}4854const attrHandlers = {4855 get: (target, key) => {4856 {4857 markAttrsAccessed();4858 }4859 return target[key];4860 },4861 set: () => {4862 warn(`setupContext.attrs is readonly.`);4863 return false;4864 },4865 deleteProperty: () => {4866 warn(`setupContext.attrs is readonly.`);4867 return false;4868 }4869};4870function createSetupContext(instance) {4871 { ...

vue3.js

Source:vue3.js

...1845 // dev only flag to track whether $attrs was used during render.1846 // If $attrs was used during render then the warning for failed attrs1847 // fallthrough can be suppressed.1848 let accessedAttrs = false;1849 function markAttrsAccessed() {1850 accessedAttrs = true;1851 }1852 function renderComponentRoot(instance) {1853 const { type: Component, vnode, proxy, withProxy, props, propsOptions: [propsOptions], slots, attrs, emit, render, renderCache, data, setupState, ctx } = instance;1854 let result;1855 currentRenderingInstance = instance;1856 {1857 accessedAttrs = false;1858 }1859 try {1860 let fallthroughAttrs;1861 if (vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */) {1862 // withProxy is a proxy with a different `has` trap only for1863 // runtime-compiled render functions using `with` block.1864 const proxyToUse = withProxy || proxy;1865 result = normalizeVNode(render.call(proxyToUse, proxyToUse, renderCache, props, setupState, data, ctx));1866 fallthroughAttrs = attrs;1867 }1868 else {1869 // functional1870 const render = Component;1871 // in dev, mark attrs accessed if optional props (attrs === props)1872 if (true && attrs === props) {1873 markAttrsAccessed();1874 }1875 result = normalizeVNode(render.length > 11876 ? render(props, true1877 ? {1878 get attrs() {1879 markAttrsAccessed();1880 return attrs;1881 },1882 slots,1883 emit1884 }1885 : { attrs, slots, emit })1886 : render(props, null /* we know it doesn't need it */));1887 fallthroughAttrs = Component.props1888 ? attrs1889 : getFunctionalFallthrough(attrs);1890 }1891 // attr merging1892 // in dev mode, comments are preserved, and it's possible for a template1893 // to have comments along side the root element which makes it a fragment ...

index.esm.js

Source:index.esm.js

...1370 * mark the current rendering instance for asset resolution (e.g.1371 * resolveComponent, resolveDirective) during render1372 */1373let currentRenderingInstance = null;1374function markAttrsAccessed() {1375}1376function filterSingleRoot(children) {1377 let singleRoot;1378 for (let i = 0; i < children.length; i++) {1379 const child = children[i];1380 if (isVNode(child)) {1381 // ignore user comment1382 if (child.type !== Comment || child.children === 'v-if') {1383 if (singleRoot) {1384 // has more than 1 non-comment child, return now1385 return;1386 }1387 else {1388 singleRoot = child;1389 }1390 }1391 }1392 else {1393 return;1394 }1395 }1396 return singleRoot;1397}1398const isSuspense = (type) => type.__isSuspense;1399function normalizeSuspenseChildren(vnode) {1400 const { shapeFlag, children } = vnode;1401 let content;1402 let fallback;1403 if (shapeFlag & 32 /* SLOTS_CHILDREN */) {1404 content = normalizeSuspenseSlot(children.default);1405 fallback = normalizeSuspenseSlot(children.fallback);1406 }1407 else {1408 content = normalizeSuspenseSlot(children);1409 fallback = normalizeVNode(null);1410 }1411 return {1412 content,1413 fallback1414 };1415}1416function normalizeSuspenseSlot(s) {1417 if (isFunction(s)) {1418 s = s();1419 }1420 if (isArray(s)) {1421 const singleChild = filterSingleRoot(s);1422 if ((process.env.NODE_ENV !== 'production') && !singleChild) {1423 warn(`<Suspense> slots expect a single root node.`);1424 }1425 s = singleChild;1426 }1427 return normalizeVNode(s);1428}1429function queueEffectWithSuspense(fn, suspense) {1430 if (suspense && suspense.pendingBranch) {1431 if (isArray(fn)) {1432 suspense.effects.push(...fn);1433 }1434 else {1435 suspense.effects.push(fn);1436 }1437 }1438 else {1439 queuePostFlushCb(fn);1440 }1441}1442let isRenderingCompiledSlot = 0;1443const setCompiledSlotRendering = (n) => (isRenderingCompiledSlot += n);1444// SFC scoped style ID management.1445let currentScopeId = null;1446// initial value for watchers to trigger on undefined initial values1447const INITIAL_WATCHER_VALUE = {};1448function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ, instance = currentInstance) {1449 if ((process.env.NODE_ENV !== 'production') && !cb) {1450 if (immediate !== undefined) {1451 warn(`watch() "immediate" option is only respected when using the ` +1452 `watch(source, callback, options?) signature.`);1453 }1454 if (deep !== undefined) {1455 warn(`watch() "deep" option is only respected when using the ` +1456 `watch(source, callback, options?) signature.`);1457 }1458 }1459 const warnInvalidSource = (s) => {1460 warn(`Invalid watch source: `, s, `A watch source can only be a getter/effect function, a ref, ` +1461 `a reactive object, or an array of these types.`);1462 };1463 let getter;1464 let forceTrigger = false;1465 if (isRef(source)) {1466 getter = () => source.value;1467 forceTrigger = !!source._shallow;1468 }1469 else if (isReactive(source)) {1470 getter = () => source;1471 deep = true;1472 }1473 else if (isArray(source)) {1474 getter = () => source.map(s => {1475 if (isRef(s)) {1476 return s.value;1477 }1478 else if (isReactive(s)) {1479 return traverse(s);1480 }1481 else if (isFunction(s)) {1482 return callWithErrorHandling(s, instance, 2 /* WATCH_GETTER */);1483 }1484 else {1485 (process.env.NODE_ENV !== 'production') && warnInvalidSource(s);1486 }1487 });1488 }1489 else if (isFunction(source)) {1490 if (cb) {1491 // getter with cb1492 getter = () => callWithErrorHandling(source, instance, 2 /* WATCH_GETTER */);1493 }1494 else {1495 // no cb -> simple effect1496 getter = () => {1497 if (instance && instance.isUnmounted) {1498 return;1499 }1500 if (cleanup) {1501 cleanup();1502 }1503 return callWithErrorHandling(source, instance, 3 /* WATCH_CALLBACK */, [onInvalidate]);1504 };1505 }1506 }1507 else {1508 getter = NOOP;1509 (process.env.NODE_ENV !== 'production') && warnInvalidSource(source);1510 }1511 if (cb && deep) {1512 const baseGetter = getter;1513 getter = () => traverse(baseGetter());1514 }1515 let cleanup;1516 const onInvalidate = (fn) => {1517 cleanup = runner.options.onStop = () => {1518 callWithErrorHandling(fn, instance, 4 /* WATCH_CLEANUP */);1519 };1520 };1521 let oldValue = isArray(source) ? [] : INITIAL_WATCHER_VALUE;1522 const job = () => {1523 if (!runner.active) {1524 return;1525 }1526 if (cb) {1527 // watch(source, cb)1528 const newValue = runner();1529 if (deep || forceTrigger || hasChanged(newValue, oldValue)) {1530 // cleanup before running cb again1531 if (cleanup) {1532 cleanup();1533 }1534 callWithAsyncErrorHandling(cb, instance, 3 /* WATCH_CALLBACK */, [1535 newValue,1536 // pass undefined as the old value when it's changed for the first time1537 oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,1538 onInvalidate1539 ]);1540 oldValue = newValue;1541 }1542 }1543 else {1544 // watchEffect1545 runner();1546 }1547 };1548 // important: mark the job as a watcher callback so that scheduler knows1549 // it is allowed to self-trigger (#1727)1550 job.allowRecurse = !!cb;1551 let scheduler;1552 if (flush === 'sync') {1553 scheduler = job;1554 }1555 else if (flush === 'post') {1556 scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);1557 }1558 else {1559 // default: 'pre'1560 scheduler = () => {1561 if (!instance || instance.isMounted) {1562 queuePreFlushCb(job);1563 }1564 else {1565 // with 'pre' option, the first call must happen before1566 // the component is mounted so it is called synchronously.1567 job();1568 }1569 };1570 }1571 const runner = effect(getter, {1572 lazy: true,1573 onTrack,1574 onTrigger,1575 scheduler1576 });1577 recordInstanceBoundEffect(runner, instance);1578 // initial run1579 if (cb) {1580 if (immediate) {1581 job();1582 }1583 else {1584 oldValue = runner();1585 }1586 }1587 else if (flush === 'post') {1588 queuePostRenderEffect(runner, instance && instance.suspense);1589 }1590 else {1591 runner();1592 }1593 return () => {1594 stop(runner);1595 if (instance) {1596 remove(instance.effects, runner);1597 }1598 };1599}1600// this.$watch1601function instanceWatch(source, cb, options) {1602 const publicThis = this.proxy;1603 const getter = isString(source)1604 ? () => publicThis[source]1605 : source.bind(publicThis);1606 return doWatch(getter, cb.bind(publicThis), options, this);1607}1608function traverse(value, seen = new Set()) {1609 if (!isObject(value) || seen.has(value)) {1610 return value;1611 }1612 seen.add(value);1613 if (isRef(value)) {1614 traverse(value.value, seen);1615 }1616 else if (isArray(value)) {1617 for (let i = 0; i < value.length; i++) {1618 traverse(value[i], seen);1619 }1620 }1621 else if (isSet(value) || isMap(value)) {1622 value.forEach((v) => {1623 traverse(v, seen);1624 });1625 }1626 else {1627 for (const key in value) {1628 traverse(value[key], seen);1629 }1630 }1631 return value;1632}1633// implementation, close to no-op1634function defineComponent(options) {1635 return isFunction(options) ? { setup: options, name: options.name } : options;1636}1637const queuePostRenderEffect = queueEffectWithSuspense1638 ;1639const isTeleport = (type) => type.__isTeleport;1640const NULL_DYNAMIC_COMPONENT = Symbol();1641const Fragment = Symbol((process.env.NODE_ENV !== 'production') ? 'Fragment' : undefined);1642const Text = Symbol((process.env.NODE_ENV !== 'production') ? 'Text' : undefined);1643const Comment = Symbol((process.env.NODE_ENV !== 'production') ? 'Comment' : undefined);1644Symbol((process.env.NODE_ENV !== 'production') ? 'Static' : undefined);1645let currentBlock = null;1646function isVNode(value) {1647 return value ? value.__v_isVNode === true : false;1648}1649const createVNodeWithArgsTransform = (...args) => {1650 return _createVNode(...(args));1651};1652const InternalObjectKey = `__vInternal`;1653const normalizeKey = ({ key }) => key != null ? key : null;1654const normalizeRef = ({ ref }) => {1655 return (ref != null1656 ? isString(ref) || isRef(ref) || isFunction(ref)1657 ? { i: currentRenderingInstance, r: ref }1658 : ref1659 : null);1660};1661const createVNode = ((process.env.NODE_ENV !== 'production')1662 ? createVNodeWithArgsTransform1663 : _createVNode);1664function _createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) {1665 if (!type || type === NULL_DYNAMIC_COMPONENT) {1666 if ((process.env.NODE_ENV !== 'production') && !type) {1667 warn(`Invalid vnode type when creating vnode: ${type}.`);1668 }1669 type = Comment;1670 }1671 if (isVNode(type)) {1672 // createVNode receiving an existing vnode. This happens in cases like1673 // <component :is="vnode"/>1674 // #2078 make sure to merge refs during the clone instead of overwriting it1675 const cloned = cloneVNode(type, props, true /* mergeRef: true */);1676 if (children) {1677 normalizeChildren(cloned, children);1678 }1679 return cloned;1680 }1681 // class component normalization.1682 if (isClassComponent(type)) {1683 type = type.__vccOpts;1684 }1685 // class & style normalization.1686 if (props) {1687 // for reactive or proxy objects, we need to clone it to enable mutation.1688 if (isProxy(props) || InternalObjectKey in props) {1689 props = extend({}, props);1690 }1691 let { class: klass, style } = props;1692 if (klass && !isString(klass)) {1693 props.class = normalizeClass(klass);1694 }1695 if (isObject(style)) {1696 // reactive state objects need to be cloned since they are likely to be1697 // mutated1698 if (isProxy(style) && !isArray(style)) {1699 style = extend({}, style);1700 }1701 props.style = normalizeStyle(style);1702 }1703 }1704 // encode the vnode type information into a bitmap1705 const shapeFlag = isString(type)1706 ? 1 /* ELEMENT */1707 : isSuspense(type)1708 ? 128 /* SUSPENSE */1709 : isTeleport(type)1710 ? 64 /* TELEPORT */1711 : isObject(type)1712 ? 4 /* STATEFUL_COMPONENT */1713 : isFunction(type)1714 ? 2 /* FUNCTIONAL_COMPONENT */1715 : 0;1716 if ((process.env.NODE_ENV !== 'production') && shapeFlag & 4 /* STATEFUL_COMPONENT */ && isProxy(type)) {1717 type = toRaw(type);1718 warn(`Vue received a Component which was made a reactive object. This can ` +1719 `lead to unnecessary performance overhead, and should be avoided by ` +1720 `marking the component with \`markRaw\` or using \`shallowRef\` ` +1721 `instead of \`ref\`.`, `\nComponent that was made reactive: `, type);1722 }1723 const vnode = {1724 __v_isVNode: true,1725 ["__v_skip" /* SKIP */]: true,1726 type,1727 props,1728 key: props && normalizeKey(props),1729 ref: props && normalizeRef(props),1730 scopeId: currentScopeId,1731 children: null,1732 component: null,1733 suspense: null,1734 ssContent: null,1735 ssFallback: null,1736 dirs: null,1737 transition: null,1738 el: null,1739 anchor: null,1740 target: null,1741 targetAnchor: null,1742 staticCount: 0,1743 shapeFlag,1744 patchFlag,1745 dynamicProps,1746 dynamicChildren: null,1747 appContext: null1748 };1749 // validate key1750 if ((process.env.NODE_ENV !== 'production') && vnode.key !== vnode.key) {1751 warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type);1752 }1753 normalizeChildren(vnode, children);1754 // normalize suspense children1755 if ( shapeFlag & 128 /* SUSPENSE */) {1756 const { content, fallback } = normalizeSuspenseChildren(vnode);1757 vnode.ssContent = content;1758 vnode.ssFallback = fallback;1759 }1760 if (// avoid a block node from tracking itself1761 !isBlockNode &&1762 // has current parent block1763 currentBlock &&1764 // presence of a patch flag indicates this node needs patching on updates.1765 // component nodes also should always be patched, because even if the1766 // component doesn't need to update, it needs to persist the instance on to1767 // the next vnode so that it can be properly unmounted later.1768 (patchFlag > 0 || shapeFlag & 6 /* COMPONENT */) &&1769 // the EVENTS flag is only for hydration and if it is the only flag, the1770 // vnode should not be considered dynamic due to handler caching.1771 patchFlag !== 32 /* HYDRATE_EVENTS */) {1772 currentBlock.push(vnode);1773 }1774 return vnode;1775}1776function cloneVNode(vnode, extraProps, mergeRef = false) {1777 // This is intentionally NOT using spread or extend to avoid the runtime1778 // key enumeration cost.1779 const { props, ref, patchFlag } = vnode;1780 const mergedProps = extraProps ? mergeProps(props || {}, extraProps) : props;1781 return {1782 __v_isVNode: true,1783 ["__v_skip" /* SKIP */]: true,1784 type: vnode.type,1785 props: mergedProps,1786 key: mergedProps && normalizeKey(mergedProps),1787 ref: extraProps && extraProps.ref1788 ? // #2078 in the case of <component :is="vnode" ref="extra"/>1789 // if the vnode itself already has a ref, cloneVNode will need to merge1790 // the refs so the single vnode can be set on multiple refs1791 mergeRef && ref1792 ? isArray(ref)1793 ? ref.concat(normalizeRef(extraProps))1794 : [ref, normalizeRef(extraProps)]1795 : normalizeRef(extraProps)1796 : ref,1797 scopeId: vnode.scopeId,1798 children: vnode.children,1799 target: vnode.target,1800 targetAnchor: vnode.targetAnchor,1801 staticCount: vnode.staticCount,1802 shapeFlag: vnode.shapeFlag,1803 // if the vnode is cloned with extra props, we can no longer assume its1804 // existing patch flag to be reliable and need to add the FULL_PROPS flag.1805 // note: perserve flag for fragments since they use the flag for children1806 // fast paths only.1807 patchFlag: extraProps && vnode.type !== Fragment1808 ? patchFlag === -1 // hoisted node1809 ? 16 /* FULL_PROPS */1810 : patchFlag | 16 /* FULL_PROPS */1811 : patchFlag,1812 dynamicProps: vnode.dynamicProps,1813 dynamicChildren: vnode.dynamicChildren,1814 appContext: vnode.appContext,1815 dirs: vnode.dirs,1816 transition: vnode.transition,1817 // These should technically only be non-null on mounted VNodes. However,1818 // they *should* be copied for kept-alive vnodes. So we just always copy1819 // them since them being non-null during a mount doesn't affect the logic as1820 // they will simply be overwritten.1821 component: vnode.component,1822 suspense: vnode.suspense,1823 ssContent: vnode.ssContent && cloneVNode(vnode.ssContent),1824 ssFallback: vnode.ssFallback && cloneVNode(vnode.ssFallback),1825 el: vnode.el,1826 anchor: vnode.anchor1827 };1828}1829/**1830 * @private1831 */1832function createTextVNode(text = ' ', flag = 0) {1833 return createVNode(Text, null, text, flag);1834}1835function normalizeVNode(child) {1836 if (child == null || typeof child === 'boolean') {1837 // empty placeholder1838 return createVNode(Comment);1839 }1840 else if (isArray(child)) {1841 // fragment1842 return createVNode(Fragment, null, child);1843 }1844 else if (typeof child === 'object') {1845 // already vnode, this should be the most common since compiled templates1846 // always produce all-vnode children arrays1847 return child.el === null ? child : cloneVNode(child);1848 }1849 else {1850 // strings and numbers1851 return createVNode(Text, null, String(child));1852 }1853}1854function normalizeChildren(vnode, children) {1855 let type = 0;1856 const { shapeFlag } = vnode;1857 if (children == null) {1858 children = null;1859 }1860 else if (isArray(children)) {1861 type = 16 /* ARRAY_CHILDREN */;1862 }1863 else if (typeof children === 'object') {1864 if (shapeFlag & 1 /* ELEMENT */ || shapeFlag & 64 /* TELEPORT */) {1865 // Normalize slot to plain children for plain element and Teleport1866 const slot = children.default;1867 if (slot) {1868 // _c marker is added by withCtx() indicating this is a compiled slot1869 slot._c && setCompiledSlotRendering(1);1870 normalizeChildren(vnode, slot());1871 slot._c && setCompiledSlotRendering(-1);1872 }1873 return;1874 }1875 else {1876 type = 32 /* SLOTS_CHILDREN */;1877 const slotFlag = children._;1878 if (!slotFlag && !(InternalObjectKey in children)) {1879 children._ctx = currentRenderingInstance;1880 }1881 else if (slotFlag === 3 /* FORWARDED */ && currentRenderingInstance) {1882 // a child component receives forwarded slots from the parent.1883 // its slot type is determined by its parent's slot type.1884 if (currentRenderingInstance.vnode.patchFlag & 1024 /* DYNAMIC_SLOTS */) {1885 children._ = 2 /* DYNAMIC */;1886 vnode.patchFlag |= 1024 /* DYNAMIC_SLOTS */;1887 }1888 else {1889 children._ = 1 /* STABLE */;1890 }1891 }1892 }1893 }1894 else if (isFunction(children)) {1895 children = { default: children, _ctx: currentRenderingInstance };1896 type = 32 /* SLOTS_CHILDREN */;1897 }1898 else {1899 children = String(children);1900 // force teleport children to array so it can be moved around1901 if (shapeFlag & 64 /* TELEPORT */) {1902 type = 16 /* ARRAY_CHILDREN */;1903 children = [createTextVNode(children)];1904 }1905 else {1906 type = 8 /* TEXT_CHILDREN */;1907 }1908 }1909 vnode.children = children;1910 vnode.shapeFlag |= type;1911}1912function mergeProps(...args) {1913 const ret = extend({}, args[0]);1914 for (let i = 1; i < args.length; i++) {1915 const toMerge = args[i];1916 for (const key in toMerge) {1917 if (key === 'class') {1918 if (ret.class !== toMerge.class) {1919 ret.class = normalizeClass([ret.class, toMerge.class]);1920 }1921 }1922 else if (key === 'style') {1923 ret.style = normalizeStyle([ret.style, toMerge.style]);1924 }1925 else if (isOn(key)) {1926 const existing = ret[key];1927 const incoming = toMerge[key];1928 if (existing !== incoming) {1929 ret[key] = existing1930 ? [].concat(existing, toMerge[key])1931 : incoming;1932 }1933 }1934 else if (key !== '') {1935 ret[key] = toMerge[key];1936 }1937 }1938 }1939 return ret;1940}1941let isInBeforeCreate = false;1942function resolveMergedOptions(instance) {1943 const raw = instance.type;1944 const { __merged, mixins, extends: extendsOptions } = raw;1945 if (__merged)1946 return __merged;1947 const globalMixins = instance.appContext.mixins;1948 if (!globalMixins.length && !mixins && !extendsOptions)1949 return raw;1950 const options = {};1951 globalMixins.forEach(m => mergeOptions(options, m, instance));1952 mergeOptions(options, raw, instance);1953 return (raw.__merged = options);1954}1955function mergeOptions(to, from, instance) {1956 const strats = instance.appContext.config.optionMergeStrategies;1957 const { mixins, extends: extendsOptions } = from;1958 extendsOptions && mergeOptions(to, extendsOptions, instance);1959 mixins &&1960 mixins.forEach((m) => mergeOptions(to, m, instance));1961 for (const key in from) {1962 if (strats && hasOwn(strats, key)) {1963 to[key] = strats[key](to[key], from[key], instance.proxy, key);1964 }1965 else {1966 to[key] = from[key];1967 }1968 }1969}1970/**1971 * #2437 In Vue 3, functional components do not have a public instance proxy but1972 * they exist in the internal parent chain. For code that relies on traversing1973 * public $parent chains, skip functional ones and go to the parent instead.1974 */1975const getPublicInstance = (i) => i && (i.proxy ? i.proxy : getPublicInstance(i.parent));1976const publicPropertiesMap = extend(Object.create(null), {1977 $: i => i,1978 $el: i => i.vnode.el,1979 $data: i => i.data,1980 $props: i => ((process.env.NODE_ENV !== 'production') ? shallowReadonly(i.props) : i.props),1981 $attrs: i => ((process.env.NODE_ENV !== 'production') ? shallowReadonly(i.attrs) : i.attrs),1982 $slots: i => ((process.env.NODE_ENV !== 'production') ? shallowReadonly(i.slots) : i.slots),1983 $refs: i => ((process.env.NODE_ENV !== 'production') ? shallowReadonly(i.refs) : i.refs),1984 $parent: i => getPublicInstance(i.parent),1985 $root: i => i.root && i.root.proxy,1986 $emit: i => i.emit,1987 $options: i => (__VUE_OPTIONS_API__ ? resolveMergedOptions(i) : i.type),1988 $forceUpdate: i => () => queueJob(i.update),1989 $nextTick: i => nextTick.bind(i.proxy),1990 $watch: i => (__VUE_OPTIONS_API__ ? instanceWatch.bind(i) : NOOP)1991});1992const PublicInstanceProxyHandlers = {1993 get({ _: instance }, key) {1994 const { ctx, setupState, data, props, accessCache, type, appContext } = instance;1995 // let @vue/reactivity know it should never observe Vue public instances.1996 if (key === "__v_skip" /* SKIP */) {1997 return true;1998 }1999 // for internal formatters to know that this is a Vue instance2000 if ((process.env.NODE_ENV !== 'production') && key === '__isVue') {2001 return true;2002 }2003 // data / props / ctx2004 // This getter gets called for every property access on the render context2005 // during render and is a major hotspot. The most expensive part of this2006 // is the multiple hasOwn() calls. It's much faster to do a simple property2007 // access on a plain object, so we use an accessCache object (with null2008 // prototype) to memoize what access type a key corresponds to.2009 let normalizedProps;2010 if (key[0] !== '$') {2011 const n = accessCache[key];2012 if (n !== undefined) {2013 switch (n) {2014 case 0 /* SETUP */:2015 return setupState[key];2016 case 1 /* DATA */:2017 return data[key];2018 case 3 /* CONTEXT */:2019 return ctx[key];2020 case 2 /* PROPS */:2021 return props[key];2022 // default: just fallthrough2023 }2024 }2025 else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {2026 accessCache[key] = 0 /* SETUP */;2027 return setupState[key];2028 }2029 else if (data !== EMPTY_OBJ && hasOwn(data, key)) {2030 accessCache[key] = 1 /* DATA */;2031 return data[key];2032 }2033 else if (2034 // only cache other properties when instance has declared (thus stable)2035 // props2036 (normalizedProps = instance.propsOptions[0]) &&2037 hasOwn(normalizedProps, key)) {2038 accessCache[key] = 2 /* PROPS */;2039 return props[key];2040 }2041 else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {2042 accessCache[key] = 3 /* CONTEXT */;2043 return ctx[key];2044 }2045 else if (!__VUE_OPTIONS_API__ || !isInBeforeCreate) {2046 accessCache[key] = 4 /* OTHER */;2047 }2048 }2049 const publicGetter = publicPropertiesMap[key];2050 let cssModule, globalProperties;2051 // public $xxx properties2052 if (publicGetter) {2053 if (key === '$attrs') {2054 track(instance, "get" /* GET */, key);2055 (process.env.NODE_ENV !== 'production') && markAttrsAccessed();2056 }2057 return publicGetter(instance);2058 }2059 else if (2060 // css module (injected by vue-loader)2061 (cssModule = type.__cssModules) &&2062 (cssModule = cssModule[key])) {2063 return cssModule;2064 }2065 else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {2066 // user may set custom properties to `this` that start with `$`2067 accessCache[key] = 3 /* CONTEXT */;2068 return ctx[key];2069 }...

setup.js

Source:setup.js

...213}214 const attrHandlers = {215 get: (target, key) => {216 {217 markAttrsAccessed();218 }219 return target[key];220 },221 set: () => {222 warn(`setupContext.attrs is readonly.`);223 return false;224 },225 deleteProperty: () => {226 warn(`setupContext.attrs is readonly.`);227 return false;228 }229 };230function handleSetupResult(instance, setupResult, isSSR) {231 if (isFunction(setupResult)) {...

component.js

Source:component.js

...264}265export function createAttrsProxy (instance) {266 return new Proxy(instance.attrs, {267 get (target, key) {268 markAttrsAccessed()269 track(instance, 'get', '$attrs')270 return target[key]271 }272 })273}274export function createSetupContext (instance) {275 const expose = exposed => {276 instance.exposed = exposed || {}277 }278 let attrs279 return {280 get attrs () {281 return attrs || (attrs = createAttrsProxy(instance))282 },...

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.markAttrsAccessed('input', 'value');7 await page.fill('input', 'Playwright');8 await page.screenshot({ path: `example.png` });9 await browser.close();10})();11const { chromium } = require('playwright');12(async () => {13 const browser = await chromium.launch();14 const context = await browser.newContext();15 const page = await context.newPage();16 await page.screenshot({ path: `example.png` });17 await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21 const browser = await chromium.launch();22 const page = await browser.newPage();

Using AI Code Generation

1const playwright = require('playwright');2(async () => {3 const browser = await playwright.chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.$eval('text=Get started', e => e.click());7 await page.evaluate(() => {8 window['playwright'].markAttrsAccessed(document.querySelector('text=Get started'), ['href']);9 });10 await page.$eval('text=Get started', e => e.click());11 await page.screenshot({ path: `example.png` });12 await browser.close();13})();

Using AI Code Generation

1const { chromium } = require('playwright');2const { markAttrsAccessed } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.click('text=Docs');8 await page.click('text=API');

Using AI Code Generation

1const {chromium, webkit, firefox} = require('playwright');2const browser = await chromium.launch();3const context = await browser.newContext();4const page = await context.newPage();5await page.$('text=Example Domain');6await page.markAttrsAccessed();7await browser.close();

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.markAttrsAccessed('input[type="text"]', ['placeholder']);6 await page.screenshot({ path: 'example.png' });7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch();12 const page = await browser.newPage();13 await page.markAttrsAccessed('input[type="text"]', ['placeholder']);14 await page.evaluate(() => {15 document.querySelector('input[type="text"]').focus();16 });17 await page.screenshot({ path: 'example.png' });18 await browser.close();19})();20const { chromium } = require('playwright');21(async () => {22 const browser = await chromium.launch();23 const page = await browser.newPage();24 await page.markAttrsAccessed('input[type="text"]', ['placeholder']);25 await page.evaluate(() => {26 document.querySelector('input[type="text"]').focus();27 });28 await page.screenshot({ path: 'example.png' });29 await page.evaluate(() => {30 document.querySelector('input[type="text"]').blur();31 });32 await page.screenshot({ path: 'example1.png' });33 await browser.close();34})();35const { chromium } = require('playwright');36(async () => {37 const browser = await chromium.launch();38 const page = await browser.newPage();39 await page.markAttrsAccessed('input[type="text"]', ['placeholder']);40 await page.evaluate(() => {41 document.querySelector('input[type="text

Using AI Code Generation

1const playwright = require('playwright');2(async () => {3 const browser = await playwright['chromium'].launch();4 const context = await browser.newContext();5 await context.addInitScript(function () {6 window.playwright = {7 markAttrsAccessed: (selector, attr) => {8 console.log('selector: ' + selector + ' attr: ' + attr);9 },10 };11 });12 const page = await context.newPage();13 await page.waitForSelector('input[name="q"]');14 await page.fill('input[name="q"]', 'hello');15 await browser.close();16})();

Using AI Code Generation

1const { Playwright } = require('playwright');2const { Page } = require('playwright/lib/cjs/server/page');3const { ElementHandle } = require('playwright/lib/cjs/server/dom');4const { InternalAPI } = require('playwright/lib/cjs/server/internal-api');5const { JSHandle } = require('playwright/lib/cjs/server/jsHandle');6const playwright = new Playwright();7const browser = await playwright.chromium.launch();8const context = await browser.newContext();9const page = await context.newPage();10InternalAPI.markAttrsAccessed(page, ['mainFrame']);11InternalAPI.markAttrsAccessed(page.mainFrame(), ['url', 'name']);12InternalAPI.markAttrsAccessed(page.mainFrame().url(), ['url']);13InternalAPI.markAttrsAccessed(page.mainFrame().name(), ['name']);14InternalAPI.markAttrsAccessed(page.mainFrame().parentFrame(), ['parentFrame']);15InternalAPI.markAttrsAccessed(page.mainFrame().childFrames(), ['childFrames']);16InternalAPI.markAttrsAccessed(page.mainFrame().childFrames()[0], ['name']);17InternalAPI.markAttrsAccessed(page.mainFrame().childFrames()[0].name(), ['name']);18InternalAPI.markAsUsed(ElementHandle.prototype, 'contentFrame');19InternalAPI.markAsUsed(ElementHandle.prototype, 'ownerFrame');20InternalAPI.markAsUsed(ElementHandle.prototype, 'contentDocument');21InternalAPI.markAsUsed(ElementHandle.prototype, 'contentWindow');

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.setContent(`<body><div id="div1">text1</div><div id="div2">text2</div></body>`);6 await page.evaluate(() => {7 const div1 = document.querySelector('#div1');8 const div2 = document.querySelector('#div2');9 div1.addEventListener('click', () => {10 div2.textContent = 'text3';11 });12 div1.click();13 });14 await browser.close();15})();16const { chromium } = require('playwright');17(async () => {18 const browser = await chromium.launch();19 const page = await browser.newPage();20 await page.setContent(`<body><div id="div1">text1</div><div id="div2">text2</div></body>`);21 await page.evaluate(() => {22 const div1 = document.querySelector('#div1');23 const div2 = document.querySelector('#div2');24 div1.addEventListener('click', () => {25 div2.textContent = 'text3';26 });27 div1.click();28 });29 await browser.close();30})();31const { chromium } = require('playwright');32(async () => {33 const browser = await chromium.launch();34 const page = await browser.newPage();35 await page.setContent(`<body><div id="div1">text1</div><div id="div2">text2</div></body>`);36 await page.evaluate(() => {37 const div1 = document.querySelector('#div1');38 const div2 = document.querySelector('#div2');39 div1.addEventListener('click', () => {40 div2.textContent = 'text3';41 });42 div1.click();43 });44 await browser.close();45})();46const { chromium } = require('playwright');47(async () => {48 const browser = await chromium.launch();49 const page = await browser.newPage();50 await page.setContent(`<body><div id="div1">text1</div><div id="div2">text2</div></body>`);51 await page.evaluate(() => {

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 await context.addInitScript({path: 'markAttrs.js'});6 const page = await context.newPage();7 await page.screenshot({ path: `example.png` });8 await browser.close();9})();10const { InternalContext } = require('playwright');11InternalContext.prototype.markAttrsAccessed = function (obj, attrs) {12 const internal = this._delegate;13 attrs.forEach(attr => {14 internal.markAttributeAsAccessed(obj, attr);15 });16};17const { InternalContext } = require('playwright');18InternalContext.prototype.markAttrsAccessed = function (obj, attrs) {19 const internal = this._delegate;20 attrs.forEach(attr => {21 internal.markAttributeAsAccessed(obj, attr);22 });23};24const { InternalContext } = require('playwright');25InternalContext.prototype.markAttrsAccessed = function (obj, attrs) {26 const internal = this._delegate;27 attrs.forEach(attr => {28 internal.markAttributeAsAccessed(obj, attr);29 });30};31const { InternalContext } = require('playwright');32InternalContext.prototype.markAttrsAccessed = function (obj, attrs) {33 const internal = this._delegate;34 attrs.forEach(attr => {35 internal.markAttributeAsAccessed(obj, attr);36 });37};38const { InternalContext } = require('playwright');39InternalContext.prototype.markAttrsAccessed = function (obj, attrs) {40 const internal = this._delegate;41 attrs.forEach(attr => {42 internal.markAttributeAsAccessed(obj, attr);43 });44};45const { InternalContext } = require('playwright');46InternalContext.prototype.markAttrsAccessed = function (obj, attrs) {47 const internal = this._delegate;48 attrs.forEach(attr => {

Using AI Code Generation

1const internalAPI = require('playwright/lib/server/instrumentation.js').InternalAPI;2const browser = await chromium.launch();3const page = await browser.newPage();4internalAPI.markAttrsAccessed(page, ['mainFrame']);5await page.close();6await browser.close();

Playwright tutorial

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

Chapters:

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

Run Playwright Internal automation tests on LambdaTest cloud grid

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

View sample repo View DocumentationSign up Free

›

_