How to use unregisterHMR method in Playwright Internal

Best JavaScript code snippet using playwright-internal

vue.js

Source:vue.js

...2540const map = new Map();2541function registerHMR(instance) {2542 map.get(instance.type.__hmrId).instances.add(instance);2543}2544function unregisterHMR(instance) {2545 map.get(instance.type.__hmrId).instances.delete(instance);2546}2547function createRecord(id, comp) {2548 if (map.has(id)) {2549 return false;2550 }2551 map.set(id, {2552 comp,2553 instances: new Set()2554 });2555 return true;2556}2557function rerender(id, newRender) {2558 // Array.from creates a snapshot which avoids the set being mutated during2559 // updates2560 Array.from(map.get(id).instances).forEach(instance => {2561 if (newRender) {2562 instance.render = newRender;2563 }2564 instance.renderCache = [];2565 // this flag forces child components with slot content to update2566 instance.renderUpdated = true;2567 instance.update();2568 instance.renderUpdated = false;2569 });2570}2571function reload(id, newComp) {2572 const record = map.get(id);2573 // 1. Update existing comp definition to match new one2574 const comp = record.comp;2575 Object.assign(comp, newComp);2576 for (const key in comp) {2577 if (!(key in newComp)) {2578 delete comp[key];2579 }2580 }2581 // 2. Mark component dirty. This forces the renderer to replace the component2582 // on patch.2583 comp.__hmrUpdated = true;2584 // Array.from creates a snapshot which avoids the set being mutated during2585 // updates2586 Array.from(record.instances).forEach(instance => {2587 if (instance.parent) {2588 // 3. Force the parent instance to re-render. This will cause all updated2589 // components to be unmounted and re-mounted. Queue the update so that we2590 // don't end up forcing the same parent to re-render multiple times.2591 queueJob(instance.parent.update);2592 }2593 else if (instance.appContext.reload) {2594 // root instance mounted via createApp() has a reload method2595 instance.appContext.reload();2596 }2597 else if (typeof window !== 'undefined') {2598 // root instance inside tree created via raw render(). Force reload.2599 window.location.reload();2600 }2601 else {2602 console.warn('[HMR] Root or manually mounted instance modified. Full reload required.');2603 }2604 });2605 // 4. Make sure to unmark the component after the reload.2606 queuePostFlushCb(() => {2607 comp.__hmrUpdated = false;2608 });2609}2610function tryWrap(fn) {2611 return (id, arg) => {2612 try {2613 return fn(id, arg);2614 }2615 catch (e) {2616 console.error(e);2617 console.warn(`[HMR] Something went wrong during Vue component hot-reload. ` +2618 `Full reload required.`);2619 }2620 };2621}2622// Note: hydration is DOM-specific2623// But we have to place it in core due to tight coupling with core - splitting2624// it out creates a ton of unnecessary complexity.2625// Hydration also depends on some renderer internal logic which needs to be2626// passed in via arguments.2627function createHydrationFunctions({ mt: mountComponent, o: { patchProp } }) {2628 const hydrate = (vnode, container) => {2629 if ( !container.hasChildNodes()) {2630 warn(`Attempting to hydrate existing markup but container is empty.`);2631 return;2632 }2633 hydrateNode(container.firstChild, vnode);2634 flushPostFlushCbs();2635 };2636 // TODO handle mismatches2637 const hydrateNode = (node, vnode, parentComponent = null) => {2638 const { type, shapeFlag } = vnode;2639 vnode.el = node;2640 switch (type) {2641 case Text:2642 case Comment:2643 case Static:2644 return node.nextSibling;2645 case Fragment:2646 const anchor = (vnode.anchor = hydrateChildren(node.nextSibling, vnode.children, parentComponent));2647 // TODO handle potential hydration error if fragment didn't get2648 // back anchor as expected.2649 return anchor.nextSibling;2650 default:2651 if (shapeFlag & 1 /* ELEMENT */) {2652 return hydrateElement(node, vnode, parentComponent);2653 }2654 else if (shapeFlag & 6 /* COMPONENT */) {2655 // when setting up the render effect, if the initial vnode already2656 // has .el set, the component will perform hydration instead of mount2657 // on its sub-tree.2658 mountComponent(vnode, null, null, parentComponent, null, false);2659 const subTree = vnode.component.subTree;2660 return (subTree.anchor || subTree.el).nextSibling;2661 }2662 else if (shapeFlag & 64 /* PORTAL */) {2663 hydratePortal(vnode, parentComponent);2664 return node.nextSibling;2665 }2666 else if ( shapeFlag & 128 /* SUSPENSE */) ;2667 else {2668 warn('Invalid HostVNode type:', type, `(${typeof type})`);2669 }2670 }2671 };2672 const hydrateElement = (el, vnode, parentComponent) => {2673 const { props, patchFlag } = vnode;2674 // skip props & children if this is hoisted static nodes2675 if (patchFlag !== -1 /* HOISTED */) {2676 // props2677 if (props !== null) {2678 if (patchFlag & 16 /* FULL_PROPS */ ||2679 patchFlag & 32 /* HYDRATE_EVENTS */) {2680 for (const key in props) {2681 if (!isReservedProp(key) && isOn(key)) {2682 patchProp(el, key, props[key], null);2683 }2684 }2685 }2686 else if (props.onClick != null) {2687 // Fast path for click listeners (which is most often) to avoid2688 // iterating through props.2689 patchProp(el, 'onClick', props.onClick, null);2690 }2691 // vnode hooks2692 const { onVnodeBeforeMount, onVnodeMounted } = props;2693 if (onVnodeBeforeMount != null) {2694 invokeDirectiveHook(onVnodeBeforeMount, parentComponent, vnode);2695 }2696 if (onVnodeMounted != null) {2697 queuePostFlushCb(() => {2698 invokeDirectiveHook(onVnodeMounted, parentComponent, vnode);2699 });2700 }2701 }2702 // children2703 if (vnode.shapeFlag & 16 /* ARRAY_CHILDREN */ &&2704 // skip if element has innerHTML / textContent2705 !(props !== null && (props.innerHTML || props.textContent))) {2706 hydrateChildren(el.firstChild, vnode.children, parentComponent);2707 }2708 }2709 return el.nextSibling;2710 };2711 const hydrateChildren = (node, vnodes, parentComponent) => {2712 for (let i = 0; node != null && i < vnodes.length; i++) {2713 // TODO can skip normalizeVNode in optimized mode2714 // (need hint on rendered markup?)2715 const vnode = (vnodes[i] = normalizeVNode(vnodes[i]));2716 node = hydrateNode(node, vnode, parentComponent);2717 }2718 return node;2719 };2720 const hydratePortal = (vnode, parentComponent) => {2721 const targetSelector = vnode.props && vnode.props.target;2722 const target = (vnode.target = isString(targetSelector)2723 ? document.querySelector(targetSelector)2724 : targetSelector);2725 if (target != null && vnode.shapeFlag & 16 /* ARRAY_CHILDREN */) {2726 hydrateChildren(target.firstChild, vnode.children, parentComponent);2727 }2728 };2729 return [hydrate, hydrateNode];2730}2731function createDevEffectOptions(instance) {2732 return {2733 scheduler: queueJob,2734 onTrack: instance.rtc ? e => invokeHooks(instance.rtc, e) : void 0,2735 onTrigger: instance.rtg ? e => invokeHooks(instance.rtg, e) : void 02736 };2737}2738function invokeHooks(hooks, arg) {2739 for (let i = 0; i < hooks.length; i++) {2740 hooks[i](arg);2741 }2742}2743const queuePostRenderEffect = queueEffectWithSuspense2744 ;2745/**2746 * The createRenderer function accepts two generic arguments:2747 * HostNode and HostElement, corresponding to Node and Element types in the2748 * host environment. For example, for runtime-dom, HostNode would be the DOM2749 * `Node` interface and HostElement would be the DOM `Element` interface.2750 *2751 * Custom renderers can pass in the platform specific types like this:2752 *2753 * ``` js2754 * const { render, createApp } = createRenderer<Node, Element>({2755 * patchProp,2756 * ...nodeOps2757 * })2758 * ```2759 */2760function createRenderer(options) {2761 return baseCreateRenderer(options);2762}2763// Separate API for creating hydration-enabled renderer.2764// Hydration logic is only used when calling this function, making it2765// tree-shakable.2766function createHydrationRenderer(options) {2767 return baseCreateRenderer(options, createHydrationFunctions);2768}2769// implementation2770function baseCreateRenderer(options, createHydrationFns) {2771 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;2772 // Note: functions inside this closure should use `const xxx = () => {}`2773 // style in order to prevent being inlined by minifiers.2774 const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, optimized = false) => {2775 // patching & not same type, unmount old tree2776 if (n1 != null && !isSameVNodeType(n1, n2)) {2777 anchor = getNextHostNode(n1);2778 unmount(n1, parentComponent, parentSuspense, true);2779 n1 = null;2780 }2781 const { type, shapeFlag } = n2;2782 switch (type) {2783 case Text:2784 processText(n1, n2, container, anchor);2785 break;2786 case Comment:2787 processCommentNode(n1, n2, container, anchor);2788 break;2789 case Static:2790 if (n1 == null) {2791 mountStaticNode(n2, container, anchor, isSVG);2792 } // static nodes are noop on patch2793 break;2794 case Fragment:2795 processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2796 break;2797 default:2798 if (shapeFlag & 1 /* ELEMENT */) {2799 processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2800 }2801 else if (shapeFlag & 6 /* COMPONENT */) {2802 processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2803 }2804 else if (shapeFlag & 64 /* PORTAL */) {2805 type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);2806 }2807 else if ( shapeFlag & 128 /* SUSPENSE */) {2808 type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);2809 }2810 else {2811 warn('Invalid HostVNode type:', type, `(${typeof type})`);2812 }2813 }2814 };2815 const processText = (n1, n2, container, anchor) => {2816 if (n1 == null) {2817 hostInsert((n2.el = hostCreateText(n2.children)), container, anchor);2818 }2819 else {2820 const el = (n2.el = n1.el);2821 if (n2.children !== n1.children) {2822 hostSetText(el, n2.children);2823 }2824 }2825 };2826 const processCommentNode = (n1, n2, container, anchor) => {2827 if (n1 == null) {2828 hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor);2829 }2830 else {2831 // there's no support for dynamic comments2832 n2.el = n1.el;2833 }2834 };2835 const mountStaticNode = (n2, container, anchor, isSVG) => {2836 if (n2.el != null && hostCloneNode !== undefined) {2837 hostInsert(hostCloneNode(n2.el), container, anchor);2838 }2839 else {2840 // static nodes are only present when used with compiler-dom/runtime-dom2841 // which guarantees presence of hostInsertStaticContent.2842 n2.el = hostInsertStaticContent(n2.children, container, anchor, isSVG);2843 }2844 };2845 const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2846 isSVG = isSVG || n2.type === 'svg';2847 if (n1 == null) {2848 mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2849 }2850 else {2851 patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized);2852 }2853 if (n2.ref !== null && parentComponent !== null) {2854 setRef(n2.ref, n1 && n1.ref, parentComponent, n2.el);2855 }2856 };2857 const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {2858 let el;2859 const { type, props, shapeFlag, transition, scopeId, patchFlag } = vnode;2860 if (vnode.el !== null &&2861 hostCloneNode !== undefined &&2862 patchFlag === -1 /* HOISTED */) {2863 // If a vnode has non-null el, it means it's being reused.2864 // Only static vnodes can be reused, so its mounted DOM nodes should be2865 // exactly the same, and we can simply do a clone here.2866 el = vnode.el = hostCloneNode(vnode.el);2867 }2868 else {2869 el = vnode.el = hostCreateElement(vnode.type, isSVG);2870 // props2871 if (props != null) {2872 for (const key in props) {2873 if (!isReservedProp(key)) {2874 hostPatchProp(el, key, props[key], null, isSVG);2875 }2876 }2877 if (props.onVnodeBeforeMount != null) {2878 invokeDirectiveHook(props.onVnodeBeforeMount, parentComponent, vnode);2879 }2880 }2881 // scopeId2882 {2883 if (scopeId !== null) {2884 hostSetScopeId(el, scopeId);2885 }2886 const treeOwnerId = parentComponent && parentComponent.type.__scopeId;2887 // vnode's own scopeId and the current patched component's scopeId is2888 // different - this is a slot content node.2889 if (treeOwnerId != null && treeOwnerId !== scopeId) {2890 hostSetScopeId(el, treeOwnerId + '-s');2891 }2892 }2893 // children2894 if (shapeFlag & 8 /* TEXT_CHILDREN */) {2895 hostSetElementText(el, vnode.children);2896 }2897 else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {2898 mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG && type !== 'foreignObject', optimized || vnode.dynamicChildren !== null);2899 }2900 if (transition != null && !transition.persisted) {2901 transition.beforeEnter(el);2902 }2903 }2904 hostInsert(el, container, anchor);2905 const vnodeMountedHook = props && props.onVnodeMounted;2906 if (vnodeMountedHook != null ||2907 (transition != null && !transition.persisted)) {2908 queuePostRenderEffect(() => {2909 vnodeMountedHook &&2910 invokeDirectiveHook(vnodeMountedHook, parentComponent, vnode);2911 transition && !transition.persisted && transition.enter(el);2912 }, parentSuspense);2913 }2914 };2915 const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, optimized, start = 0) => {2916 for (let i = start; i < children.length; i++) {2917 const child = (children[i] = optimized2918 ? cloneIfMounted(children[i])2919 : normalizeVNode(children[i]));2920 patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, optimized);2921 }2922 };2923 const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, optimized) => {2924 const el = (n2.el = n1.el);2925 let { patchFlag, dynamicChildren } = n2;2926 const oldProps = (n1 && n1.props) || EMPTY_OBJ$1;2927 const newProps = n2.props || EMPTY_OBJ$1;2928 if (newProps.onVnodeBeforeUpdate != null) {2929 invokeDirectiveHook(newProps.onVnodeBeforeUpdate, parentComponent, n2, n1);2930 }2931 if ( parentComponent && parentComponent.renderUpdated) {2932 // HMR updated, force full diff2933 patchFlag = 0;2934 optimized = false;2935 dynamicChildren = null;2936 }2937 if (patchFlag > 0) {2938 // the presence of a patchFlag means this element's render code was2939 // generated by the compiler and can take the fast path.2940 // in this path old node and new node are guaranteed to have the same shape2941 // (i.e. at the exact same position in the source template)2942 if (patchFlag & 16 /* FULL_PROPS */) {2943 // element props contain dynamic keys, full diff needed2944 patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);2945 }2946 else {2947 // class2948 // this flag is matched when the element has dynamic class bindings.2949 if (patchFlag & 2 /* CLASS */) {2950 if (oldProps.class !== newProps.class) {2951 hostPatchProp(el, 'class', newProps.class, null, isSVG);2952 }2953 }2954 // style2955 // this flag is matched when the element has dynamic style bindings2956 if (patchFlag & 4 /* STYLE */) {2957 hostPatchProp(el, 'style', newProps.style, oldProps.style, isSVG);2958 }2959 // props2960 // This flag is matched when the element has dynamic prop/attr bindings2961 // other than class and style. The keys of dynamic prop/attrs are saved for2962 // faster iteration.2963 // Note dynamic keys like :[foo]="bar" will cause this optimization to2964 // bail out and go through a full diff because we need to unset the old key2965 if (patchFlag & 8 /* PROPS */) {2966 // if the flag is present then dynamicProps must be non-null2967 const propsToUpdate = n2.dynamicProps;2968 for (let i = 0; i < propsToUpdate.length; i++) {2969 const key = propsToUpdate[i];2970 const prev = oldProps[key];2971 const next = newProps[key];2972 if (prev !== next) {2973 hostPatchProp(el, key, next, prev, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);2974 }2975 }2976 }2977 }2978 // text2979 // This flag is matched when the element has only dynamic text children.2980 if (patchFlag & 1 /* TEXT */) {2981 if (n1.children !== n2.children) {2982 hostSetElementText(el, n2.children);2983 }2984 }2985 }2986 else if (!optimized && dynamicChildren == null) {2987 // unoptimized, full diff2988 patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);2989 }2990 const areChildrenSVG = isSVG && n2.type !== 'foreignObject';2991 if (dynamicChildren != null) {2992 patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG);2993 }2994 else if (!optimized) {2995 // full diff2996 patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG);2997 }2998 if (newProps.onVnodeUpdated != null) {2999 queuePostRenderEffect(() => {3000 invokeDirectiveHook(newProps.onVnodeUpdated, parentComponent, n2, n1);3001 }, parentSuspense);3002 }3003 };3004 // The fast path for blocks.3005 const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG) => {3006 for (let i = 0; i < newChildren.length; i++) {3007 const oldVNode = oldChildren[i];3008 const newVNode = newChildren[i];3009 // Determine the container (parent element) for the patch.3010 const container =3011 // - In the case of a Fragment, we need to provide the actual parent3012 // of the Fragment itself so it can move its children.3013 oldVNode.type === Fragment ||3014 // - In the case of different nodes, there is going to be a replacement3015 // which also requires the correct parent container3016 !isSameVNodeType(oldVNode, newVNode) ||3017 // - In the case of a component, it could contain anything.3018 oldVNode.shapeFlag & 6 /* COMPONENT */3019 ? hostParentNode(oldVNode.el)3020 : // In other cases, the parent container is not actually used so we3021 // just pass the block element here to avoid a DOM parentNode call.3022 fallbackContainer;3023 patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, true);3024 }3025 };3026 const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {3027 if (oldProps !== newProps) {3028 for (const key in newProps) {3029 if (isReservedProp(key))3030 continue;3031 const next = newProps[key];3032 const prev = oldProps[key];3033 if (next !== prev) {3034 hostPatchProp(el, key, next, prev, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);3035 }3036 }3037 if (oldProps !== EMPTY_OBJ$1) {3038 for (const key in oldProps) {3039 if (!isReservedProp(key) && !(key in newProps)) {3040 hostPatchProp(el, key, null, null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);3041 }3042 }3043 }3044 }3045 };3046 let devFragmentID = 0;3047 const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {3048 const fragmentStartAnchor = (n2.el = n13049 ? n1.el3050 : hostCreateComment( `fragment-${devFragmentID}-start` ));3051 const fragmentEndAnchor = (n2.anchor = n13052 ? n1.anchor3053 : hostCreateComment( `fragment-${devFragmentID}-end` ));3054 let { patchFlag, dynamicChildren } = n2;3055 if (patchFlag > 0) {3056 optimized = true;3057 }3058 if ( parentComponent && parentComponent.renderUpdated) {3059 // HMR updated, force full diff3060 patchFlag = 0;3061 optimized = false;3062 dynamicChildren = null;3063 }3064 if (n1 == null) {3065 {3066 devFragmentID++;3067 }3068 hostInsert(fragmentStartAnchor, container, anchor);3069 hostInsert(fragmentEndAnchor, container, anchor);3070 // a fragment can only have array children3071 // since they are either generated by the compiler, or implicitly created3072 // from arrays.3073 mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);3074 }3075 else {3076 if (patchFlag & 64 /* STABLE_FRAGMENT */ && dynamicChildren != null) {3077 // a stable fragment (template root or <template v-for>) doesn't need to3078 // patch children order, but it may contain dynamicChildren.3079 patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG);3080 }3081 else {3082 // keyed / unkeyed, or manual fragments.3083 // for keyed & unkeyed, since they are compiler generated from v-for,3084 // each child is guaranteed to be a block so the fragment will never3085 // have dynamicChildren.3086 patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized);3087 }3088 }3089 };3090 const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {3091 if (n1 == null) {3092 if (n2.shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) {3093 parentComponent.sink.activate(n2, container, anchor);3094 }3095 else {3096 mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG);3097 }3098 }3099 else {3100 const instance = (n2.component = n1.component);3101 if (shouldUpdateComponent(n1, n2, parentComponent, optimized)) {3102 if (3103 instance.asyncDep &&3104 !instance.asyncResolved) {3105 // async & still pending - just update props and slots3106 // since the component's reactive effect for render isn't set-up yet3107 {3108 pushWarningContext(n2);3109 }3110 updateComponentPreRender(instance, n2);3111 {3112 popWarningContext();3113 }3114 return;3115 }3116 else {3117 // normal update3118 instance.next = n2;3119 // in case the child component is also queued, remove it to avoid3120 // double updating the same child component in the same flush.3121 invalidateJob(instance.update);3122 // instance.update is the reactive effect runner.3123 instance.update();3124 }3125 }3126 else {3127 // no update needed. just copy over properties3128 n2.component = n1.component;3129 n2.el = n1.el;3130 }3131 }3132 if (n2.ref !== null && parentComponent !== null) {3133 if ( !(n2.shapeFlag & 4 /* STATEFUL_COMPONENT */)) {3134 pushWarningContext(n2);3135 warn(`Functional components do not support "ref" because they do not ` +3136 `have instances.`);3137 popWarningContext();3138 }3139 setRef(n2.ref, n1 && n1.ref, parentComponent, n2.component.proxy);3140 }3141 };3142 const mountComponent = (initialVNode, container, // only null during hydration3143 anchor, parentComponent, parentSuspense, isSVG) => {3144 const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent));3145 if ( instance.type.__hmrId != null) {3146 registerHMR(instance);3147 }3148 {3149 pushWarningContext(initialVNode);3150 }3151 // inject renderer internals for keepAlive3152 if (isKeepAlive(initialVNode)) {3153 const sink = instance.sink;3154 sink.renderer = internals;3155 sink.parentSuspense = parentSuspense;3156 }3157 // resolve props and slots for setup context3158 setupComponent(instance, parentSuspense);3159 // setup() is async. This component relies on async logic to be resolved3160 // before proceeding3161 if ( instance.asyncDep) {3162 if (!parentSuspense) {3163 warn('async setup() is used without a suspense boundary!');3164 return;3165 }3166 parentSuspense.registerDep(instance, setupRenderEffect);3167 // Give it a placeholder if this is not hydration3168 const placeholder = (instance.subTree = createVNode(Comment));3169 processCommentNode(null, placeholder, container, anchor);3170 initialVNode.el = placeholder.el;3171 return;3172 }3173 setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG);3174 {3175 popWarningContext();3176 }3177 };3178 const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG) => {3179 // create reactive effect for rendering3180 instance.update = effect(function componentEffect() {3181 if (!instance.isMounted) {3182 const subTree = (instance.subTree = renderComponentRoot(instance));3183 // beforeMount hook3184 if (instance.bm !== null) {3185 invokeHooks(instance.bm);3186 }3187 if (initialVNode.el && hydrateNode) {3188 // vnode has adopted host node - perform hydration instead of mount.3189 hydrateNode(initialVNode.el, subTree, instance);3190 }3191 else {3192 patch(null, subTree, container, // container is only null during hydration3193 anchor, instance, parentSuspense, isSVG);3194 initialVNode.el = subTree.el;3195 }3196 // mounted hook3197 if (instance.m !== null) {3198 queuePostRenderEffect(instance.m, parentSuspense);3199 }3200 // activated hook for keep-alive roots.3201 if (instance.a !== null &&3202 instance.vnode.shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {3203 queuePostRenderEffect(instance.a, parentSuspense);3204 }3205 instance.isMounted = true;3206 }3207 else {3208 // updateComponent3209 // This is triggered by mutation of component's own state (next: null)3210 // OR parent calling processComponent (next: HostVNode)3211 const { next } = instance;3212 {3213 pushWarningContext(next || instance.vnode);3214 }3215 if (next !== null) {3216 updateComponentPreRender(instance, next);3217 }3218 const nextTree = renderComponentRoot(instance);3219 const prevTree = instance.subTree;3220 instance.subTree = nextTree;3221 // beforeUpdate hook3222 if (instance.bu !== null) {3223 invokeHooks(instance.bu);3224 }3225 // reset refs3226 // only needed if previous patch had refs3227 if (instance.refs !== EMPTY_OBJ$1) {3228 instance.refs = {};3229 }3230 patch(prevTree, nextTree,3231 // parent may have changed if it's in a portal3232 hostParentNode(prevTree.el),3233 // anchor may have changed if it's in a fragment3234 getNextHostNode(prevTree), instance, parentSuspense, isSVG);3235 instance.vnode.el = nextTree.el;3236 if (next === null) {3237 // self-triggered update. In case of HOC, update parent component3238 // vnode el. HOC is indicated by parent instance's subTree pointing3239 // to child component's vnode3240 updateHOCHostEl(instance, nextTree.el);3241 }3242 // updated hook3243 if (instance.u !== null) {3244 queuePostRenderEffect(instance.u, parentSuspense);3245 }3246 {3247 popWarningContext();3248 }3249 }3250 }, createDevEffectOptions(instance) );3251 };3252 const updateComponentPreRender = (instance, nextVNode) => {3253 nextVNode.component = instance;3254 instance.vnode = nextVNode;3255 instance.next = null;3256 resolveProps(instance, nextVNode.props, nextVNode.type.props);3257 resolveSlots(instance, nextVNode.children);3258 };3259 const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized = false) => {3260 const c1 = n1 && n1.children;3261 const prevShapeFlag = n1 ? n1.shapeFlag : 0;3262 const c2 = n2.children;3263 const { patchFlag, shapeFlag } = n2;3264 if (patchFlag === -2 /* BAIL */) {3265 optimized = false;3266 }3267 // fast path3268 if (patchFlag > 0) {3269 if (patchFlag & 128 /* KEYED_FRAGMENT */) {3270 // this could be either fully-keyed or mixed (some keyed some not)3271 // presence of patchFlag means children are guaranteed to be arrays3272 patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3273 return;3274 }3275 else if (patchFlag & 256 /* UNKEYED_FRAGMENT */) {3276 // unkeyed3277 patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3278 return;3279 }3280 }3281 // children has 3 possibilities: text, array or no children.3282 if (shapeFlag & 8 /* TEXT_CHILDREN */) {3283 // text children fast path3284 if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {3285 unmountChildren(c1, parentComponent, parentSuspense);3286 }3287 if (c2 !== c1) {3288 hostSetElementText(container, c2);3289 }3290 }3291 else {3292 if (prevShapeFlag & 16 /* ARRAY_CHILDREN */) {3293 // prev children was array3294 if (shapeFlag & 16 /* ARRAY_CHILDREN */) {3295 // two arrays, cannot assume anything, do full diff3296 patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3297 }3298 else {3299 // no new children, just unmount old3300 unmountChildren(c1, parentComponent, parentSuspense, true);3301 }3302 }3303 else {3304 // prev children was text OR null3305 // new children is array OR null3306 if (prevShapeFlag & 8 /* TEXT_CHILDREN */) {3307 hostSetElementText(container, '');3308 }3309 // mount new if array3310 if (shapeFlag & 16 /* ARRAY_CHILDREN */) {3311 mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);3312 }3313 }3314 }3315 };3316 const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {3317 c1 = c1 || EMPTY_ARR;3318 c2 = c2 || EMPTY_ARR;3319 const oldLength = c1.length;3320 const newLength = c2.length;3321 const commonLength = Math.min(oldLength, newLength);3322 let i;3323 for (i = 0; i < commonLength; i++) {3324 const nextChild = (c2[i] = optimized3325 ? cloneIfMounted(c2[i])3326 : normalizeVNode(c2[i]));3327 patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, optimized);3328 }3329 if (oldLength > newLength) {3330 // remove old3331 unmountChildren(c1, parentComponent, parentSuspense, true, commonLength);3332 }3333 else {3334 // mount new3335 mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, commonLength);3336 }3337 };3338 // can be all-keyed or mixed3339 const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) => {3340 let i = 0;3341 const l2 = c2.length;3342 let e1 = c1.length - 1; // prev ending index3343 let e2 = l2 - 1; // next ending index3344 // 1. sync from start3345 // (a b) c3346 // (a b) d e3347 while (i <= e1 && i <= e2) {3348 const n1 = c1[i];3349 const n2 = (c2[i] = optimized3350 ? cloneIfMounted(c2[i])3351 : normalizeVNode(c2[i]));3352 if (isSameVNodeType(n1, n2)) {3353 patch(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized);3354 }3355 else {3356 break;3357 }3358 i++;3359 }3360 // 2. sync from end3361 // a (b c)3362 // d e (b c)3363 while (i <= e1 && i <= e2) {3364 const n1 = c1[e1];3365 const n2 = (c2[e2] = optimized3366 ? cloneIfMounted(c2[e2])3367 : normalizeVNode(c2[e2]));3368 if (isSameVNodeType(n1, n2)) {3369 patch(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized);3370 }3371 else {3372 break;3373 }3374 e1--;3375 e2--;3376 }3377 // 3. common sequence + mount3378 // (a b)3379 // (a b) c3380 // i = 2, e1 = 1, e2 = 23381 // (a b)3382 // c (a b)3383 // i = 0, e1 = -1, e2 = 03384 if (i > e1) {3385 if (i <= e2) {3386 const nextPos = e2 + 1;3387 const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;3388 while (i <= e2) {3389 patch(null, (c2[i] = optimized3390 ? cloneIfMounted(c2[i])3391 : normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG);3392 i++;3393 }3394 }3395 }3396 // 4. common sequence + unmount3397 // (a b) c3398 // (a b)3399 // i = 2, e1 = 2, e2 = 13400 // a (b c)3401 // (b c)3402 // i = 0, e1 = 0, e2 = -13403 else if (i > e2) {3404 while (i <= e1) {3405 unmount(c1[i], parentComponent, parentSuspense, true);3406 i++;3407 }3408 }3409 // 5. unknown sequence3410 // [i ... e1 + 1]: a b [c d e] f g3411 // [i ... e2 + 1]: a b [e d c h] f g3412 // i = 2, e1 = 4, e2 = 53413 else {3414 const s1 = i; // prev starting index3415 const s2 = i; // next starting index3416 // 5.1 build key:index map for newChildren3417 const keyToNewIndexMap = new Map();3418 for (i = s2; i <= e2; i++) {3419 const nextChild = (c2[i] = optimized3420 ? cloneIfMounted(c2[i])3421 : normalizeVNode(c2[i]));3422 if (nextChild.key != null) {3423 if ( keyToNewIndexMap.has(nextChild.key)) {3424 warn(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);3425 }3426 keyToNewIndexMap.set(nextChild.key, i);3427 }3428 }3429 // 5.2 loop through old children left to be patched and try to patch3430 // matching nodes & remove nodes that are no longer present3431 let j;3432 let patched = 0;3433 const toBePatched = e2 - s2 + 1;3434 let moved = false;3435 // used to track whether any node has moved3436 let maxNewIndexSoFar = 0;3437 // works as Map<newIndex, oldIndex>3438 // Note that oldIndex is offset by +13439 // and oldIndex = 0 is a special value indicating the new node has3440 // no corresponding old node.3441 // used for determining longest stable subsequence3442 const newIndexToOldIndexMap = new Array(toBePatched);3443 for (i = 0; i < toBePatched; i++)3444 newIndexToOldIndexMap[i] = 0;3445 for (i = s1; i <= e1; i++) {3446 const prevChild = c1[i];3447 if (patched >= toBePatched) {3448 // all new children have been patched so this can only be a removal3449 unmount(prevChild, parentComponent, parentSuspense, true);3450 continue;3451 }3452 let newIndex;3453 if (prevChild.key != null) {3454 newIndex = keyToNewIndexMap.get(prevChild.key);3455 }3456 else {3457 // key-less node, try to locate a key-less node of the same type3458 for (j = s2; j <= e2; j++) {3459 if (newIndexToOldIndexMap[j - s2] === 0 &&3460 isSameVNodeType(prevChild, c2[j])) {3461 newIndex = j;3462 break;3463 }3464 }3465 }3466 if (newIndex === undefined) {3467 unmount(prevChild, parentComponent, parentSuspense, true);3468 }3469 else {3470 newIndexToOldIndexMap[newIndex - s2] = i + 1;3471 if (newIndex >= maxNewIndexSoFar) {3472 maxNewIndexSoFar = newIndex;3473 }3474 else {3475 moved = true;3476 }3477 patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, optimized);3478 patched++;3479 }3480 }3481 // 5.3 move and mount3482 // generate longest stable subsequence only when nodes have moved3483 const increasingNewIndexSequence = moved3484 ? getSequence(newIndexToOldIndexMap)3485 : EMPTY_ARR;3486 j = increasingNewIndexSequence.length - 1;3487 // looping backwards so that we can use last patched node as anchor3488 for (i = toBePatched - 1; i >= 0; i--) {3489 const nextIndex = s2 + i;3490 const nextChild = c2[nextIndex];3491 const anchor = nextIndex + 1 < l23492 ? c2[nextIndex + 1].el3493 : parentAnchor;3494 if (newIndexToOldIndexMap[i] === 0) {3495 // mount new3496 patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG);3497 }3498 else if (moved) {3499 // move if:3500 // There is no stable subsequence (e.g. a reverse)3501 // OR current node is not among the stable sequence3502 if (j < 0 || i !== increasingNewIndexSequence[j]) {3503 move(nextChild, container, anchor, 2 /* REORDER */);3504 }3505 else {3506 j--;3507 }3508 }3509 }3510 }3511 };3512 const move = (vnode, container, anchor, type, parentSuspense = null) => {3513 if (vnode.shapeFlag & 6 /* COMPONENT */) {3514 move(vnode.component.subTree, container, anchor, type);3515 return;3516 }3517 if ( vnode.shapeFlag & 128 /* SUSPENSE */) {3518 vnode.suspense.move(container, anchor, type);3519 return;3520 }3521 if (vnode.type === Fragment) {3522 hostInsert(vnode.el, container, anchor);3523 const children = vnode.children;3524 for (let i = 0; i < children.length; i++) {3525 move(children[i], container, anchor, type);3526 }3527 hostInsert(vnode.anchor, container, anchor);3528 }3529 else {3530 // Plain element3531 const { el, transition, shapeFlag } = vnode;3532 const needTransition = type !== 2 /* REORDER */ &&3533 shapeFlag & 1 /* ELEMENT */ &&3534 transition != null;3535 if (needTransition) {3536 if (type === 0 /* ENTER */) {3537 transition.beforeEnter(el);3538 hostInsert(el, container, anchor);3539 queuePostRenderEffect(() => transition.enter(el), parentSuspense);3540 }3541 else {3542 const { leave, delayLeave, afterLeave } = transition;3543 const remove = () => hostInsert(el, container, anchor);3544 const performLeave = () => {3545 leave(el, () => {3546 remove();3547 afterLeave && afterLeave();3548 });3549 };3550 if (delayLeave) {3551 delayLeave(el, remove, performLeave);3552 }3553 else {3554 performLeave();3555 }3556 }3557 }3558 else {3559 hostInsert(el, container, anchor);3560 }3561 }3562 };3563 const unmount = (vnode, parentComponent, parentSuspense, doRemove = false) => {3564 const { props, ref, children, dynamicChildren, shapeFlag } = vnode;3565 // unset ref3566 if (ref !== null && parentComponent !== null) {3567 setRef(ref, null, parentComponent, null);3568 }3569 if (shapeFlag & 6 /* COMPONENT */) {3570 if (shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {3571 parentComponent.sink.deactivate(vnode);3572 }3573 else {3574 unmountComponent(vnode.component, parentSuspense, doRemove);3575 }3576 return;3577 }3578 if ( shapeFlag & 128 /* SUSPENSE */) {3579 vnode.suspense.unmount(parentSuspense, doRemove);3580 return;3581 }3582 if (props != null && props.onVnodeBeforeUnmount != null) {3583 invokeDirectiveHook(props.onVnodeBeforeUnmount, parentComponent, vnode);3584 }3585 if (dynamicChildren != null) {3586 // fast path for block nodes: only need to unmount dynamic children.3587 unmountChildren(dynamicChildren, parentComponent, parentSuspense);3588 }3589 else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {3590 unmountChildren(children, parentComponent, parentSuspense);3591 }3592 if (doRemove) {3593 remove(vnode);3594 }3595 if (props != null && props.onVnodeUnmounted != null) {3596 queuePostRenderEffect(() => {3597 invokeDirectiveHook(props.onVnodeUnmounted, parentComponent, vnode);3598 }, parentSuspense);3599 }3600 };3601 const remove = (vnode) => {3602 const { type, el, anchor, transition } = vnode;3603 if (type === Fragment) {3604 removeFragment(el, anchor);3605 return;3606 }3607 const performRemove = () => {3608 hostRemove(el);3609 if (transition != null &&3610 !transition.persisted &&3611 transition.afterLeave) {3612 transition.afterLeave();3613 }3614 };3615 if (vnode.shapeFlag & 1 /* ELEMENT */ &&3616 transition != null &&3617 !transition.persisted) {3618 const { leave, delayLeave } = transition;3619 const performLeave = () => leave(el, performRemove);3620 if (delayLeave) {3621 delayLeave(vnode.el, performRemove, performLeave);3622 }3623 else {3624 performLeave();3625 }3626 }3627 else {3628 performRemove();3629 }3630 };3631 const removeFragment = (cur, end) => {3632 // For fragments, directly remove all contained DOM nodes.3633 // (fragment child nodes cannot have transition)3634 let next;3635 while (cur !== end) {3636 next = hostNextSibling(cur);3637 hostRemove(cur);3638 cur = next;3639 }3640 hostRemove(end);3641 };3642 const unmountComponent = (instance, parentSuspense, doRemove) => {3643 if ( instance.type.__hmrId != null) {3644 unregisterHMR(instance);3645 }3646 const { bum, effects, update, subTree, um, da, isDeactivated } = instance;3647 // beforeUnmount hook3648 if (bum !== null) {3649 invokeHooks(bum);3650 }3651 if (effects !== null) {3652 for (let i = 0; i < effects.length; i++) {3653 stop(effects[i]);3654 }3655 }3656 // update may be null if a component is unmounted before its async3657 // setup has resolved.3658 if (update !== null) {...

runtime-core.cjs.js

Source:runtime-core.cjs.js

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

main.js

Source:main.js

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

size-check.global.js

Source:size-check.global.js

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

bundle.esm.js

Source:bundle.esm.js

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

runtime-core.esm-bundler.js

Source:runtime-core.esm-bundler.js

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

note.js

Source:note.js

...1369 hostRemove(end);1370 };1371 const unmountComponent = (instance, parentSuspense, doRemove) => {1372 if ( instance.type.__hmrId) {1373 unregisterHMR(instance);1374 }1375 const { bum, effects, update, subTree, um } = instance;1376 // beforeUnmount hook1377 if (bum) {1378 invokeArrayFns(bum);1379 }1380 if (effects) {1381 for (let i = 0; i < effects.length; i++) {1382 stop(effects[i]);1383 }1384 }1385 // update may be null if a component is unmounted before its async1386 // setup has resolved.1387 if (update) {...

createApp.js

Source:createApp.js

...1242 hostRemove(end);1243 };1244 const unmountComponent = (instance, parentSuspense, doRemove) => {1245 if ( instance.type.__hmrId) {1246 unregisterHMR(instance);1247 }1248 const { bum, effects, update, subTree, um } = instance;1249 // beforeUnmount hook1250 if (bum) {1251 invokeArrayFns(bum);1252 }1253 if (effects) {1254 for (let i = 0; i < effects.length; i++) {1255 stop(effects[i]);1256 }1257 }1258 // update may be null if a component is unmounted before its async1259 // setup has resolved.1260 if (update) {...

Using AI Code Generation

1import { unregisterHMR } from '@playwright/test';2unregisterHMR();3import { registerHMR } from '@playwright/test';4registerHMR();5import { registerHMR } from '@playwright/test';6registerHMR();7import { registerHMR } from '@playwright/test';8registerHMR();

Using AI Code Generation

1const { unregisterHMR } = require('@playwright/test/lib/utils/hmrServer');2unregisterHMR();3const { registerHMR } = require('@playwright/test/lib/utils/hmrServer');4registerHMR();5I was able to import the method from the internal API and use it in my test file. The only problem is that I have to use the full path to the file. Is there a way to import the method using the following syntax?6const { unregisterHMR } = require('@playwright/test/utils/hmrServer');7const { unregisterHMR } = require('@playwright/test/lib/utils/hmrServer');8const { unregisterHMR } = require('@playwright/test');

Using AI Code Generation

1const { unregisterHMR } = require('playwright/lib/server/hmr/hmrServer');2unregisterHMR();3const { registerHMR } = require('playwright/lib/server/hmr/hmrServer');4registerHMR();5const { registerHMR } = require('playwright/lib/server/hmr/hmrServer');6registerHMR();7const { registerHMR } = require('playwright/lib/server/hmr/hmrServer');8registerHMR();9const { registerHMR } = require('playwright/lib/server/hmr/hmrServer');10registerHMR();11const { registerHMR } = require('playwright/lib/server/hmr/hmrServer');12registerHMR();13const { registerHMR } = require('playwright/lib/server/hmr/hmrServer');14registerHMR();15const { registerHMR } = require('playwright/lib/server/hmr/hmrServer');16registerHMR();17const { registerHMR } = require('playwright/lib/server/hmr/hmrServer');18registerHMR();19const { registerHMR } = require('playwright/lib/server/hmr/hmrServer');20registerHMR();21const { registerHMR } = require('playwright/lib/server/hmr/hmrServer');22registerHMR();23const { registerHMR } = require('playwright/lib/server/hmr/hmrServer');24registerHMR();25const { registerHMR } = require('playwright/lib/server/hmr/hmrServer');26registerHMR();27const { registerHMR } = require('playwright/lib/server/hmr

Using AI Code Generation

1const { registerHMR } = require('playwright/lib/hmr.js');2const { unregisterHMR } = require('playwright/lib/hmr.js');3registerHMR('/path/to/testFile.js');4unregisterHMR('/path/to/testFile.js');5registerHMR('/path/to/testFile.js');6unregisterHMR('/path/to/testFile.js');

Using AI Code Generation

1const { unregisterHMR } = require("@playwright/test/lib/utils/hmrServer");2unregisterHMR();3const { registerHMR } = require("@playwright/test/lib/utils/hmrServer");4registerHMR();5const { test } = require("@playwright/test");6test("hmr test", async ({ page }) => {7 await page.waitForSelector("#hmr");8 const text = await page.textContent("#hmr");9 expect(text).toBe("HMR test");10});11test("hmr test 2", async ({ page }) => {12 await page.waitForSelector("#hmr");13 const text = await page.textContent("#hmr");14 expect(text).toBe("HMR test");15});16test("hmr test 3", async ({ page }) => {17 await page.waitForSelector("#hmr");18 const text = await page.textContent("#hmr");19 expect(text).toBe("HMR test");20});21test("hmr test 4", async ({ page }) => {22 await page.waitForSelector("#hmr");23 const text = await page.textContent("#hmr");24 expect(text).toBe("HMR test");25});26test("hmr test 5", async ({ page }) => {27 await page.waitForSelector("#hmr");28 const text = await page.textContent("#hmr");29 expect(text).toBe("HMR test");30});31test("hmr test 6", async ({ page }) => {32 await page.waitForSelector("#hmr");33 const text = await page.textContent("#hmr");34 expect(text).toBe("HMR test");35});36test("hmr test 7", async ({ page }) => {37 await page.waitForSelector("#hmr");38 const text = await page.textContent("#hmr");39 expect(text).toBe("HMR test");40});41test("hmr test 8", async ({ page }) => {

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

›

_